From b7b05a2d1c1d54380364e7a7d10a7e6a69bce27e Mon Sep 17 00:00:00 2001
From: "Mathieu (mano)" <mano@odoo.com>
Date: Thu, 4 May 2023 10:56:38 +0000
Subject: [PATCH] [IMP] web_editor: new shapes full height menu

This commit replaces the `we-select-pager` for a full-height version
allowing better sorting and visibility of the shapes and background
shapes.

The new UI now has a navbar inside the pager which allows to scroll to
anchors inside the menu. To do so a new attribute `data-scroll-to` is
added on the button element allowing to scroll to the class contained
in the attribute with the new function `_onClickScrollPage`. Thanks to
ard the Selection widget now activates the corresponding menu section
of the new pager whenever the data-scroll matches a section that has
passed the middle of the container.

The menu being full width, the angle with the class `.o_pager_nav_angle`
triggers the `_onClickCloseMenu` to close the menu.

To avoid duplication, the label for the devices now uses the same Js
logic as the Animated label for the shapes. This frees the :before and
:after which allows to use the alpha-background extended class on the
we-button for both types of shapes. The devices label information now
shows an aspect ratio rather than full dimensions.

For the new pager to appear full-height and the content being scrollable
inside the proper section of the menu, two new containers are added
one for the pager's navigation (`o_pager_nav`) and one for the shapes
pages (`o_pager_container`). This allows to have the parent div in fixed
positioning and keeping a scrollable section on the `o_pager_container`
under its inner navigation.

The previous shapes are back to their original ratio of 800x600
since switching them in square makes them less recognizable.

Finally, in the `we-toggler` when no elements are selected or when it is
empty, we now display `None` instead of `/`.

task-3266751

closes odoo/odoo#118253

Related: odoo/design-themes#653
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../composition/composition_line_1.svg        |   2 +-
 .../composition/composition_line_2.svg        |   2 +-
 .../composition/composition_line_3.svg        |   2 +-
 .../composition/composition_mixed_1.svg       |   2 +-
 .../composition/composition_mixed_2.svg       |   2 +-
 .../composition/composition_organic_line.svg  |   2 +-
 .../composition/composition_oval_line.svg     |   2 +-
 .../composition/composition_planet_1.svg      |   2 +-
 .../composition/composition_planet_2.svg      |   2 +-
 .../composition/composition_square_1.svg      |   2 +-
 .../composition/composition_square_2.svg      |   2 +-
 .../composition/composition_square_3.svg      |   2 +-
 .../composition/composition_square_4.svg      |   2 +-
 .../composition/composition_square_line.svg   |   2 +-
 .../composition/composition_triangle_line.svg |   2 +-
 .../image_shapes/geometric/geo_square_1.svg   |   2 +-
 .../image_shapes/geometric/geo_square_2.svg   |   2 +-
 .../image_shapes/geometric/geo_square_3.svg   |   2 +-
 .../image_shapes/geometric/geo_square_4.svg   |   2 +-
 .../image_shapes/geometric/geo_square_5.svg   |   2 +-
 .../image_shapes/geometric/geo_square_6.svg   |   2 +-
 .../geometric_round/geo_round_blob_hard.svg   |   2 +-
 .../geometric_round/geo_round_blob_medium.svg |   2 +-
 .../geometric_round/geo_round_blob_soft.svg   |   2 +-
 .../geometric_round/geo_round_square_1.svg    |   2 +-
 .../geometric_round/geo_round_square_2.svg    |   2 +-
 .../image_shapes/pattern/pattern_circuit.svg  |   2 +-
 .../pattern/pattern_labyrinth.svg             |   2 +-
 .../pattern/pattern_line_star.svg             |   2 +-
 .../image_shapes/pattern/pattern_line_sun.svg |   2 +-
 .../pattern/pattern_organic_caps.svg          |   2 +-
 .../pattern/pattern_organic_cross.svg         |   2 +-
 .../pattern/pattern_organic_dot.svg           |   2 +-
 .../pattern/pattern_oval_zebra.svg            |   2 +-
 .../image_shapes/pattern/pattern_point.svg    |   2 +-
 .../image_shapes/pattern/pattern_wave_1.svg   |   2 +-
 .../image_shapes/pattern/pattern_wave_2.svg   |   2 +-
 .../image_shapes/pattern/pattern_wave_3.svg   |   2 +-
 .../image_shapes/pattern/pattern_wave_4.svg   |   2 +-
 .../image_shapes/solid/solid_blob_1.svg       |   2 +-
 .../image_shapes/solid/solid_blob_2.svg       |   2 +-
 .../image_shapes/solid/solid_blob_3.svg       |   2 +-
 .../image_shapes/solid/solid_blob_4.svg       |   2 +-
 .../image_shapes/solid/solid_blob_5.svg       |   2 +-
 .../solid/solid_blob_shadow_1.svg             |   2 +-
 .../solid/solid_blob_shadow_2.svg             |   2 +-
 .../image_shapes/solid/solid_square_1.svg     |   2 +-
 .../image_shapes/solid/solid_square_2.svg     |   2 +-
 .../image_shapes/solid/solid_square_3.svg     |   2 +-
 .../image_shapes/special/special_filter.svg   |   2 +-
 .../image_shapes/special/special_flag.svg     |   2 +-
 .../image_shapes/special/special_layered.svg  |   2 +-
 .../image_shapes/special/special_organic.svg  |   2 +-
 .../image_shapes/special/special_rain.svg     |   2 +-
 .../image_shapes/special/special_snow.svg     |   2 +-
 .../image_shapes/special/special_speed.svg    |   2 +-
 .../static/src/js/editor/snippets.options.js  | 134 ++--
 .../static/src/scss/web_editor.variables.scss |   1 +
 .../static/src/scss/wysiwyg_snippets.scss     | 229 +++---
 addons/web_editor/views/snippets.xml          | 675 ++++++++++--------
 60 files changed, 600 insertions(+), 551 deletions(-)

diff --git a/addons/web_editor/static/image_shapes/composition/composition_line_1.svg b/addons/web_editor/static/image_shapes/composition/composition_line_1.svg
index c98a19dc48f..80f30dfeb77 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_line_1.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_line_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_line_2.svg b/addons/web_editor/static/image_shapes/composition/composition_line_2.svg
index 8a45067131e..96354a04bb6 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_line_2.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_line_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_line_3.svg b/addons/web_editor/static/image_shapes/composition/composition_line_3.svg
index 8db96bf0f07..51eedb256b9 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_line_3.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_line_3.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
       <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
           <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_mixed_1.svg b/addons/web_editor/static/image_shapes/composition/composition_mixed_1.svg
