From 334c645d7000fc613f6277fbf25e63c8dd2c7cce Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Fri, 3 Jan 2025 11:55:29 +0100
Subject: [PATCH] fix(style): [WIP] Artist page input select styles

---
 front/src/components/library/Artists.vue |  3 +-
 front/src/components/ui/input.scss       | 53 +++++++++++++++++++++++-
 front/src/style/colors.scss              |  1 +
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index f05f41903..26fd82f71 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -145,12 +145,13 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         <Input
           v-model="tags"
           :label="t('components.library.Artists.label.tags')"
+          style="max-width: 150px;"
         />
         <select
           id="artist-ordering"
           :label="t('components.library.Artists.ordering.label')"
           v-model="ordering"
-          class="ui dropdown"
+          class="dropdown"
         >
           <option
             v-for="(option, key) in orderingOptions"
diff --git a/front/src/components/ui/input.scss b/front/src/components/ui/input.scss
index 4fb910b71..217f77d4c 100644
--- a/front/src/components/ui/input.scss
+++ b/front/src/components/ui/input.scss
@@ -25,7 +25,7 @@
     }
 
     @include light-theme {
-      --fw-bg-color: var(--fw-gray-100);
+      --fw-bg-color: var(--fw-gray-200);
       --fw-border-color: var(--fw-bg-color);
       --fw-placeholder-color: var(--fw-gray-600);
 
@@ -129,3 +129,54 @@
     padding-right: 140px;
   }
 }
+
+form.ui.form {
+  select.dropdown {
+    /* display: none !important; */
+  }
+  select.dropdown {
+    display: block;
+    height: 44px;
+    margin-top: 7px;
+    border-radius: var(--fw-border-radius);
+    font-size: 14px;
+    font-family: $font-main;
+    line-height: 28px;
+    border: 12px solid transparent;
+    padding: 0px 12px;
+    color: var(--input-color);
+    -webkit-transition: color .1s ease, border-color .1s ease;
+    transition: color .1s ease, border-color .1s ease;
+
+    @include light-theme {
+      color: var(--fw-gray-800);
+      background-color: var(--fw-gray-200);
+      border-color: transparent;
+
+      &:hover {
+        outline: 4px solid var(--fw-gray-300);
+      }
+
+      &:focus-within {
+        outline: 4px solid var(--fw-primary);
+      }
+    }
+
+    @include dark-theme {
+      color: var(--fw-gray-300);
+      background-color: var(--fw-gray-850);
+      border-color: var(--fw-gray-850);
+
+      &:hover,
+      &:focus-visible {
+        outline: 4px solid var(--fw-gray-700);
+        outline-offset: -4px;
+      }
+    }
+
+    & option {
+      color: red;
+    }
+  }
+  .selection.active.dropdown, .ui.selection.active.dropdown .menu {}
+}
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 291f24378..b5bfd328d 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -74,6 +74,7 @@
 
   // Same in light and dark theme
   --fw-secondary: #ff6600;
+  --fw-primary: var(--fw-blue-400);
 }
 
 // (2) Choosing the semantic colors from the palette