Skip to content

Commit 7b3693d

Browse files
committed
fix icons
1 parent 22d00cd commit 7b3693d

File tree

2 files changed

+51
-17
lines changed

2 files changed

+51
-17
lines changed

src/welcome/getting-started.js

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import SVGArrowUpRightIcon from './images/arrow-up-right.svg'
99
import SVGDivider from './images/divider.svg'
1010
import SVGQuickButtonsArrow from './images/quick-buttons-arrow.svg'
1111
import SVGCheck from './images/check.svg'
12+
import SVGStateHoverIcon from '../components/base-control2/images/state-hover.svg'
13+
import SVGStateParentHoverIcon from '../components/base-control2/images/state-parent-hover.svg'
1214

1315
/**
1416
* WordPress dependencies
@@ -21,6 +23,15 @@ import {
2123
scheduled as scheduledIcon,
2224
brush as brushIcon,
2325
blockDefault as blockDefaultIcon,
26+
desktop as desktopIcon,
27+
cog as cogIcon,
28+
column as columnIcon,
29+
copy as copyIcon,
30+
filter as filterIcon,
31+
reusableBlock as reusableBlockIcon,
32+
symbol as symbolIcon,
33+
archive as archiveIcon,
34+
globe as globeIcon,
2435
} from '@wordpress/icons'
2536

2637
/**
@@ -145,7 +156,7 @@ const QUICK_BUTTONS = [ {
145156
description: __( 'Pick a ready-made website template to kickstart your project — fully built layouts and styles, just swap in your content.', i18n ),
146157
link: '/wp-admin/post-new.php?post_type=page',
147158
cta: __( 'Select Kit', i18n ),
148-
style: { display: 'none' },
159+
display: false,
149160
},
150161
{
151162
id: 'design-system-picker',
@@ -154,51 +165,51 @@ const QUICK_BUTTONS = [ {
154165
description: __( 'Browse curated Design System presets — apply a professional look instantly without building from scratch.', i18n ),
155166
link: '/wp-admin/post-new.php?post_type=page',
156167
cta: __( 'Pick A System', i18n ),
157-
style: { display: 'none' },
168+
display: false,
158169
},
159170
{
160171
id: 'block-backgrounds',
161-
icon: brushIcon,
172+
icon: columnIcon,
162173
title: __( 'Block Backgrounds & Containers', i18n ),
163174
description: __( 'Use backgrounds to create stunning full-width sections, and containers to add boxed content for organizing your page.', i18n ),
164175
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=block-backgrounds`,
165176
cta: __( 'Try Now', i18n ),
166177
},
167178
{
168179
id: 'responsive-controls',
169-
icon: brushIcon,
180+
icon: desktopIcon,
170181
title: __( 'Responsive Controls', i18n ),
171182
description: __( 'Adjust styles for desktop, tablet, and mobile — easily control layout, spacing, and appearance for a seamless experience on any device.', i18n ),
172183
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=responsive-controls`,
173184
cta: __( 'Try Now', i18n ),
174185
},
175186
{
176187
id: 'hover-states',
177-
icon: brushIcon,
188+
icon: <span className="s-custom-icon-wrapper"><SVGStateHoverIcon /></span>,
178189
title: __( 'Styling Hover States', i18n ),
179190
description: __( 'Adjust styles for different hover states — create engaging effects when users interact with your designs.', i18n ),
180191
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=hover-states`,
181192
cta: __( 'Try Now', i18n ),
182193
},
183194
{
184195
id: 'advanced-hover-states',
185-
icon: brushIcon,
196+
icon: <span className="s-custom-icon-wrapper"><SVGStateParentHoverIcon /></span>,
186197
title: __( 'Styling Hover States - Advanced', i18n ),
187198
description: __( 'Style containers and their contents together—apply hover effects to multiple blocks at once for seamless interactive designs.', i18n ),
188199
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=advanced-hover-states`,
189200
cta: __( 'Try Now', i18n ),
190201
},
191202
{
192203
id: 'global-color-schemes',
193-
icon: brushIcon,
204+
icon: globeIcon,
194205
title: __( 'Global Color Schemes', i18n ),
195206
description: __( 'Create and apply color schemes to your entire website—maintain consistent branding across all pages with ease.', i18n ),
196207
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=global-color-schemes`,
197208
cta: __( 'Try Now', i18n ),
198209
},
199210
{
200211
id: 'block-styles',
201-
icon: brushIcon,
212+
icon: reusableBlockIcon,
202213
title: __( 'Re-using Block Styles', i18n ),
203214
description: __( 'Re-use block styles sitewide for consistent branding. Save and quickly apply your favorite style combinations to any block.', i18n ),
204215
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=block-styles` : '',
@@ -207,7 +218,7 @@ const QUICK_BUTTONS = [ {
207218
},
208219
{
209220
id: 'dynamic-content',
210-
icon: brushIcon,
221+
icon: archiveIcon,
211222
title: __( 'Dynamic Content', i18n ),
212223
description: __( 'Dynamically display content based on user interactions, site conditions, or time-based triggers.', i18n ),
213224
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=dynamic-content` : '',
@@ -216,7 +227,7 @@ const QUICK_BUTTONS = [ {
216227
},
217228
{
218229
id: 'conditional-display',
219-
icon: brushIcon,
230+
icon: cogIcon,
220231
title: __( 'Conditional Display', i18n ),
221232
description: __( 'Show or hide blocks based on specific conditions, such as user roles, device type, or custom criteria.', i18n ),
222233
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=conditional-display` : '',
@@ -225,7 +236,7 @@ const QUICK_BUTTONS = [ {
225236
},
226237
{
227238
id: 'motion-effects',
228-
icon: brushIcon,
239+
icon: symbolIcon,
229240
title: __( 'Motion Effects', i18n ),
230241
description: __( 'Add animations and transitions to your blocks for a more engaging and interactive user experience.', i18n ),
231242
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=motion-effects` : '',
@@ -234,7 +245,7 @@ const QUICK_BUTTONS = [ {
234245
},
235246
{
236247
id: 'custom-css',
237-
icon: brushIcon,
248+
icon: filterIcon,
238249
title: __( 'Applying CSS per Block', i18n ),
239250
description: __( 'Add custom CSS to your blocks for precise control over their appearance and behavior.', i18n ),
240251
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=custom-css` : '',
@@ -243,7 +254,7 @@ const QUICK_BUTTONS = [ {
243254
},
244255
{
245256
id: 'copy-paste-styles',
246-
icon: brushIcon,
257+
icon: copyIcon,
247258
title: __( 'Copy & Paste Styles', i18n ),
248259
description: __( 'Quickly apply styles from one block to another for consistent design and branding.', i18n ),
249260
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=copy-paste-styles` : '',
@@ -267,7 +278,11 @@ export const GettingStarted = () => {
267278
<p>{ __( 'Watch this video to get started with Stackable in within 5 minutes.', i18n ) }</p>
268279
</div>
269280
{ QUICK_BUTTONS.map( ( item, i ) => {
270-
return <div className="s-card" key={ i } style={ item.style ?? {} }>
281+
if ( item.display === false ) {
282+
return null
283+
}
284+
285+
return <div className="s-card" key={ i }>
271286
{ i === 0 && <div className="s-quick-buttons-arrow">
272287
<SVGQuickButtonsArrow />
273288
<span>{ __( 'Quick Start', i18n ) }</span>

src/welcome/getting-started.scss

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -274,21 +274,27 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
274274
border-radius: 8px;
275275
}
276276
// Succeeding icon colors are different.
277-
.s-card:nth-child(3) {
277+
.s-card:nth-child(5n + 3) {
278278
.s-quick-button-icon {
279279
background: #f00069;
280280
}
281281
}
282-
.s-card:nth-child(4) {
282+
.s-card:nth-child(5n + 4) {
283283
.s-quick-button-icon {
284284
background: #d000ff;
285285
}
286286
}
287-
.s-card:nth-child(5) {
287+
.s-card:nth-child(5n) {
288288
.s-quick-button-icon {
289289
background: #f89347;
290290
}
291291
}
292+
293+
.s-card:nth-child(5n + 6) {
294+
.s-quick-button-icon {
295+
background: #00c49a;
296+
}
297+
}
292298
.s-quick-button-button {
293299
white-space: nowrap;
294300

@@ -362,3 +368,16 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
362368
}
363369
}
364370
}
371+
372+
.s-custom-icon-wrapper {
373+
display: flex;
374+
align-items: center;
375+
justify-content: center;
376+
width: 24px;
377+
height: 24px;
378+
379+
svg {
380+
height: 16px !important;
381+
width: 16px;
382+
}
383+
}

0 commit comments

Comments
 (0)