From 70a405164605eed63f9037ab11633d01963500a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20De=20Caluw=C3=A9?= <tdc@odoo.com>
Date: Tue, 22 Aug 2023 08:41:17 +0000
Subject: [PATCH] [FIX] web: support dark mode in field selector popover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch to using scss variables instead of hardcoded colors to support dark mode
in field selector popover.

Steps to reproduce:
Turn on Dark mode. Open Automated actions and add a model. Edit domain and
start typing: text is white on white, the popover does not adapt to dark mode.

opw-3453065

closes odoo/odoo#134458

X-original-commit: 5a57bd799688ee7a2c2e29d775fda73bba34c777
Signed-off-by: Tom De Caluwé (tdc) <tdc@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
---
 .../model_field_selector_popover.scss         | 41 +++++++------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
index 5f24d88f1af..c699d543cbc 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
@@ -9,18 +9,18 @@
 
 .o_model_field_selector_popover {
     width: 265px;
-    background: white;
-    --o-input-background-color: white;
+    background-color: $dropdown-bg;
+    --o-input-background-color: #{$dropdown-bg};
 
     &:focus {
         outline: none;
     }
 
-    .o_model_field_selector_popover_header {
-        color: white;
+    .o_model_field_selector_popover_header, .o_model_field_selector_popover_footer {
+        color: color-contrast(map-get($theme-colors, 'primary'));
         background: map-get($theme-colors, 'primary');
         font-weight: bold;
-        padding: 5px 0 5px 0.4em;
+        padding: 5px 0.4em;
 
         .o_model_field_selector_popover_title {
             width: 100%;
@@ -28,14 +28,11 @@
             padding: 0px 35px;
             text-align: center;
         }
-        .o_model_field_selector_popover_search {
-            padding-right: 0.4rem;
-            > .o_input {
-                font-size: 13px;
-                padding: 5px 0.4rem;
-                text-align: left;
-                line-height: normal;
-            }
+        .o_model_field_selector_popover_search > .o_input, > input {
+            color: $o-main-text-color;
+            font-size: 115%;
+            border: none;
+            padding: 5px 0.4rem;
         }
         .o_model_field_selector_popover_option {
             @include o-position-absolute($top: 0);
@@ -65,28 +62,18 @@
                 cursor: pointer;
                 font-family: Arial;
                 font-size: 13px;
-                color: #444;
-                border-bottom: 1px solid #eee;
+                border-bottom: 1px solid mix($o-black, $dropdown-link-hover-bg, 8%);
                 &.active {
-                    background: #f5f5f5;
+                    background: $dropdown-link-hover-bg;
                 }
                 .o_model_field_selector_popover_item_title {
                     font-size: 12px;
                 }
                 .o_model_field_selector_popover_item_relation {
-                    border-left: 1px solid #eee;
+                    border-radius: 0px;
+                    border-left: 1px solid mix($o-black, $dropdown-link-hover-bg, 8%);
                 }
             }
         }
     }
-    .o_model_field_selector_popover_footer {
-        background: map-get($theme-colors, 'primary');
-        padding: 5px 0.4em;
-
-        > input {
-            font-size: 13px;
-            width: 100%;
-            padding: 0 0.4rem;
-        }
-    }
 }