Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Style empty state, jump to create theme dialog when no themes exist

Browse source
This commit is contained in:
Florian Schroedl 2024-08-26 15:02:38 +02:00
parent 7cd9c60fb6
commit 4060b6d40f
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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

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

@ -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;