index 3219c4e51c1..7556a4fb3ec 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_mixed_1.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_mixed_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
   <style>
     @keyframes rotate {
       from {transform: rotate(45deg) scale(.7);}
diff --git a/addons/web_editor/static/image_shapes/composition/composition_mixed_2.svg b/addons/web_editor/static/image_shapes/composition/composition_mixed_2.svg
index eebf929fa35..f0cc8cdff93 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_mixed_2.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_mixed_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
   <style>
     @keyframes rotate {
       from {transform: rotate(0deg);}
diff --git a/addons/web_editor/static/image_shapes/composition/composition_organic_line.svg b/addons/web_editor/static/image_shapes/composition/composition_organic_line.svg
index 8a43bb5f478..25e1115da4e 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_organic_line.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_organic_line.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
       <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_oval_line.svg b/addons/web_editor/static/image_shapes/composition/composition_oval_line.svg
index 769065bd5aa..c96baf591a4 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_oval_line.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_oval_line.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
       <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_planet_1.svg b/addons/web_editor/static/image_shapes/composition/composition_planet_1.svg
index 3d9b35f22cb..ab8eae8a9ec 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_planet_1.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_planet_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_planet_2.svg b/addons/web_editor/static/image_shapes/composition/composition_planet_2.svg
index 889953d0498..afd938782d1 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_planet_2.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_planet_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
   <style>
     @keyframes scale_1 {
       0%, 100% {transform: scale(1);}
diff --git a/addons/web_editor/static/image_shapes/composition/composition_square_1.svg b/addons/web_editor/static/image_shapes/composition/composition_square_1.svg
index 7764c1f48b3..105162da79f 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_square_1.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_square_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_square_2.svg b/addons/web_editor/static/image_shapes/composition/composition_square_2.svg
index 0c8f4abbf91..aa679f2067b 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_square_2.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_square_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_square_3.svg b/addons/web_editor/static/image_shapes/composition/composition_square_3.svg
index 0328fe8303b..358c75ab672 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_square_3.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_square_3.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
   <style>
     @keyframes rotate {
       from {transform: rotate(0deg);}
diff --git a/addons/web_editor/static/image_shapes/composition/composition_square_4.svg b/addons/web_editor/static/image_shapes/composition/composition_square_4.svg
index c7dfe6a2e84..2a5758f9ead 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_square_4.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_square_4.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_square_line.svg b/addons/web_editor/static/image_shapes/composition/composition_square_line.svg
index 5aaf33f049d..b27aeda7560 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_square_line.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_square_line.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/composition/composition_triangle_line.svg b/addons/web_editor/static/image_shapes/composition/composition_triangle_line.svg
index 0193be5acdc..e0c5283475d 100644
--- a/addons/web_editor/static/image_shapes/composition/composition_triangle_line.svg
+++ b/addons/web_editor/static/image_shapes/composition/composition_triangle_line.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <style>
         @keyframes rotate {
             0%, 100% {transform: rotate(45deg) scale(.8);}
diff --git a/addons/web_editor/static/image_shapes/geometric/geo_square_1.svg b/addons/web_editor/static/image_shapes/geometric/geo_square_1.svg
index d9b843dcff7..ccfe8948892 100644
--- a/addons/web_editor/static/image_shapes/geometric/geo_square_1.svg
+++ b/addons/web_editor/static/image_shapes/geometric/geo_square_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric/geo_square_2.svg b/addons/web_editor/static/image_shapes/geometric/geo_square_2.svg
index 03ac9fdbc49..bb3265a7ba0 100644
--- a/addons/web_editor/static/image_shapes/geometric/geo_square_2.svg
+++ b/addons/web_editor/static/image_shapes/geometric/geo_square_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric/geo_square_3.svg b/addons/web_editor/static/image_shapes/geometric/geo_square_3.svg
index 34f2097286b..3c5d1d75f9c 100644
--- a/addons/web_editor/static/image_shapes/geometric/geo_square_3.svg
+++ b/addons/web_editor/static/image_shapes/geometric/geo_square_3.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric/geo_square_4.svg b/addons/web_editor/static/image_shapes/geometric/geo_square_4.svg
index d3570754711..17c876308eb 100644
--- a/addons/web_editor/static/image_shapes/geometric/geo_square_4.svg
+++ b/addons/web_editor/static/image_shapes/geometric/geo_square_4.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric/geo_square_5.svg b/addons/web_editor/static/image_shapes/geometric/geo_square_5.svg
index 56f06d3b4cd..9d7337e416c 100644
--- a/addons/web_editor/static/image_shapes/geometric/geo_square_5.svg
+++ b/addons/web_editor/static/image_shapes/geometric/geo_square_5.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric/geo_square_6.svg b/addons/web_editor/static/image_shapes/geometric/geo_square_6.svg
index b087c656468..1629f7447b8 100644
--- a/addons/web_editor/static/image_shapes/geometric/geo_square_6.svg
+++ b/addons/web_editor/static/image_shapes/geometric/geo_square_6.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_hard.svg b/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_hard.svg
index d50270524d1..c39ed0765c4 100644
--- a/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_hard.svg
+++ b/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_hard.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_medium.svg b/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_medium.svg
index 8ccdafca7c7..472c2d2a45f 100644
--- a/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_medium.svg
+++ b/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_medium.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_soft.svg b/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_soft.svg
index cb21787a394..2d6e77b4492 100644
--- a/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_soft.svg
+++ b/addons/web_editor/static/image_shapes/geometric_round/geo_round_blob_soft.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_1.svg b/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_1.svg
index 8d403d49feb..15b178df8c0 100644
--- a/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_1.svg
+++ b/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_2.svg b/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_2.svg
index ca478edd576..6b38d2daed3 100644
--- a/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_2.svg
+++ b/addons/web_editor/static/image_shapes/geometric_round/geo_round_square_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_circuit.svg b/addons/web_editor/static/image_shapes/pattern/pattern_circuit.svg
index 4055114ac79..6d496261e44 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_circuit.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_circuit.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_labyrinth.svg b/addons/web_editor/static/image_shapes/pattern/pattern_labyrinth.svg
index 552b69cddb7..8c4b18f1012 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_labyrinth.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_labyrinth.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600">
     <defs>
         <pattern id="pattern" width="1634.68" height="1461.26" patternUnits="userSpaceOnUse" viewBox="0 0 1634.68 1461.26" patternTransform="scale(0.05)">
             <rect width="1634.68" height="1461.26" fill="#FFFFFF"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_line_star.svg b/addons/web_editor/static/image_shapes/pattern/pattern_line_star.svg
index 6da52735a92..601779591d6 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_line_star.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_line_star.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <style>
         @keyframes rotate {
             from {transform: rotate(0deg);}
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_line_sun.svg b/addons/web_editor/static/image_shapes/pattern/pattern_line_sun.svg
index 1e0a0ec9329..fbe18764a85 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_line_sun.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_line_sun.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600">
     <style>
         @keyframes rotate {
             from {transform: rotate(0deg);}
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_organic_caps.svg b/addons/web_editor/static/image_shapes/pattern/pattern_organic_caps.svg
index 7f58e60f1d9..9bba1304091 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_organic_caps.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_organic_caps.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <pattern id="Capsules_2" data-name="Capsules 2" width="57.6" stroke="#3AADAA" height="57.6"
       patternTransform="translate(-59.36 422.92) scale(1.09 1.17)" patternUnits="userSpaceOnUse"
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_organic_cross.svg b/addons/web_editor/static/image_shapes/pattern/pattern_organic_cross.svg
index 08ccae653d8..34c84c42cc7 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_organic_cross.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_organic_cross.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <pattern id="Crosses_5" data-name="Crosses 5" stroke="#7C6576" width="57.6" height="57.6"
       patternTransform="translate(0 691.2)" patternUnits="userSpaceOnUse" viewBox="0 0 57.6 57.6">
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_organic_dot.svg b/addons/web_editor/static/image_shapes/pattern/pattern_organic_dot.svg
index 173b6d69971..b47013db8d7 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_organic_dot.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_organic_dot.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
       <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
         <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_oval_zebra.svg b/addons/web_editor/static/image_shapes/pattern/pattern_oval_zebra.svg
index 1812155e112..bbd572b6076 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_oval_zebra.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_oval_zebra.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <pattern id="_10_lpi_80_2" data-name="10 lpi 80% 2" width="72" height="72" stroke="#3AADAA"
       patternTransform="translate(0 432)" patternUnits="userSpaceOnUse" viewBox="0 0 72 72">
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_point.svg b/addons/web_editor/static/image_shapes/pattern/pattern_point.svg
index 8df314ad8df..8d2fe37444a 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_point.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_point.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <pattern id="pattern" width="4" height="4" viewBox="0 -4 4 4" patternUnits="userSpaceOnUse">
             <circle cx="1" cy="-1" r="0.5" fill="#3AADAA"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_wave_1.svg b/addons/web_editor/static/image_shapes/pattern/pattern_wave_1.svg
index a778e7e3b4f..babae1e93b3 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_wave_1.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_wave_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <pattern id="pattern" width="6.24" height="6.24" viewBox="0 0 6.24 6.24" patternUnits="userSpaceOnUse">
             <rect width="100%" height="100%" fill="#3AADAA"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_wave_2.svg b/addons/web_editor/static/image_shapes/pattern/pattern_wave_2.svg
index 7100dcdf66d..2c1b6c5ca73 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_wave_2.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_wave_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <pattern id="pattern" width="250" height="30" patternUnits="userSpaceOnUse" patternTransform="rotate(41) scale(0.3)">
             <rect fill="#FFFFFF" width="250" height="30"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_wave_3.svg b/addons/web_editor/static/image_shapes/pattern/pattern_wave_3.svg
index ca53d9caf90..c4752773973 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_wave_3.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_wave_3.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/pattern/pattern_wave_4.svg b/addons/web_editor/static/image_shapes/pattern/pattern_wave_4.svg
index a5315a55466..a5fca9f1b8a 100644
--- a/addons/web_editor/static/image_shapes/pattern/pattern_wave_4.svg
+++ b/addons/web_editor/static/image_shapes/pattern/pattern_wave_4.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_1.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_1.svg
index 655a1a01798..170d6dc4240 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_1.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_2.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_2.svg
index 11e7d47ca08..dc5fd1008d0 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_2.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
       <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_3.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_3.svg
index d13adc91cf3..c6bc3eec0cb 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_3.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_3.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_4.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_4.svg
index f53201de4a2..6bdbacb5ce2 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_4.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_4.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
   <defs>
     <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
       <use xlink:href="#filterPath" fill="none"></use>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_5.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_5.svg
index d2308b117c4..c7b3fb9717a 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_5.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_5.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_1.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_1.svg
index 1aff2a60d3c..162c24d0c78 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_1.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_2.svg b/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_2.svg
index 72fd1748275..7bcd52ced84 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_2.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_blob_shadow_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_square_1.svg b/addons/web_editor/static/image_shapes/solid/solid_square_1.svg
index 8f65c2cd045..2caa6b3a00b 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_square_1.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_square_1.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
   <defs>
       <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
           <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_square_2.svg b/addons/web_editor/static/image_shapes/solid/solid_square_2.svg
index 0ea646571d7..70f560fcc9f 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_square_2.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_square_2.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/solid/solid_square_3.svg b/addons/web_editor/static/image_shapes/solid/solid_square_3.svg
index 7fcf7b6b042..56830ce3eec 100644
--- a/addons/web_editor/static/image_shapes/solid/solid_square_3.svg
+++ b/addons/web_editor/static/image_shapes/solid/solid_square_3.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_filter.svg b/addons/web_editor/static/image_shapes/special/special_filter.svg
index 3d68e9c9e58..cc2a278e624 100644
--- a/addons/web_editor/static/image_shapes/special/special_filter.svg
+++ b/addons/web_editor/static/image_shapes/special/special_filter.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_flag.svg b/addons/web_editor/static/image_shapes/special/special_flag.svg
index a92174276f3..a68177553ad 100644
--- a/addons/web_editor/static/image_shapes/special/special_flag.svg
+++ b/addons/web_editor/static/image_shapes/special/special_flag.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_layered.svg b/addons/web_editor/static/image_shapes/special/special_layered.svg
index 91e59ba35c3..2321c7319b8 100644
--- a/addons/web_editor/static/image_shapes/special/special_layered.svg
+++ b/addons/web_editor/static/image_shapes/special/special_layered.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_organic.svg b/addons/web_editor/static/image_shapes/special/special_organic.svg
index 43950f3d943..d75bfbca0fc 100644
--- a/addons/web_editor/static/image_shapes/special/special_organic.svg
+++ b/addons/web_editor/static/image_shapes/special/special_organic.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_rain.svg b/addons/web_editor/static/image_shapes/special/special_rain.svg
index e75ece9ea00..69037ebdb9b 100644
--- a/addons/web_editor/static/image_shapes/special/special_rain.svg
+++ b/addons/web_editor/static/image_shapes/special/special_rain.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_snow.svg b/addons/web_editor/static/image_shapes/special/special_snow.svg
index 0b477dd27a7..f492449992b 100644
--- a/addons/web_editor/static/image_shapes/special/special_snow.svg
+++ b/addons/web_editor/static/image_shapes/special/special_snow.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <defs>
         <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
             <use xlink:href="#filterPath" fill="none"/>
diff --git a/addons/web_editor/static/image_shapes/special/special_speed.svg b/addons/web_editor/static/image_shapes/special/special_speed.svg
index fb6c22a385a..f7ca285903d 100644
--- a/addons/web_editor/static/image_shapes/special/special_speed.svg
+++ b/addons/web_editor/static/image_shapes/special/special_speed.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
     <style type="text/css">
         @keyframes ld-speed-dash {
             0% { transform: translate(0,0); }
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 60d89f17618..938cb3c84be 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -8,6 +8,7 @@ import Dialog from "web.Dialog";
 import {scrollTo} from "web.dom";
 import rpc from "web.rpc";
 import time from "web.time";
+import { throttleForAnimation, debounce } from "@web/core/utils/timing";
 import utils from "web.utils";
 import Widget from "web.Widget";
 import { ColorPaletteWidget } from "web_editor.ColorPalette";
@@ -34,10 +35,10 @@ import {
 import * as OdooEditorLib from "@web_editor/js/editor/odoo-editor/src/OdooEditor";
 import {SIZES, MEDIAS_BREAKPOINTS} from "@web/core/ui/ui_service";
 import { sprintf } from "@web/core/utils/strings";
-import { debounce } from "@web/core/utils/timing";
 
 var qweb = core.qweb;
 var _t = core._t;
+const _lt = core._lt;
 const preserveCursor = OdooEditorLib.preserveCursor;
 const descendants = OdooEditorLib.descendants;
 
@@ -948,6 +949,7 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
     events: {
         'click': '_onClick',
     },
+    PLACEHOLDER_TEXT: _lt("None"),
 
     /**
      * @override
@@ -959,7 +961,10 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
             this.containerEl.insertBefore(this.options.valueEl, this.menuEl);
         }
 
+        this.menuEl.dataset.placeholderText = this.PLACEHOLDER_TEXT;
+
         this.menuTogglerEl = document.createElement('we-toggler');
+        this.menuTogglerEl.dataset.placeholderText = this.PLACEHOLDER_TEXT;
         this.iconEl = this.imgEl || null;
         const icon = this.el.dataset.icon;
         if (icon) {
@@ -1036,7 +1041,7 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
                 }
             }
         } else {
-            textContent = "/";
+            textContent = this.PLACEHOLDER_TEXT;
         }
 
         this.menuTogglerEl.textContent = textContent;
@@ -2447,42 +2452,28 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
 const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
     className: (SelectUserValueWidget.prototype.className || '') + ' o_we_select_pager',
     events: Object.assign({}, SelectUserValueWidget.prototype.events, {
-        'click .o_we_pager_next, .o_we_pager_prev': '_onPageChange',
+        'click .o_pager_nav_btn': '_onClickScrollPage',
+        'click .o_pager_nav_angle': '_onClickCloseMenu',
     }),
-
     /**
      * @override
      */
     async start() {
         const _super = this._super.bind(this);
-        this.pages = this.options.childNodes.filter(node => node.matches && node.matches('we-select-page'));
-        this.numPages = this.pages.length;
-
-        const prev = document.createElement('i');
-        prev.classList.add('o_we_pager_prev', 'fa', 'fa-chevron-left');
-
-        this.pageNum = document.createElement('span');
-        this.currentPage = 0;
-
-        const next = document.createElement('i');
-        next.classList.add('o_we_pager_next', 'fa', 'fa-chevron-right');
-
-        const pagerControls = document.createElement('div');
-        pagerControls.classList.add('o_we_pager_controls');
-        pagerControls.appendChild(prev);
-        pagerControls.appendChild(this.pageNum);
-        pagerControls.appendChild(next);
-
-        this.pageName = document.createElement('b');
-        const pagerHeader = document.createElement('div');
-        pagerHeader.classList.add('o_we_pager_header');
-        pagerHeader.appendChild(this.pageName);
-        pagerHeader.appendChild(pagerControls);
 
         await _super(...arguments);
-        this.menuEl.classList.add('o_we_has_pager');
-        $(this.menuEl).prepend(pagerHeader);
-        this._updatePage();
+        this.menuEl.classList.add('o_we_has_pager', 'position-fixed', 'top-0', 'end-0', 'z-index-1', 'rounded-0');
+        this.menuTogglerEl.classList.add('o_we_toggler_pager');
+
+        this.__onScroll = throttleForAnimation(this._onScroll.bind(this));
+        this.el.querySelector('.o_pager_container').addEventListener('scroll', this.__onScroll);
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        this.el.querySelector('.o_pager_container').removeEventListener('scroll', this.__onScroll);
     },
 
     //--------------------------------------------------------------------------
@@ -2493,18 +2484,7 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
      * @override
      */
     _shouldIgnoreClick(ev) {
-        return !!ev.target.closest('.o_we_pager_header') || this._super(...arguments);
-    },
-    /**
-     * Updates the pager's page number display.
-     *
-     * @private
-     */
-    _updatePage() {
-        this.pages.forEach((page, i) => page.classList.toggle('active', i === this.currentPage));
-        this.pageNum.textContent = `${this.currentPage + 1}/${this.numPages}`;
-        const activePage = this.pages.find((page, i) => i === this.currentPage);
-        this.pageName.textContent = activePage.getAttribute('string');
+        return !!ev.target.closest('.o_pager_nav') || this._super(...arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -2512,31 +2492,44 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Goes to the previous/next page with wrap-around.
+     * Scrolls to the requested section.
      *
      * @private
      */
-    _onPageChange(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const delta = ev.target.matches('.o_we_pager_next') ? 1 : -1;
-        this.currentPage = (this.currentPage + this.numPages + delta) % this.numPages;
-        this._updatePage();
+    _onClickScrollPage(ev) {
+        const navButtonEl = ev.currentTarget;
+        const attribute = navButtonEl.dataset.scrollTo;
+        const destinationOffset = this.menuEl.querySelector('.' + attribute).offsetTop;
+
+        const pagerContainerEl = this.menuEl.querySelector('.o_pager_container');
+        const pagerNavEl = this.menuEl.querySelector('.o_pager_nav');
+        pagerContainerEl.scrollTop = destinationOffset - pagerNavEl.offsetHeight;
     },
     /**
-     * @override
+     * @private
      */
-    _onClick(ev) {
-        const activeButton = this._getActiveSubWidget();
-        if (activeButton) {
-            const currentPage = this.pages.indexOf(activeButton.el.closest('we-select-page'));
-            if (currentPage !== -1) {
-                this.currentPage = currentPage;
-                this._updatePage();
-            }
-        }
-        return this._super(...arguments);
+    _onClickCloseMenu(ev) {
+        this.close();
     },
+    /**
+     * @private
+     */
+    _onScroll(ev) {
+        const pagerContainerEl = ev.currentTarget;
+        const pagerContainerHeight = pagerContainerEl.getBoundingClientRect().height;
+        // The threshold for when a menu element is defined as 'active' is half
+        // of the container's height. This has a drawback as if a section
+        // is too small it might never get `active` if it's the last section.
+        const threshold = pagerContainerEl.scrollTop + (pagerContainerHeight / 2);
+        const anchorElements = this.menuEl.querySelectorAll('[data-scroll-to]');
+        for (const anchorEl of anchorElements) {
+            const destination = anchorEl.getAttribute('data-scroll-to');
+            const sectionEl = this.menuEl.querySelector(`.${destination}`);
+            const nextSectionEl = sectionEl.nextElementSibling;
+            anchorEl.classList.toggle('active', sectionEl.offsetTop < threshold &&
+            (!nextSectionEl || nextSectionEl.offsetTop > threshold));
+        }
+    }
 });
 
 const m2oRpcCache = {};
@@ -5917,15 +5910,24 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
 
 /**
  * @param {Element} containerEl
+ * @param {boolean} labelIsDimension - Optional display imgsize attribute instead of animated
  * @returns {Element}
  */
-const _addAnimatedShapeLabel = function addAnimatedShapeLabel(containerEl) {
+const _addAnimatedShapeLabel = function addAnimatedShapeLabel(containerEl, labelIsDimension = false) {
     const labelEl = document.createElement('span');
     labelEl.classList.add('o_we_shape_animated_label');
-    const labelStr = _t("Animated");
-    labelEl.textContent = labelStr[0];
+    let labelStr = _t("Animated");
     const spanEl = document.createElement('span');
-    spanEl.textContent = labelStr.substr(1);
+    if (labelIsDimension) {
+        const dimensionIcon = document.createElement('i');
+        labelStr = containerEl.dataset.imgSize;
+        dimensionIcon.classList.add('fa', 'fa-expand');
+        labelEl.append(dimensionIcon);
+        spanEl.textContent = labelStr;
+    } else {
+        labelEl.textContent = labelStr[0];
+        spanEl.textContent = labelStr.substr(1);
+    }
     labelEl.appendChild(spanEl);
     containerEl.classList.add('position-relative');
     containerEl.appendChild(labelEl);
@@ -6340,6 +6342,8 @@ registry.ImageTools = ImageHandlerOption.extend({
 
             if (btn.dataset.animated) {
                 _addAnimatedShapeLabel(btn);
+            } else if (btn.dataset.imgSize) {
+                _addAnimatedShapeLabel(btn, true);
             }
         });
     },
@@ -7208,7 +7212,7 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
      * @param {String} shapeId identifier of the shape
      */
     _getShapeDefaultColors(shapeId) {
-        const $shapeContainer = this.$el.find(".o_we_shape_menu we-button[data-shape='" + shapeId + "'] div.o_we_shape");
+        const $shapeContainer = this.$el.find(".o_we_bg_shape_menu we-button[data-shape='" + shapeId + "'] div.o_we_shape");
         const shapeContainer = $shapeContainer[0];
         const shapeSrc = shapeContainer && getBgImageURL(shapeContainer);
         const url = new URL(shapeSrc, window.location.origin);
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 ad835195356..05144ff68b7 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -117,6 +117,7 @@ $o-we-sidebar-width: 288px !default; // This includes $o-we-sidebar-border-width
 $o-we-sidebar-top-height: 46px !default;
 
 $o-we-sidebar-tabs-size-ratio: 1 !default;
+$o-we-sidebar-tabs-height: 3rem;
 $o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
 $o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
 $o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 57ed46d4f5e..ed6fc37b2db 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -273,9 +273,11 @@
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
+        align-items: end;
         background-color: $o-we-sidebar-tabs-bg;
         box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
         color: $o-we-sidebar-tabs-color;
+        height: $o-we-sidebar-tabs-height;
 
         > button {
             @extend %we-generic-tab-button;
@@ -697,6 +699,11 @@
 
         we-toggler {
             @include we-icon-button('\f0d7');
+
+            &.o_we_toggler_pager {
+                @include we-icon-button('\f105');
+            }
+
             text-align: left;
 
             > img, > svg {
@@ -704,7 +711,7 @@
             }
 
             + * {
-                display: none !important;
+                display: none;
                 border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color;
                 border-radius: $o-we-item-border-radius;
                 background-color: $o-we-sidebar-content-field-dropdown-bg;
@@ -713,7 +720,12 @@
             &.active {
                 @include we-icon-button('\f0d8');
                 + * {
-                    display: block !important;
+                    display: block;
+                }
+
+                + .o_we_has_pager {
+                    display: flex;
+                    flex-direction: column;
                 }
             }
         }
@@ -945,7 +957,7 @@
             &:not(.o_we_icon_select) we-toggler {
                 @include large-component();
             }
-            &.o_we_widget_opened .o_we_dropdown_caret {
+            &:not(.o_we_select_pager).o_we_widget_opened .o_we_dropdown_caret {
                 position: relative;
                 display: block;
                 align-self: flex-end;
@@ -967,24 +979,67 @@
                     border-right-width: ($o-we-item-spacing - 1px);
                 }
             }
-            &:not(.o_we_so_color_palette) + we-button:not(:hover) {
+            &:not(.o_we_so_color_palette) + we-button:not(:hover):not(.o_we_image_shape_remove) {
                 background: none;
             }
 
             we-toggler:empty::before {
-                content: '/';
+                content: attr(data-placeholder-text);
             }
             we-selection-items {
-                @include o-position-absolute(100%, 0, auto, 0);
-                z-index: $zindex-dropdown;
-                &:not(.dropdown-menu) {
-                    margin-top: $o-we-sidebar-content-field-dropdown-spacing !important;
-                }
-
-                &:not(.o_we_has_pager) {
+                &:not(.o_we_has_pager)  {
+                    @include o-position-absolute(100%, 0, auto, 0);
+                    z-index: $zindex-dropdown;
                     max-height: 600px;
                     overflow-y: auto;
                 }
+                &.o_we_has_pager {
+                    $o-offset-total-topbar: calc(#{$o-we-sidebar-top-height} + #{$o-we-sidebar-tabs-height});
+
+                    width: $o-we-sidebar-width;
+                    max-height: calc(100% - #{$o-offset-total-topbar});
+                    margin-top: $o-offset-total-topbar;
+
+                    we-title {
+                        padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
+                        background-color: $o-we-bg-light;
+                        line-height: $o-we-sidebar-content-main-title-height;
+                    }
+                    .o_pager_nav {
+                        background-color: $o-we-bg-light;
+
+                        > div:first-child {
+                            padding-left: $o-we-item-spacing * 1.5;
+                            padding-top: $o-we-item-spacing;
+                        }
+                    }
+                    .o_pager_nav_title {
+                        padding-left: $o-we-item-spacing * 1.5;
+                    }
+                    .o_pager_nav_angle {
+                        @extend %we-generic-clickable;
+                        @include button-variant($o-we-bg-light, $o-we-bg-light);
+                        padding: $o-we-item-spacing / 2;
+                        font-size: $o-we-sidebar-font-size * 1.4;
+                    }
+                    .o_pager_nav_btn {
+                        @extend %we-generic-tab-button;
+
+                        &:focus {
+                            box-shadow: none;
+                        }
+                    }
+                    .o_pager_container {
+                        overflow-y: scroll;
+                        scroll-behavior: smooth;
+                        background-color: $o-we-bg-lighter;
+                    }
+                }
+
+                &:not(.dropdown-menu):not(.o_we_has_pager) {
+                    margin-top: $o-we-sidebar-content-field-dropdown-spacing;
+                }
+
                 &:empty {
                     line-height: $o-we-sidebar-content-field-dropdown-item-height;
                     background-color: $o-we-sidebar-content-field-dropdown-item-bg;
@@ -993,7 +1048,7 @@
                     padding-left: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
 
                     &::before {
-                        content: '/';
+                        content: attr(data-placeholder-text);
                     }
                 }
                 > we-title {
@@ -1046,79 +1101,41 @@
                     }
                 }
             }
-            .o_we_pager_header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                background-color: $o-we-sidebar-content-field-dropdown-item-bg;
-                margin-bottom: 1px;
 
-                & > b {
-                    padding: $o-we-sidebar-content-field-label-spacing;
-                    color: $o-we-fg-lighter;
-                }
-            }
-            .o_we_pager_controls {
-                display: flex;
-                align-items: center;
-
-                > span {
-                    margin: 0 $o-we-sidebar-content-field-label-spacing;
-                }
-            }
-            .o_we_pager_next, .o_we_pager_prev {
-                margin: 0.3em;
-                padding: $o-we-sidebar-content-field-label-spacing;
-                cursor: pointer;
-                border: $o-we-item-border-width solid currentColor;
-                border-radius: $o-we-item-border-radius;
-            }
             we-select-page {
-                display: none;
-                width: 100%;
-                // Cut the last visible option in the list to understand that we can scroll.
-                max-height: 75px * 7.5;
-                overflow-y: auto;
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: $o-we-item-spacing / 2;
+                padding: $o-we-item-spacing;
+                background-color: $o-we-bg-lighter;
 
-                &.active {
-                    display: block;
-                }
-            }
-        }
-        we-select.o_we_user_value_widget.o_we_select_grid {
-            we-select-page {
-
-                we-button img {
-                    height: $o-we-sidebar-content-field-dropdown-grid-item-height;
-                    width: $o-we-sidebar-content-field-dropdown-grid-item-height;
-                }
-                &.active {
-                    display: flex;
-                    flex-wrap: wrap;
-                    we-button {
-                        width: percentage(1 / 4);
-                        padding: 0;
-                        justify-content: center;
-                        flex-grow: 0;
-                        border-radius: 2px;
-                        border: $o-we-item-border-width solid $o-we-bg-darkest;
-
-                        img {
-                            padding: $o-we-sidebar-content-field-spacing;
-                        }
-                    }
-                    we-button.active {
-                        border: 2px solid $o-we-color-success !important;
-                    }
-                }
-            }
-            &.o_we_fake_transparent_background {
                 we-button {
-                    background-image: url(/web/static/img/transparent.png);
-                    background-size: 10px auto;
+                    @extend %o-preview-alpha-background;
+                    padding: $o-we-item-spacing;
+                    background-color: transparent;
+                }
+                // For background shapes
+                we-button[data-shape] {
+                    grid-column: span 4;
+                    padding: 0;
+
+                    div {
+                        width: 100%;
+                        height: 75px;
+                    }
+                }
+                we-button.active {
+                    border: 4px solid $o-we-color-success;
+                    background-color: rgba($o-we-color-success, 0.2);
+                }
+                img {
+                    width: 100%;
+                    aspect-ratio: 1;
+                    object-fit: contain;
                 }
             }
         }
+
         we-button.o_we_image_shape_remove {
             div {
                 display: flex;
@@ -1906,7 +1923,6 @@
 
                 input[type=range] {
                     pointer-events: none;
-                    focusable: false;
                     grid-column: 1/span 2;
                     grid-row: 3;
                     background: none;
@@ -2478,26 +2494,9 @@
     outline: 2px dashed $o-we-handles-accent-color;
 }
 
-we-select.o_we_shape_menu {
-    we-button[data-shape] {
-        padding: 0 !important;
-
-        &.active {
-            border: 1px solid $o-we-color-success !important;
-        }
-        div {
-            width: 100%;
-        }
-        .o_we_shape_btn_content {
-            @extend %o-preview-alpha-background;
-            width: 100%;
-            height: 75px;
-        }
-    }
-}
 .o_we_shape_animated_label {
     @include o-position-absolute(0, 0);
-    padding: 0 6px;
+    padding: 0 4px;
     background: $o-we-color-success;
     color: white;
 
@@ -2507,35 +2506,15 @@ we-select.o_we_shape_menu {
     }
 }
 
-// Add average resolutions for the category "Devices" in image shapes.
-we-button[data-img-size] {
-    position: relative;
+we-button:hover .o_we_shape_animated_label {
+    i {
+        padding-right: $o-we-item-spacing / 2;
+    }
 
-    &::before, &::after {
-        padding: 0 6px;
-        background: $o-we-color-success;
-        color: white;
-        text-align: center;
+    > span {
+        max-width: $o-we-sidebar-width / 2;
+        transition: max-width 0.5s ease 0s;
     }
-    &::before {
-        font-family: "FontAwesome" !important;
-        content: "\f065";
-        @include o-position-absolute(0, 0, inherit, inherit);
-    }
-    &::after {
-        content: attr(data-img-size);
-        @include o-position-absolute(0, 0, inherit, 0);
-        transform: translateX(100%);
-        transition: 0.2s ease all;
-    }
-    &:hover::after {
-        transform: translateX(0%);
-    }
-}
-
-we-button:hover .o_we_shape_animated_label > span {
-    max-width: 150px;
-    transition: max-width 0.5s ease 0s;
 }
 
 .o_we_ui_loading {
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index fa2ebec0885..073b04dc599 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -235,135 +235,167 @@
              t-att-data-exclude="exclude"
              t-att-data-target="target">
             <we-row string="Shape" class="o_we_sublevel_1">
-                <we-select-pager class="o_we_shape_menu" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
-                    <we-select-page string="Origins">
-                        <we-button data-shape="web_editor/Origins/02_001" data-select-label="Origins 01"/>
-                        <we-button data-shape="web_editor/Origins/04_001" data-select-label="Origins 02"/>
-                        <we-button data-shape="web_editor/Origins/05" data-select-label="Origins 03"/>
-                        <we-button data-shape="web_editor/Origins/06_001" data-select-label="Origins 04"/>
-                        <we-button data-shape="web_editor/Origins/07_002" data-select-label="Origins 05"/>
-                        <we-button data-shape="web_editor/Origins/08" data-select-label="Origins 06"/>
-                        <we-button data-shape="web_editor/Origins/09_001" data-select-label="Origins 07"/>
-                        <we-button data-shape="web_editor/Origins/11_001" data-select-label="Origins 08"/>
-                        <we-button data-shape="web_editor/Origins/14_001" data-select-label="Origins 09"/>
-                        <we-button data-shape="web_editor/Origins/16" data-select-label="Origins 10" data-animated="true"/>
-                        <we-button data-shape="web_editor/Origins/17" data-select-label="Origins 11" data-animated="true"/>
-                        <we-button data-shape="web_editor/Origins/18" data-select-label="Origins 12" data-animated="true"/>
-                    </we-select-page>
-                    <we-select-page string="Blocks &amp; Rainy">
-                        <we-button data-shape="web_editor/Blocks/02_001" data-select-label="Blocks 01"/>
-                        <we-button data-shape="web_editor/Blocks/01_001" data-select-label="Blocks 02"/>
-                        <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
-                        <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
-                        <we-button data-shape="web_editor/Rainy/01_001" data-select-label="Rainy 01" data-animated="true"/>
-                        <we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02" data-animated="true"/>
-                        <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 03"/>
-                        <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 04"/>
-                        <we-button data-shape="web_editor/Rainy/10" data-select-label="Rainy 05" data-animated="true"/>
-                        <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 06"/>
-                        <we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 07"/>
-                        <we-button data-shape="web_editor/Rainy/03_001" data-select-label="Rainy 08" data-animated="true"/>
-                        <we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09" data-animated="true"/>
-                        <we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 10"/>
-                    </we-select-page>
-                    <we-select-page string="Wavy">
-                        <we-button data-shape="web_editor/Wavy/01_001" data-select-label="Wavy 01"/>
-                        <we-button data-shape="web_editor/Wavy/02_001" data-select-label="Wavy 02"/>
-                        <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
-                        <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 04"/>
-                        <we-button data-shape="web_editor/Wavy/24" data-select-label="Wavy 05" data-animated="true"/>
-                        <we-button data-shape="web_editor/Wavy/25" data-select-label="Wavy 06" data-animated="true"/>
-                        <we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 07" data-animated="true"/>
-                        <we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 08" data-animated="true"/>
-                        <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 09"/>
-                        <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 10"/>
-                        <we-button data-shape="web_editor/Wavy/06_001" data-select-label="Wavy 11"/>
-                        <we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 12"/>
-                        <we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 13"/>
-                        <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 14"/>
-                        <we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 15"/>
-                        <we-button data-shape="web_editor/Wavy/12_001" data-select-label="Wavy 16"/>
-                        <we-button data-shape="web_editor/Wavy/28" data-select-label="Wavy 17" data-animated="true"/>
-                        <we-button data-shape="web_editor/Wavy/13_001" data-select-label="Wavy 18"/>
-                        <we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 19"/>
-                        <we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 20"/>
-                        <we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 21"/>
-                        <we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 22"/>
-                        <we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 23"/>
-                        <we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 24"/>
-                        <we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 25"/>
-                        <we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 26"/>
-                        <we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 27"/>
-                        <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 28"/>
-                    </we-select-page>
-                    <we-select-page string="Blobs">
-                        <we-button data-shape="web_editor/Blobs/01_001" data-select-label="Blobs 01" data-animated="true"/>
-                        <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
-                        <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
-                        <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
-                        <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
-                        <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
-                        <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
-                        <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
-                        <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
-                        <we-button data-shape="web_editor/Blobs/10_001" data-select-label="Blobs 10"/>
-                        <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
-                        <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
-                    </we-select-page>
-                    <we-select-page string="Bold">
-                        <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
-                        <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
-                        <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
-                        <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
-                        <we-button data-shape="web_editor/Bold/05_001" data-select-label="Bold 05"/>
-                        <we-button data-shape="web_editor/Bold/06_001" data-select-label="Bold 06"/>
-                        <we-button data-shape="web_editor/Bold/07_001" data-select-label="Bold 07"/>
-                        <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
-                        <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
-                        <we-button data-shape="web_editor/Bold/10_001" data-select-label="Bold 10"/>
-                        <we-button data-shape="web_editor/Bold/11_001" data-select-label="Bold 11"/>
-                        <we-button data-shape="web_editor/Bold/12_001" data-select-label="Bold 12"/>
-                    </we-select-page>
-                    <we-select-page string="Airy &amp; Zigs">
-                        <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
-                        <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
-                        <we-button data-shape="web_editor/Airy/03_001" data-select-label="Airy 03" data-animated="true"/>
-                        <we-button data-shape="web_editor/Airy/04_001" data-select-label="Airy 04" data-animated="true"/>
-                        <we-button data-shape="web_editor/Airy/05_001" data-select-label="Airy 05" data-animated="true"/>
-                        <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
-                        <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
-                        <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
-                        <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
-                        <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
-                        <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
-                        <we-button data-shape="web_editor/Airy/12_001" data-select-label="Airy 12" data-animated="true"/>
-                        <we-button data-shape="web_editor/Airy/13_001" data-select-label="Airy 13" data-animated="true"/>
-                        <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
-                        <we-button data-shape="web_editor/Zigs/01_001" data-select-label="Zigs 01" data-animated="true"/>
-                        <we-button data-shape="web_editor/Zigs/02_001" data-select-label="Zigs 02" data-animated="true"/>
-                        <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
-                        <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
-                        <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
-                        <we-button data-shape="web_editor/Zigs/06" data-select-label="Zigs 06"/>
-                    </we-select-page>
-                    <we-select-page string="Floating shapes">
-                        <we-button data-shape="web_editor/Floats/01" data-select-label="Float 01" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/02" data-select-label="Float 02" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/03" data-select-label="Float 03" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/04" data-select-label="Float 04" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/05" data-select-label="Float 05" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/06" data-select-label="Float 06" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/07" data-select-label="Float 07" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/08" data-select-label="Float 08" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/09" data-select-label="Float 09" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/10" data-select-label="Float 10" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/11" data-select-label="Float 11" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/12" data-select-label="Float 12" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/13" data-select-label="Float 13" data-animated="true"/>
-                        <we-button data-shape="web_editor/Floats/14" data-select-label="Float 14" data-animated="true"/>
-                    </we-select-page>
+                <we-select-pager class="o_we_bg_shape_menu" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
+                    <header class="o_pager_nav d-flex flex-column flex-wrap flex-shrink-0 mh-100">
+                        <div class="d-flex align-items-center">
+                            <button class="o_pager_nav_angle fa fa-angle-left btn btn-secondary bg-transparent border-0"/>
+                            <h5 class="o_pager_nav_title mb-0 text-white">Background Shapes</h5>
+                        </div>
+                        <div class="d-flex">
+                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase active" data-scroll-to="o_scroll_bgshapes_basic">
+                                <span class="w-100">Basic</span>
+                            </button>
+                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_bgshapes_linear">
+                                <span class="w-100">Linear</span>
+                            </button>
+                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_bgshapes_creative">
+                                <span class="w-100">Creative</span>
+                            </button>
+                        </div>
+                    </header>
+                    <div class="o_pager_container">
+                        <div class="o_scroll_bgshapes_basic">
+                            <we-title>Origins</we-title>
+                            <we-select-page string="Origins">
+                                <we-button data-shape="web_editor/Origins/02_001" data-select-label="Origins 01"/>
+                                <we-button data-shape="web_editor/Origins/04_001" data-select-label="Origins 02"/>
+                                <we-button data-shape="web_editor/Origins/05" data-select-label="Origins 03"/>
+                                <we-button data-shape="web_editor/Origins/06_001" data-select-label="Origins 04"/>
+                                <we-button data-shape="web_editor/Origins/07_002" data-select-label="Origins 05"/>
+                                <we-button data-shape="web_editor/Origins/08" data-select-label="Origins 06"/>
+                                <we-button data-shape="web_editor/Origins/09_001" data-select-label="Origins 07"/>
+                                <we-button data-shape="web_editor/Origins/11_001" data-select-label="Origins 08"/>
+                                <we-button data-shape="web_editor/Origins/14_001" data-select-label="Origins 09"/>
+                                <we-button data-shape="web_editor/Origins/16" data-select-label="Origins 10" data-animated="true"/>
+                                <we-button data-shape="web_editor/Origins/17" data-select-label="Origins 11" data-animated="true"/>
+                                <we-button data-shape="web_editor/Origins/18" data-select-label="Origins 12" data-animated="true"/>
+                            </we-select-page>
+                            <we-title>Bold</we-title>
+                            <we-select-page string="Bold">
+                                <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
+                                <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
+                                <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
+                                <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
+                                <we-button data-shape="web_editor/Bold/05_001" data-select-label="Bold 05"/>
+                                <we-button data-shape="web_editor/Bold/06_001" data-select-label="Bold 06"/>
+                                <we-button data-shape="web_editor/Bold/07_001" data-select-label="Bold 07"/>
+                                <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
+                                <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
+                                <we-button data-shape="web_editor/Bold/10_001" data-select-label="Bold 10"/>
+                                <we-button data-shape="web_editor/Bold/11_001" data-select-label="Bold 11"/>
+                                <we-button data-shape="web_editor/Bold/12_001" data-select-label="Bold 12"/>
+                            </we-select-page>
+                            <we-title>Blobs</we-title>
+                            <we-select-page string="Blobs">
+                                <we-button data-shape="web_editor/Blobs/01_001" data-select-label="Blobs 01" data-animated="true"/>
+                                <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
+                                <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
+                                <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
+                                <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
+                                <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
+                                <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
+                                <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
+                                <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
+                                <we-button data-shape="web_editor/Blobs/10_001" data-select-label="Blobs 10"/>
+                                <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
+                                <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
+                            </we-select-page>
+                        </div>
+                        <div class="o_scroll_bgshapes_linear">
+                            <we-title>Airy &amp; Zigs</we-title>
+                            <we-select-page string="Airy &amp; Zigs">
+                                <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
+                                <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
+                                <we-button data-shape="web_editor/Airy/03_001" data-select-label="Airy 03" data-animated="true"/>
+                                <we-button data-shape="web_editor/Airy/04_001" data-select-label="Airy 04" data-animated="true"/>
+                                <we-button data-shape="web_editor/Airy/05_001" data-select-label="Airy 05" data-animated="true"/>
+                                <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
+                                <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
+                                <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
+                                <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
+                                <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
+                                <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
+                                <we-button data-shape="web_editor/Airy/12_001" data-select-label="Airy 12" data-animated="true"/>
+                                <we-button data-shape="web_editor/Airy/13_001" data-select-label="Airy 13" data-animated="true"/>
+                                <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
+                                <we-button data-shape="web_editor/Zigs/01_001" data-select-label="Zigs 01" data-animated="true"/>
+                                <we-button data-shape="web_editor/Zigs/02_001" data-select-label="Zigs 02" data-animated="true"/>
+                                <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
+                                <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
+                                <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
+                                <we-button data-shape="web_editor/Zigs/06" data-select-label="Zigs 06"/>
+                            </we-select-page>
+                        </div>
+                        <div class="o_scroll_bgshapes_creative">
+                            <we-title>Wavy</we-title>
+                            <we-select-page string="Wavy">
+                                <we-button data-shape="web_editor/Wavy/01_001" data-select-label="Wavy 01"/>
+                                <we-button data-shape="web_editor/Wavy/02_001" data-select-label="Wavy 02"/>
+                                <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
+                                <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 04"/>
+                                <we-button data-shape="web_editor/Wavy/24" data-select-label="Wavy 05" data-animated="true"/>
+                                <we-button data-shape="web_editor/Wavy/25" data-select-label="Wavy 06" data-animated="true"/>
+                                <we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 07" data-animated="true"/>
+                                <we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 08" data-animated="true"/>
+                                <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 09"/>
+                                <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 10"/>
+                                <we-button data-shape="web_editor/Wavy/06_001" data-select-label="Wavy 11"/>
+                                <we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 12"/>
+                                <we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 13"/>
+                                <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 14"/>
+                                <we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 15"/>
+                                <we-button data-shape="web_editor/Wavy/12_001" data-select-label="Wavy 16"/>
+                                <we-button data-shape="web_editor/Wavy/28" data-select-label="Wavy 17" data-animated="true"/>
+                                <we-button data-shape="web_editor/Wavy/13_001" data-select-label="Wavy 18"/>
+                                <we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 19"/>
+                                <we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 20"/>
+                                <we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 21"/>
+                                <we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 22"/>
+                                <we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 23"/>
+                                <we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 24"/>
+                                <we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 25"/>
+                                <we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 26"/>
+                                <we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 27"/>
+                                <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 28"/>
+                            </we-select-page>
+                            <we-title>Block &amp; Rainy</we-title>
+                            <we-select-page string="Blocks &amp; Rainy">
+                                <we-button data-shape="web_editor/Blocks/02_001" data-select-label="Blocks 01"/>
+                                <we-button data-shape="web_editor/Blocks/01_001" data-select-label="Blocks 02"/>
+                                <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
+                                <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
+                                <we-button data-shape="web_editor/Rainy/01_001" data-select-label="Rainy 01" data-animated="true"/>
+                                <we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02" data-animated="true"/>
+                                <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 03"/>
+                                <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 04"/>
+                                <we-button data-shape="web_editor/Rainy/10" data-select-label="Rainy 05" data-animated="true"/>
+                                <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 06"/>
+                                <we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 07"/>
+                                <we-button data-shape="web_editor/Rainy/03_001" data-select-label="Rainy 08" data-animated="true"/>
+                                <we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09" data-animated="true"/>
+                                <we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 10"/>
+                            </we-select-page>
+                            <we-title>Floating shapes</we-title>
+                            <we-select-page string="Floating shapes">
+                                <we-button data-shape="web_editor/Floats/01" data-select-label="Float 01" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/02" data-select-label="Float 02" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/03" data-select-label="Float 03" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/04" data-select-label="Float 04" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/05" data-select-label="Float 05" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/06" data-select-label="Float 06" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/07" data-select-label="Float 07" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/08" data-select-label="Float 08" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/09" data-select-label="Float 09" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/10" data-select-label="Float 10" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/11" data-select-label="Float 11" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/12" data-select-label="Float 12" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/13" data-select-label="Float 13" data-animated="true"/>
+                                <we-button data-shape="web_editor/Floats/14" data-select-label="Float 14" data-animated="true"/>
+                            </we-select-page>
+                        </div>
+                    </div>
                 </we-select-pager>
-                <we-button data-shape="" data-name="shape_none_opt" data-dependencies="!shape_none_opt" data-no-preview="true" class="fa fa-fw fa-times"/>
+                <we-button data-shape="" data-name="shape_none_opt" data-dependencies="!shape_none_opt" data-no-preview="true" class="o_we_image_shape_remove o_we_bg_danger fa fa-fw fa-times"/>
             </we-row>
             <we-row string="Flip" class="o_we_sublevel_2">
                 <we-button class="fa fa-fw fa-arrows-h" data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
@@ -461,188 +493,221 @@
          data-selector="img">
         <div class="o_we_image_shape">
             <we-row string="Shape" class="o_we_full_row">
-                <we-select-pager data-name="shape_img_opt" class="o_we_select_grid o_we_fake_transparent_background">
-                    <we-select-page string="Geometrics">
-                        <we-button data-set-img-shape="web_editor/geometric/geo_square" data-select-label="Square"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_shuriken" data-select-label="Shuriken"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_diamond" data-select-label="Diamond"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_triangle" data-select-label="Triangle"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_cornered_triangle" data-select-label="Corner Triangle"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_pentagon" data-select-label="Pentagon"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_hexagon" data-select-label="Hexagon"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_heptagon" data-select-label="Heptagon"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_star" data-select-label="Star 1"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_star_8pin" data-select-label="Star 2"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_star_16pin" data-select-label="Star 3"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_slanted" data-select-label="Slanted"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_emerald" data-select-label="Emerald"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_tetris" data-select-label="Tetris"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_kayak" data-select-label="Kayak"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_tear" data-select-label="Tear"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_gem" data-select-label="Gem"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_sonar" data-select-label="Sonar"/>
-                        <we-button data-set-img-shape="web_editor/geometric/geo_door" data-select-label="Door"/>
-                        <t t-if="not no_animations">
-                            <we-button data-set-img-shape="web_editor/geometric/geo_square_1" data-select-label="Square 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric/geo_square_2" data-select-label="Square 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric/geo_square_3" data-select-label="Square 3" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric/geo_square_4" data-select-label="Square 4" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric/geo_square_5" data-select-label="Square 5" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric/geo_square_6" data-select-label="Square 6" data-animated="true"/>
-                        </t>
-                    </we-select-page>
+                <we-select-pager data-name="shape_img_opt" class="o_we_fake_transparent_background">
+                    <header class="o_pager_nav d-flex flex-column flex-wrap flex-shrink-0 mh-100">
+                        <div class="d-flex align-items-center">
+                            <button class="o_pager_nav_angle fa fa-angle-left btn btn-secondary bg-transparent border-0"/>
+                            <h5 class="o_pager_nav_title mb-0 text-white">Shapes</h5>
+                        </div>
+                        <div class="d-flex">
+                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase active" data-scroll-to="o_scroll_shapes_basic">
+                                <span class="w-100">Basic</span>
+                            </button>
+                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_shapes_decorative">
+                                <span class="w-100">Decorative</span>
+                            </button>
+                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_shapes_devices">
+                                <span class="w-100">Devices</span>
+                            </button>
+                        </div>
+                    </header>
+                    <div class="o_pager_container">
+                        <div class="o_scroll_shapes_basic">
+                            <we-title class="">Geometrics</we-title>
+                            <we-select-page string="Geometrics">
+                                <we-button data-set-img-shape="web_editor/geometric/geo_square" data-select-label="Square"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_shuriken" data-select-label="Shuriken"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_diamond" data-select-label="Diamond"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_triangle" data-select-label="Triangle"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_cornered_triangle" data-select-label="Corner Triangle"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_pentagon" data-select-label="Pentagon"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_hexagon" data-select-label="Hexagon"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_heptagon" data-select-label="Heptagon"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_star" data-select-label="Star 1"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_star_8pin" data-select-label="Star 2"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_star_16pin" data-select-label="Star 3"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_slanted" data-select-label="Slanted"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_emerald" data-select-label="Emerald"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_tetris" data-select-label="Tetris"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_kayak" data-select-label="Kayak"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_tear" data-select-label="Tear"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_gem" data-select-label="Gem"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_sonar" data-select-label="Sonar"/>
+                                <we-button data-set-img-shape="web_editor/geometric/geo_door" data-select-label="Door"/>
+                                <t t-if="not no_animations">
+                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_1" data-select-label="Square 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_2" data-select-label="Square 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_3" data-select-label="Square 3" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_4" data-select-label="Square 4" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_5" data-select-label="Square 5" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_6" data-select-label="Square 6" data-animated="true"/>
+                                </t>
+                            </we-select-page>
 
-                    <we-select-page string="Geometrics Rounded">
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_circle" data-select-label="Circle"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square" data-select-label="Square (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_diamond" data-select-label="Diamond (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_shuriken" data-select-label="Shuriken (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_triangle" data-select-label="Triangle (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_pentagon" data-select-label="Pentagon (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_hexagon" data-select-label="Hexagon (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_heptagon" data-select-label="Heptagon (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star" data-select-label="Star 1 (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_7pin" data-select-label="Star 2 (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_8pin" data-select-label="Star 3 (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_16pin" data-select-label="Star 4 (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_emerald" data-select-label="Emerald (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_lemon" data-select-label="Lemon (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_tear" data-select-label="Tear (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_pill" data-select-label="Pill (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_gem" data-select-label="Gem (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_cornered" data-select-label="Cornered"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_door" data-select-label="Door (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_sonar" data-select-label="Sonar (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_clover" data-select-label="Clover (R)"/>
-                        <we-button data-set-img-shape="web_editor/geometric_round/geo_round_bread" data-select-label="Bread (R)"/>
-                        <t t-if="not no_animations">
-                            <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_1" data-select-label="Square 1 (R)" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_2" data-select-label="Square 2 (R)" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_soft" data-select-label="Blob Soft" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_medium" data-select-label="Blob Medium" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_hard" data-select-label="Blob Hard" data-animated="true"/>
-                        </t>
-                    </we-select-page>
+                            <we-title>Geometrics Rounded</we-title>
+                            <we-select-page string="Geometrics Rounded">
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_circle" data-select-label="Circle"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square" data-select-label="Square (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_diamond" data-select-label="Diamond (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_shuriken" data-select-label="Shuriken (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_triangle" data-select-label="Triangle (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_pentagon" data-select-label="Pentagon (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_hexagon" data-select-label="Hexagon (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_heptagon" data-select-label="Heptagon (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star" data-select-label="Star 1 (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_7pin" data-select-label="Star 2 (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_8pin" data-select-label="Star 3 (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_16pin" data-select-label="Star 4 (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_emerald" data-select-label="Emerald (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_lemon" data-select-label="Lemon (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_tear" data-select-label="Tear (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_pill" data-select-label="Pill (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_gem" data-select-label="Gem (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_cornered" data-select-label="Cornered"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_door" data-select-label="Door (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_sonar" data-select-label="Sonar (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_clover" data-select-label="Clover (R)"/>
+                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_bread" data-select-label="Bread (R)"/>
+                                <t t-if="not no_animations">
+                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_1" data-select-label="Square 1 (R)" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_2" data-select-label="Square 2 (R)" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_soft" data-select-label="Blob Soft" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_medium" data-select-label="Blob Medium" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_hard" data-select-label="Blob Hard" data-animated="true"/>
+                                </t>
+                            </we-select-page>
 
-                    <we-select-page string="Panels">
-                        <we-button data-set-img-shape="web_editor/panel/panel_duo" data-select-label="Duo"/>
-                        <we-button data-set-img-shape="web_editor/panel/panel_duo_r" data-select-label="Duo (R)"/>
-                        <we-button data-set-img-shape="web_editor/panel/panel_duo_step" data-select-label="Duo Step"/>
-                        <we-button data-set-img-shape="web_editor/panel/panel_duo_step_pill" data-select-label="Duo Step Pill"/>
-                        <we-button data-set-img-shape="web_editor/panel/panel_trio_in_r" data-select-label="Trio In (R)"/>
-                        <we-button data-set-img-shape="web_editor/panel/panel_trio_out_r" data-select-label="Trio Out (R)"/>
-                        <we-button data-set-img-shape="web_editor/panel/panel_window" data-select-label="Window"/>
-                    </we-select-page>
+                            <we-title>Geometrics Panels</we-title>
+                            <we-select-page string="Panels">
+                                <we-button data-set-img-shape="web_editor/panel/panel_duo" data-select-label="Duo"/>
+                                <we-button data-set-img-shape="web_editor/panel/panel_duo_r" data-select-label="Duo (R)"/>
+                                <we-button data-set-img-shape="web_editor/panel/panel_duo_step" data-select-label="Duo Step"/>
+                                <we-button data-set-img-shape="web_editor/panel/panel_duo_step_pill" data-select-label="Duo Step Pill"/>
+                                <we-button data-set-img-shape="web_editor/panel/panel_trio_in_r" data-select-label="Trio In (R)"/>
+                                <we-button data-set-img-shape="web_editor/panel/panel_trio_out_r" data-select-label="Trio Out (R)"/>
+                                <we-button data-set-img-shape="web_editor/panel/panel_window" data-select-label="Window"/>
+                            </we-select-page>
 
-                    <we-select-page string="Composites">
-                        <we-button data-set-img-shape="web_editor/composite/composite_double_pill" data-select-label="Double Pill"/>
-                        <we-button data-set-img-shape="web_editor/composite/composite_triple_pill" data-select-label="Triple Pill"/>
-                        <we-button data-set-img-shape="web_editor/composite/composite_half_circle" data-select-label="Half Circle"/>
-                        <we-button data-set-img-shape="web_editor/composite/composite_sonar" data-select-label="Double Sonar"/>
-                        <we-button data-set-img-shape="web_editor/composite/composite_cut_circle" data-select-label="Cut Circle"/>
-                    </we-select-page>
+                            <we-title>Composites</we-title>
+                            <we-select-page string="Composites">
+                                <we-button data-set-img-shape="web_editor/composite/composite_double_pill" data-select-label="Double Pill"/>
+                                <we-button data-set-img-shape="web_editor/composite/composite_triple_pill" data-select-label="Triple Pill"/>
+                                <we-button data-set-img-shape="web_editor/composite/composite_half_circle" data-select-label="Half Circle"/>
+                                <we-button data-set-img-shape="web_editor/composite/composite_sonar" data-select-label="Double Sonar"/>
+                                <we-button data-set-img-shape="web_editor/composite/composite_cut_circle" data-select-label="Cut Circle"/>
+                            </we-select-page>
+                        </div>
+                        <div class="o_scroll_shapes_decorative">
+                            <we-title>Brushed</we-title>
+                            <we-select-page string="Brushed">
+                                <we-button data-set-img-shape="web_editor/brushed/brush_1" data-select-label="Brush 1"/>
+                                <we-button data-set-img-shape="web_editor/brushed/brush_2" data-select-label="Brush 2"/>
+                                <we-button data-set-img-shape="web_editor/brushed/brush_3" data-select-label="Brush 3"/>
+                                <we-button data-set-img-shape="web_editor/brushed/brush_4" data-select-label="Brush 4"/>
+                            </we-select-page>
 
-                    <we-select-page string="Brushed">
-                        <we-button data-set-img-shape="web_editor/brushed/brush_1" data-select-label="Brush 1"/>
-                        <we-button data-set-img-shape="web_editor/brushed/brush_2" data-select-label="Brush 2"/>
-                        <we-button data-set-img-shape="web_editor/brushed/brush_3" data-select-label="Brush 3"/>
-                        <we-button data-set-img-shape="web_editor/brushed/brush_4" data-select-label="Brush 4"/>
-                    </we-select-page>
+                            <we-title>Composition</we-title>
+                            <we-select-page string="Composition">
+                                <we-button data-set-img-shape="web_editor/composition/composition_organic_line" data-select-label="Organic Line"/>
+                                <we-button data-set-img-shape="web_editor/composition/composition_oval_line" data-select-label="Oval Line"/>
+                                <t t-if="not no_animations">
+                                    <we-button data-set-img-shape="web_editor/composition/composition_triangle_line" data-select-label="Triangle Line" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_line_1" data-select-label="Line 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_line_3" data-select-label="Line 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_line_2" data-select-label="Line 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_mixed_1" data-select-label="Mixed 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_mixed_2" data-select-label="Mixed 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_planet_1" data-select-label="Planet 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_planet_2" data-select-label="Planet 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_square_1" data-select-label="Square Dot 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_square_2" data-select-label="Square Dot 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_square_3" data-select-label="Square Dot 3" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_square_4" data-select-label="Square Dot 4" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/composition/composition_square_line" data-select-label="Square Line" data-animated="true"/>
+                                </t>
+                            </we-select-page>
 
-                    <we-select-page string="Composition">
-                        <we-button data-set-img-shape="web_editor/composition/composition_organic_line" data-select-label="Organic Line"/>
-                        <we-button data-set-img-shape="web_editor/composition/composition_oval_line" data-select-label="Oval Line"/>
-                        <t t-if="not no_animations">
-                            <we-button data-set-img-shape="web_editor/composition/composition_triangle_line" data-select-label="Triangle Line" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_line_1" data-select-label="Line 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_line_3" data-select-label="Line 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_line_2" data-select-label="Line 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_mixed_1" data-select-label="Mixed 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_mixed_2" data-select-label="Mixed 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_planet_1" data-select-label="Planet 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_planet_2" data-select-label="Planet 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_square_1" data-select-label="Square Dot 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_square_2" data-select-label="Square Dot 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_square_3" data-select-label="Square Dot 3" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_square_4" data-select-label="Square Dot 4" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/composition/composition_square_line" data-select-label="Square Line" data-animated="true"/>
-                        </t>
-                    </we-select-page>
+                            <we-title>Patterns</we-title>
+                            <we-select-page string="Patterns">
+                                <we-button data-set-img-shape="web_editor/pattern/pattern_organic_cross" data-select-label="Organic Cross"/>
+                                <we-button data-set-img-shape="web_editor/pattern/pattern_organic_caps" data-select-label="Organic Caps"/>
+                                <we-button data-set-img-shape="web_editor/pattern/pattern_oval_zebra" data-select-label="Oval Zebra"/>
+                                <t t-if="not no_animations">
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_1" data-select-label="Wave 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_line_star" data-select-label="Star" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_line_sun" data-select-label="Sun" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_2" data-select-label="Wave 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_3" data-select-label="Wave 3" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_point" data-select-label="Point" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_organic_dot" data-select-label="Organic Dot" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_circuit" data-select-label="Circuit" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_4" data-select-label="Wave 4" data-animated="true"/>
+                                </t>
+                            </we-select-page>
 
-                    <we-select-page string="Patterns">
-                        <we-button data-set-img-shape="web_editor/pattern/pattern_organic_cross" data-select-label="Organic Cross"/>
-                        <we-button data-set-img-shape="web_editor/pattern/pattern_organic_caps" data-select-label="Organic Caps"/>
-                        <we-button data-set-img-shape="web_editor/pattern/pattern_oval_zebra" data-select-label="Oval Zebra"/>
-                        <t t-if="not no_animations">
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_wave_1" data-select-label="Wave 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_line_star" data-select-label="Star" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_line_sun" data-select-label="Sun" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_wave_2" data-select-label="Wave 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_wave_3" data-select-label="Wave 3" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_point" data-select-label="Point" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_organic_dot" data-select-label="Organic Dot" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_circuit" data-select-label="Circuit" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/pattern/pattern_wave_4" data-select-label="Wave 4" data-animated="true"/>
-                        </t>
-                    </we-select-page>
+                            <we-title>Solids</we-title>
+                            <we-select-page string="Solids">
+                                <we-button data-set-img-shape="web_editor/solid/solid_blob_1" data-select-label="Blob 1"/>
+                                <we-button data-set-img-shape="web_editor/solid/solid_blob_2" data-select-label="Blob 2"/>
+                                <we-button data-set-img-shape="web_editor/solid/solid_blob_3" data-select-label="Blob 3"/>
+                                <we-button data-set-img-shape="web_editor/solid/solid_blob_4" data-select-label="Blob 4"/>
+                                <t t-if="not no_animations">
+                                    <we-button data-set-img-shape="web_editor/solid/solid_blob_5" data-select-label="Blob 5" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/solid/solid_square_1" data-select-label="Square Shadow 1" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/solid/solid_square_2" data-select-label="Square Shadow 2" data-animated="true"/>
+                                    <we-button data-set-img-shape="web_editor/solid/solid_square_3" data-select-label="Square Shadow 3" data-animated="true"/>
+                                </t>
+                            </we-select-page>
 
-                    <we-select-page string="Solids">
-                        <we-button data-set-img-shape="web_editor/solid/solid_blob_1" data-select-label="Blob 1"/>
-                        <we-button data-set-img-shape="web_editor/solid/solid_blob_2" data-select-label="Blob 2"/>
-                        <we-button data-set-img-shape="web_editor/solid/solid_blob_3" data-select-label="Blob 3"/>
-                        <we-button data-set-img-shape="web_editor/solid/solid_blob_4" data-select-label="Blob 4"/>
-                        <t t-if="not no_animations">
-                            <we-button data-set-img-shape="web_editor/solid/solid_blob_5" data-select-label="Blob 5" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/solid/solid_square_1" data-select-label="Square Shadow 1" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/solid/solid_square_2" data-select-label="Square Shadow 2" data-animated="true"/>
-                            <we-button data-set-img-shape="web_editor/solid/solid_square_3" data-select-label="Square Shadow 3" data-animated="true"/>
-                        </t>
-                    </we-select-page>
-
-                    <we-select-page string="Specials" t-if="not no_animations">
-                        <we-button data-set-img-shape="web_editor/special/special_speed" data-select-label="Speed" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/special/special_rain" data-select-label="Rain" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/special/special_snow" data-select-label="Snow" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/special/special_layered" data-select-label="Layered" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/special/special_filter" data-select-label="Filter" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/special/special_flag" data-select-label="Flag" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/special/special_organic" data-select-label="Organic" data-animated="true"/>
-                    </we-select-page>
-
-                    <we-select-page string="Devices">
-                        <we-button data-set-img-shape="web_editor/devices/iphone_front_portrait" data-select-label="iPhone #1" data-img-size="375 x 812"/>
-                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_01" data-select-label="iPhone #2" data-img-size="375 x 812"/>
-                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_02" data-select-label="iPhone #3" data-img-size="375 x 812"/>
-                        <we-button data-set-img-shape="web_editor/devices/iphone_front_landscape" data-select-label="iPhone #4" data-img-size="812 x 375"/>
-                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_01" data-select-label="iPhone #5" data-img-size="812 x 375"/>
-                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_02" data-select-label="iPhone #6" data-img-size="812 x 375"/>
-                        <we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait" data-select-label="Galaxy S #1" data-img-size="360 x 800"/>
-                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_01" data-select-label="Galaxy S #2" data-img-size="360 x 800"/>
-                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_02" data-select-label="Galaxy S #3" data-img-size="360 x 800"/>
-                        <we-button data-set-img-shape="web_editor/devices/galaxy_front_landscape" data-select-label="Galaxy S #4" data-img-size="800 x 360"/>
-                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_01" data-select-label="Galaxy S #5" data-img-size="800 x 360"/>
-                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_02" data-select-label="Galaxy S #6" data-img-size="800 x 360"/>
-                        <we-button data-set-img-shape="web_editor/devices/ipad_front_portrait" data-select-label="iPad #1" data-img-size="768 x 1024"/>
-                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_01" data-select-label="iPad #2" data-img-size="768 x 1024"/>
-                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_02" data-select-label="iPad #3" data-img-size="768 x 1024"/>
-                        <we-button data-set-img-shape="web_editor/devices/ipad_front_landscape" data-select-label="iPad #4" data-img-size="1024 x 768"/>
-                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_01" data-select-label="iPad #5" data-img-size="1024 x 768"/>
-                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_02" data-select-label="iPad #6" data-img-size="1024 x 768"/>
-                        <we-button data-set-img-shape="web_editor/devices/imac_front" data-select-label="iMac #1" data-img-size="1280 x 720"/>
-                        <we-button data-set-img-shape="web_editor/devices/imac_3d_01" data-select-label="iMac #2" data-img-size="1280 x 720"/>
-                        <we-button data-set-img-shape="web_editor/devices/imac_3d_02" data-select-label="iMac #3" data-img-size="1280 x 720"/>
-                        <we-button data-set-img-shape="web_editor/devices/macbook_front" data-select-label="MacBook #1" data-img-size="1280 x 800"/>
-                        <we-button data-set-img-shape="web_editor/devices/macbook_3d_01" data-select-label="MacBook #2" data-img-size="1280 x 800"/>
-                        <we-button data-set-img-shape="web_editor/devices/macbook_3d_02" data-select-label="MacBook #3" data-img-size="1280 x 800"/>
-                        <we-button data-set-img-shape="web_editor/devices/browser_01" data-select-label="Browser #1"/>
-                        <we-button data-set-img-shape="web_editor/devices/browser_02" data-select-label="Browser #2"/>
-                        <we-button data-set-img-shape="web_editor/devices/browser_03" data-select-label="Browser #3"/>
-                    </we-select-page>
+                            <we-title>Specials</we-title>
+                            <we-select-page string="Specials" t-if="not no_animations">
+                                <we-button data-set-img-shape="web_editor/special/special_speed" data-select-label="Speed" data-animated="true"/>
+                                <we-button data-set-img-shape="web_editor/special/special_rain" data-select-label="Rain" data-animated="true"/>
+                                <we-button data-set-img-shape="web_editor/special/special_snow" data-select-label="Snow" data-animated="true"/>
+                                <we-button data-set-img-shape="web_editor/special/special_layered" data-select-label="Layered" data-animated="true"/>
+                                <we-button data-set-img-shape="web_editor/special/special_filter" data-select-label="Filter" data-animated="true"/>
+                                <we-button data-set-img-shape="web_editor/special/special_flag" data-select-label="Flag" data-animated="true"/>
+                                <we-button data-set-img-shape="web_editor/special/special_organic" data-select-label="Organic" data-animated="true"/>
+                            </we-select-page>
+                        </div>
+                        <div class="o_scroll_shapes_devices">
+                            <we-title>Devices</we-title>
+                            <we-select-page string="Devices">
+                                <we-button data-set-img-shape="web_editor/devices/iphone_front_portrait" data-select-label="iPhone #1" data-img-size="0.46:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_01" data-select-label="iPhone #2" data-img-size="0.46:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_02" data-select-label="iPhone #3" data-img-size="0.46:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/iphone_front_landscape" data-select-label="iPhone #4" data-img-size="2.17:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_01" data-select-label="iPhone #5" data-img-size="2.17:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_02" data-select-label="iPhone #6" data-img-size="2.17:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait" data-select-label="Galaxy S #1" data-img-size="0.45:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_01" data-select-label="Galaxy S #2" data-img-size="0.45:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_02" data-select-label="Galaxy S #3" data-img-size="0.45:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/galaxy_front_landscape" data-select-label="Galaxy S #4" data-img-size="2.22:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_01" data-select-label="Galaxy S #5" data-img-size="2.22:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_02" data-select-label="Galaxy S #6" data-img-size="2.22:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/ipad_front_portrait" data-select-label="iPad #1" data-img-size="0.75:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_01" data-select-label="iPad #2" data-img-size="0.75:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_02" data-select-label="iPad #3" data-img-size="0.75:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/ipad_front_landscape" data-select-label="iPad #4" data-img-size="4:3"/>
+                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_01" data-select-label="iPad #5" data-img-size="4:3"/>
+                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_02" data-select-label="iPad #6" data-img-size="4:3"/>
+                                <we-button data-set-img-shape="web_editor/devices/imac_front" data-select-label="iMac #1" data-img-size="16:9"/>
+                                <we-button data-set-img-shape="web_editor/devices/imac_3d_01" data-select-label="iMac #2" data-img-size="16:9"/>
+                                <we-button data-set-img-shape="web_editor/devices/imac_3d_02" data-select-label="iMac #3" data-img-size="16:9"/>
+                                <we-button data-set-img-shape="web_editor/devices/macbook_front" data-select-label="MacBook #1" data-img-size="1.6:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/macbook_3d_01" data-select-label="MacBook #2" data-img-size="1.6:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/macbook_3d_02" data-select-label="MacBook #3" data-img-size="1.6:1"/>
+                                <we-button data-set-img-shape="web_editor/devices/browser_01" data-select-label="Browser #1"/>
+                                <we-button data-set-img-shape="web_editor/devices/browser_02" data-select-label="Browser #2"/>
+                                <we-button data-set-img-shape="web_editor/devices/browser_03" data-select-label="Browser #3"/>
+                            </we-select-page>
+                        </div>
+                    </div>
                 </we-select-pager>
-                <we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove fa fa-fw fa-times"/>
+                <we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove o_we_bg_danger fa fa-fw fa-times"/>
             </we-row>
             <we-row string="Colors" class="o_we_sublevel_1">
                 <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-0" data-color-id="0"/>
@@ -653,11 +718,9 @@
             </we-row>
         </div>
 
-        <t t-call="web_editor.snippet_options_image_optimization_widgets"/>
-
         <we-row string="Transform">
             <we-button class="fa fa-fw fa-crop" data-crop="true" data-no-preview="true" title="Crop Image"/>
-            <we-button class="ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
+            <we-button class="o_we_bg_danger ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
                 Reset
             </we-button>
             <we-button class="fa fa-fw fa-object-ungroup" data-name="image_transform_opt" data-transform="true" data-no-preview="true" title="Transform the picture"/>
@@ -666,6 +729,8 @@
             </we-button>
         </we-row>
 
+        <t t-call="web_editor.snippet_options_image_optimization_widgets"/>
+
         <we-button-group string="Width" data-css-property="width">
             <we-button data-select-style="" title="Resize Default">Default</we-button>
             <we-button data-select-style="25%" title="Resize Quarter">25%</we-button>