[FIX] web_editor: various shape fixes (hide on mobile, bad joint, ...)

This commit fixes various things with the shapes: shapes are now hidden
on mobile by default, the shapes "blobs 02" and "blobs 03" now connect
properly, and the shape pager now shows the name of the current page.
Airy shapes now have embedded media-queries so that they're more visible
in the shape selector. The order of the pages in the shape selector has
been adapted so that shapes that are easier to use are on the first few
pages. A number of shapes have been "cut" differently to leave more
space for content, and some shapes have had their top/bottom anchoring
swapped.

task-2319484

closes odoo/odoo#56567

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

3 files changed, 17 insertions, 4 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index 37ce7b974eb..39c96304361 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -60,6 +60,11 @@
         }
     }
 }
+@include media-breakpoint-down(sm) {
+    .o_we_shape {
+        display: none;
+    }
+}
 .o_we_flip_x {
     transform: scaleX(-1);
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index d777752fe06..321adeb7024 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -608,7 +608,7 @@ $o-bg-shapes: ('web_editor': (
     'Airy/13': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
     'Airy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
     'Blobs/01': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
-    'Blobs/02': ('position': center, 'size': 100% 100%, 'colors': (1, 2), 'repeat-y': false),
+    'Blobs/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
     'Blobs/03': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
     'Blobs/04': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
     'Blobs/05': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
@@ -645,7 +645,7 @@ $o-bg-shapes: ('web_editor': (
     'Origins/08': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
     'Origins/09': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
     'Origins/10': ('position': bottom, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': false),
-    'Origins/11': ('position': bottom, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/11': ('position': top, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
     'Origins/12': ('position': top, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
     'Origins/13': ('position': center, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
     'Origins/14': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e50a728c93b..404646b0584 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -682,10 +682,18 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
             }
+            .o_we_pager_header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                & > b {
+                    padding: $o-we-sidebar-content-field-label-spacing;
+                }
+            }
             .o_we_pager_controls {
                 display: flex;
                 align-items: center;
-                padding: $o-we-sidebar-content-field-label-spacing;
             }
             .o_we_pager_next, .o_we_pager_prev {
                 padding: $o-we-sidebar-content-field-label-spacing;
@@ -1717,9 +1725,9 @@ we-select.o_we_shape_menu {
             width: 100%;
         }
         .o_we_shape_btn_content {
+            @extend %o-preview-alpha-background;
             width: 100%;
             height: 75px;
-            background-color: lightgray; // Must be a color which can make all shapes appear
         }
     }
 }