[IMP] web_editor: refine overlay handlers design and behavior

Part of https://github.com/odoo/odoo/pull/55959
task-2157252

3 files changed, 50 insertions, 30 deletions

diff --git a/addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg b/addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg
new file mode 100644
index 00000000000..7d701fa3ef1
--- /dev/null
+++ b/addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g fill="none" fill-rule="evenodd" class="o_overlay_move_drag">
+    <g fill="#FFF" class="group" transform="translate(3.5 6)">
+      <polygon points="0 0 0 3 3 3 3 0" class="o_graphic"/>
+      <polygon points="5 0 5 3 8 3 8 0" class="o_graphic"/>
+      <polygon points="10 0 10 3 13 3 13 0" class="o_graphic"/>
+      <polygon points="0 5 0 8 3 8 3 5" class="o_graphic"/>
+      <polygon points="5 5 5 8 8 8 8 5" class="o_graphic"/>
+      <polygon points="10 5 10 8 13 8 13 5" class="o_graphic"/>
+    </g>
+  </g>
+</svg>
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 55faa0a39f0..17b5f1aba7d 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -27,14 +27,14 @@ $o-we-bg: $o-we-bg-light !default;
 $o-we-color: $o-we-fg-light !default;
 $o-we-font-size: 13px !default;
 $o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
-$o-we-accent: #00ABC1 !default;
+$o-we-accent: #01bad2 !default;
 $o-we-border-width: 1px !default;
 $o-we-border-color: $o-we-bg-light !default;
 
 $o-we-ace-color: #2F3129 !default;
 
 $o-we-handles-offset-to-hide: 10000px !default;
-$o-we-handles-btn-size: 18px !default;
+$o-we-handles-btn-size: 20px !default;
 $o-we-handles-accent-color: $o-we-accent !default;
 $o-we-handles-accent-color-preview: $o-enterprise-color !default;
 $o-we-handle-edge-size: 8px !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 9710edfb17b..cca8b4600c0 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1336,14 +1336,19 @@ body.editor_enable.editor_has_snippets {
                     display: block;
                     width: $o-we-handles-btn-size;
                     height: $o-we-handles-btn-size;
-                    border: solid 1px darken($o-we-handles-accent-color, 10%);
+                    border: solid 1px darken($o-we-handles-accent-color, 20%);
                     line-height: $o-we-handles-btn-size - 2;
                     font-size: 14px;
                     font-family: FontAwesome;
-                    background-color: darken($o-we-handles-accent-color, 20%);
+                    background-color: darken($o-we-handles-accent-color, 10%);
                     color: white;
                 }
 
+                &.o_handle_start:after {
+                    background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6);
+                    border-color: rgba($o-we-sidebar-content-field-border-color, .2);
+                }
+
                 &:hover,
                 &.o_active {
                     background-color: rgba($o-we-handles-accent-color, 0.2);
@@ -1409,35 +1414,38 @@ body.editor_enable.editor_has_snippets {
 
                 > div {
                     display: flex;
-                    align-items: center;
 
                     > * {
-                        margin: 0 2px;
-                        border: 1px solid #999999;
-                        border-radius: 20%;
-                        color: #999999;
-                        opacity: 0.5;
-                        transition: opacity 400ms ease 0s;
-                        cursor: pointer;
-
-                        &:hover {
-                            opacity: 1;
-                        }
+                        @extend %we-generic-button;
+                        margin: 0 1px 0;
+                        min-width: 22px;
+                        padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5;
+                        color: $o-we-fg-lighter;
                     }
-                }
-            }
-
-            .o_overlay_move_options {
-                .o_move_handle {
-                    padding: 3px 4px;
-                    cursor: move;
-
-                    &::before, &::after {
-                        content: '\f141';
-                        display: block;
-                        font-family: FontAwesome;
-                        font-size: 0.8em;
-                        line-height: 0.4em;
+                    .o_move_handle {
+                        cursor: move;
+                        width: 30px;
+                        height: 22px;
+                        background-image: url('/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg');
+                        background-position: center;
+                        background-repeat: no-repeat;
+                    }
+                    .o_delete_button {
+                        margin-left: $o-we-sidebar-content-field-button-group-button-spacing;
+                        background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);;
+                    }
+                    &:hover {
+                        > * {
+                            @include o-hover-opacity(.6);
+                        }
+                        we-button:hover, .o_move_handle:hover {
+                            border-color: mix($o-we-handles-accent-color, $o-we-sidebar-content-field-pressed-bg, .4);
+                            background-color: $o-we-sidebar-content-field-pressed-bg;
+                        }
+                        .o_delete_button:hover {
+                            border-color: mix($o-we-color-danger, $o-we-sidebar-content-field-pressed-bg, .4);
+                            background-color: $o-we-color-danger;
+                        }
                     }
                 }
             }