[REF] web_editor, website: allow reusing tabs design

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

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -81,7 +81,7 @@ $o-we-sidebar-top-height: 26px !default;
 
 $o-we-sidebar-tabs-border-width: $o-we-sidebar-border-width !default;
 $o-we-sidebar-tabs-border-color: $o-we-sidebar-border-color !default;
-$o-we-sidebar-tabs-height: $o-we-sidebar-tabs-border-width + 29px !default;
+$o-we-sidebar-tabs-size-ratio: 1 !default;
 $o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
 $o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
 $o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -151,6 +151,28 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+%we-generic-tab-button {
+    @extend %we-generic-link;
+    @include o-text-overflow(inline-flex);
+    flex: 1 1 auto;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-size: 1.1em;
+    font-weight: normal;
+
+    > span {
+        display: inline-block;
+        $-r: $o-we-sidebar-tabs-size-ratio;
+        padding: (0.6em * $-r) (0.4em * $-r) (0.5em * $-r);
+    }
+    &.active > span {
+        color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color;
+        box-shadow: inset 0 ($o-we-sidebar-tabs-active-border-width * -1) 0 $o-we-sidebar-tabs-active-border-color;
+    }
+}
+
 // SNIPPET PANEL
 #oe_snippets {
     @include o-w-preserve-btn;
@@ -180,30 +202,13 @@ body.editor_enable.editor_has_snippets {
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
-        height: $o-we-sidebar-tabs-height;
         border: solid $o-we-sidebar-tabs-border-color;
         border-width: $o-we-sidebar-tabs-border-width 0;
         background: $o-we-sidebar-tabs-bg;
         color: $o-we-sidebar-tabs-color;
 
         > button {
-            flex: 1 1 auto;
-            border: none;
-            background: transparent;
-            color: inherit;
-            font-weight: inherit; // Don't know why but does not work without it
-            @include o-text-overflow();
-
-            &:disabled {
-                color: $o-we-sidebar-tabs-disabled-color;
-            }
-
-            &.active,
-            &:focus, &:active, &:focus:active {
-                border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
-                color: $o-we-sidebar-tabs-active-color;
-                outline: none;
-            }
+            @extend %we-generic-tab-button;
         }
     }
 

addons/web_editor/views/snippets.xml

@@ -2,14 +2,14 @@
 <odoo>
 <template id="snippets" groups="base.group_user">
     <div id="snippets_menu">
-        <button type="button" class="o_we_add_snippet_btn active" accesskey="1">
-            Blocks
+        <button type="button" tabindex="1" class="o_we_add_snippet_btn active text-uppercase" accesskey="1">
+            <span>Blocks</span>
         </button>
         <t t-set="customize_title">Click in the page to customize</t>
-        <button type="button" class="o_we_customize_snippet_btn"
+        <button type="button" tabindex="2" class="o_we_customize_snippet_btn text-uppercase"
                 t-att-data-title="customize_title"
                 disabled="disabled">
-            Style
+            <span>Style</span>
         </button>
     </div>
 

addons/website/views/snippets/snippets.xml

@@ -4,10 +4,10 @@
 <!-- Snippets menu -->
 <template id="snippets" inherit_id="web_editor.snippets" primary="True" groups="base.group_user">
     <xpath expr="//div[@id='snippets_menu']" position="inside">
-        <button type="button" class="o_we_customize_theme_btn"
+        <button type="button" tabindex="3" class="o_we_customize_theme_btn text-uppercase"
                 data-title="Customize your theme"
                 groups="website.group_website_designer" accesskey="2">
-            Options
+            <span>Options</span>
         </button>
     </xpath>
     <xpath expr="//t[@id='default_snippets']" position="replace">