From 36e1ad287cf7a095b3168001610b157e6da8a631 Mon Sep 17 00:00:00 2001
From: Xavier Julian <xaviju@proton.me>
Date: Wed, 7 May 2025 10:28:44 +0200
Subject: [PATCH] :lipstick: Fix design review for input component

---
 frontend/src/app/main/ui/ds/controls/input.cljs              | 2 +-
 .../src/app/main/ui/ds/controls/utilities/input_field.scss   | 3 +--
 frontend/src/app/main/ui/ds/controls/utilities/label.scss    | 5 +++++
 frontend/src/app/main/ui/workspace/tokens/form.cljs          | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs
index 4e31d87dc5..d16f35b836 100644
--- a/frontend/src/app/main/ui/ds/controls/input.cljs
+++ b/frontend/src/app/main/ui/ds/controls/input.cljs
@@ -48,9 +48,9 @@
         props (mf/spread-props props {:ref ref
                                       :type type
                                       :id id
-                                      :hint-type hint-type
                                       :max-length max-length
                                       :has-hint has-hint
+                                      :hint-type hint-type
                                       :variant variant})]
     [:div {:class (dm/str class " " (stl/css-case :input-wrapper true
                                                   :variant-dense (= variant "dense")
diff --git a/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss b/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss
index 4094006125..c3ab208b76 100644
--- a/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss
+++ b/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss
@@ -26,7 +26,6 @@
   background: var(--input-bg-color);
   border-radius: $br-8;
   padding: 0 var(--sp-s);
-  outline-offset: #{$b-1};
   outline: $b-1 solid var(--input-outline-color);
 
   &:hover {
@@ -112,7 +111,7 @@
   margin-inline-start: var(--sp-xxs);
 }
 
-.hint-type-error:has(.has-hint) {
+.hint-type-error {
   --input-outline-color: var(--color-foreground-error);
 }
 
diff --git a/frontend/src/app/main/ui/ds/controls/utilities/label.scss b/frontend/src/app/main/ui/ds/controls/utilities/label.scss
index 572a1e3bb2..740204fcae 100644
--- a/frontend/src/app/main/ui/ds/controls/utilities/label.scss
+++ b/frontend/src/app/main/ui/ds/controls/utilities/label.scss
@@ -19,6 +19,11 @@
   align-items: center;
 }
 
+.label-text,
+.label-optional {
+  line-height: inherit;
+}
+
 .label-text {
   color: var(--label-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 9339563e11..8ca9701381 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -536,6 +536,7 @@
                      :variant "comfortable"
                      :auto-focus true
                      :default-value @token-name-ref
+                     :hint-type (when (seq (:errors @name-errors)) "error")
                      :ref name-ref
                      :on-blur on-blur-name
                      :on-change on-update-name}])