From 24a4cb1ce41f225e1f3458cfa76ca3a2573bc589 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Wed, 26 Jul 2023 16:47:45 +0200
Subject: [PATCH] [IMP] web, website_sale: review active light buttons

Prior to this commit, toggle inputs using light color had no active
color.

This commit adds an active state in order to match the other active
colors.

task-3097005

Part-of: odoo/odoo#120302
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/web/static/src/scss/bootstrap_review_frontend.scss | 7 +++++++
 addons/website_sale/views/templates.xml                   | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss
index 5c164c36697..f4b11b3ed35 100644
--- a/addons/web/static/src/scss/bootstrap_review_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_frontend.scss
@@ -59,6 +59,13 @@ $o-btn-outline-border-width-defaults: () !default;
     }
 }
 
+// Highlight '.btn-group's active buttons
+.btn-group .btn-light.active {
+    box-shadow: inset 0 0 0 $border-width $component-active-bg;
+    border-color: transparent;
+    background-color: mix($component-active-bg, $light, 10%);
+}
+
 // Compensate navbar brand padding if no visible border
 @if alpha($navbar-dark-toggler-border-color) < 0.001 {
     .navbar-dark .navbar-toggler {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 5bed5628e43..c825e966056 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -476,7 +476,7 @@
     </template>
 
     <template id="website_sale.add_grid_or_list_option" active="True" name="Grid or List button">
-        <t t-set="_activeClasses">border-primary</t>
+        <t t-set="_activeClasses">active</t>
         <div t-attf-class="o_wsale_apply_layout btn-group ms-3 {{_classes}}" t-att-data-active-classes="_activeClasses">
             <input type="radio" class="btn-check" name="wsale_products_layout" id="o_wsale_apply_grid"  t-att-checked="'checked' if layout_mode != 'list' else None" value="grid"/>
             <label t-attf-class="btn btn-{{navClass}} #{_activeClasses if layout_mode != 'list' else None} o_wsale_apply_grid" title="Grid" for="o_wsale_apply_grid">