3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 12:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Improve theme modal with UX enhancements

Browse source
This commit is contained in:
Xavier Julian 2025-02-21 13:32:28 +01:00 • committed by Xaviju
parent 3e89b73ca0
commit ca65f5ad9a
5 changed files with 61 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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