From db1250a3158a9f9253f6d8b8a12b43e5ffbd80a6 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 17:07:47 +0200
Subject: [PATCH] Add footer buttons

---
 frontend/src/app/main/ui.cljs                 |  1 -
 .../ui/workspace/tokens/modals/themes.cljs    | 26 +++++++++++++-----
 .../ui/workspace/tokens/modals/themes.scss    | 27 +++++++++++++++++++
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 345265587..b9c661c3a 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -192,7 +192,6 @@
 
     [:& (mf/provider ctx/current-route) {:value route}
      [:& (mf/provider ctx/current-profile) {:value profile}
-      [:& wtmt/modal]
       (if edata
         [:& static/exception-page {:data edata :route route}]
         [:*
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
index 9720bb16a..9c8c4014f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -10,6 +10,7 @@
    [app.main.data.modal :as modal]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [cuerdas.core :as str]
+   [app.main.ui.workspace.tokens.common :refer [labeled-input]]
    [app.main.ui.workspace.tokens.sets :as wts]
    [app.main.data.tokens :as wdt]
    [app.main.refs :as refs]
@@ -108,13 +109,24 @@
                              (fn [token-set-id]
                                (st/emit! (wdt/toggle-token-set {:token-set-id token-set-id
                                                                 :token-theme-id (:id theme)}))))]
-    [:div {:class (stl/css :sets-list-wrapper)}
-     [:& wts/controlled-sets-list
-      {:token-sets token-sets
-       :token-set-selected? (constantly false)
-       :token-set-active? token-set-active?
-       :on-select on-toggle-token-set
-       :on-toggle on-toggle-token-set}]]))
+    [:div {:class (stl/css :edit-theme-wrapper)}
+     [:div {:class (stl/css :edit-theme-inputs-wrapper)}
+      [:& labeled-input {:label "Group"
+                         :input-props {:value (:group theme)}}]
+      [:& labeled-input {:label "Theme"
+                         :input-props {:value (:name theme)}}]]
+     [:div {:class (stl/css :sets-list-wrapper)}
+      [:& wts/controlled-sets-list
+       {:token-sets token-sets
+        :token-set-selected? (constantly false)
+        :token-set-active? token-set-active?
+        :on-select on-toggle-token-set
+        :on-toggle on-toggle-token-set}]]
+     [:div {:class (stl/css :edit-theme-footer)}
+      [:button {:class (stl/css :button-secondary)} "Delete"]
+      [:div {:class (stl/css :button-footer)}
+       [:button {:class (stl/css :button-secondary)} "Cancel"]
+       [:button {:class (stl/css :button-primary)} "Save theme"]]]]))
 
 (mf/defc themes
   [{:keys [] :as _args}]
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
index bb01cb0a0..b7085ccae 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
@@ -37,6 +37,22 @@ hr {
 .button-footer {
   display: flex;
   justify-content: flex-end;
+  gap: $s-6;
+}
+
+.edit-theme-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button-primary {
+  @extend .button-primary;
+  padding: $s-6;
+}
+
+.button-secondary {
+  @extend .button-secondary;
+  padding: $s-6;
 }
 
 .create-theme-button {
@@ -103,6 +119,17 @@ hr {
   }
 }
 
+.edit-theme-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $s-12;
+}
+
+.edit-theme-inputs-wrapper {
+  display: flex;
+  gap: $s-12;
+}
+
 .sets-list-wrapper {
   border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
   border-radius: $s-8;