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

*: website_form

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

6 files changed, 41 insertions, 22 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 14a2bcfdc57..c5a2a6ef450 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -30,8 +30,11 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
     start: async function () {
         await this._super(...arguments);
         const linkButton = document.createElement('we-button');
-        linkButton.classList.add('o_we_redirect_to', 'fa', 'fa-fw', 'fa-external-link');
+        const icon = document.createElement('i');
+        icon.classList.add('fa', 'fa-fw', 'fa-external-link')
+        linkButton.classList.add('o_we_redirect_to');
         linkButton.title = _t("Redirect to URL in a new tab");
+        linkButton.appendChild(icon);
         this.containerEl.appendChild(linkButton);
         this.el.classList.add('o_we_large_input');
         this.inputEl.classList.add('text-left');
diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js
index a76a0a71f31..fe59cedf4a4 100644
--- a/addons/website/static/src/snippets/s_chart/options.js
+++ b/addons/website/static/src/snippets/s_chart/options.js
@@ -201,7 +201,7 @@ options.registry.InnerChart = options.Class.extend({
      */
     _makeDeleteButton: function (...classes) {
         const rmbuttonEl = options.buildElement('we-button', null, {
-            classes: ['fa', 'fa-fw', 'fa-minus', ...classes],
+            classes: ['o_we_text_danger', 'o_we_link', 'fa', 'fa-fw', 'fa-minus', ...classes],
         });
         const newEl = document.createElement('td');
         newEl.appendChild(rmbuttonEl);
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
index 366b6adf3fd..822531bc38b 100644
--- a/addons/website/views/snippets/s_chart.xml
+++ b/addons/website/views/snippets/s_chart.xml
@@ -48,10 +48,10 @@
                 <table>
                     <tr>
                         <th/>
-                        <th><we-button class="fa fa-fw fa-plus add_column"/></th>
+                        <th><we-button class="add_column fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
                     </tr>
                     <tr>
-                        <th><we-button class="fa fa-fw fa-plus add_row"/></th>
+                        <th><we-button class="add_row fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
                     </tr>
                 </table>
             </we-matrix>
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
index 05df0d245de..3a8d84e9d07 100644
--- a/addons/website/views/snippets/s_rating.xml
+++ b/addons/website/views/snippets/s_rating.xml
@@ -35,7 +35,9 @@
                     data-apply-to=".s_rating_active_icons"
                     data-css-property="color"
                     data-color-prefix="text-"/>
-                <we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true"></we-button>
+                <we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
+                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                </we-button>
             </we-row>
             <we-row string="⌙ Inactive">
                 <we-colorpicker
@@ -43,11 +45,13 @@
                     data-apply-to=".s_rating_inactive_icons"
                     data-css-property="color"
                     data-color-prefix="text-"/>
-                <we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true"></we-button>
+                <we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
+                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                </we-button>
             </we-row>
             <we-row string="Score">
                 <we-input data-active-icons-number="true" data-step="1"/>
-                <span>/</span>
+                <span class="mx-2">/</span>
                 <we-input data-total-icons-number="true" data-step="1"/>
             </we-row>
             <we-button-group string="Size" data-apply-to=".s_rating_icons">
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml
index 1519804080e..9d428170ac1 100644
--- a/addons/website/views/snippets/s_tabs.xml
+++ b/addons/website/views/snippets/s_tabs.xml
@@ -65,16 +65,20 @@
     <xpath expr="." position="inside">
         <div data-js="NavTabs" data-selector="section.s_tabs">
             <we-button data-add-tab=""
-                        data-no-preview="true"
-                        class="fa fa-fw fa-plus"
-                        title="Add Tab"
-                        aria-label="Add Tab"/>
+                       data-no-preview="true"
+                       class="o_we_text_success ml-0"
+                       title="Add Tab"
+                       aria-label="Add Tab">
+                <i class="fa fa-fw fa-plus"/>
+            </we-button>
             <we-button data-remove-tab=""
-                        data-name="remove_tab_opt"
-                        data-no-preview="true"
-                        class="fa fa-fw fa-minus"
-                        title="Remove Tab"
-                        aria-label="Remove Tab"/>
+                       data-name="remove_tab_opt"
+                       data-no-preview="true"
+                       class="o_we_text_danger mr-3"
+                       title="Remove Tab"
+                       aria-label="Remove Tab">
+                <i class="fa fa-fw fa-minus"/>
+            </we-button>
         </div>
         <div data-js="NavTabsStyle" data-selector="section" data-target=".s_tabs_main">
             <we-select string="Style">
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 632df4b44ae..569e4ac2330 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -383,10 +383,18 @@
 
     <div data-js="CarouselItem"
          data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
-        <we-button data-slide="left" data-no-preview="true" class="fa fa-fw fa-angle-left"/>
-        <we-button data-slide="right" data-no-preview="true" class="fa fa-fw fa-angle-right"/>
-        <we-button data-add-slide="true" data-no-preview="true" class="fa fa-fw fa-plus"/>
-        <we-button data-remove-slide="true" data-no-preview="true" class="fa fa-fw fa-minus"/>
+        <we-button data-slide="left" data-no-preview="true">
+            <i class="fa fa-fw fa-angle-left"/>
+        </we-button>
+        <we-button data-slide="right" data-no-preview="true" class="mr-2">
+            <i class="fa fa-fw fa-angle-right"/>
+        </we-button>
+        <we-button data-add-slide="true" data-no-preview="true" class="o_we_text_success">
+            <i class="fa fa-fw fa-plus"/>
+        </we-button>
+        <we-button data-remove-slide="true" data-no-preview="true" class="o_we_text_danger">
+            <i class="fa fa-fw fa-minus"/>
+        </we-button>
     </div>
 
     <!-- Accordion -->
@@ -491,7 +499,7 @@
 
     <div data-js="SnippetSave"
         t-attf-data-selector="#{so_snippet_addition_selector}, #{so_content_addition_selector}">
-        <we-button class="fa fa-fw fa-save o_we_hover_warning"
+        <we-button class="fa fa-fw fa-save o_we_link o_we_hover_warning"
                    title="Save the block to use it elsewhere"
                    data-save-snippet=""
                    data-no-preview="true"/>
@@ -719,7 +727,7 @@
     <div data-js="anchor"
         data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
         data-exclude=".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *">
-        <we-button class="fa fa-fw fa-link"
+        <we-button class="fa fa-fw fa-link o_we_link"
                    title="Create a link to target this section"
                    data-no-preview="true"/>
     </div>