From 8d3baa20feb8c1a0fb5bece6fb8b111d04780593 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Thu, 2 Nov 2023 16:25:29 +0100
Subject: [PATCH] [FIX] web: fix contrast issue in settings mobile view

This commit fixes a contrast and readability issue on the active tab
within Settings on small devices.

Prior to this commit, an active tab on mobile view would use a primary
background, while nothing would be declared for its text color.

This would cause readability issue, with a dark text on a primary
background.

To avoid this kind of issue, we set a `text-bg-primary` class to our
button to ensure it gets readable, and also set a `shadow-none` to
prevent the `tip` of the tab to appear in mobile, since it would use
another color.

task-3580676

closes odoo/odoo#140751

Signed-off-by: Luca Vitali (luvi) <luvi@odoo.com>
---
 .../src/webclient/settings_form_view/settings/settings_page.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
index ddbd72a860b..7663c8166f7 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
@@ -7,7 +7,7 @@
                     <t t-foreach="props.modules" t-as="module" t-key="module.key">
                         <div class="tab" t-if="!module.isVisible"
                              t-att-class="{
-                                'selected': state.selectedTab === module.key and state.search.value.length === 0, 'position-sticky start-0 end-0 bg-primary z-index-1': state.selectedTab === module.key and state.search.value.length === 0 and env.isSmall
+                                'selected': state.selectedTab === module.key and state.search.value.length === 0, 'position-sticky start-0 end-0 text-bg-primary z-index-1 shadow-none': state.selectedTab === module.key and state.search.value.length === 0 and env.isSmall
                              }" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
                             <div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>
                         </div>