From 7970440ffca53db6ccf0dc4d0006a7622cca9a1a Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 15:30:17 +0200
Subject: [PATCH] Toggle theme via ui

---
 .../ui/workspace/tokens/modals/themes.cljs    | 35 ++++++-----
 .../ui/workspace/tokens/modals/themes.scss    | 63 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 19 deletions(-)

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 8ca7e7423..cc65f0c3a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -45,25 +45,28 @@
   [{:keys []}]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
         themes (mf/deref refs/workspace-ordered-token-themes)]
-    [:ul
+    [:ul {:class (stl/css :theme-group-wrapper)}
      (for [[group themes] themes]
-       [:li
-        {:key (str "token-theme-group" group)}
-        group
-        [:ul
+       [:li {:key (str "token-theme-group" group)}
+        [:span {:class (stl/css :theme-group-label)} group]
+        [:ul {:class (stl/css :theme-group-rows-wrapper)}
          (for [{:keys [id name] :as _theme} themes]
-           [:li {:key (str "tokene-theme-" id)}
-            [:div.spaced
-             name
-             [:div.spaced
+           [:li {:key (str "token-theme-" id)
+                 :class (stl/css :theme-row)}
+            [:div {:class (stl/css :theme-row-left)}
+             [:div {:on-click (fn [e]
+                                (dom/stop-propagation e)
+                                (st/emit! (wdt/toggle-token-theme id)))}
               [:& switch {:name (str "Theme" name)
-                          :on-change #(st/emit! (wdt/toggle-token-theme id))
-                          :selected? (get active-theme-ids id)}]
-              [:button {:on-click (fn [e]
-                                    (dom/prevent-default e)
-                                    (dom/stop-propagation e)
-                                    (st/emit! (wdt/delete-token-theme id)))}
-               "🗑️"]]]])]])]))
+                          :on-change (constantly nil)
+                          :selected? (get active-theme-ids id)}]]
+             [:span {:class (stl/css :theme-row-label)} name]]
+            [:div {:class (stl/css :delete-theme-button)}
+             [:button {:on-click (fn [e]
+                                   (dom/prevent-default e)
+                                   (dom/stop-propagation e)
+                                   (st/emit! (wdt/delete-token-theme id)))}
+              i/delete]]])]])]))
 
 (mf/defc edit-theme
   [{:keys []}]
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 475e3997a..e60939f2b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
@@ -15,13 +15,14 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: 100%;
-  max-width: $s-640;
+  max-width: $s-468;
 }
 
 .modal-title {
   @include headlineMediumTypography;
-  margin-block-end: $s-32;
-  color: var(--modal-title-foreground-color);
+  font-weight: 500;
+  margin-block-end: $s-16;
+  color: var(--color-foreground-secondary);
 }
 
 .modal-content {
@@ -32,3 +33,59 @@
 .close-btn {
   @extend .modal-close-btn-base;
 }
+
+.theme-group-label {
+  display: block;
+  @include headlineMediumTypography;
+  color: var(--color-foreground-secondary);
+  margin-bottom: $s-8;
+}
+
+.theme-group-rows-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $s-6;
+}
+
+.theme-group-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+}
+
+.theme-row {
+  display: flex;
+  align-items: center;
+  gap: $s-12;
+  justify-content: space-between;
+}
+
+.theme-row-left {
+  display: flex;
+  align-items: center;
+  gap: $s-12;
+}
+
+.theme-row-label {
+  @include bodyMediumTypography;
+}
+
+.delete-theme-button {
+  @extend .button-tertiary;
+  height: $s-28;
+  width: $s-28;
+  button {
+    @include buttonStyle;
+    @include flexCenter;
+    width: $s-24;
+    height: 100%;
+    svg {
+      @extend .button-icon-small;
+      height: $s-12;
+      width: $s-12;
+      color: transparent;
+      fill: none;
+      stroke: var(--icon-foreground);
+    }
+  }
+}