From 967fab416a2506d44d30c76454ecf1bca2ac9444 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 17:20:20 +0200
Subject: [PATCH] Add back button

---
 .../app/main/ui/workspace/tokens/modals/themes.cljs |  6 +++++-
 .../app/main/ui/workspace/tokens/modals/themes.scss | 13 +++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

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 9c8c4014f..cd23c4ab3 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -96,7 +96,7 @@
        "Create theme"]]]))
 
 (mf/defc edit-theme
-  [{:keys [state]}]
+  [{:keys [state set-state]}]
   (let [{:keys [theme-id]} @state
         token-sets (mf/deref refs/workspace-token-sets)
         theme (mf/deref (refs/workspace-token-theme theme-id))
@@ -110,6 +110,10 @@
                                (st/emit! (wdt/toggle-token-set {:token-set-id token-set-id
                                                                 :token-theme-id (:id theme)}))))]
     [:div {:class (stl/css :edit-theme-wrapper)}
+     [:div
+      [:button {:class (stl/css :back-button)
+                :on-click #(set-state (constantly {:type :themes-overview}))}
+       chevron-icon "Back"]]
      [:div {:class (stl/css :edit-theme-inputs-wrapper)}
       [:& labeled-input {:label "Group"
                          :input-props {:value (:group theme)}}]
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 df1e611fd..f374569fd 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
@@ -108,6 +108,19 @@ hr {
   gap: $s-6;
 }
 
+.back-button {
+  @extend .button-tertiary;
+  padding: $s-6;
+  padding-left: 0;
+  display: flex;
+  svg {
+    scale: -1 1;
+    margin-left: 0;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
 .sets-count-button {
   @extend .button-secondary;
   padding: $s-6;