From 06bda85d291a997d27b6e4584eded48eaf7e2d9f Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 23 Apr 2024 23:06:04 +0200
Subject: [PATCH] UX: fix #1831

---
 public/css/index-tailwind-output.css | 36 +++++++++++++++-------------
 src/UI/StylesheetTestGui.svelte      |  6 +++++
 src/index.css                        |  3 ++-
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 5edcd85be..1eb3e7934 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -781,6 +781,10 @@ video {
   float: left;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -793,10 +797,6 @@ video {
   margin: 0px;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
 .m-2 {
   margin: 0.5rem;
 }
@@ -900,6 +900,10 @@ video {
   margin-right: 4rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -932,10 +936,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1872,10 +1872,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pr-12 {
   padding-right: 3rem;
 }
@@ -1888,6 +1884,10 @@ video {
   padding-right: 0.25rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pt-0\.5 {
   padding-top: 0.125rem;
 }
@@ -2143,14 +2143,14 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.drop-shadow-2xl {
-  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2462,7 +2462,7 @@ button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-back
   color: var(--interactive-foreground);
 }
 
-button:hover, .button:hover {
+button:hover :not(select), .button:hover :not(select) {
   background-color: var(--catch-detail-color);
   color: var(--catch-detail-foregroundcolor);
   border: 2px solid var(--catch-detail-color-contrast);
@@ -2572,6 +2572,8 @@ button.soft:hover, .button.soft:hover {
 
 select {
   border: 2px solid #00000000;
+  color: var(--foreground-color) !important;
+  background-color: var(--low-interaction-background) !important;
 }
 
 select:hover {
diff --git a/src/UI/StylesheetTestGui.svelte b/src/UI/StylesheetTestGui.svelte
index 4f6e73179..27aa90772 100644
--- a/src/UI/StylesheetTestGui.svelte
+++ b/src/UI/StylesheetTestGui.svelte
@@ -2,6 +2,8 @@
   import Loading from "./Base/Loading.svelte"
   import Community from "../assets/svg/Community.svelte"
   import Login from "../assets/svg/Login.svelte"
+  import Dropdown from "./Base/Dropdown.svelte"
+  import { UIEventSource } from "../Logic/UIEventSource"
 </script>
 
 <div>
@@ -74,6 +76,10 @@
         HTML (mimicks a
         <span class="literal-code">checked</span>
         -element)
+        <Dropdown value={new UIEventSource("abc")}>
+          <option>abc</option>
+          <option>def</option>
+        </Dropdown>
       </label>
       <label for="css">
         <input id="css" name="fav_language" type="radio" value="CSS" />
diff --git a/src/index.css b/src/index.css
index 437f61048..a52826b1b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -239,7 +239,6 @@ button:hover, .button:hover {
     border: 2px solid var(--catch-detail-color-contrast);
 }
 
-
 button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
     background: var(--low-interaction-background);
     border-radius: 100rem;
@@ -349,6 +348,8 @@ button.soft:hover, .button.soft:hover {
 
 select {
     border: 2px solid #00000000;
+    color: var(--foreground-color) !important;
+    background-color: var(--low-interaction-background) !important;
 }
 
 select:hover {