From c3c747d996335c2348b4c46dbd01572ac8b9c6b1 Mon Sep 17 00:00:00 2001
From: StroepWafel <109832156+StroepWafel@users.noreply.github.com>
Date: Fri, 12 Sep 2025 15:50:24 +0930
Subject: [PATCH] fix: Drop down menu styling

Fix for drop down menu styling so it doesn't look abhorrent
---
 src/css/injected.scss                  | 15 +++++++++++++
 src/interface/components/Select.svelte | 30 ++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/css/injected.scss b/src/css/injected.scss
index 7b86bca6..676afd89 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -38,6 +38,21 @@ body,
 html {
   font-family: Rubik, sans-serif !important;
 }
+
+/* Ensure native select dropdowns are readable on Windows */
+select option {
+  background-color: #ffffff !important;
+  color: #111827 !important;
+}
+.dark select option {
+  background-color: #1f2937 !important;
+  color: #ffffff !important;
+}
+
+/* Consistent rounded corners for selects */
+select {
+  border-radius: 8px !important;
+}
 #container {
   transition: 200ms;
   background: var(--auto-background) !important;
diff --git a/src/interface/components/Select.svelte b/src/interface/components/Select.svelte
index fc292d90..eb6b23c8 100644
--- a/src/interface/components/Select.svelte
+++ b/src/interface/components/Select.svelte
@@ -8,12 +8,12 @@
   let select: HTMLSelectElement;
 </script>
 
-<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
+<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip">
   <select
     bind:this={select}
     value={state}
     onchange={() => onChange(select.value)}
-    class="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
+    class="px-4 py-2 pr-9 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors"
   >
     {#each options as option}
       <option value={option.value}>
@@ -22,3 +22,29 @@
     {/each}
   </select>
 </div>
+
+<style>
+  /* Make native dropdown list readable on Windows */
+  select option {
+    background-color: #ffffff;
+    color: #111827; /* zinc-900 */
+  }
+  :global(.dark) select option {
+    background-color: #1f2937; /* zinc-800 */
+    color: #ffffff;
+  }
+
+  /* Add a dropdown arrow without relying on platform UI */
+  div::after {
+    content: "\25BE"; /* ▼ */
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: rgba(0, 0, 0, 0.5);
+  }
+  :global(.dark) div::after {
+    color: rgba(255, 255, 255, 0.6);
+  }
+</style>