From f486b60dcae4de6fe9f7f182fab0da4d970e3996 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Mon, 12 Jan 2026 11:49:17 +0100 Subject: [PATCH 1/6] onboarding design tweaks --- assets/css/onboarding/onboarding.css | 19 +++++++----- assets/js/onboarding/steps/OnboardingStep.js | 2 +- classes/class-onboard-wizard.php | 3 +- views/onboarding/badges.php | 7 ++++- views/onboarding/email-frequency.php | 7 ++++- views/onboarding/first-task.php | 10 ++++++- views/onboarding/more-tasks.php | 7 ++++- views/onboarding/quit-confirmation.php | 4 +-- views/onboarding/settings.php | 30 ++++++++++++------- .../onboarding/tasks/core-blogdescription.php | 3 ++ views/onboarding/tasks/core-siteicon.php | 3 ++ views/onboarding/tasks/select-locale.php | 3 ++ views/onboarding/tasks/select-timezone.php | 3 ++ views/onboarding/welcome.php | 2 +- views/onboarding/whats-what.php | 7 ++++- 15 files changed, 83 insertions(+), 27 deletions(-) diff --git a/assets/css/onboarding/onboarding.css b/assets/css/onboarding/onboarding.css index c3362563d..0cc8a85d6 100644 --- a/assets/css/onboarding/onboarding.css +++ b/assets/css/onboarding/onboarding.css @@ -32,7 +32,7 @@ --prpl-color-alert-error: #e73136; /* already exists in variables-color.css */ /* General error */ - --prpl-background-alert-error: #fef2f2;/* already exists in variables-color.css */ + --prpl-background-alert-error: #fdeded;/* already exists in variables-color.css */ --prpl-color-alert-error-text: #7f1d1d; /* already exists in variables-color.css */ /* Custom contros (inputs, radio, checkbox) */ @@ -56,7 +56,8 @@ max-width: 80vw; color: var(--prpl-color-text); background-color: var(--prpl-onboarding-popover-background); - border: 1px solid var(--prpl-color-ui-icon); + border: 1px solid var(--prpl-color-border); + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.07),-2px 0 6px rgba(0, 0, 0, 0.07); /* Popover backdrop. */ &::backdrop { @@ -101,7 +102,7 @@ h3 { font-family: system-ui, Arial, sans-serif; margin-top: 0; - margin-bottom: 1rem; + margin-bottom: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--prpl-color-text); @@ -283,7 +284,7 @@ width: 340px; background: var(--prpl-background-steps); border-right: none; - padding: 2rem 1.5rem; + padding: 2rem 1.5rem 1.5rem 1.5rem; flex-shrink: 0; display: flex; flex-direction: column; @@ -571,7 +572,6 @@ background: var(--prpl-background-alert-error); padding: 20px; border-radius: 6px; - border-left: 4px solid var(--prpl-color-alert-error); .prpl-error-icon { color: var(--prpl-color-alert-error); @@ -594,8 +594,8 @@ p { margin: 0; - font-size: 15px; - line-height: 1.6; + font-size: 16px; + line-height: 1.4; color: var(--prpl-color-alert-error-text); } } @@ -707,6 +707,11 @@ max-width: 100%; } } + + .prpl-welcome-note{ + font-size: var(--prpl-font-size-small); + font-style: italic; + } } /* Privacy checkbox */ diff --git a/assets/js/onboarding/steps/OnboardingStep.js b/assets/js/onboarding/steps/OnboardingStep.js index f75281b63..14a9c8f5e 100644 --- a/assets/js/onboarding/steps/OnboardingStep.js +++ b/assets/js/onboarding/steps/OnboardingStep.js @@ -300,7 +300,7 @@ class OnboardingStep { const dashboardText = this.wizard.config?.l10n?.dashboard || 'Take me to the Recommendations dashboard'; - this.nextBtn.textContent = dashboardText; + this.nextBtn.innerHTML = dashboardText; } } diff --git a/classes/class-onboard-wizard.php b/classes/class-onboard-wizard.php index 80a79eede..f484b487e 100644 --- a/classes/class-onboard-wizard.php +++ b/classes/class-onboard-wizard.php @@ -315,7 +315,8 @@ public function add_popover_scripts() { 'startOnboarding' => \esc_html__( 'Start onboarding', 'progress-planner' ), /* translators: %s: Progress Planner name. */ 'privacyPolicyError' => sprintf( \esc_html__( 'You need to agree with the privacy policy to use the %s plugin.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) ), - 'dashboard' => \esc_html__( 'Take me to the dashboard', 'progress-planner' ), + /* translators: %s: arrow icon */ + 'dashboard' => sprintf( \esc_html__( 'Take me to the dashboard %s', 'progress-planner' ), '' ), 'backToRecommendations' => \esc_html__( 'Back to recommendations', 'progress-planner' ), ], 'errorIcon' => \progress_planner()->get_asset( 'images/icon_exclamation_circle.svg' ), diff --git a/views/onboarding/badges.php b/views/onboarding/badges.php index dfee9bb11..19e5f32f6 100644 --- a/views/onboarding/badges.php +++ b/views/onboarding/badges.php @@ -56,7 +56,12 @@
- +
diff --git a/views/onboarding/email-frequency.php b/views/onboarding/email-frequency.php index 56fa275a5..e0696a043 100644 --- a/views/onboarding/email-frequency.php +++ b/views/onboarding/email-frequency.php @@ -96,7 +96,12 @@
- +
diff --git a/views/onboarding/first-task.php b/views/onboarding/first-task.php index 03aa65e39..310043ffb 100644 --- a/views/onboarding/first-task.php +++ b/views/onboarding/first-task.php @@ -31,7 +31,15 @@
- the_view( 'onboarding/tasks/' . $task['task_id'] . '.php', [ 'task' => $task ] ); ?> + the_view( + 'onboarding/tasks/' . $task['task_id'] . '.php', + [ + 'task' => $task, + 'show_chevron' => true, + ] + ); + ?>
diff --git a/views/onboarding/more-tasks.php b/views/onboarding/more-tasks.php index 25ac10302..5e0493a52 100644 --- a/views/onboarding/more-tasks.php +++ b/views/onboarding/more-tasks.php @@ -74,7 +74,12 @@
- +
diff --git a/views/onboarding/quit-confirmation.php b/views/onboarding/quit-confirmation.php index b3f4c5e90..4d38064c5 100644 --- a/views/onboarding/quit-confirmation.php +++ b/views/onboarding/quit-confirmation.php @@ -18,14 +18,14 @@
- the_asset( 'images/icon_exclamation_circle.svg' ); ?> + the_asset( 'images/icon_exclamation_circle_solid.svg' ); ?>

