From 84cd5daf9c9144051ef0e013157518ec75952bfb Mon Sep 17 00:00:00 2001
From: Lisa Durand <lisa.c.durand@gmail.com>
Date: Mon, 13 Nov 2023 18:10:35 +0100
Subject: [PATCH] add css to make dropdown readable with dark mode

---
 app/assets/stylesheets/buttons.scss        | 24 ++++++++++++++++++++--
 app/assets/stylesheets/help_dropdown.scss  |  2 +-
 app/assets/stylesheets/menu_component.scss |  1 -
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index 0d4016b15..6320d1fa8 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -174,6 +174,28 @@
   }
 }
 
+[data-fr-theme="dark"]
+  .dropdown-content {
+      border: none;
+      background: var(--background-action-low-blue-france);
+  }
+
+[data-fr-theme="dark"]
+  .dropdown-items {
+    li {
+      &:not(.inactive) {
+        &:hover,
+        &.selected {
+          background: var(--background-action-low-blue-france-hover);
+        }
+      }
+
+      &.form-inside {
+        background-color: var(--background-action-low-blue-france);
+      }
+    }
+  }
+
 .dropdown-content {
   border: 1px solid $border-grey;
   background: #FFFFFF;
@@ -226,7 +248,6 @@ ul.dropdown-items {
   li {
     display: flex;
     padding: $default-padding;
-    color: $dark-grey;
     border-bottom: 1px solid $border-grey;
     font-size: 12px;
     min-width: 300px;
@@ -293,7 +314,6 @@ ul.dropdown-items {
 
   h4 {
     font-size: 14px;
-    color: $black;
     margin-bottom: $default-spacer;
   }
 
diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss
index 5c1e2e4df..f20b13a02 100644
--- a/app/assets/stylesheets/help_dropdown.scss
+++ b/app/assets/stylesheets/help_dropdown.scss
@@ -8,7 +8,7 @@
 }
 
 .help-dropdown-title {
-  color: $blue-france-500;
+  font-weight: bold;
 }
 
 .dropdown-items li.help-dropdown-service {
diff --git a/app/assets/stylesheets/menu_component.scss b/app/assets/stylesheets/menu_component.scss
index 3bc0c9f53..32438e088 100644
--- a/app/assets/stylesheets/menu_component.scss
+++ b/app/assets/stylesheets/menu_component.scss
@@ -1,7 +1,6 @@
 @import "colors";
 
 .menu-component-header {
-  color: $dark-grey;
   font-size: 12px;
 
   a {