Skip to content

Commit a21d385

Browse files
shakyShaneshakyShane
authored
onboarding: updated assets and copy (#1718)
* onboarding: updated assets and copy * update more icons * translations
1 parent f480dc0 commit a21d385

36 files changed

+271
-151
lines changed

‎special-pages/pages/onboarding/app/components/ListItem.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,18 @@ export const availableIcons = /** @type {const} */ ([
1515
'session-restore.png',
1616
'shield.png',
1717
'switch.png',
18-
'v3/default-browser.svg',
19-
'v3/dock.svg',
20-
'v3/favorite.svg',
21-
'v3/home.svg',
22-
'v3/import.svg',
23-
'v3/session-restore.svg',
24-
'v3/ads.svg',
25-
'v3/video-player.svg',
18+
'v3/Add-To-Dock-Color-24.svg',
19+
'v3/Ads-Blocked-Color-24.svg',
20+
'v3/Bookmark-Favorite-Color-24.svg',
21+
'v3/Browser-Default-Color-24.svg',
22+
'v3/Cookie-Blocked-Color-24.svg',
23+
'v3/Find-Search-Color-24.svg',
24+
'v3/Fire-Color-24.svg',
25+
'v3/Home-Color-24.svg',
26+
'v3/Import-Color-24.svg',
27+
'v3/Session-Restore-Color-24.svg',
28+
'v3/Shield-Color-24.svg',
29+
'v3/Video-Player-Color-24.svg',
2630
]);
2731

2832
const prefix = 'assets/img/steps/';

‎special-pages/pages/onboarding/app/components/v3/data-comparison-table.js

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,24 @@ export const SupportStatus = {
88
FULL_SUPPORT: 'fullSupport',
99
};
1010

11+
// prettier-ignore
1112
// eslint-disable-next-line @typescript-eslint/no-unused-vars
12-
const tableIcons = ['ads.svg', 'cookie.svg', 'fire.svg', 'search.svg', 'shield.svg', 'video-player.svg'];
13+
const tableIcons = /** @type {const} */ ([
14+
'v3/Add-To-Dock-Color-24.svg',
15+
'v3/Ads-Blocked-Color-24.svg',
16+
'v3/Bookmark-Favorite-Color-24.svg',
17+
'v3/Browser-Default-Color-24.svg',
18+
'v3/Cookie-Blocked-Color-24.svg',
19+
'v3/Find-Search-Color-24.svg',
20+
'v3/Fire-Color-24.svg',
21+
'v3/Home-Color-24.svg',
22+
'v3/Import-Color-24.svg',
23+
'v3/Session-Restore-Color-24.svg',
24+
'v3/Shield-Color-24.svg',
25+
'v3/Video-Player-Color-24.svg',
26+
]);
1327

14-
export const tableIconPrefix = 'assets/img/steps/v3/';
28+
export const tableIconPrefix = 'assets/img/steps/';
1529

1630
/** @typedef {{ icon: tableIcons[number], title: string, statuses: Record<'chrome'|'safari'|'ddg', SupportStatus> }} FeatureSupportData */
1731

@@ -20,10 +34,11 @@ export const tableIconPrefix = 'assets/img/steps/v3/';
2034
*
2135
* Safari was removed from the latest comparison table layout. Keeping it the data just in case it comes back.
2236
*
23-
* @type {(t: ReturnType<typeof import('../../types')['useTypedTranslation']>['t'], adBlockingEnabled?: boolean) => FeatureSupportData[]} */
37+
* @type {(t: ReturnType<typeof import('../../types')['useTypedTranslation']>['t'], adBlockingEnabled?: boolean) => FeatureSupportData[]}
38+
*/
2439
export const comparisonTableData = (t, adBlockingEnabled = false) => [
2540
{
26-
icon: 'search.svg',
41+
icon: 'v3/Find-Search-Color-24.svg',
2742
title: t('comparison_searchPrivately'),
2843
statuses: {
2944
chrome: SupportStatus.NOT_SUPPORTED,
@@ -32,7 +47,7 @@ export const comparisonTableData = (t, adBlockingEnabled = false) => [
3247
},
3348
},
3449
{
35-
icon: 'shield.svg',
50+
icon: 'v3/Shield-Color-24.svg',
3651
title: t('comparison_blockTrackers'),
3752
statuses: {
3853
chrome: SupportStatus.NOT_SUPPORTED,
@@ -41,7 +56,7 @@ export const comparisonTableData = (t, adBlockingEnabled = false) => [
4156
},
4257
},
4358
{
44-
icon: 'cookie.svg',
59+
icon: 'v3/Cookie-Blocked-Color-24.svg',
4560
title: t('comparison_blockCookies'),
4661
statuses: {
4762
chrome: SupportStatus.NOT_SUPPORTED,
@@ -50,7 +65,7 @@ export const comparisonTableData = (t, adBlockingEnabled = false) => [
5065
},
5166
},
5267
{
53-
icon: 'ads.svg',
68+
icon: 'v3/Ads-Blocked-Color-24.svg',
5469
title: t('comparison_blockAds'),
5570
statuses: {
5671
chrome: SupportStatus.NOT_SUPPORTED,
@@ -59,7 +74,7 @@ export const comparisonTableData = (t, adBlockingEnabled = false) => [
5974
},
6075
},
6176
{
62-
icon: 'fire.svg',
77+
icon: 'v3/Fire-Color-24.svg',
6378
title: t('comparison_eraseData'),
6479
statuses: {
6580
chrome: SupportStatus.NOT_SUPPORTED,
@@ -68,7 +83,7 @@ export const comparisonTableData = (t, adBlockingEnabled = false) => [
6883
},
6984
},
7085
{
71-
icon: 'video-player.svg',
86+
icon: 'v3/Video-Player-Color-24.svg',
7287
title: adBlockingEnabled ? t('comparison_youtubeAdFree') : t('comparison_privateYoutube'),
7388
statuses: {
7489
chrome: SupportStatus.NOT_SUPPORTED,

‎special-pages/pages/onboarding/app/components/v3/data.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -149,15 +149,15 @@ export const stepsConfig = {
149149
export const settingsRowItems = {
150150
'default-browser': (t) => ({
151151
id: 'default-browser',
152-
icon: 'v3/default-browser.svg',
152+
icon: 'v3/Browser-Default-Color-24.svg',
153153
title: t('row_default-browser_title_v3'),
154154
kind: 'one-time',
155155
acceptText: t('row_default-browser_accept'),
156156
accepButtonVariant: 'primary',
157157
}),
158158
import: (t) => ({
159159
id: 'import',
160-
icon: 'v3/import.svg',
160+
icon: 'v3/Import-Color-24.svg',
161161
title: t('row_import_title_v3'),
162162
secondaryText: t('row_import_summary_v3'),
163163
kind: 'one-time',
@@ -172,7 +172,7 @@ export const settingsRowItems = {
172172

173173
return {
174174
id: 'dock',
175-
icon: 'v3/dock.svg',
175+
icon: 'v3/Add-To-Dock-Color-24.svg',
176176
title,
177177
secondaryText,
178178
kind: 'one-time',
@@ -182,31 +182,31 @@ export const settingsRowItems = {
182182
},
183183
bookmarks: (t) => ({
184184
id: 'bookmarks',
185-
icon: 'v3/favorite.svg',
185+
icon: 'v3/Bookmark-Favorite-Color-24.svg',
186186
title: t('row_bookmarks_title_v3'),
187187
kind: 'toggle',
188188
acceptText: t('row_bookmarks_accept'),
189189
accepButtonVariant: 'secondary',
190190
}),
191191
'session-restore': (t) => ({
192192
id: 'session-restore',
193-
icon: 'v3/session-restore.svg',
193+
icon: 'v3/Session-Restore-Color-24.svg',
194194
title: t('row_session-restore_title_v3'),
195195
kind: 'toggle',
196196
acceptText: t('row_session-restore_accept'),
197197
accepButtonVariant: 'secondary',
198198
}),
199199
'home-shortcut': (t) => ({
200200
id: 'home-shortcut',
201-
icon: 'v3/home.svg',
201+
icon: 'v3/Home-Color-24.svg',
202202
title: t('row_home-shortcut_title_v3'),
203203
kind: 'toggle',
204204
acceptText: t('row_home-shortcut_accept'),
205205
accepButtonVariant: 'secondary',
206206
}),
207207
'placebo-ad-blocking': (t) => ({
208208
id: 'placebo-ad-blocking',
209-
icon: 'v3/ads.svg',
209+
icon: 'v3/Ads-Blocked-Color-24.svg',
210210
title: t('row_placebo-ad-blocking_title_v3'),
211211
secondaryText: t('row_ad-blocking_desc_v3'),
212212
kind: 'one-time',
@@ -215,7 +215,7 @@ export const settingsRowItems = {
215215
}),
216216
'aggressive-ad-blocking': (t) => ({
217217
id: 'aggressive-ad-blocking',
218-
icon: 'v3/ads.svg',
218+
icon: 'v3/Ads-Blocked-Color-24.svg',
219219
title: t('row_aggressive-ad-blocking_title_v3'),
220220
secondaryText: t('row_ad-blocking_desc_v3'),
221221
kind: 'one-time',
@@ -224,7 +224,7 @@ export const settingsRowItems = {
224224
}),
225225
'youtube-ad-blocking': (t) => ({
226226
id: 'youtube-ad-blocking',
227-
icon: 'v3/ads.svg',
227+
icon: 'v3/Ads-Blocked-Color-24.svg',
228228
title: t('row_youtube-ad-blocking_title_v3'),
229229
secondaryText: t('row_youtube-ad-blocking_desc_v3'),
230230
kind: 'one-time',

‎special-pages/pages/onboarding/app/data.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ export const settingsRowItems = {
220220
// Intended only for use with v3
221221
'placebo-ad-blocking': (t) => ({
222222
id: 'placebo-ad-blocking',
223-
icon: 'v3/ads.svg',
223+
icon: 'v3/Ads-Blocked-Color-24.svg',
224224
title: t('row_placebo-ad-blocking_title_v3'),
225225
secondaryText: t('row_ad-blocking_desc_v3'),
226226
summary: t('row_placebo-ad-blocking_title_v3'),
@@ -231,7 +231,7 @@ export const settingsRowItems = {
231231
// Intended only for use with v3
232232
'aggressive-ad-blocking': (t) => ({
233233
id: 'aggressive-ad-blocking',
234-
icon: 'v3/ads.svg',
234+
icon: 'v3/Ads-Blocked-Color-24.svg',
235235
title: t('row_aggressive-ad-blocking_title_v3'),
236236
secondaryText: t('row_ad-blocking_desc_v3'),
237237
summary: t('row_aggressive-ad-blocking_title_v3'),
@@ -242,7 +242,7 @@ export const settingsRowItems = {
242242
// Intended only for use with v3
243243
'youtube-ad-blocking': (t) => ({
244244
id: 'youtube-ad-blocking',
245-
icon: 'v3/video-player.svg',
245+
icon: 'v3/Video-Player-Color-24.svg',
246246
title: t('row_youtube-ad-blocking_title_v3'),
247247
secondaryText: t('row_youtube-ad-blocking_desc_v3'),
248248
summary: t('row_youtube-ad-blocking_title_v3'),

‎special-pages/pages/onboarding/public/assets/img/steps/v3/Add-To-Dock-Color-24.svg

Lines changed: 18 additions & 0 deletions
Loading

‎special-pages/pages/onboarding/public/assets/img/steps/v3/Ads-Blocked-Color-24.svg

Lines changed: 16 additions & 0 deletions
Loading

‎special-pages/pages/onboarding/public/assets/img/steps/v3/Bookmark-Favorite-Color-24.svg

Lines changed: 11 additions & 0 deletions
Loading

‎special-pages/pages/onboarding/public/assets/img/steps/v3/Browser-Default-Color-24.svg

Lines changed: 18 additions & 0 deletions
Loading

‎special-pages/pages/onboarding/public/assets/img/steps/v3/Cookie-Blocked-Color-24.svg

Lines changed: 41 additions & 0 deletions
Loading

‎special-pages/pages/onboarding/public/assets/img/steps/v3/Find-Search-Color-24.svg

Lines changed: 5 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)