get_ui__branding()->get_admin_menu_name() ) ); + \printf( \esc_html__( 'You need to finish the onboarding before you can work with the %s plugin and start improving your site.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) ); ?>

diff --git a/views/onboarding/settings.php b/views/onboarding/settings.php index fa407bd9f..015e619c8 100644 --- a/views/onboarding/settings.php +++ b/views/onboarding/settings.php @@ -119,7 +119,10 @@ class="prpl-btn prpl-save-setting-btn" disabled > - + ' ); + ?>
@@ -134,7 +137,12 @@ class="prpl-btn prpl-save-setting-btn"
-

+

+ +

+

+ +

@@ -143,12 +151,6 @@ class="prpl-btn prpl-save-setting-btn" / -

- -

-

- -

@@ -190,7 +192,10 @@ class="prpl-post-type-toggle-input" class="prpl-btn prpl-save-setting-btn" disabled > - + ' ); + ?>
@@ -200,7 +205,12 @@ class="prpl-btn prpl-save-setting-btn"
- +
diff --git a/views/onboarding/tasks/core-blogdescription.php b/views/onboarding/tasks/core-blogdescription.php index 2b5ac9b2c..1cd7ba0e0 100644 --- a/views/onboarding/tasks/core-blogdescription.php +++ b/views/onboarding/tasks/core-blogdescription.php @@ -30,6 +30,9 @@ + + + diff --git a/views/onboarding/tasks/core-siteicon.php b/views/onboarding/tasks/core-siteicon.php index eb4ad338e..44baee3e3 100644 --- a/views/onboarding/tasks/core-siteicon.php +++ b/views/onboarding/tasks/core-siteicon.php @@ -47,6 +47,9 @@ diff --git a/views/onboarding/tasks/select-locale.php b/views/onboarding/tasks/select-locale.php index 4aea6c940..920b666a1 100644 --- a/views/onboarding/tasks/select-locale.php +++ b/views/onboarding/tasks/select-locale.php @@ -55,6 +55,9 @@ ?> diff --git a/views/onboarding/tasks/select-timezone.php b/views/onboarding/tasks/select-timezone.php index 583f7073e..c90da6f22 100644 --- a/views/onboarding/tasks/select-timezone.php +++ b/views/onboarding/tasks/select-timezone.php @@ -29,6 +29,9 @@ diff --git a/views/onboarding/welcome.php b/views/onboarding/welcome.php index 900843217..3e2a81983 100644 --- a/views/onboarding/welcome.php +++ b/views/onboarding/welcome.php @@ -28,7 +28,7 @@ \printf( \esc_html__( '%s helps you set clear, focused goals for your website. Let\'s go through a few simple steps to get everything set up.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) ); ?>

-

+

diff --git a/views/onboarding/whats-what.php b/views/onboarding/whats-what.php index 890e885e6..1c442f94f 100644 --- a/views/onboarding/whats-what.php +++ b/views/onboarding/whats-what.php @@ -52,7 +52,12 @@
- +
From 7eca0afe86e622333883f1f753856f3a6ad354bf Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Mon, 12 Jan 2026 14:55:05 +0100 Subject: [PATCH 2/6] add description for set timezone & site locale tasks --- views/onboarding/tasks/select-locale.php | 2 +- views/onboarding/tasks/select-timezone.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/views/onboarding/tasks/select-locale.php b/views/onboarding/tasks/select-locale.php index 920b666a1..86a1109e7 100644 --- a/views/onboarding/tasks/select-locale.php +++ b/views/onboarding/tasks/select-locale.php @@ -35,7 +35,7 @@

- Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam. + Your locale determines the language and formatting your visitors see, such as date structures and currency. Setting this helps your audience feel right at home. Choose your preferred language and region.

- Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam. + Setting your timezone ensures that scheduled posts and automated updates happen exactly when you expect them to. It keeps your site's clock synced with your local time. Pick your city or offset now!

From 8783571065cbcd19d2f81242f28b94a86b69cf00 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Mon, 12 Jan 2026 15:50:56 +0100 Subject: [PATCH 4/6] set base font size for popover and replace rem with em unit --- assets/css/onboarding/onboarding.css | 105 ++++++++++++++------------- 1 file changed, 53 insertions(+), 52 deletions(-) diff --git a/assets/css/onboarding/onboarding.css b/assets/css/onboarding/onboarding.css index 0cc8a85d6..9f2ed7a58 100644 --- a/assets/css/onboarding/onboarding.css +++ b/assets/css/onboarding/onboarding.css @@ -45,6 +45,7 @@ font-family: system-ui, Arial, sans-serif; + font-size: 16px; /* Explicit base to prevent theme overrides affecting em units */ padding: 0; box-sizing: border-box; @@ -83,9 +84,9 @@ } p { - font-size: 1rem; + font-size: 1em; margin-top: 0; - margin-bottom: 0.5rem; + margin-bottom: 0.5em; &:last-child { margin-bottom: 0; @@ -95,15 +96,15 @@ h2 { font-family: system-ui, Arial, sans-serif; margin-top: 0; - margin-bottom: 0.75rem; - font-size: 1.25rem; + margin-bottom: 0.75em; + font-size: 1.25em; } h3 { font-family: system-ui, Arial, sans-serif; margin-top: 0; - margin-bottom: 0.5rem; - font-size: 1rem; + margin-bottom: 0.5em; + font-size: 1em; font-weight: 600; color: var(--prpl-color-text); @@ -123,7 +124,7 @@ padding: 0 24px 0 8px; min-height: 30px; - /* max-width: 25rem; */ + /* max-width: 25em; */ width: 100%; -webkit-appearance: none; background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%; @@ -135,9 +136,9 @@ input[type="text"], input[type="email"] { width: 100%; - padding: 0.5rem; + padding: 0.5em; border: 1px solid var(--prpl-color-field-border); - border-radius: 0.25rem; + border-radius: 0.25em; font-size: 14px; line-height: 1.4; color: var(--prpl-color-text); @@ -150,7 +151,7 @@ /* To prevent custom radio and checkbox from being cut off. */ display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.5em; .prpl-checkbox-wrapper, .prpl-radio-wrapper { @@ -186,7 +187,7 @@ .prpl-custom-radio { display: flex; align-items: center; - margin-bottom: 0.5rem; + margin-bottom: 0.5em; cursor: pointer; user-select: none; } @@ -275,7 +276,7 @@ .prpl-onboarding-layout { display: flex; - /* gap: 1.5rem; */ + /* gap: 1.5em; */ min-height: 350px; } @@ -284,12 +285,12 @@ width: 340px; background: var(--prpl-background-steps); border-right: none; - padding: 2rem 1.5rem 1.5rem 1.5rem; + padding: 2em 1.5em 1.5em 1.5em; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; - gap: 1.5rem; + gap: 1.5em; } .prpl-onboarding-logo { @@ -366,7 +367,7 @@ #prpl-onboarding-mobile-step-label { display: none; - margin-bottom: 0.25rem; + margin-bottom: 0.25em; font-size: 14px; color: var(--prpl-background-step-active); font-weight: 600; @@ -374,12 +375,12 @@ /* Right section: Content area */ .prpl-onboarding-content { - padding: 2rem 1.5rem; + padding: 2em 1.5em; flex: 1; display: flex; flex-direction: column; - /* gap: 1.5rem; */ + /* gap: 1.5em; */ } .tour-content-wrapper { @@ -397,7 +398,7 @@ } .tour-footer { - margin-top: 1rem; + margin-top: 1em; display: flex; justify-content: space-between; align-items: flex-start; @@ -425,7 +426,7 @@ .prpl-columns-wrapper-flex { display: flex; - gap: 1.5rem; + gap: 1.5em; /* overflow: hidden; */ @@ -473,7 +474,7 @@ .prpl-btn { display: inline-block; margin: 0; - padding: 0.75rem 1.25rem; + padding: 0.75em 1.25em; text-decoration: none; cursor: pointer; @@ -676,7 +677,7 @@ .prpl-onboarding-task-form { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.5em; border: none; padding: 0; margin: 0; @@ -684,7 +685,7 @@ .prpl-complete-task-btn { flex-shrink: 0; - margin-top: 1rem; + margin-top: 1em; } } @@ -709,7 +710,7 @@ } .prpl-welcome-note{ - font-size: var(--prpl-font-size-small); + font-size: 0.875em; font-style: italic; } } @@ -721,7 +722,7 @@ label { gap: 10px; cursor: pointer; - font-size: 15px; + font-size: 0.9375em; color: var(--prpl-color-text); } @@ -737,7 +738,7 @@ } .prpl-required-indicator { - font-size: 0.875rem; + font-size: 0.875em; font-style: italic; &::before { @@ -750,7 +751,7 @@ &.prpl-required-indicator-active { color: var(--prpl-color-text-error); - font-size: 1rem; + font-size: 1em; font-style: normal; &::before { @@ -780,8 +781,8 @@ font-weight: 700; color: var(--prpl-text-point); background-color: var(--prpl-background-point); - width: 1.5rem; - height: 1.5rem; + width: 1.5em; + height: 1.5em; border-radius: 50%; display: inline-flex; align-items: center; @@ -796,13 +797,13 @@ gap: 10px; /* .prpl-onboarding-task-title { - margin: 0 0 1rem 0; + margin: 0 0 1em 0; font-size: 18px; font-weight: 600; } */ .prpl-onboarding-task-form { - margin-top: 1rem; + margin-top: 1em; width: 100%; flex-direction: column; @@ -834,10 +835,10 @@ } */ #prpl-email-form { - margin-top: 1rem; + margin-top: 1em; .prpl-form-field { - margin-top: 1rem; + margin-top: 1em; &:first-child { margin-top: 0; @@ -845,7 +846,7 @@ label { display: inline-block; - margin-bottom: 0.5rem; + margin-bottom: 0.5em; } } } @@ -862,11 +863,11 @@ display: flex; flex-direction: column; flex-grow: 1; - gap: 1.5rem; + gap: 1.5em; } .prpl-setting-title { - margin: 0 0 1rem 0; + margin: 0 0 1em 0; } .prpl-settings-progress { @@ -882,7 +883,7 @@ justify-content: flex-end; align-items: flex-start; gap: 10px; - margin-top: 1rem; + margin-top: 1em; .prpl-save-setting-btn { flex-shrink: 0; @@ -901,7 +902,7 @@ display: none; gap: 10px; border-radius: 12px; - padding: 1rem; + padding: 1em; color: var(--prpl-color-field-border-active); font-size: 14px; background-color: var(--prpl-background-field-active); @@ -922,7 +923,7 @@ #prpl-post-types-include-wrapper { display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0.75em; } /* Toggle checkbox for post types. */ @@ -934,7 +935,7 @@ .prpl-post-type-toggle-label { display: flex; align-items: center; - gap: 0.75rem; + gap: 0.75em; cursor: pointer; position: relative; } @@ -1052,15 +1053,15 @@ .prpl-more-tasks-substep[data-substep="more-tasks-intro"] { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 1.5em; } .prpl-more-tasks-intro-buttons { - margin-top: 1rem; + margin-top: 1em; display: flex; align-items: center; justify-content: center; - gap: 1.5rem; + gap: 1.5em; flex-wrap: wrap; } @@ -1071,7 +1072,7 @@ text-decoration: underline; font-size: 16px; cursor: pointer; - padding: 0.75rem 0; + padding: 0.75em 0; } .prpl-finish-onboarding:hover, @@ -1118,13 +1119,13 @@ } .prpl-task-arrow { - padding-right: 0.5rem; + padding-right: 0.5em; } .prpl-task-item-button-wrapper { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.5em; flex-shrink: 0; } @@ -1162,7 +1163,7 @@ display: flex; flex-direction: column; flex-grow: 1; - gap: 1.5rem; + gap: 1.5em; width: 100%; .prpl-onboarding-task { @@ -1179,7 +1180,7 @@ .prpl-onboarding-task-form { justify-content: space-between; - gap: 3rem; + gap: 3em; } } } @@ -1188,7 +1189,7 @@ .prpl-task-buttons { display: flex; justify-content: flex-end; - gap: 1rem; + gap: 1em; width: 100%; .prpl-btn { @@ -1302,7 +1303,7 @@ /* Quit confirmation */ .prpl-quit-actions { flex-direction: column; - gap: 1rem; + gap: 1em; } /* Naviation section */ @@ -1315,14 +1316,14 @@ z-index: 1000; flex-direction: row; - gap: 1rem; + gap: 1em; justify-content: center; align-items: center; - padding: 0.5rem; + padding: 0.5em; .prpl-step-list { display: flex; - gap: 0.5rem; + gap: 0.5em; .prpl-nav-step-item { margin: 0; From 1d41060aaba812d11f5919a7c42fdc443f9cabe2 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Mon, 12 Jan 2026 15:58:42 +0100 Subject: [PATCH 5/6] better to use px unit --- assets/css/onboarding/onboarding.css | 108 +++++++++++++-------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/assets/css/onboarding/onboarding.css b/assets/css/onboarding/onboarding.css index 9f2ed7a58..ae11f3057 100644 --- a/assets/css/onboarding/onboarding.css +++ b/assets/css/onboarding/onboarding.css @@ -45,7 +45,7 @@ font-family: system-ui, Arial, sans-serif; - font-size: 16px; /* Explicit base to prevent theme overrides affecting em units */ + font-size: 16px; padding: 0; box-sizing: border-box; @@ -70,7 +70,7 @@ position: absolute; top: 5px; right: 5px; - padding: 0.5em; + padding: 8px; cursor: pointer; background: none; border: none; @@ -84,9 +84,9 @@ } p { - font-size: 1em; + font-size: 16px; margin-top: 0; - margin-bottom: 0.5em; + margin-bottom: 8px; &:last-child { margin-bottom: 0; @@ -96,15 +96,15 @@ h2 { font-family: system-ui, Arial, sans-serif; margin-top: 0; - margin-bottom: 0.75em; - font-size: 1.25em; + margin-bottom: 12px; + font-size: 20px; } h3 { font-family: system-ui, Arial, sans-serif; margin-top: 0; - margin-bottom: 0.5em; - font-size: 1em; + margin-bottom: 8px; + font-size: 16px; font-weight: 600; color: var(--prpl-color-text); @@ -124,7 +124,7 @@ padding: 0 24px 0 8px; min-height: 30px; - /* max-width: 25em; */ + /* max-width: 400px; */ width: 100%; -webkit-appearance: none; background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%; @@ -136,9 +136,9 @@ input[type="text"], input[type="email"] { width: 100%; - padding: 0.5em; + padding: 8px; border: 1px solid var(--prpl-color-field-border); - border-radius: 0.25em; + border-radius: 4px; font-size: 14px; line-height: 1.4; color: var(--prpl-color-text); @@ -151,7 +151,7 @@ /* To prevent custom radio and checkbox from being cut off. */ display: flex; flex-direction: column; - gap: 0.5em; + gap: 8px; .prpl-checkbox-wrapper, .prpl-radio-wrapper { @@ -187,7 +187,7 @@ .prpl-custom-radio { display: flex; align-items: center; - margin-bottom: 0.5em; + margin-bottom: 8px; cursor: pointer; user-select: none; } @@ -276,7 +276,7 @@ .prpl-onboarding-layout { display: flex; - /* gap: 1.5em; */ + /* gap: 24px; */ min-height: 350px; } @@ -285,12 +285,12 @@ width: 340px; background: var(--prpl-background-steps); border-right: none; - padding: 2em 1.5em 1.5em 1.5em; + padding: 32px 24px 24px 24px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; - gap: 1.5em; + gap: 24px; } .prpl-onboarding-logo { @@ -367,7 +367,7 @@ #prpl-onboarding-mobile-step-label { display: none; - margin-bottom: 0.25em; + margin-bottom: 4px; font-size: 14px; color: var(--prpl-background-step-active); font-weight: 600; @@ -375,12 +375,12 @@ /* Right section: Content area */ .prpl-onboarding-content { - padding: 2em 1.5em; + padding: 32px 24px; flex: 1; display: flex; flex-direction: column; - /* gap: 1.5em; */ + /* gap: 24px; */ } .tour-content-wrapper { @@ -398,7 +398,7 @@ } .tour-footer { - margin-top: 1em; + margin-top: 16px; display: flex; justify-content: space-between; align-items: flex-start; @@ -426,7 +426,7 @@ .prpl-columns-wrapper-flex { display: flex; - gap: 1.5em; + gap: 24px; /* overflow: hidden; */ @@ -474,7 +474,7 @@ .prpl-btn { display: inline-block; margin: 0; - padding: 0.75em 1.25em; + padding: 12px 20px; text-decoration: none; cursor: pointer; @@ -677,7 +677,7 @@ .prpl-onboarding-task-form { display: flex; align-items: center; - gap: 0.5em; + gap: 8px; border: none; padding: 0; margin: 0; @@ -685,7 +685,7 @@ .prpl-complete-task-btn { flex-shrink: 0; - margin-top: 1em; + margin-top: 16px; } } @@ -710,7 +710,7 @@ } .prpl-welcome-note{ - font-size: 0.875em; + font-size: 14px; font-style: italic; } } @@ -722,7 +722,7 @@ label { gap: 10px; cursor: pointer; - font-size: 0.9375em; + font-size: 15px; color: var(--prpl-color-text); } @@ -738,7 +738,7 @@ } .prpl-required-indicator { - font-size: 0.875em; + font-size: 14px; font-style: italic; &::before { @@ -751,7 +751,7 @@ &.prpl-required-indicator-active { color: var(--prpl-color-text-error); - font-size: 1em; + font-size: 16px; font-style: normal; &::before { @@ -781,8 +781,8 @@ font-weight: 700; color: var(--prpl-text-point); background-color: var(--prpl-background-point); - width: 1.5em; - height: 1.5em; + width: 24px; + height: 24px; border-radius: 50%; display: inline-flex; align-items: center; @@ -797,13 +797,13 @@ gap: 10px; /* .prpl-onboarding-task-title { - margin: 0 0 1em 0; + margin: 0 0 16px 0; font-size: 18px; font-weight: 600; } */ .prpl-onboarding-task-form { - margin-top: 1em; + margin-top: 16px; width: 100%; flex-direction: column; @@ -835,10 +835,10 @@ } */ #prpl-email-form { - margin-top: 1em; + margin-top: 16px; .prpl-form-field { - margin-top: 1em; + margin-top: 16px; &:first-child { margin-top: 0; @@ -846,7 +846,7 @@ label { display: inline-block; - margin-bottom: 0.5em; + margin-bottom: 8px; } } } @@ -863,11 +863,11 @@ display: flex; flex-direction: column; flex-grow: 1; - gap: 1.5em; + gap: 24px; } .prpl-setting-title { - margin: 0 0 1em 0; + margin: 0 0 16px 0; } .prpl-settings-progress { @@ -883,7 +883,7 @@ justify-content: flex-end; align-items: flex-start; gap: 10px; - margin-top: 1em; + margin-top: 16px; .prpl-save-setting-btn { flex-shrink: 0; @@ -902,7 +902,7 @@ display: none; gap: 10px; border-radius: 12px; - padding: 1em; + padding: 16px; color: var(--prpl-color-field-border-active); font-size: 14px; background-color: var(--prpl-background-field-active); @@ -923,7 +923,7 @@ #prpl-post-types-include-wrapper { display: flex; flex-direction: column; - gap: 0.75em; + gap: 12px; } /* Toggle checkbox for post types. */ @@ -935,7 +935,7 @@ .prpl-post-type-toggle-label { display: flex; align-items: center; - gap: 0.75em; + gap: 12px; cursor: pointer; position: relative; } @@ -1053,15 +1053,15 @@ .prpl-more-tasks-substep[data-substep="more-tasks-intro"] { display: flex; flex-direction: column; - gap: 1.5em; + gap: 24px; } .prpl-more-tasks-intro-buttons { - margin-top: 1em; + margin-top: 16px; display: flex; align-items: center; justify-content: center; - gap: 1.5em; + gap: 24px; flex-wrap: wrap; } @@ -1072,7 +1072,7 @@ text-decoration: underline; font-size: 16px; cursor: pointer; - padding: 0.75em 0; + padding: 12px 0; } .prpl-finish-onboarding:hover, @@ -1119,13 +1119,13 @@ } .prpl-task-arrow { - padding-right: 0.5em; + padding-right: 8px; } .prpl-task-item-button-wrapper { display: flex; align-items: center; - gap: 0.5em; + gap: 8px; flex-shrink: 0; } @@ -1163,7 +1163,7 @@ display: flex; flex-direction: column; flex-grow: 1; - gap: 1.5em; + gap: 24px; width: 100%; .prpl-onboarding-task { @@ -1180,7 +1180,7 @@ .prpl-onboarding-task-form { justify-content: space-between; - gap: 3em; + gap: 48px; } } } @@ -1189,7 +1189,7 @@ .prpl-task-buttons { display: flex; justify-content: flex-end; - gap: 1em; + gap: 16px; width: 100%; .prpl-btn { @@ -1303,7 +1303,7 @@ /* Quit confirmation */ .prpl-quit-actions { flex-direction: column; - gap: 1em; + gap: 16px; } /* Naviation section */ @@ -1316,14 +1316,14 @@ z-index: 1000; flex-direction: row; - gap: 1em; + gap: 16px; justify-content: center; align-items: center; - padding: 0.5em; + padding: 8px; .prpl-step-list { display: flex; - gap: 0.5em; + gap: 8px; .prpl-nav-step-item { margin: 0; From ec28df7c440b0fb9fe77df9a93a56252bae80be7 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Wed, 14 Jan 2026 09:24:05 +0100 Subject: [PATCH 6/6] add extra sentence to the "what's what" step --- views/onboarding/whats-what.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/onboarding/whats-what.php b/views/onboarding/whats-what.php index 1c442f94f..43cebc7f5 100644 --- a/views/onboarding/whats-what.php +++ b/views/onboarding/whats-what.php @@ -26,7 +26,7 @@ ?>

- +