From e1707be5c3d71201c06fb5dddb672106afb17e2f Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 17 Sep 2020 08:23:50 +0000
Subject: [PATCH] [FIX] web_editor, website: reword theme options, highlight
 <we-title>

Reword some theme options, highlight <we-title> components when used as
a "sub-section" titles.

task-2335267

Part-of: #57942
X-original-commit: d6acbfee1834ab32460300b9d7f5dd9188f68014
---
 .../static/src/scss/wysiwyg_snippets.scss     | 11 ++++-
 .../website/static/src/xml/website.editor.xml |  4 +-
 addons/website/views/snippets/snippets.xml    | 49 ++++++++++---------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 9df21022397..b34cf52fd1d 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -162,7 +162,7 @@ body.editor_enable.editor_has_snippets {
     }
 
     &:not([disabled]) {
-        &.active:not(.o_we_no_toggle), &:hover {
+        &.active:not(.o_we_no_toggle):not(.o_we_checkbox_wrapper), &:hover {
             color: $o-we-sidebar-content-field-pressed-color;
         }
 
@@ -546,7 +546,14 @@ body.editor_enable.editor_has_snippets {
             }
 
             > we-title {
-                margin-top: $o-we-sidebar-content-field-spacing;
+                margin-bottom: $o-we-sidebar-content-field-spacing * -0.5;
+                font-size: $o-we-sidebar-font-size + 1;
+                color: $o-we-fg-lighter;
+                font-weight: 500;
+
+                &:not(:first-child) {
+                    margin-top: $o-we-sidebar-content-field-spacing * 2;
+                }
             }
         }
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 07562de1de8..201cc5d5640 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -95,11 +95,11 @@
             <we-colorpicker string="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
         </we-collapse>
         <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
-        <we-row string="Main Buttons">
+        <we-row string="Primary Buttons">
             <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
             <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
         </we-row>
-        <we-row string="Buttons">
+        <we-row string="Secondary Buttons">
             <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
             <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
         </we-row>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 6d43458fa7d..f9f63e3830b 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1098,7 +1098,7 @@
         <we-checkbox string="Show Header"
                      data-customize-website-views="website.option_layout_hide_header|"
                      data-reload="/"/>
-        <we-select string="Layout" data-variable="layout">
+        <we-select string="Page Layout" data-variable="layout">
             <we-button data-customize-website-variable="'full'" data-name="layout_full_opt">Full</we-button>
             <we-button data-customize-website-variable="'boxed'">Boxed</we-button>
             <we-button data-customize-website-variable="'framed'">Framed</we-button>
@@ -1132,40 +1132,41 @@
         </we-collapse>
 
         <!-- Buttons & Links -->
-        <we-select string="Main Buttons" data-variable="btn-primary-outline">
+        <we-title>Buttons</we-title>
+        <we-select string="Primary Style" data-variable="btn-primary-outline" class="">
             <we-button data-customize-website-variable="false">Fill</we-button>
             <we-button data-customize-website-variable="true">Outline</we-button>
         </we-select>
-        <we-select string="Buttons" data-variable="btn-secondary-outline">
+        <we-select string="Secondary Style" data-variable="btn-secondary-outline">
             <we-button data-customize-website-variable="false">Fill</we-button>
             <we-button data-customize-website-variable="true">Outline</we-button>
         </we-select>
         <we-collapse>
-            <we-row string="⌙ Paddings">
+            <we-row string="Paddings">
                 <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y" data-unit="px" data-save-unit="rem"/>
                 <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x" data-unit="px" data-save-unit="rem"/>
             </we-row>
-            <we-row string=" ⌙ Small">
+            <we-row string="⌙ Small">
                 <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-sm" data-unit="px" data-save-unit="rem"/>
                 <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-sm" data-unit="px" data-save-unit="rem"/>
             </we-row>
-            <we-row string=" ⌙ Large">
+            <we-row string="⌙ Large">
                 <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-lg" data-unit="px" data-save-unit="rem"/>
                 <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-lg" data-unit="px" data-save-unit="rem"/>
             </we-row>
         </we-collapse>
         <we-collapse>
-            <we-input string="⌙ Font Size" data-customize-website-variable="" data-variable="btn-font-size" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="btn-font-size-sm" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="btn-font-size-lg" data-unit="px" data-save-unit="rem"/>
+            <we-input string="Font Size" data-customize-website-variable="" data-variable="btn-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="btn-font-size-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="btn-font-size-lg" data-unit="px" data-save-unit="rem"/>
         </we-collapse>
-        <we-input string="⌙ Border Width" data-customize-website-variable="" data-variable="btn-border-width" data-unit="px" data-save-unit="rem"/>>
+        <we-input string="Border Width" data-customize-website-variable="" data-variable="btn-border-width" data-unit="px" data-save-unit="rem"/>>
         <we-collapse>
-            <we-input string="⌙ Border Radius" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="btn-border-radius-sm" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="btn-border-radius-lg" data-unit="px" data-save-unit="rem"/>
+            <we-input string="Border Radius" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="btn-border-radius-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="btn-border-radius-lg" data-unit="px" data-save-unit="rem"/>
         </we-collapse>
-        <we-checkbox string="⌙ Ripple Effect"
+        <we-checkbox string="Ripple Effect"
                      data-customize-website-views="website.option_ripple_effect"
                      data-customize-website-variable="false|true"
                      data-variable="btn-ripple"/>
@@ -1178,29 +1179,29 @@
         <!-- Inputs -->
         <we-title>Inputs</we-title>
         <we-collapse>
-            <we-row string="⌙ Paddings">
+            <we-row string="Paddings">
                 <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y" data-unit="px" data-save-unit="rem"/>
                 <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x" data-unit="px" data-save-unit="rem"/>
             </we-row>
-            <we-row string=" ⌙ Small">
+            <we-row string="⌙ Small">
                 <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-sm" data-unit="px" data-save-unit="rem"/>
                 <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-sm" data-unit="px" data-save-unit="rem"/>
             </we-row>
-            <we-row string=" ⌙ Large">
+            <we-row string="⌙ Large">
                 <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-lg" data-unit="px" data-save-unit="rem"/>
                 <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-lg" data-unit="px" data-save-unit="rem"/>
             </we-row>
         </we-collapse>
         <we-collapse>
-            <we-input string="⌙ Font Size" data-customize-website-variable="" data-variable="input-font-size" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="input-font-size-sm" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="input-font-size-lg" data-unit="px" data-save-unit="rem"/>
+            <we-input string="Font Size" data-customize-website-variable="" data-variable="input-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="input-font-size-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="input-font-size-lg" data-unit="px" data-save-unit="rem"/>
         </we-collapse>
-        <we-input string="⌙ Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>>
+        <we-input string="Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>>
         <we-collapse>
-            <we-input string="⌙ Border Radius" data-customize-website-variable="" data-variable="input-border-radius" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
-            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
+            <we-input string="Border Radius" data-customize-website-variable="" data-variable="input-border-radius" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
         </we-collapse>
 
         <we-row string="Status Colors">