💄 Improve theme modal with UX enhancements

frontend/playwright/ui/specs/tokens.spec.js

@@ -255,14 +255,8 @@ test.describe("Tokens: Tokens Tab", () => {
   });
 
   test("User edits theme and activates it in the sidebar", async ({ page }) => {
-    const {
-      workspacePage,
-      tokensUpdateCreateModal,
-      tokenThemesSetsSidebar,
-      tokensSidebar,
-      tokenContextMenuForToken,
-      tokenThemeUpdateCreateModal,
-    } = await setupTokensFile(page);
+    const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } =
+      await setupTokensFile(page);
 
     await expect(tokenThemesSetsSidebar).toBeVisible();
 
@@ -315,7 +309,8 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toBeVisible();
 
     await tokenThemeUpdateCreateModal
-      .getByRole("button", { name: "Close" })
+      .getByRole("button")
+      .getByText("close")
       .click();
     await expect(tokenThemeUpdateCreateModal).not.toBeVisible();
 
@@ -617,7 +612,7 @@ test.describe("Tokens: Themes modal", () => {
     ).toHaveCount(1);
   });
 
-  test("Create theme", async ({ page }) => {
+  test("Add new theme", async ({ page }) => {
     const { tokenThemeUpdateCreateModal, workspacePage } =
       await setupTokensFile(page);
 
@@ -625,7 +620,7 @@ test.describe("Tokens: Themes modal", () => {
 
     await tokenThemeUpdateCreateModal
       .getByRole("button", {
-        name: "Create theme",
+        name: "Add new theme",
       })
       .click();
 

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -37,10 +37,13 @@
   (let [create-theme
         (mf/use-fn
          (mf/deps set-state)
-         #(set-state (fn [_] {:type :create-theme})))]
+         #(set-state (fn [_] {:type :create-theme})))
+        close-modal
+        (mf/use-fn
+         #(st/emit! (modal/hide)))]
     [:div {:class (stl/css :themes-modal-wrapper)}
      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
-      (tr "workspace.token.themes")]
+      (tr "workspace.token.themes-list")]
      [:div {:class (stl/css :empty-themes-wrapper)}
       [:div {:class (stl/css :empty-themes-message)}
        [:> text* {:as "span" :typography "title-medium" :class (stl/css :empty-theme-title)}
@@ -50,10 +53,14 @@
                   :typography "body-medium"}
         (tr "workspace.token.create-new-theme")]]
       [:div {:class (stl/css :button-footer)}
+       [:> button* {:variant "secondary"
+                    :type "button"
+                    :on-click close-modal}
+        (tr "labels.close")]
        [:> button* {:variant "primary"
                     :type "button"
                     :on-click create-theme}
-        (tr "workspace.token.new-theme")]]]]))
+        (tr "workspace.token.add-new-theme")]]]]))
 
 (mf/defc switch
   [{:keys [selected? name on-change]}]
@@ -81,11 +88,17 @@
          (fn [e]
            (dom/prevent-default e)
            (dom/stop-propagation e)
-           (set-state (fn [_] {:type :create-theme}))))]
+           (set-state (fn [_] {:type :create-theme}))))
+
+        close-modal
+        (mf/use-fn
+         #(st/emit! (modal/hide)))]
 
     [:div {:class (stl/css :themes-modal-wrapper)}
      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
-      (tr "workspace.token.themes")]
+      (tr "workspace.token.themes-list")]
+     [:> text* {:as "div" :typography "body-medium" :class (stl/css :themes-modal-description)}
+      (tr "workspace.token.themes-description")]
      [:ul {:class (stl/css :theme-group-wrapper)}
       (for [[group themes] themes-groups]
         [:li {:key (dm/str "token-theme-group" group)}
@@ -93,7 +106,7 @@
            [:> heading* {:level 3
                          :class (stl/css :theme-group-label)
                          :typography "body-large"}
-            [:span {:class (stl/css :group-title)}
+            [:span {:class (stl/css :group-title) :title (tr "workspace.token.group-name")}
              [:> icon* {:icon-id "group"}]
              group]])
          [:ul {:class (stl/css :theme-group-rows-wrapper)}
@@ -152,11 +165,14 @@
                                 :icon "delete"}]]])]])]
 
      [:div {:class (stl/css :button-footer)}
+      [:> button* {:variant "secondary"
+                   :type "button"
+                   :on-click close-modal}
+       (tr "labels.close")]
       [:> button* {:variant "primary"
                    :type "button"
-                   :icon "add"
                    :on-click create-theme}
-       (tr "workspace.token.create-theme-title")]]]))
+       (tr "workspace.token.add-new-theme")]]]))
 
 (mf/defc theme-inputs*
   [{:keys [theme on-change-field]}]
@@ -265,7 +281,7 @@
 
     [:div {:class (stl/css :themes-modal-wrapper)}
      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
-      (tr "workspace.token.create-theme-title")]
+      (tr "workspace.token.add-new-theme")]
      [:form {:on-submit on-save-form}
       [:div {:class (stl/css :create-theme-wrapper)}
        [:> theme-inputs* {:theme theme

frontend/src/app/main/ui/workspace/tokens/modals/themes.scss

@@ -34,7 +34,7 @@
 .themes-modal-wrapper {
   display: grid;
   grid-template-rows: 0fr minmax(0, 1fr);
-  gap: $s-24;
+  gap: $s-16;
   max-height: $s-688;
 }
 
@@ -46,6 +46,10 @@
   color: var(--color-foreground-primary);
 }
 
+.themes-modal-description {
+  color: var(--color-foreground-secondary);
+}
+
 .back-btn {
   background-color: transparent;
   border: none;
@@ -126,6 +130,7 @@
 .theme-group-wrapper {
   display: flex;
   flex-direction: column;
+  margin-block-start: $s-6;
   overflow-y: auto;
   gap: $s-32;
 }

frontend/translations/en.po

@@ -6503,8 +6503,8 @@ msgid "workspace.token.create-one"
 msgstr "Create one."
 
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs:159, src/app/main/ui/workspace/tokens/modals/themes.cljs:237
-msgid "workspace.token.create-theme-title"
-msgstr "Create theme"
+msgid "workspace.token.add-new-theme"
+msgstr "Add new theme"
 
 #: src/app/main/ui/workspace/tokens/form.cljs:431
 msgid "workspace.token.create-token"
@@ -6623,10 +6623,6 @@ msgstr "Theme"
 msgid "workspace.token.label.theme-placeholder"
 msgstr "Add a theme (i.e. Light)"
 
-#: src/app/main/ui/workspace/tokens/modals/themes.cljs:56
-msgid "workspace.token.new-theme"
-msgstr "New theme"
-
 #: src/app/main/ui/workspace/tokens/theme_select.cljs:88
 msgid "workspace.token.no-active-theme"
 msgstr "No theme active"
@@ -6699,8 +6695,16 @@ msgid "workspace.token.theme-name"
 msgstr "Theme %s"
 
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs:43, src/app/main/ui/workspace/tokens/modals/themes.cljs:88
-msgid "workspace.token.themes"
-msgstr "Themes"
+msgid "workspace.token.themes-list"
+msgstr "Themes list"
+
+#: src/app/main/ui/workspace/tokens/modals/themes.cljs:45, src/app/main/ui/workspace/tokens/modals/themes.cljs:91
+msgid "workspace.token.themes-description"
+msgstr "Here you can manage your themes, enable / disable them and configure its active sets."
+
+#: src/app/main/ui/workspace/tokens/modals/themes.cljs:112
+msgid "workspace.token.group-name"
+msgstr "Group name"
 
 #: src/app/main/ui/workspace/tokens/form.cljs:482
 msgid "workspace.token.token-description"

frontend/translations/es.po

@@ -6518,8 +6518,8 @@ msgid "workspace.token.create-one"
 msgstr "Crear uno."
 
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs:159, src/app/main/ui/workspace/tokens/modals/themes.cljs:237
-msgid "workspace.token.create-theme-title"
-msgstr "Crear tema"
+msgid "workspace.token.add-new-theme"
+msgstr "Añadir nuevo tema"
 
 #: src/app/main/ui/workspace/tokens/form.cljs:431
 msgid "workspace.token.create-token"
@@ -6638,11 +6638,6 @@ msgstr "Tema"
 msgid "workspace.token.label.theme-placeholder"
 msgstr "Añade un Tema (p. ej. Claro)"
 
-
-#: src/app/main/ui/workspace/tokens/modals/themes.cljs:56
-msgid "workspace.token.new-theme"
-msgstr "Nuevo tema"
-
 #: src/app/main/ui/workspace/tokens/theme_select.cljs:88
 msgid "workspace.token.no-active-theme"
 msgstr "No hay temas activos"
@@ -6711,8 +6706,16 @@ msgid "workspace.token.theme-name"
 msgstr "Tema %s"
 
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs:43, src/app/main/ui/workspace/tokens/modals/themes.cljs:88
-msgid "workspace.token.themes"
-msgstr "Temas"
+msgid "workspace.token.themes-list"
+msgstr "Lista de temas"
+
+#: src/app/main/ui/workspace/tokens/modals/themes.cljs:45, src/app/main/ui/workspace/tokens/modals/themes.cljs:91
+msgid "workspace.token.themes-description"
+msgstr "Aquí puedes gestionar tus temas, activarlos / desactivarlos y configurar los sets activos en cada uno."
+
+#: src/app/main/ui/workspace/tokens/modals/themes.cljs:112
+msgid "workspace.token.group-name"
+msgstr "Nombre del grupo"
 
 #: src/app/main/ui/workspace/tokens/form.cljs:482
 msgid "workspace.token.token-description"