From cac421f862a48a939bbfbe591c16613183ff41f6 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 15:41:32 +0200
Subject: [PATCH] Design

---
 .../src/app/main/ui/components/title_bar.cljs |  1 -
 .../ui/workspace/tokens/modals/themes.cljs    | 60 ++++++++++++-------
 .../ui/workspace/tokens/modals/themes.scss    | 52 +++++++++++++++-
 3 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs
index 04e6211338..49a996570e 100644
--- a/frontend/src/app/main/ui/components/title_bar.cljs
+++ b/frontend/src/app/main/ui/components/title_bar.cljs
@@ -10,7 +10,6 @@
    [app.common.data.macros :as dm]
    [app.main.ui.icons :as i]
    [rumext.v2 :as mf]))
-
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
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 cc65f0c3ac..de46ed40e9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -17,6 +17,8 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
+(def ^:private chevron-icon
+  (i/icon-xref :arrow (stl/css :chevron-icon)))
 
 (def ^:private close-icon
   (i/icon-xref :close (stl/css :close-icon)))
@@ -45,28 +47,42 @@
   [{:keys []}]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
         themes (mf/deref refs/workspace-ordered-token-themes)]
-    [:ul {:class (stl/css :theme-group-wrapper)}
-     (for [[group themes] themes]
-       [: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 "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 (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]]])]])]))
+    [:div
+     [:ul {:class (stl/css :theme-group-wrapper)}
+      (for [[group themes] themes]
+        [:li {:key (str "token-theme-group" group)}
+         (when (seq 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 "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 (constantly nil)
+                           :selected? (get active-theme-ids id)}]]
+              [:span {:class (stl/css :theme-row-label)} name]]
+             [:div {:class (stl/css :theme-row-right)}
+              (if-let [sets-count (some-> theme :sets seq count)]
+                [:button {:class (stl/css :sets-count-button)}
+                 (str sets-count " sets")
+                 chevron-icon]
+                [:button {:class (stl/css :sets-count-empty-button)}
+                 "No sets defined"
+                 chevron-icon])
+              [: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]]]])]])]
+     [:div {:class (stl/css :button-footer)}
+      [:button {:class (stl/css :create-theme-button)}
+       i/add
+       "Create theme"]]]))
 
 (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 e60939f2b0..9381e69e19 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
@@ -10,6 +10,10 @@
   @extend .modal-overlay-base;
 }
 
+hr {
+  border-color: var(--color-background-tertiary);
+}
+
 .modal-dialog {
   @extend .modal-container-base;
   display: grid;
@@ -30,6 +34,22 @@
   flex-direction: column;
 }
 
+.button-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.create-theme-button {
+  @extend .button-secondary;
+  padding: $s-6;
+  padding-right: $s-8;
+  svg {
+    margin-right: $s-6;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
 .close-btn {
   @extend .modal-close-btn-base;
 }
@@ -63,11 +83,41 @@
 .theme-row-left {
   display: flex;
   align-items: center;
-  gap: $s-12;
+  gap: $s-16;
+}
+
+.theme-row-right {
+  display: flex;
+  align-items: center;
+  gap: $s-6;
+}
+
+.sets-count-button {
+  @extend .button-secondary;
+  padding: $s-6;
+  padding-left: $s-12;
+  svg {
+    margin-left: $s-6;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.sets-count-empty-button {
+  @extend .button-secondary;
+  padding: $s-6;
+  padding-left: $s-12;
+  svg {
+    margin-left: $s-6;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
 }
 
 .theme-row-label {
   @include bodyMediumTypography;
+  font-weight: 500;
+  color: var(--color-foreground-primary);
 }
 
 .delete-theme-button {