diff --git a/assets/css/onboarding/onboarding.css b/assets/css/onboarding/onboarding.css
index c3362563d..ae11f3057 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) */
@@ -45,6 +45,7 @@
font-family: system-ui, Arial, sans-serif;
+ font-size: 16px;
padding: 0;
box-sizing: border-box;
@@ -56,7 +57,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 {
@@ -68,7 +70,7 @@
position: absolute;
top: 5px;
right: 5px;
- padding: 0.5em;
+ padding: 8px;
cursor: pointer;
background: none;
border: none;
@@ -82,9 +84,9 @@
}
p {
- font-size: 1rem;
+ font-size: 16px;
margin-top: 0;
- margin-bottom: 0.5rem;
+ margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
@@ -94,15 +96,15 @@
h2 {
font-family: system-ui, Arial, sans-serif;
margin-top: 0;
- margin-bottom: 0.75rem;
- font-size: 1.25rem;
+ margin-bottom: 12px;
+ font-size: 20px;
}
h3 {
font-family: system-ui, Arial, sans-serif;
margin-top: 0;
- margin-bottom: 1rem;
- font-size: 1rem;
+ margin-bottom: 8px;
+ font-size: 16px;
font-weight: 600;
color: var(--prpl-color-text);
@@ -122,7 +124,7 @@
padding: 0 24px 0 8px;
min-height: 30px;
- /* max-width: 25rem; */
+ /* 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%;
@@ -134,9 +136,9 @@
input[type="text"],
input[type="email"] {
width: 100%;
- padding: 0.5rem;
+ padding: 8px;
border: 1px solid var(--prpl-color-field-border);
- border-radius: 0.25rem;
+ border-radius: 4px;
font-size: 14px;
line-height: 1.4;
color: var(--prpl-color-text);
@@ -149,7 +151,7 @@
/* To prevent custom radio and checkbox from being cut off. */
display: flex;
flex-direction: column;
- gap: 0.5rem;
+ gap: 8px;
.prpl-checkbox-wrapper,
.prpl-radio-wrapper {
@@ -185,7 +187,7 @@
.prpl-custom-radio {
display: flex;
align-items: center;
- margin-bottom: 0.5rem;
+ margin-bottom: 8px;
cursor: pointer;
user-select: none;
}
@@ -274,7 +276,7 @@
.prpl-onboarding-layout {
display: flex;
- /* gap: 1.5rem; */
+ /* gap: 24px; */
min-height: 350px;
}
@@ -283,12 +285,12 @@
width: 340px;
background: var(--prpl-background-steps);
border-right: none;
- padding: 2rem 1.5rem;
+ padding: 32px 24px 24px 24px;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
- gap: 1.5rem;
+ gap: 24px;
}
.prpl-onboarding-logo {
@@ -365,7 +367,7 @@
#prpl-onboarding-mobile-step-label {
display: none;
- margin-bottom: 0.25rem;
+ margin-bottom: 4px;
font-size: 14px;
color: var(--prpl-background-step-active);
font-weight: 600;
@@ -373,12 +375,12 @@
/* Right section: Content area */
.prpl-onboarding-content {
- padding: 2rem 1.5rem;
+ padding: 32px 24px;
flex: 1;
display: flex;
flex-direction: column;
- /* gap: 1.5rem; */
+ /* gap: 24px; */
}
.tour-content-wrapper {
@@ -396,7 +398,7 @@
}
.tour-footer {
- margin-top: 1rem;
+ margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
@@ -424,7 +426,7 @@
.prpl-columns-wrapper-flex {
display: flex;
- gap: 1.5rem;
+ gap: 24px;
/* overflow: hidden; */
@@ -472,7 +474,7 @@
.prpl-btn {
display: inline-block;
margin: 0;
- padding: 0.75rem 1.25rem;
+ padding: 12px 20px;
text-decoration: none;
cursor: pointer;
@@ -571,7 +573,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 +595,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);
}
}
@@ -676,7 +677,7 @@
.prpl-onboarding-task-form {
display: flex;
align-items: center;
- gap: 0.5rem;
+ gap: 8px;
border: none;
padding: 0;
margin: 0;
@@ -684,7 +685,7 @@
.prpl-complete-task-btn {
flex-shrink: 0;
- margin-top: 1rem;
+ margin-top: 16px;
}
}
@@ -707,6 +708,11 @@
max-width: 100%;
}
}
+
+ .prpl-welcome-note{
+ font-size: 14px;
+ font-style: italic;
+ }
}
/* Privacy checkbox */
@@ -732,7 +738,7 @@
}
.prpl-required-indicator {
- font-size: 0.875rem;
+ font-size: 14px;
font-style: italic;
&::before {
@@ -745,7 +751,7 @@
&.prpl-required-indicator-active {
color: var(--prpl-color-text-error);
- font-size: 1rem;
+ font-size: 16px;
font-style: normal;
&::before {
@@ -775,8 +781,8 @@
font-weight: 700;
color: var(--prpl-text-point);
background-color: var(--prpl-background-point);
- width: 1.5rem;
- height: 1.5rem;
+ width: 24px;
+ height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
@@ -791,13 +797,13 @@
gap: 10px;
/* .prpl-onboarding-task-title {
- margin: 0 0 1rem 0;
+ margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
} */
.prpl-onboarding-task-form {
- margin-top: 1rem;
+ margin-top: 16px;
width: 100%;
flex-direction: column;
@@ -829,10 +835,10 @@
} */
#prpl-email-form {
- margin-top: 1rem;
+ margin-top: 16px;
.prpl-form-field {
- margin-top: 1rem;
+ margin-top: 16px;
&:first-child {
margin-top: 0;
@@ -840,7 +846,7 @@
label {
display: inline-block;
- margin-bottom: 0.5rem;
+ margin-bottom: 8px;
}
}
}
@@ -857,11 +863,11 @@
display: flex;
flex-direction: column;
flex-grow: 1;
- gap: 1.5rem;
+ gap: 24px;
}
.prpl-setting-title {
- margin: 0 0 1rem 0;
+ margin: 0 0 16px 0;
}
.prpl-settings-progress {
@@ -877,7 +883,7 @@
justify-content: flex-end;
align-items: flex-start;
gap: 10px;
- margin-top: 1rem;
+ margin-top: 16px;
.prpl-save-setting-btn {
flex-shrink: 0;
@@ -896,7 +902,7 @@
display: none;
gap: 10px;
border-radius: 12px;
- padding: 1rem;
+ padding: 16px;
color: var(--prpl-color-field-border-active);
font-size: 14px;
background-color: var(--prpl-background-field-active);
@@ -917,7 +923,7 @@
#prpl-post-types-include-wrapper {
display: flex;
flex-direction: column;
- gap: 0.75rem;
+ gap: 12px;
}
/* Toggle checkbox for post types. */
@@ -929,7 +935,7 @@
.prpl-post-type-toggle-label {
display: flex;
align-items: center;
- gap: 0.75rem;
+ gap: 12px;
cursor: pointer;
position: relative;
}
@@ -1047,15 +1053,15 @@
.prpl-more-tasks-substep[data-substep="more-tasks-intro"] {
display: flex;
flex-direction: column;
- gap: 1.5rem;
+ gap: 24px;
}
.prpl-more-tasks-intro-buttons {
- margin-top: 1rem;
+ margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
- gap: 1.5rem;
+ gap: 24px;
flex-wrap: wrap;
}
@@ -1066,7 +1072,7 @@
text-decoration: underline;
font-size: 16px;
cursor: pointer;
- padding: 0.75rem 0;
+ padding: 12px 0;
}
.prpl-finish-onboarding:hover,
@@ -1113,13 +1119,13 @@
}
.prpl-task-arrow {
- padding-right: 0.5rem;
+ padding-right: 8px;
}
.prpl-task-item-button-wrapper {
display: flex;
align-items: center;
- gap: 0.5rem;
+ gap: 8px;
flex-shrink: 0;
}
@@ -1157,7 +1163,7 @@
display: flex;
flex-direction: column;
flex-grow: 1;
- gap: 1.5rem;
+ gap: 24px;
width: 100%;
.prpl-onboarding-task {
@@ -1174,7 +1180,7 @@
.prpl-onboarding-task-form {
justify-content: space-between;
- gap: 3rem;
+ gap: 48px;
}
}
}
@@ -1183,7 +1189,7 @@
.prpl-task-buttons {
display: flex;
justify-content: flex-end;
- gap: 1rem;
+ gap: 16px;
width: 100%;
.prpl-btn {
@@ -1297,7 +1303,7 @@
/* Quit confirmation */
.prpl-quit-actions {
flex-direction: column;
- gap: 1rem;
+ gap: 16px;
}
/* Naviation section */
@@ -1310,14 +1316,14 @@
z-index: 1000;
flex-direction: row;
- gap: 1rem;
+ gap: 16px;
justify-content: center;
align-items: center;
- padding: 0.5rem;
+ padding: 8px;
.prpl-step-list {
display: flex;
- gap: 0.5rem;
+ gap: 8px;
.prpl-nav-step-item {
margin: 0;
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' ), '
- 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/select-locale.php b/views/onboarding/tasks/select-locale.php
index 4aea6c940..a248d3c9d 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.
+
diff --git a/views/onboarding/tasks/select-timezone.php b/views/onboarding/tasks/select-timezone.php
index 583f7073e..142b43493 100644
--- a/views/onboarding/tasks/select-timezone.php
+++ b/views/onboarding/tasks/select-timezone.php
@@ -21,7 +21,7 @@
- Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam.
+
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..43cebc7f5 100644
--- a/views/onboarding/whats-what.php
+++ b/views/onboarding/whats-what.php
@@ -26,7 +26,7 @@
?>
-
+
@@ -52,7 +52,12 @@