[IMP] web_editor, website, *: adjust general ui spacing/alignment

*: website_form

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

5 files changed, 74 insertions, 75 deletions

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 e5c1108695c..83ec0c58530 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1351,13 +1351,15 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
      */
     async start() {
         await this._super(...arguments);
+        const iconEl = document.createElement('i');
         if (this.options.dataAttributes.buttonStyle) {
-            const iconEl = document.createElement('i');
             iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
-            this.containerEl.appendChild(iconEl);
         } else {
-            this.el.classList.add('fa', 'fa-fw', 'fa-edit');
+            iconEl.classList.add('fa', 'fa-fw', 'fa-refresh', 'mr-1');
+            this.el.classList.add('o_we_no_toggle');
+            this.containerEl.textContent = _t("Replace media");
         }
+        $(this.containerEl).prepend(iconEl);
     },
 
     //--------------------------------------------------------------------------
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 73247077c8b..ca8f9e6a080 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -50,14 +50,14 @@ $o-we-translated-content-color: rgb(120, 215, 110) !default;
 
 $o-we-toolbar-height: 32px !default;
 
-$o-we-item-spacing: 7px !default;
+$o-we-item-spacing: 8px !default;
 $o-we-item-border-width: 1px !default;
 $o-we-item-border-color: $o-we-bg-darkest !default;
-$o-we-item-border-radius: 1px !default;
+$o-we-item-border-radius: 2px !default;
 $o-we-item-clickable-bg: $o-we-bg-lightest!default;
 $o-we-item-clickable-color: $o-we-fg-light!default;
 $o-we-item-clickable-hover-bg: $o-we-bg-dark!default;
-$o-we-item-pressed-bg: $o-we-bg-darker !default;
+$o-we-item-pressed-bg: $o-we-bg-light !default;
 $o-we-item-pressed-color: $o-we-fg-lighter !default;
 
 $o-we-item-standup-color-light: $o-we-fg-lighter;
@@ -109,6 +109,7 @@ $o-we-sidebar-content-gutter-item-indent: 5px !default;
 $o-we-sidebar-content-padding-base: 10px !default;
 $o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
 $o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
+$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default;
 
 $o-we-sidebar-content-main-title-height: 32px !default;
 $o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
@@ -125,8 +126,9 @@ $o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
 $o-we-sidebar-content-field-control-item-size: 1em !default;
 $o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
 $o-we-sidebar-content-field-label-spacing: 6px !default;
-$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-field-label-spacing + 102px !default;
-$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing !default;
+
+$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default;
+$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default;
 $o-we-sidebar-content-field-height: 22px !default;
 
 $o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
@@ -163,13 +165,12 @@ $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
 $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
 
 $o-we-sidebar-content-field-input-max-width: 60px !default;
-$o-we-sidebar-content-field-input-bg: $o-we-bg-darker !default;
+$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
 $o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $o-we-sidebar-content-field-input-unit-font-size: 11px !default;
 $o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
 
