💄 Cleaned styles for new UI

frontend/src/app/main/ui/components/forms.cljs

@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.main.ui.components.select :as cs]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
@@ -252,10 +253,10 @@
         value      (or (get-in @form [:data input-name]) default)
         cvalue     (d/seek #(= value (:value %)) options)
         focus?     (mf/use-state false)
-        on-change
+
+        handle-change
         (fn [event]
-          (let [target (dom/get-target event)
-                value  (dom/get-value target)]
+          (let [value (if (string? event) event (dom/get-target-val event))]
             (fm/on-input-change form input-name value)))
 
         on-focus
@@ -267,33 +268,16 @@
           (reset! focus? false))]
 
     (if new-css-system
-      [:div {:class (stl/css :custom-select)}
-       [:select {:value value
-                 :on-change on-change
-                 :on-focus on-focus
-                 :on-blur on-blur
-                 :disabled disabled
-                 :data-test data-test}
-        (for [item options]
-          [:> :option (clj->js (cond-> {:key (:value item) :value (:value item)}
-                                 (:disabled item) (assoc :disabled "disabled")
-                                 (:hidden item) (assoc :style {:display "none"})))
-           (:label item)])]
-
-       [:div {:class (stl/css-case :input-container true
-                                   :disabled disabled
-                                   :focus @focus?)}
-        [:div {:class (stl/css :main-content)}
-         [:label {:class (stl/css :label)} label]
-         [:span {:class (stl/css :value)} (:label cvalue "")]]
-
-        [:div {:class (stl/css :icon)}
-         i/arrow-refactor]]]
+      [:div {:class (stl/css :select-wrapper)}
+       [:& cs/select
+        {:default-value value
+         :options options
+         :on-change handle-change}]]
 
 
       [:div.custom-select
        [:select {:value value
-                 :on-change on-change
+                 :on-change handle-change
                  :on-focus on-focus
                  :on-blur on-blur
                  :disabled disabled

frontend/src/app/main/ui/components/forms.scss

@@ -23,12 +23,18 @@
     padding: 0;
     cursor: pointer;
     color: var(--modal-title-foreground-color);
-    text-transform: none;
+    text-transform: uppercase;
     input {
       @extend .input-element;
       color: var(--input-foreground-color-active);
       width: calc(100% - $s-1);
       margin-top: 0;
+
+      &:focus {
+        outline: none;
+        border: $s-1 solid var(--input-border-color-focus);
+        border-radius: $br-8;
+      }
     }
     // Input autofill
     input:-webkit-autofill,
@@ -39,11 +45,6 @@
       -webkit-box-shadow: 0 0 0 28px var(--input-background-color) inset !important;
       border: $s-1 solid var(--input-background-color);
     }
-    &:focus {
-      outline: none;
-      border: $s-1 solid var(--input-border-color-focus);
-      border-radius: $br-8;
-    }
   }
   &:global(.invalid) {
     input {