[IMP] web_editor, website: review color combination preview

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

3 files changed, 5 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 2497827250c..0783075f41a 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -981,10 +981,12 @@ body.editor_enable.editor_has_snippets {
     @extend %o-preview-alpha-background;
     font-family: sans-serif !important;
     font-size: 16px !important;
+    padding: $o-we-sidebar-content-field-spacing * 1.6;
 }
 .o_we_cc_preview_wrapper > * {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
+    line-height: .8 !important;
 }
 .o_we_color_combination_btn_text {
     color: inherit !important;
@@ -995,7 +997,7 @@ body.editor_enable.editor_has_snippets {
     font-size: 1em !important;
 }
 .o_we_color_combination_btn_btn {
-    padding: 0 1px !important;
+    padding: 3px 3px 2px !important;
     border-radius: 2px !important;
     font-size: 0.8em !important;
 }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index d56b07bd140..f62c855d6f6 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -68,7 +68,7 @@
         </button>
     </t>
     <t t-name="web_editor.color.combination.preview">
-        <div class="o_we_cc_preview_wrapper d-flex justify-content-between align-items-end">
+        <div class="o_we_cc_preview_wrapper d-flex justify-content-between align-items-center">
             <h1 class="o_we_color_combination_btn_title">Title</h1>
             <p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
             <span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index c7dc9f75f98..380d5f90638 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1048,7 +1048,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             togglerEl.classList.add('pt-0', 'pb-0', 'pl-0');
             const divEl = document.createElement('div');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
-            ccPreviewEl.classList.add('p-1', 'text-center', `o_cc${i}`);
+            ccPreviewEl.classList.add('text-center', `o_cc${i}`);
             divEl.appendChild(ccPreviewEl);
             togglerEl.appendChild(divEl);
             ccEl.appendChild(togglerEl);