-// This value allows 5 fa icons (fit one row exactly with this)
-$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.2 !default;
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing;
 
 $o-we-sidebar-content-field-progress-height: 4px !default;
 $o-we-sidebar-content-field-progress-control-height: 10px !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index a1c884afbdc..e79f8013ad0 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -116,16 +116,9 @@ body.editor_enable.editor_has_snippets {
     &[disabled] {
         opacity: .5;
     }
-}
-
-%we-generic-link {
-    color: $o-we-sidebar-content-field-color;
-    @include we-svg-icon();
-    @extend %we-generic-clickable;
 
     &:not([disabled]) {
-        &.active, &:hover {
-            @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
+        &.active:not(.o_we_no_toggle), &:hover {
             color: $o-we-sidebar-content-field-pressed-color;
         }
 
@@ -135,7 +128,12 @@ body.editor_enable.editor_has_snippets {
             'warning': $o-we-color-warning,
             'danger': $o-we-color-danger,
         );
+
         @each $name, $color in $-hover-colors {
+            &.o_we_text_#{$name} {
+                color: $color;
+            }
+
             &.o_we_hover_#{$name}:hover {
                 color: $color;
             }
@@ -143,6 +141,18 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+%we-generic-link {
+    color: $o-we-sidebar-content-field-color;
+    @include we-svg-icon();
+    @extend %we-generic-clickable;
+
+    &:not([disabled]) {
+        &.active, &:hover {
+            @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
+        }
+    }
+}
+
 %we-generic-button {
     @extend %we-generic-clickable;
     @include o-text-overflow(block);
@@ -151,17 +161,15 @@ body.editor_enable.editor_has_snippets {
     padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
     border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
     border-radius: $o-we-sidebar-content-field-border-radius;
-    background: $o-we-sidebar-content-field-clickable-bg;
+    background-color: $o-we-sidebar-content-field-clickable-bg;
     color: $o-we-sidebar-content-field-clickable-color;
 
-    &:not([disabled]):hover {
+    &:not([disabled]):hover, &.active:not(.o_we_no_toggle) {
         @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
-        color: $o-we-sidebar-content-field-pressed-color;
     }
 
-    &.active {
-        background: $o-we-sidebar-content-field-pressed-bg;
-        color: $o-we-sidebar-content-field-pressed-color;
+    &.active:not(.o_we_no_toggle) {
+        background-color: $o-we-sidebar-content-field-pressed-bg;
     }
 }
 
@@ -171,7 +179,7 @@ body.editor_enable.editor_has_snippets {
     flex: 1 1 auto;
     justify-content: center;
     border: none;
-    background: transparent;
+    background-color: transparent;
     color: inherit;
     font-weight: normal;
 
@@ -214,7 +222,7 @@ body.editor_enable.editor_has_snippets {
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
-        background: $o-we-sidebar-tabs-bg;
+        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;
 
@@ -228,6 +236,7 @@ body.editor_enable.editor_has_snippets {
         position: relative;
         width: 100%;
         padding: $o-we-sidebar-blocks-content-spacing;
+        background-color: $o-we-bg-lighter;
 
         .o_snippet_search_filter_input {
             width: 100%;
@@ -366,38 +375,24 @@ body.editor_enable.editor_has_snippets {
 
         @mixin large-component() {
             flex: 1 1 auto;
-            width: ($o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent) * 0.5;
+            width: $o-we-sidebar-content-available-room * .6;
         }
 
         we-button, we-toggler {
             @extend %we-generic-button;
-            text-align: left;
-
-            &.fa {
-                display: inline-block;
-                padding: 0;
-                border: none;
-                background: none;
-                text-align: center;
-
-                &.fa-times, &.fa-minus {
-                    color: $o-we-color-danger;
-                }
-                &.fa-plus {
-                    color: $o-we-color-success;
-                }
-
-                &.active {
-                    padding: 0;
+        }
 
-                    &::after {
-                        display: none;
-                    }
-                }
-            }
+        we-button.o_we_link {
+            @extend %we-generic-link;
+            margin-top: 0;
+            border: 0;
+            padding: 0;
+            background: 0;
         }
+
         we-toggler {
             @include we-icon-button('\f0d7');
+            text-align: left;
 
             + * {
                 display: none !important;
@@ -407,7 +402,6 @@ body.editor_enable.editor_has_snippets {
             }
             &.active {
                 @include we-icon-button('\f0d8');
-
                 + * {
                     display: block !important;
                 }
@@ -434,7 +428,7 @@ body.editor_enable.editor_has_snippets {
             position: relative;
             display: block;
             padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
-            background: $o-we-bg-lighter;
+            background-color: $o-we-bg-lighter;
             box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
 
             > we-title {
@@ -442,7 +436,7 @@ body.editor_enable.editor_has_snippets {
                 align-items: center;
                 margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent);
                 padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
-                background: $o-we-bg-light;
+                background-color: $o-we-bg-light;
                 box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
                 font-size: $o-we-sidebar-content-main-title-font-size;
 
@@ -453,7 +447,7 @@ body.editor_enable.editor_has_snippets {
 
                 > we-top-button-group {
                     flex: 0 0 auto;
-                    display: block;
+                    display: flex;
                     margin-left: auto;
                     font-size: .9em;
 
@@ -461,20 +455,13 @@ body.editor_enable.editor_has_snippets {
                         font-size: 1.2em;
                     }
 
-                    > * {
+                    we-button {
                         margin-left: $o-we-sidebar-content-field-multi-spacing;
-                    }
-                    > we-customizeblock-option {
-                        &, .fa {
-                            display: inline-block !important;
-                        }
-                        .fa {
-                            margin: 0;
-                        }
-                    }
+                        padding: 0 $o-we-sidebar-content-field-multi-spacing;
 
-                    .fa {
-                        @extend %we-generic-link;
+                        &.fa {
+                            margin-left: $o-we-sidebar-content-field-label-spacing;
+                        }
                     }
                 }
             }
@@ -548,7 +535,7 @@ body.editor_enable.editor_has_snippets {
         }
 
         // Checkboxes
-        .o_we_checkbox_wrapper.o_we_user_value_widget {
+        we-button.o_we_checkbox_wrapper.o_we_user_value_widget {
             padding: 0;
             border: none;
             background: none;
@@ -621,6 +608,10 @@ body.editor_enable.editor_has_snippets {
                     border-right-width: ($o-we-item-spacing - 1px);
                 }
             }
+            &:not(.o_we_so_color_palette) + we-button:not(:hover) {
+                background: none;
+            }
+
             we-selection-items {
                 @include o-position-absolute(100%, 0, auto, 0);
                 z-index: $zindex-dropdown;
@@ -725,8 +716,8 @@ body.editor_enable.editor_has_snippets {
             we-button {
                 display: flex;
                 justify-content: center;
-                flex: 0 1 percentage(1/3);
-                padding: 0 2px;
+                flex: 0 1 percentage(1/4);
+                padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3);
                 text-align: center;
             }
         }
@@ -744,6 +735,10 @@ body.editor_enable.editor_has_snippets {
                 &:focus-within {
                     border-color: $o-we-sidebar-content-field-input-border-color;
                 }
+
+                > we-button { // for input-group
+                    border: none;
+                }
             }
 
             &.o_we_large_input > div {
@@ -862,7 +857,7 @@ body.editor_enable.editor_has_snippets {
             input[type="range"] {
                 @include large-component();
                 height: $o-we-sidebar-content-field-height;
-                padding: 0;
+                padding: 0 $o-we-item-border-width 0 0;
                 background-color: transparent;
                 appearance: none;
 
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index f2eaf597fcd..673ba9ea5f6 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -24,10 +24,10 @@
             <we-title>
                 <span t-esc="name"/>
                 <we-top-button-group>
-                    <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_hover_success"
+                    <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_link o_we_hover_success"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
-                    <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_hover_danger"
+                    <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_link o_we_hover_danger"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
                 </we-top-button-group>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index e284a024b48..0b0508b8317 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -116,8 +116,9 @@
                     <we-button data-background-type="cover">Cover</we-button>
                     <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
                 </we-select>
-                <we-button class="fa fa-fw fa-crosshairs" title="Background Position"
-                        data-background-position-overlay="true" data-no-preview="true"/>
+                <we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
+                    <i class="fa fa-fw fa-crosshairs"/>
+                </we-button>
             </we-row>
             <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
                 <!-- &emsp; -->