From 4060b6d40f26f4848e5ee893b252f2f0f162fd7f Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 26 Aug 2024 15:02:38 +0200
Subject: [PATCH] Style empty state, jump to create theme dialog when no themes
 exist

---
 .../ui/workspace/tokens/modals/themes.cljs    | 16 +++++++++----
 .../ui/workspace/tokens/modals/themes.scss    | 24 +++++++++++++++++++
 2 files changed, 35 insertions(+), 5 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 5ffee750b..7148c7052 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -27,9 +27,15 @@
   (i/icon-xref :close (stl/css :close-icon)))
 
 (mf/defc empty-themes
-  [{:keys []}]
-  "Empty")
-
+  [{:keys [set-state]}]
+  [:div {:class (stl/css :empty-themes-wrapper)}
+   [:div {:class (stl/css :empty-themes-message)}
+    [:h1 "You currently have no themes."]
+    [:p "Create your first theme now."]]
+   [:div {:class (stl/css :button-footer)}
+    [:button {:class (stl/css :button-primary)
+              :on-click #(set-state (fn [_] {:type :create-theme}))}
+     "New theme"]]])
 
 (mf/defc switch
   [{:keys [selected? name on-change]}]
@@ -198,7 +204,7 @@
   [{:keys [] :as _args}]
   (let [themes (mf/deref refs/workspace-ordered-token-themes)
         state (mf/use-state (if (empty? themes)
-                              {:type :empty-themes}
+                              {:type :create-theme}
                               {:type :themes-overview}))
         set-state (mf/use-callback #(swap! state %))
         title (case (:type @state)
@@ -206,7 +212,7 @@
                 "Themes")
         component (case (:type @state)
                     :empty-themes empty-themes
-                    :themes-overview themes-overview
+                    :themes-overview (if (empty? themes) empty-themes themes-overview)
                     :edit-theme controlled-edit-theme
                     :create-theme create-theme)]
     [:div
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 b0b834393..43844c392 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
@@ -56,6 +56,30 @@ hr {
   padding: $s-6;
 }
 
+.empty-themes-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  .empty-themes-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: $s-12;
+    padding: $s-72 0;
+
+    h1 {
+      @include headlineLargeTypography;
+    }
+
+    p {
+      @include bodyMediumTypography;
+      font-weight: 500;
+      color: var(--color-foreground-secondary);
+    }
+  }
+}
+
 .create-theme-button {
   @extend .button-secondary;
   padding: $s-6;