[IMP] web_editor: review dropdown design

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

2 files changed, 29 insertions, 6 deletions

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 b36190c1e12..1d1d63344b9 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -61,11 +61,14 @@ $o-we-dropdown-bg: $o-we-bg-darker !default;
 $o-we-dropdown-border-width: 1px !default;
 $o-we-dropdown-border-color: $o-we-bg-darkest !default;
 $o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
-$o-we-dropdown-item-height: 30px !default;
+$o-we-dropdown-item-height: 34px !default;
 $o-we-dropdown-item-spacing: 1px !default;
-$o-we-dropdown-item-bg: $o-we-bg-light !default;
+$o-we-dropdown-item-bg: $o-we-bg-lighter !default;
+$o-we-dropdown-item-bg-hover: $o-we-bg-light !default;
 $o-we-dropdown-item-color: $o-we-fg-dark !default;
-$o-we-dropdown-item-active-color: $o-we-fg-light !default;
+$o-we-dropdown-item-hover-color: $o-we-fg-light !default;
+$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default;
+$o-we-dropdown-item-active-color: $o-we-fg-lighter !default;
 
 $o-we-sidebar-bg: $o-we-bg !default;
 $o-we-sidebar-color: $o-we-color !default;
@@ -139,12 +142,15 @@ $o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
 $o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
 $o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
 $o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
+$o-we-sidebar-content-field-dropdown-item-bg-hover: $o-we-dropdown-item-bg-hover !default;
 $o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
+$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default;
+$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default;
 $o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
 
 $o-we-sidebar-content-field-colorpicker-size: 20px !default;
 $o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
-$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-light !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default;
 $o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default;
 $o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default;
 $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 0783075f41a..7dc6f64ecbe 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -343,8 +343,12 @@ body.editor_enable.editor_has_snippets {
                 background-color: $o-we-sidebar-content-field-dropdown-bg;
                 box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
             }
-            &.active + * {
-                display: block !important;
+            &.active {
+                @include we-icon-button('\f0d8');
+
+                + * {
+                    display: block !important;
+                }
             }
         }
         %we-icon-button {
@@ -549,6 +553,10 @@ body.editor_enable.editor_has_snippets {
                     background-color: $o-we-sidebar-content-field-dropdown-item-bg;
                     color: $o-we-sidebar-content-field-dropdown-item-color;
 
+                    > we-title {
+                        flex-grow: 1;
+                    }
+
                     > div {
                         line-height: $o-we-sidebar-content-field-dropdown-item-height;
                     }
@@ -562,9 +570,18 @@ body.editor_enable.editor_has_snippets {
                         border-top: $o-we-sidebar-content-field-dropdown-item-spacing solid transparent;
                     }
 
+                    &:hover {
+                        background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
+                        color: $o-we-sidebar-content-field-dropdown-item-hover-color;
+                    }
                     &.active {
                         @include we-icon-button('\f00c', $align: left);
+                        background-color: $o-we-sidebar-content-field-dropdown-item-active-bg;
                         color: $o-we-sidebar-content-field-dropdown-item-active-color;
+
+                        &:after {
+                            color: $o-we-accent;
+                        }
                     }
                 }
             }