From 6bb30291de0a41bcd941d9b8dc6bfe0c3f0feb00 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Thu, 22 Feb 2024 19:08:55 +0100
Subject: [PATCH] fix(web): consistent combobox style + improve color contrast
 (#7353)

---
 web/src/lib/components/shared-components/combobox.svelte      | 4 ++--
 .../components/user-settings-page/appearance-settings.svelte  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index 45ea116e380d1..7c1e1f68ddd72 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -52,7 +52,7 @@
   };
 </script>
 
-<div class="relative w-full" use:clickOutside on:outclick={handleOutClick}>
+<div class="relative w-full dark:text-gray-300 text-gray-700 text-base" use:clickOutside on:outclick={handleOutClick}>
   <div>
     {#if isOpen}
       <div class="absolute inset-y-0 left-0 flex items-center pl-3">
@@ -96,7 +96,7 @@
     <div
       role="listbox"
       transition:fly={{ duration: 250 }}
-      class="absolute text-left w-full max-h-64 overflow-y-auto bg-white dark:bg-gray-800 rounded-b-lg border border-t-0 border-gray-300 dark:border-gray-900 z-10"
+      class="absolute text-left text-sm w-full max-h-64 overflow-y-auto bg-white dark:bg-gray-800 rounded-b-lg border border-t-0 border-gray-300 dark:border-gray-900 z-10"
     >
       {#if filteredOptions.length === 0}
         <div class="px-4 py-2 font-medium">No results</div>
diff --git a/web/src/lib/components/user-settings-page/appearance-settings.svelte b/web/src/lib/components/user-settings-page/appearance-settings.svelte
index db6f28a3649c4..0326cab415e4f 100644
--- a/web/src/lib/components/user-settings-page/appearance-settings.svelte
+++ b/web/src/lib/components/user-settings-page/appearance-settings.svelte
@@ -80,7 +80,7 @@
           checked={$locale == undefined}
           on:toggle={handleToggleLocaleBrowser}
         >
-          <p class="mt-2">{selectedDate}</p>
+          <p class="mt-2 dark:text-gray-400">{selectedDate}</p>
         </SettingSwitch>
       </div>
       {#if $locale !== undefined}