From 6b89e28c5f98139a5deee5b4c1786c4d5c1935d8 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Tue, 12 Jul 2022 15:44:31 +0200
Subject: [PATCH] feat: replace gray with slate bg color for form labels

closes issue #3
---
 src/components/Form.tsx             | 4 +++-
 src/components/Settings/Overlay.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index ad05079..3b29f6c 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -71,6 +71,7 @@ export const TextInput: Component<
             "gap-1": true,
             "h-8": props.vertical,
             "font-bold": rest.required,
+            "bg-slate-200/70": vState().valid,
             "bg-red-100": !vState().valid,
           }}
         >
@@ -96,6 +97,7 @@ export const TextInput: Component<
         <Show when={props.suffix}>
           <span
             classList={{
+              "bg-slate-200/70": vState().valid,
               "bg-red-100": !vState().valid,
             }}
           >
@@ -154,7 +156,7 @@ export const TextArea: Component<
         </Show>
       </button>
       <label class="input-group input-group-vertical">
-        <span class="h-8 flex gap-2 justify-between pr-14">
+        <span class="h-8 bg-slate-200/70 flex gap-2 justify-between pr-14">
           {props.label}
           {props.labelSuffixJsx}
         </span>
diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index 654add5..b8429ac 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/src/components/Settings/Overlay.tsx
@@ -289,7 +289,10 @@ const SettingsOverlay: Component = () => {
                 </div>
                 <div class="col-span-2">
                   <div class="input-group input-group-sm">
-                    <span style={{ "min-width": fullWidthLabelWidth }}>
+                    <span
+                      class="bg-slate-200/70"
+                      style={{ "min-width": fullWidthLabelWidth }}
+                    >
                       Typ neuer Positionen
                     </span>
                     <select