From 941fb041b62f33a6c80e55635eba17b346a49a7d Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 21 Jun 2024 17:00:00 +0200
Subject: [PATCH] Add form styling

---
 frontend/src/app/main/ui/workspace/tokens/form.cljs | 11 +++++++++--
 frontend/src/app/main/ui/workspace/tokens/form.scss |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index ecc26f6c1..ba0abee6e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -117,8 +117,15 @@
       [:& tokens.common/labeled-input {:label "Value"
                                        :input-props {:default-value @value
                                                      :on-change on-update-value}}]
-      [:div {:class (stl/css :resolved-value)}
-       [:p @resolved-value]]
+      [:div {:class (stl/css-case :resolved-value true
+                                  :resolved-value-placeholder (nil? @token-resolve-result)
+                                  :resolved-value-error (when (keyword? @token-resolve-result)
+                                                          (= (namespace @token-resolve-result) "error")))}
+       (case @token-resolve-result
+         :error/token-self-reference "Token has self reference"
+         :error/token-missing-reference "Token has missing reference"
+         nil "Enter token value"
+         [:p @token-resolve-result])]
       [:& tokens.common/labeled-input {:label "Description"
                                        :input-props {:default-value (:description state)
                                                      #_#_:on-change #(on-update-description %)}}]
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.scss b/frontend/src/app/main/ui/workspace/tokens/form.scss
index df3fc5a88..cb67c9001 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/form.scss
@@ -30,6 +30,7 @@
   @include bodySmallTypography;
   padding: $s-4 $s-6;
   font-weight: medium;
+  height: $s-24;
 
   color: var(--color-foreground-primary);
   border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
@@ -39,3 +40,11 @@
     margin: 0;
   }
 }
+
+.resolved-value-placeholder {
+  color: var(--color-foreground-secondary);
+}
+
+.resolved-value-error {
+  color: var(--status-color-error-500);
+}