Skip to content

Update the add template modal design #51806

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ntsekouras merged 18 commits into from
Jun 23, 2023
Merged

Update the add template modal design #51806

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
79878b6
Add icons
jameskoster Jun 15, 2023
a866689
alignment
jameskoster Jun 16, 2023
6b567ba
Custom descriptions
jameskoster Jun 16, 2023
35f2b60
justify content
jameskoster Jun 16, 2023
599d55a
Style custom template button
jameskoster Jun 16, 2023
907dea7
Remove min-height
jameskoster Jun 20, 2023
1fa7b15
Don't display description when there isn't one
jameskoster Jun 20, 2023
7cd424f
Reduce space between template + description
jameskoster Jun 20, 2023
1684faf
Style icon
jameskoster Jun 20, 2023
582f71a
Style custom template
jameskoster Jun 20, 2023
a7f3191
increase button size
jameskoster Jun 20, 2023
87e9f03
Add prompt
jameskoster Jun 20, 2023
22d2ae5
Update template icons
jameskoster Jun 20, 2023
47e6d7b
Make year dynamic
jameskoster Jun 21, 2023
36f3a3b
Remove short descriptions
jameskoster Jun 21, 2023
63018ee
Revert "Remove short descriptions"
jameskoster Jun 22, 2023
8401e7a
re-instate descriptions but only show as a tooltip
jameskoster Jun 22, 2023
3d1d9cf
simplify a bit
ntsekouras Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Style icon
  • Loading branch information
@jameskoster @ntsekouras
jameskoster authored and ntsekouras committed Jun 23, 2023
commit 1684faf3a4cd2194911d6ab2d996c5f6b75b6f78
5 changes: 4 additions & 1 deletion packages/edit-site/src/components/add-new-template/new-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ function TemplateListItem( { title, className, description, icon, onClick } ) {
alignment="center"
style={ { width: '100%' } }
>
<Icon icon={ icon } />
<div className="edit-site-add-new-template__template-icon">
<Icon icon={ icon } />
</div>
<VStack alignment="center" spacing={ 0 }>
<Text
weight={ 500 }
Expand Down Expand Up @@ -286,6 +288,7 @@ export default function NewTemplate( {
<TemplateListItem
key={ slug }
title={ title }
className="edit-site-add-new-template__template-button"
description={
TEMPLATE_SHORT_DESCRIPTIONS[ slug ]
}
Expand Down
15 changes: 15 additions & 0 deletions packages/edit-site/src/components/add-new-template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,21 @@
@include break-large() {
width: calc(100% - #{$grid-unit-80 * 2});
}

.edit-site-add-new-template__template-button,
.edit-site-add-new-template__custom-template-button {
svg {
fill: var(--wp-admin-theme-color);
}
}

.edit-site-add-new-template__template-icon {
padding: $grid-unit-10;
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
border-radius: 100%;
max-height: $grid-unit-50;
max-width: $grid-unit-50;
}
}

.edit-site-custom-template-modal__contents,
Expand Down