From d7dc57f23cd1f029340cc747d4ece8e3b0b7be72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Sun, 16 Feb 2025 11:54:09 +0100
Subject: [PATCH] improve css

---
 addons/html_builder/static/src/builder.scss   | 15 +++++++++++--
 addons/html_builder/static/src/builder.xml    | 16 +++++++-------
 .../static/src/sidebar/block_tab.scss         | 18 +++++++++++++++
 .../static/src/sidebar/block_tab.xml          | 18 +++++++--------
 .../static/src/sidebar/option_container.scss  | 22 +++++++++++++++++++
 .../static/src/sidebar/option_container.xml   |  6 ++---
 6 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 addons/html_builder/static/src/sidebar/option_container.scss

diff --git a/addons/html_builder/static/src/builder.scss b/addons/html_builder/static/src/builder.scss
index 27eb573fcd668..ac594a24efd33 100644
--- a/addons/html_builder/static/src/builder.scss
+++ b/addons/html_builder/static/src/builder.scss
@@ -1,11 +1,11 @@
 .o-snippets-menu {
-    background-color: #191922;
+    background-color: $o-we-bg-darker;
     color: #d9d9d9;
     width: 288px;
 }
 
 .o-snippets-top-actions {
-    border-bottom: 1px solid gray;
+    border-bottom: 1px solid $o-we-bg-lighter;
     height: 46px;
 
     .btn {
@@ -37,11 +37,22 @@
 }
 
 .o-snippets-tabs {
+    font-size: 12px;
+    line-height: 24px;
+
+    > button {
+        color: $o-we-color;
+    }
     .active {
         box-shadow: inset 0 -2px 0 #01bad2;
     }
 }
 
+.o-tab-content {
+    background-color: $o-we-bg-dark;
+    font-size: 12px;
+}
+
 .we-bg-darker {
     background-color: #2b2b33;
 }
diff --git a/addons/html_builder/static/src/builder.xml b/addons/html_builder/static/src/builder.xml
index e77262052ca2d..c328f25c62f0e 100644
--- a/addons/html_builder/static/src/builder.xml
+++ b/addons/html_builder/static/src/builder.xml
@@ -14,18 +14,18 @@
                 <button type="button" t-on-click="save" class="btn btn-primary" data-action="save" accesskey="s">Save</button>
             </div>
         </div>
-        <div class="o-snippets-tabs d-flex justify-content-between mt-2 p-2 text-uppercase flex-shrink-0">
-            <button class="px-2 cursor-pointer pb-1 pe-auto bg-transparent text-white border-0" t-att-class="{'active': state.activeTab === 'blocks'}" t-on-click="() => this.setTab('blocks')" t-att-disabled="props.isTranslation">
-                <span>BLOCKS</span>
+        <div class="o-snippets-tabs d-flex justify-content-between mt-2 p-2 pb-0 flex-shrink-0">
+            <button class="px-2 cursor-pointer pb-1 pe-auto bg-transparent text-uppercase border-0" t-att-class="{'active text-white': state.activeTab === 'blocks'}" t-on-click="() => this.setTab('blocks')" t-att-disabled="props.isTranslation">
+                <span class="ps-1">Blocks</span>
             </button>
-            <button class="px-2 cursor-pointer pb-1 bg-transparent text-white border-0" t-att-class="{'active': state.activeTab === 'customize'}" t-on-click="() => this.setTab('customize')">
-                <span>CUSTOMIZE</span>
+            <button class="px-2 cursor-pointer pb-1 bg-transparent text-uppercase border-0" t-att-class="{'active text-white': state.activeTab === 'customize'}" t-on-click="() => this.setTab('customize')">
+                <span>Customize</span>
             </button>
-            <button class="px-2 cursor-pointer pb-1 bg-transparent text-white border-0" t-att-class="{'active': state.activeTab === 'theme'}" t-on-click="() => this.setTab('theme')" t-att-disabled="props.isTranslation">
-                <span>THEME</span>
+            <button class="px-2 cursor-pointer pb-1 bg-transparent text-uppercase border-0" t-att-class="{'active text-white': state.activeTab === 'theme'}" t-on-click="() => this.setTab('theme')" t-att-disabled="props.isTranslation">
+                <span class="pe-1">Theme</span>
             </button>
         </div>
-        <div class="overflow-auto flex-grow-1 pt-1">
+        <div class="o-tab-content overflow-y-auto overflow-x-hidden flex-grow-1 pt-1">
             <t t-if="state.activeTab === 'blocks'">
                 <BlockTab />
             </t>
diff --git a/addons/html_builder/static/src/sidebar/block_tab.scss b/addons/html_builder/static/src/sidebar/block_tab.scss
index 66972ebc26b9e..dcf5867019a2e 100644
--- a/addons/html_builder/static/src/sidebar/block_tab.scss
+++ b/addons/html_builder/static/src/sidebar/block_tab.scss
@@ -1,6 +1,24 @@
 .o-snippets-menu {
+
+    .o-section {
+        padding-left: 6px;
+    }
+    .o-block-container {
+        > .row {
+            margin-right: 2px;
+        }
+    }
+    .o-draggable-block {
+        padding: 1px;
+    }
     .block {
         background-color: rgba(62, 62, 70, 0.9);
+        color: $o-we-color;
+
+        &:hover {
+            background: $o-we-dropdown-item-bg-hover;
+            color: $o-we-dropdown-item-hover-color;
+        }
 
         &.to_install {
             .img-container {
diff --git a/addons/html_builder/static/src/sidebar/block_tab.xml b/addons/html_builder/static/src/sidebar/block_tab.xml
index 551ab6ff89d8a..f66ca64cde0a0 100644
--- a/addons/html_builder/static/src/sidebar/block_tab.xml
+++ b/addons/html_builder/static/src/sidebar/block_tab.xml
@@ -2,38 +2,38 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BlockTab">
-    <div>Categories</div>
-    <div class="container">
+    <div class="ps-2 mt-3 mb-1">Categories</div>
+    <div class="o-block-container container ms-2 mt-2">
         <div class="row">
-            <div t-foreach="this.snippetModel.snippetGroups" t-as="snippet" t-key="snippet.id" class="col-4 p-1 o_draggable" t-att-data-category="'snippet_groups'" t-att-data-id="snippet.id">
+            <div t-foreach="this.snippetModel.snippetGroups" t-as="snippet" t-key="snippet.id" class="o-draggable-block col-4 o_draggable" t-att-data-category="'snippet_groups'" t-att-data-id="snippet.id">
                 <div class="w-100 h-100 d-flex flex-column block" t-att-class="snippet.moduleId ? 'to_install' : '' " t-on-click="() => this.openSnippetDialog(snippet)">
                     <div class="img-container">
                         <img t-att-src="snippet.thumbnailSrc" class="w-100"/>
                         <button t-if="snippet.moduleId" class="btn btn-primary" t-on-click="() => this.snippetModel.installSnippetModule(snippet)">Install</button>
                     </div>
-                    <span class="text-center" t-esc="snippet.title"/>
+                    <span class="text-center pt-1 pb-2" t-esc="snippet.title"/>
                 </div>
             </div>
         </div>
     </div>
 
     <t t-if="this.snippetModel.hasCustomInnerContents">
-        <div class="mt-1">Custom Inner Content</div>
+        <div class="o-section mt-3 mb-1">Custom Inner Content</div>
         <t t-foreach="this.snippetModel.snippetCustomInnerContents" t-as="snippet" t-key="snippet.id">
             <CustomInnerSnippet snippet="snippet" snippetModel="this.snippetModel"/>
         </t>
     </t>
 
-    <div class="mt-1">Inner Content</div>
-    <div class="container">
+    <div class="o-section mt-4 mb-1">Inner Content</div>
+    <div class="o-block-container container m-2 mt-2">
         <div class="row">
-            <div t-foreach="this.snippetModel.snippetInnerContents" t-as="snippet" t-key="snippet.id" class="col-4 p-1 o_draggable" t-att-name="snippet.title" t-att-data-category="'snippet_content'" t-att-data-id="snippet.id">
+            <div t-foreach="this.snippetModel.snippetInnerContents" t-as="snippet" t-key="snippet.id" class="o-draggable-block col-4 o_draggable" t-att-name="snippet.title" t-att-data-category="'snippet_content'" t-att-data-id="snippet.id">
                 <div class="w-100 h-100 d-flex flex-column block" t-att-class="snippet.moduleId ? 'to_install' : '' ">
                     <div class="img-container">
                         <img t-att-src="snippet.thumbnailSrc" class="w-100"/>
                         <button t-if="snippet.moduleId" class="btn btn-primary" t-on-click="() => this.snippetModel.installSnippetModule(snippet)">Install</button>
                     </div>
-                    <span class="text-center" t-esc="snippet.title"/>
+                    <span class="text-center pt-1 pb-2" t-esc="snippet.title"/>
                 </div>
             </div>
         </div>
diff --git a/addons/html_builder/static/src/sidebar/option_container.scss b/addons/html_builder/static/src/sidebar/option_container.scss
new file mode 100644
index 0000000000000..640a802c79885
--- /dev/null
+++ b/addons/html_builder/static/src/sidebar/option_container.scss
@@ -0,0 +1,22 @@
+.options-container {
+    .btn-primary {
+        background-color: $o-we-bg-lightest !important;
+        color: $o-we-fg-light;
+        font-size: 12px;
+        padding: 0px 6px;
+        border: none;
+
+        &.active {
+            color: $o-we-fg-lighter;
+            background-color: $o-we-bg-light !important;
+
+        }
+    }
+
+    .we-bg-options-container {
+        > div {
+            margin-top: 1px;
+            margin-bottom: 1px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/html_builder/static/src/sidebar/option_container.xml b/addons/html_builder/static/src/sidebar/option_container.xml
index e2594a86fc9af..50fd47d8994dd 100644
--- a/addons/html_builder/static/src/sidebar/option_container.xml
+++ b/addons/html_builder/static/src/sidebar/option_container.xml
@@ -5,9 +5,9 @@
     <div t-if="props.options.length"
          class="options-container" t-ref="root" t-att-data-container-title="title"
          t-on-mouseenter="onMouseEnter" t-on-mouseleave="onMouseLeave">
-        <div class="we-bg-darker p-1">
+        <div class="we-bg-darker p-2">
                 <!-- TODO change the structure so the clickable surface is bigger -->
-            <span t-out="title" role="button" t-on-click="selectElement"/>
+            <span class="ps-2 text-white" t-out="title" role="button" t-on-click="selectElement"/>
                 <!-- TODO CSS + remove temporary BS classes -->
             <div class="float-end">
                 <div class="me-3 d-inline">
@@ -39,7 +39,7 @@
                 </t>
             </div>
         </div>
-        <div class="we-bg-options-container" t-ref="content">
+        <div class="we-bg-options-container p-1 pb-3" t-ref="content">
             <t t-foreach="props.options" t-as="option" t-key="option.id">
                 <BuilderContext applyTo="option.applyTo">
                     <t t-if="option.OptionComponent" t-component="option.OptionComponent" t-props="option.props || {}"></t>