From 3bb2dcabaf4339842e47055230e9ac4391f8a04b Mon Sep 17 00:00:00 2001
From: Mathias Wagner <m.wagner@itlsoftware.de>
Date: Tue, 9 Sep 2025 14:23:12 +0200
Subject: [PATCH] Fix Select styling

---
 webui/src/common/components/Select/Select.jsx | 14 +++---
 .../src/common/components/Select/styles.sass  | 50 ++++++++++++++++---
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/webui/src/common/components/Select/Select.jsx b/webui/src/common/components/Select/Select.jsx
index 0eeb6a9..772d3fa 100644
--- a/webui/src/common/components/Select/Select.jsx
+++ b/webui/src/common/components/Select/Select.jsx
@@ -12,10 +12,10 @@ export const Select = ({
   ...rest
 }) => {
   return (
-    <div className={`field ${containerClassName || ''}`}>
-      {label && <label className="field-label">{label}</label>}
-      <div className={`field-control has-icon ${error ? 'has-error' : ''} ${className || ''}`}>
-        <select className="field-select" {...rest}>
+    <div className={`select-field ${containerClassName || ''}`}>
+      {label && <label className="select-label">{label}</label>}
+      <div className={`select-container ${error ? 'select-error' : ''} ${className || ''}`}>
+        <select className="select-input" {...rest}>
           {placeholder && (
             <option value="" disabled>
               {placeholder}
@@ -27,11 +27,11 @@ export const Select = ({
             </option>
           ))}
         </select>
-        <span className="field-icon field-icon--right">
+        <div className="select-icon">
           <CaretDownIcon size={16} />
-        </span>
+        </div>
       </div>
-      {error && <div className="field-error">{error}</div>}
+      {error && <div className="select-error-text">{error}</div>}
     </div>
   );
 };
\ No newline at end of file
diff --git a/webui/src/common/components/Select/styles.sass b/webui/src/common/components/Select/styles.sass
index c3938ab..2a68d67 100644
--- a/webui/src/common/components/Select/styles.sass
+++ b/webui/src/common/components/Select/styles.sass
@@ -1,4 +1,34 @@
-.field-select
+.select-field
+  display: flex
+  flex-direction: column
+  gap: 0.5rem
+  font-size: 0.9rem
+  font-weight: 600
+  color: #374048
+
+.select-label
+  letter-spacing: 0.3px
+  margin-bottom: 0.2rem
+
+.select-container
+  position: relative
+  display: flex
+  align-items: center
+  background: #ffffff
+  border: 2px solid #e1e8f0
+  border-radius: 16px
+  transition: all 0.2s ease
+  
+  &.select-error
+    border-color: #d93025
+    box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.1)
+  
+  &:focus-within
+    border-color: #0f62fe
+    box-shadow: 0 0 0 4px rgba(15, 98, 254, 0.1)
+    transform: translateY(-1px)
+
+.select-input
   appearance: none
   background: transparent
   border: 0
@@ -10,21 +40,25 @@
   line-height: 1.3
   outline: none
   cursor: pointer
-  padding-right: 2.5rem
-  
-  &:focus
-    outline: none
+  padding: 1rem 1.2rem
   
   &:disabled
     opacity: 0.6
     cursor: not-allowed
 
-.field-control.has-icon .field-icon--right
+.select-icon
   position: absolute
   right: 1rem
   top: 50%
   transform: translateY(-50%)
   pointer-events: none
   color: var(--text-dim)
-  display: inline-flex
-  z-index: 1
\ No newline at end of file
+  display: flex
+  align-items: center
+  justify-content: center
+
+.select-error-text
+  font-size: 0.65rem
+  font-weight: 600
+  color: #d93025
+  letter-spacing: 0.5px
\ No newline at end of file