+
+
+ heading={ content.heading }
+ subHeading={ content.subheading } >
{
+ tabs={ content.tabs.map( ( tab ) => {
return {
- name: __( tab.name , 'wp-module-onboarding'),
- title: __( tab.title , 'wp-module-onboarding'),
+ name: tab.name,
+ title: tab.title,
content:
+ title={ tab.subtitle }
+ text={ tab.text }
+ imgType={ tab.imgType }
+ animationName={ tab.animationName }
+ className="tab-data" />,
};
- } )}
+ } ) }
>
- {( tab ) => {tab.content}
}
+ { ( tab ) => { tab.content }
}
-
+
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
index 0c990399c..a69f91d6e 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
@@ -1,137 +1,150 @@
@import "./Sidebar/LearnMore/stylesheet";
+
.nfd-onboarding-overview {
- width: 100%;
- max-width: 960px;
- background-color: var(--nfd-onboarding-light);
- padding: 20px;
- &__header {
- display: flex;
- align-items: center;
- column-gap: 1rem;
- &-icon {
- display: flex;
- place-items: center;
- svg {
- fill: var(--nfd-onboarding-primary);
- }
- }
- &-heading {
- margin: 0 0 6px 0;
- color: var(--nfd-onboarding-dark);
- }
- &-subheading {
- color: var(--nfd-onboarding-dark);
- }
- }
-
- &__tab-panel {
- width: 90%;
- padding-bottom: 40px;
- color: var(--nfd-onboarding-dark);
- }
+ width: 100%;
+ max-width: 960px;
+ background-color: var(--nfd-onboarding-light);
+ padding: 20px;
+
+ &__header {
+ display: flex;
+ align-items: center;
+ column-gap: 1rem;
+
+ &-icon {
+ display: flex;
+ place-items: center;
+
+ svg {
+ fill: var(--nfd-onboarding-primary);
+ }
+ }
+
+ &-heading {
+ margin: 0 0 6px 0;
+ color: var(--nfd-onboarding-dark);
+ }
+
+ &-subheading {
+ color: var(--nfd-onboarding-dark);
+ }
+ }
+
+ &__tab-panel {
+ width: 90%;
+ padding-bottom: 40px;
+ color: var(--nfd-onboarding-dark);
+ }
}
.nfd-step-card-subheading {
- display: flex;
- justify-content: space-around;
+ display: flex;
+ justify-content: space-around;
}
.components-tab-panel__tabs {
- justify-content: space-around;
+ justify-content: space-around;
+
@media screen and ( max-width: 480px ) {
- width: 100%;
- }
+ width: 100%;
+ }
}
.components-tab-panel__tabs > .components-button:focus:not(:disabled),
.components-tab-panel__tabs > .components-button.is-pressed:focus:not(:disabled) {
- box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
+ box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
}
.components-tab-panel__tabs-item {
- justify-content: center;
- border-bottom: 1px solid #CCCCCC;
- width: 100%;
- font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem);
- line-height: 1.5;
-
- &.is-active {
- color: var(--wp-admin-theme-color);
- box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
- }
-
- &.is-not-active {
- box-shadow: none !important;
- }
+ justify-content: center;
+ border-bottom: 1px solid #ccc;
+ width: 100%;
+ font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem);
+ line-height: 1.5;
+
+ &.is-active {
+ color: var(--wp-admin-theme-color);
+ box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
+ }
+
+ &.is-not-active {
+ box-shadow: none !important;
+ }
}
-.tab-data{
- width: 100%;
- padding-top: 40px;
- display: flex;
- flex-direction: row;
- align-items: stretch;
- justify-content: space-between;
-
+.tab-data {
+ width: 100%;
+ padding-top: 40px;
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ justify-content: space-between;
+
}
-.content-text{
- padding-right: 10px;
- font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem);
- line-height: 1.6;
+.content-text {
+ padding-right: 10px;
+ font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem);
+ line-height: 1.6;
}
.content-image {
- background-color: var(--nfd-onboarding-tertiary);
- overflow: hidden;
+ background-color: var(--nfd-onboarding-tertiary);
+ overflow: hidden;
}
-.whatsnext-image {
- background-size: contain;
- background-repeat: no-repeat;
- height: 228px;
- width: clamp(180px, 50vw, 400px);
+%whatsnext-image {
+ background-size: contain;
+ background-repeat: no-repeat;
+ height: 228px;
+ width: clamp(180px, 50vw, 400px);
}
-.wpadmin-img {
- @extend .whatsnext-image;
- background-image: var(--what-next-wp-admin-img);
+.img-1 {
+
+ @extend %whatsnext-image;
+ background-image: var(--nfd-onboarding-step-what-next-img-1);
}
-.help-img {
- @extend .whatsnext-image;
- background-image: var(--what-next-help-img);
+.img-2 {
+
+ @extend %whatsnext-image;
+ background-image: var(--nfd-onboarding-step-what-next-img-2);
}
-.bluesky-img {
- @extend .whatsnext-image;
- background-image: var(--what-next-bluesky-img);
+.img-3 {
+
+ @extend %whatsnext-image;
+ background-image: var(--nfd-onboarding-step-what-next-img-3);
}
.whatnext-card {
display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- height: clamp(600px, 59vh, 800px) !important;
- width: 100%;
- padding-bottom: 10px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ height: clamp(600px, 59vh, 800px) !important;
+ width: 100%;
+ padding-bottom: 10px;
}
@media screen and ( max-width: #{ ($break-medium)} ) {
- .tab-data {
- flex-direction: column-reverse;
- align-items: center;
- }
-
- .content-text {
- text-align: center;
- width: 100%;
- min-height: 10px;
- }
-
- .wpadmin-img, .help-img, .bluesky-img {
- max-height: 100px;
- }
+
+ .tab-data {
+ flex-direction: column-reverse;
+ align-items: center;
+ }
+
+ .content-text {
+ text-align: center;
+ width: 100%;
+ min-height: 10px;
+ }
+
+ .wpadmin-img,
+ .help-img,
+ .bluesky-img {
+ max-height: 100px;
+ }
}
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json b/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json
deleted file mode 100644
index 31aa1b20a..000000000
--- a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "tabs": [
- {
- "name": "tab1",
- "title": "WHATS NEXT",
- "subtitle": "Add content, organize your menu and launch.",
- "text": "✅ Theme created, features added and Coming Soon mode activated. Thank you for building your site with Bluehost, we're always here to help!",
- "imgType": "wpadmin-img",
- "animationName": "fade-in-right"
- },
- {
- "name": "tab2",
- "title": "HELP & RESOURCES",
- "subtitle": "Next step or next level, we're your partner.",
- "text": "WordPress make it easy to grow your %s. Send a newsletter, broadcast a podcast, create courses and trainings. Dream it, build it.",
- "imgType": "help-img",
- "animationName": "fade-in-up"
- },
- {
- "name": "tab3",
- "title": "HIRE OUR EXPERTS",
- "subtitle": "Make our great people your people.",
- "text": "Pick your %s's unique design now and refine by customing your block templates, colors and fonts in the WordPress Site Editor.",
- "imgType": "bluesky-img",
- "animationName": "fade-in-left"
- }
- ]
-}
diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js
index d2c50fee9..6637280e6 100644
--- a/src/OnboardingSPA/store/selectors.js
+++ b/src/OnboardingSPA/store/selectors.js
@@ -1,11 +1,12 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
import { filter, findIndex } from 'lodash';
-import { addQueryArgs, getFragment } from '@wordpress/url';
+import { addQueryArgs } from '@wordpress/url';
/**
* Get the currently active drawer view
*
* @param {*} state
- * @return string
+ * @return {string} Drawer View
*/
export function getDrawerView( state ) {
return state.drawer.view;
@@ -15,7 +16,7 @@ export function getDrawerView( state ) {
* Check if the drawer is opened
*
* @param {*} state
- * @return boolean
+ * @return {boolean} Drawer isOpen
*/
export function isDrawerOpened( state ) {
return state.drawer.isOpen;
@@ -25,7 +26,7 @@ export function isDrawerOpened( state ) {
* Check if the drawer is suppressed
*
* @param {*} state
- * @return boolean
+ * @return {boolean} Drawer isSuppressed
*/
export function isDrawerSuppressed( state ) {
return state.drawer.isSuppressed;
@@ -39,7 +40,7 @@ export function isHeaderNavigationEnabled( state ) {
* Gets current Newfold brand
*
* @param {*} state
- * @return string
+ * @return {string} Newfold Brand
*/
export function getNewfoldBrand( state ) {
return state.runtime.currentBrand.brand;
@@ -49,17 +50,27 @@ export function getNewfoldBrand( state ) {
* Gets current Newfold brand
*
* @param {*} state
- * @return string
+ * @return {string} Current Brand Name
*/
export function getNewfoldBrandName( state ) {
return state.runtime.currentBrand.name;
}
+/**
+ * Gets the current Newfold Brand's Onboarding Configuration.
+ *
+ * @param {*} state
+ * @return {Object} Brand Onboarding Configuration.
+ */
+export function getNewfoldBrandConfig( state ) {
+ return state.runtime.currentBrand.config;
+}
+
/**
* Gets dynamic Hire Experts URL for Need Help Tag per brand
*
* @param {*} state
- * @return string
+ * @return {string} hireExpertsUrl
*/
export function getHireExpertsUrl( state ) {
const hireExpertsInfo = state.runtime.currentBrand.hireExpertsInfo;
@@ -75,7 +86,7 @@ export function getHireExpertsUrl( state ) {
* Gets the current Onboarding Data
*
* @param {*} state
- * @return string
+ * @return {string} Current Onboarding Data
*/
export function getCurrentOnboardingData( state ) {
return state.currentData;
@@ -85,7 +96,7 @@ export function getCurrentOnboardingData( state ) {
* Gets current Onboarding Flow
*
* @param {*} state
- * @return string
+ * @return {string} Onboarding Flow
*/
export function getOnboardingFlow( state ) {
return state.runtime.currentFlow ?? 'wp-setup';
@@ -103,7 +114,7 @@ export function getAllSteps( state ) {
* Gets steps to display in drawer.
*
* @param {*} state
- * @return
+ * @return {Array} Top Steps
*/
export function getTopSteps( state ) {
return state.flow.steps.topSteps;
@@ -113,7 +124,7 @@ export function getTopSteps( state ) {
* Gets design steps to display in drawer submenu.
*
* @param {*} state
- * @return
+ * @return {Array} Design Steps
*/
export function getDesignSteps( state ) {
return state.flow.steps.designSteps;
@@ -123,7 +134,7 @@ export function getDesignSteps( state ) {
* Gets get-started setup steps to display in drawer submenu.
*
* @param {*} state
- * @return
+ * @return {Array} Get Started Steps
*/
export function getGetStartedSteps( state ) {
return state.flow.steps.getStartedSteps;
@@ -133,7 +144,7 @@ export function getGetStartedSteps( state ) {
* Get the path to the current step.
*
* @param {*} state
- * @return
+ * @return {string} Current Step Path
*/
export function getCurrentStepPath( state ) {
return state.flow.steps.currentStep;
@@ -143,7 +154,7 @@ export function getCurrentStepPath( state ) {
* Gets the First step object.
*
* @param {*} state
- * @return object
+ * @return {Object} First Step
*/
export function getFirstStep( state ) {
return state.flow.steps.allSteps[ 0 ];
@@ -153,7 +164,7 @@ export function getFirstStep( state ) {
* Gets the Last step object.
*
* @param {*} state
- * @return object
+ * @return {Object} Last Step
*/
export function getLastStep( state ) {
return state.flow.steps.allSteps[ state.flow.steps.allSteps.length - 1 ];
@@ -163,7 +174,7 @@ export function getLastStep( state ) {
* Gets the current step object.
*
* @param {*} state
- * @return object
+ * @return {Object} Current Step
*/
export function getCurrentStep( state ) {
const filtered = filter( state.flow.steps.allSteps, [
@@ -182,7 +193,7 @@ export function getStepFromPath( state, path ) {
* Get's the previous step's object.
*
* @param {*} state
- * @return object|null|false
+ * @return {object|null|false} Previous Step
*/
export function getPreviousStep( state ) {
const currentStepIndex = findIndex( state.flow.steps.allSteps, {
@@ -201,7 +212,7 @@ export function getPreviousStep( state ) {
* Gets the next steps object.
*
* @param {*} state
- * @return object|null|false
+ * @return {object|null|false} Next Step
*/
export function getNextStep( state ) {
const totalIndexes = state.flow.steps.allSteps.length - 1;
@@ -257,7 +268,7 @@ export function getStepPreviewData( state ) {
* Gets the current header menu Data
*
* @param {*} state
- * @return string
+ * @return {string} menu
*/
export function getHeaderMenuData( state ) {
return state.header.menu;
@@ -267,9 +278,9 @@ export function getHeaderMenuData( state ) {
* Gets 1-1 Experts URL for Help Section in the Sidebars
*
* @param {*} state
- * @return string
+ * @return {string} expertsUrl
*/
- export function getExpertsUrl( state ) {
+export function getExpertsUrl( state ) {
const expertsInfo = state.runtime.currentBrand.expertsInfo;
const expertsUrl =
addQueryArgs(
@@ -283,9 +294,9 @@ export function getHeaderMenuData( state ) {
* Gets Full Service Creative Team URL for Help Section in the Sidebars
*
* @param {*} state
- * @return string
+ * @return {string} fullServiceCreativeTeamUrl
*/
- export function getfullServiceCreativeTeamUrl( state ) {
+export function getfullServiceCreativeTeamUrl( state ) {
const fullServiceCreativeTeamInfo = state.runtime.currentBrand.fullServiceCreativeTeamInfo;
const fullServiceCreativeTeamUrl =
addQueryArgs(
@@ -299,9 +310,9 @@ export function getHeaderMenuData( state ) {
* Gets Technical Support URL for Help Section in the Sidebars
*
* @param {*} state
- * @return string
+ * @return {string} techSupportUrl
*/
- export function getTechSupportUrl( state ) {
+export function getTechSupportUrl( state ) {
const techSupportInfo = state.runtime.currentBrand.techSupportInfo;
const techSupportUrl =
addQueryArgs(
@@ -309,14 +320,14 @@ export function getHeaderMenuData( state ) {
techSupportInfo?.queryParams
) + ( techSupportInfo?.fragment || '' );
return techSupportUrl;
- }
+}
/**
* Gets the Plugin Install Hash for security
*
* @param {*} state
- * @return string
+ * @return {string} pluginInstallHash
*/
export function getPluginInstallHash( state ) {
return state.runtime.pluginInstallHash;
-}
\ No newline at end of file
+}
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index fd3ec319a..656d56746 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -7,9 +7,9 @@ body {
--wp-admin-theme-color-darker-10--rgb: 28, 92, 186;
--wp-admin-theme-color-darker-20: #0242a0;
--wp-admin-theme-color-darker-20--rgb: 2, 66, 160;
- --nfd-onboarding-dark-icon: url("../../Brands/bluehost/dark.svg");
- --nfd-onboarding-icon: url("../../Brands/bluehost/icon.svg");
- --nfd-onboarding-logo: url("../../Brands/bluehost/logo.svg");
+ --nfd-onboarding-dark-icon: url(../../Brands/bluehost/dark.svg);
+ --nfd-onboarding-icon: url(../../Brands/bluehost/icon.svg);
+ --nfd-onboarding-logo: url(../../Brands/bluehost/logo.svg);
--nfd-onboarding-primary: #3575d3;
--nfd-onboarding-highlighted--rgb: 123, 177, 253;
--nfd-onboarding-primary-alt: #2c76dc;
@@ -30,8 +30,27 @@ body {
--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
--nfd-onboarding-loader-start: var(--nfd-onboarding-primary);
--nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary);
- --nfd-onboarding-step-loader-icon: url("../../Brands/bluehost/step-loader-logo.svg");
- --nfd-onboarding-step-error-icon: url("../../Brands/bluehost/step-error-logo.svg");
+ --nfd-onboarding-step-loader-icon: url(../../Brands/bluehost/step-loader-logo.svg);
+ --nfd-onboarding-step-error-icon: url(../../Brands/bluehost/step-error-logo.svg);
+ --nfd-onboarding-step-what-next-img-3: url(../../Brands/bluehost/bluesky.png);
+ --nfd-onboarding-step-what-next-img-1: url(../../Brands/bluehost/wp-admin.png);
+ --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png);
+
+ --nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration: url(../../Brands/bluehost/learn-more-get-started-welcome.svg);
+ --nfd-onboarding-sidebar-learn-more-get-started-wp-experience-illustration: url(../../Brands/bluehost/learn-more-get-started-wp-experience.svg);
+ --nfd-onboarding-sidebar-learn-more-get-started-site-type-illustration: url(../../Brands/bluehost/learn-more-get-started-site-type.svg);
+ --nfd-onboarding-sidebar-learn-more-ecommerce-address-illustration: url(../../Brands/bluehost/learn-more-ecommerce-address.svg);
+ --nfd-onboarding-sidebar-learn-more-ecommerce-tax-info-illustration: url(../../Brands/bluehost/learn-more-ecommerce-tax-info.svg);
+ --nfd-onboarding-sidebar-learn-more-ecommerce-products-illustration: url(../../Brands/bluehost/learn-more-ecommerce-products.svg);
+ --nfd-onboarding-sidebar-learn-more-basic-info-illustration: url(../../Brands/bluehost/learn-more-basic-info.svg);
+ --nfd-onboarding-sidebar-learn-more-design-theme-styles-illustration: url(../../Brands/bluehost/learn-more-design-theme-styles.svg);
+ --nfd-onboarding-sidebar-learn-more-design-colors-illustration: url(../../Brands/bluehost/learn-more-design-colors.svg);
+ --nfd-onboarding-sidebar-learn-more-design-typography-illustration: url(../../Brands/bluehost/learn-more-design-typography.svg);
+ --nfd-onboarding-sidebar-learn-more-design-header-menu-illustration: url(../../Brands/bluehost/learn-more-design-header-menu.svg);
+ --nfd-onboarding-sidebar-learn-more-design-homepage-illustration: url(../../Brands/bluehost/learn-more-design-homepage.svg);
+ --nfd-onboarding-sidebar-learn-more-pages-illustration: url(../../Brands/bluehost/learn-more-pages.svg);
+ --nfd-onboarding-sidebar-learn-more-site-features-illustration: url(../../Brands/bluehost/learn-more-site-features.svg);
+ --nfd-onboarding-sidebar-learn-more-what-next-illustration: url(../../Brands/bluehost/learn-more-what-next.svg);
}
&.nfd-brand-hostgator {
@@ -41,9 +60,9 @@ body {
--wp-admin-theme-color-darker-10--rgb: 20, 133, 236;
--wp-admin-theme-color-darker-20: #1177d2;
--wp-admin-theme-color-darker-20--rgb: 17, 119, 210;
- --nfd-onboarding-dark-icon: url("../../Brands/hostgator/dark.svg");
- --nfd-onboarding-icon: url("../../Brands/hostgator/icon.svg");
- --nfd-onboarding-logo: url("../../Brands/hostgator/logo.svg");
+ --nfd-onboarding-dark-icon: url(../../Brands/hostgator/dark.svg);
+ --nfd-onboarding-icon: url(../../Brands/hostgator/icon.svg);
+ --nfd-onboarding-logo: url(../../Brands/hostgator/logo.svg);
--nfd-onboarding-primary: #2e93ee;
--nfd-onboarding-highlighted--rgb: 30, 32, 68;
--nfd-onboarding-primary-alt: #3b97ff;
@@ -72,9 +91,9 @@ body {
--wp-admin-theme-color-darker-10--rgb: 43, 92, 251;
--wp-admin-theme-color-darker-20: #0b44fb;
--wp-admin-theme-color-darker-20--rgb: 11, 68, 251;
- --nfd-onboarding-dark-icon: url("../../Brands/webcom/dark.svg");
- --nfd-onboarding-icon: url("../../Brands/webcom/icon.svg");
- --nfd-onboarding-logo: url("../../Brands/webcom/logo.svg");
+ --nfd-onboarding-dark-icon: url(../../Brands/webcom/dark.svg);
+ --nfd-onboarding-icon: url(../../Brands/webcom/icon.svg);
+ --nfd-onboarding-logo: url(../../Brands/webcom/logo.svg);
--nfd-onboarding-primary: #4b75fc;
--nfd-onboarding-highlighted--rgb: 13, 71, 251;
--nfd-onboarding-primary-alt: #0d47fb;
@@ -95,4 +114,41 @@ body {
--nfd-onboarding-loader-start: var(--nfd-onboarding-primary);
--nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary);
}
+
+ &.nfd-brand-crazy-domains {
+ --wp-admin-theme-color: #6fac2f;
+ --wp-admin-theme-color--rgb: 111, 172, 47;
+ --wp-admin-theme-color-darker-10: #568f1b;
+ --wp-admin-theme-color-darker-10--rgb: 86, 143, 27;
+ --wp-admin-theme-color-darker-20: #484848;
+ --wp-admin-theme-color-darker-20--rgb: 72, 72, 72;
+ --nfd-onboarding-dark-icon: url(../../Brands/crazy-domains/icon-z.svg);
+ --nfd-onboarding-icon: url(../../Brands/crazy-domains/icon.svg);
+ --nfd-onboarding-logo: url(../../Brands/crazy-domains/logo.svg);
+ --nfd-onboarding-primary: var(--wp-admin-theme-color);
+ --nfd-onboarding-highlighted--rgb: var(--wp-admin-theme-color-darker-10--rgb);
+ --nfd-onboarding-primary-alt: var(--wp-admin-theme-color-darker-10);
+ --nfd-onboarding-secondary: var(--wp-admin-theme-color-darker-10);
+ --nfd-onboarding-secondary-alt: var(--wp-admin-theme-color-darker-20);
+ --nfd-onboarding-tertiary: var(--nfd-onboarding-primary);
+ --nfd-onboarding-tertiary-alt: var(--nfd-onboarding-primary-alt);
+ --nfd-onboarding-light: #fff;
+ --nfd-onboarding-light-gray: #f0f0f0;
+ --nfd-onboarding-light-gray-2: #efefef;
+ --nfd-onboarding-light-gray-3: #f2f2f2;
+ --nfd-onboarding-light-gray-4: #a7a7a7;
+ --nfd-onboarding-light-gray-5: #eee;
+ --nfd-onboarding-light-gray-highlighted: #e2e9f4;
+ --nfd-onboarding-dark: var(--wp-admin-theme-color-darker-20);
+ --nfd-onboarding-border: 219, 219, 219;
+ --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
+ --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
+ --nfd-onboarding-loader-start: var(--nfd-onboarding-primary);
+ --nfd-onboarding-loader-end: var(--nfd-onboarding-secondary);
+ --nfd-onboarding-step-loader-icon: url(../../Brands/crazy-domains/step-loader-logo.svg);
+ --nfd-onboarding-step-error-icon: url(../../Brands/crazy-domains/step-error-logo.svg);
+ --nfd-onboarding-step-what-next-img-3: url(../../Brands/crazy-domains/full-service.png);
+ --nfd-onboarding-step-what-next-img-1: url(../../Brands/crazy-domains/wp-admin.png);
+ --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png);
+ }
}
diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss
index 0057b5b62..994d4f4c8 100644
--- a/src/OnboardingSPA/styles/_icons.scss
+++ b/src/OnboardingSPA/styles/_icons.scss
@@ -1,118 +1,59 @@
body {
- --nfd-publish-icon: url("../static/icons/publish.svg");
- --nfd-selling-icon: url("../static/icons/sell.svg");
- --nfd-design-icon: url("../static/icons/design.svg");
- --more-icon: url("../static/icons/more.svg");
- --reload-icon: url("../static/icons/reload.svg");
- --forward-icon: url("../static/icons/forward.svg");
- --back-icon: url("../static/icons/back.svg");
- --chevron-up-icon: url("../static/icons/chevron-up.svg");
- --chevron-down-icon: url("../static/icons/chevron-down.svg");
- --default-logo-icon: url("../static/icons/default-logo.svg");
- --facebook-icon: url("../static/icons/social/facebook.svg");
- --facebook-colored-icon: url("../static/icons/social/facebook-colored.svg");
- --twitter-icon: url("../static/icons/social/twitter.svg");
- --twitter-colored-icon: url("../static/icons/social/twitter-colored.svg");
- --instagram-icon: url("../static/icons/social/instagram.svg");
- --instagram-colored-icon: url("../static/icons/social/instagram-colored.svg");
- --linkedin-icon: url("../static/icons/social/linkedin.svg");
- --linkedin-colored-icon: url("../static/icons/social/linkedin-colored.svg");
- --yelp-icon: url("../static/icons/social/yelp.svg");
- --yelp-colored-icon: url("../static/icons/social/yelp-colored.svg");
- --youtube-icon: url("../static/icons/social/youtube.svg");
- --youtube-colored-icon: url("../static/icons/social/youtube-colored.svg");
- --tiktok-icon: url("../static/icons/social/tiktok.svg");
- --tiktok-colored-icon: url("../static/icons/social/tiktok-colored.svg");
-
- --get-started-content-img: url("../static/images/content.png");
- --get-started-design-img: url("../static/images/design.png");
- --get-started-features-img: url("../static/images/features.png");
- --what-next-bluesky-img: url("../static/images/bluesky.png");
- --what-next-wp-admin-img: url("../static/images/wp-admin.png");
- --what-next-help-img: url("../static/images/help.png");
-
-
- --chevron-left-icon: url("../static/icons/chevron-left.svg");
- --chevron-right-icon: url("../static/icons/chevron-right.svg");
-
- --business-icon: url("../static/icons/business.svg");
- --business-white-icon: url("../static/icons/business-white.svg");
- --nfd-onboarding-step-error-icon: url("../../Brands/bluehost/step-error-logo.svg");
-
- --nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration: url("../static/icons/learn-more-get-started-welcome.svg");
- --nfd-onboarding-sidebar-learn-more-get-started-wp-experience-illustration: url("../static/icons/learn-more-get-started-wp-experience.svg");
- --nfd-onboarding-sidebar-learn-more-get-started-site-type-illustration: url("../static/icons/learn-more-get-started-site-type.svg");
- --nfd-onboarding-sidebar-learn-more-ecommerce-address-illustration: url("../static/icons/learn-more-ecommerce-address.svg");
- --nfd-onboarding-sidebar-learn-more-ecommerce-tax-info-illustration: url("../static/icons/learn-more-ecommerce-tax-info.svg");
- --nfd-onboarding-sidebar-learn-more-ecommerce-products-illustration: url("../static/icons/learn-more-ecommerce-products.svg");
- --nfd-onboarding-sidebar-learn-more-basic-info-illustration: url("../static/icons/learn-more-basic-info.svg");
- --nfd-onboarding-sidebar-learn-more-design-theme-styles-illustration: url("../static/icons/learn-more-design-theme-styles.svg");
- --nfd-onboarding-sidebar-learn-more-design-colors-illustration: url("../static/icons/learn-more-design-colors.svg");
- --nfd-onboarding-sidebar-learn-more-design-typography-illustration: url("../static/icons/learn-more-design-typography.svg");
- --nfd-onboarding-sidebar-learn-more-design-header-menu-illustration: url("../static/icons/learn-more-design-header-menu.svg");
- --nfd-onboarding-sidebar-learn-more-design-homepage-illustration: url("../static/icons/learn-more-design-homepage.svg");
- --nfd-onboarding-sidebar-learn-more-pages-illustration: url("../static/icons/learn-more-pages.svg");
- --nfd-onboarding-sidebar-learn-more-site-features-illustration: url("../static/icons/learn-more-site-features.svg");
- --nfd-onboarding-sidebar-learn-more-what-next-illustration: url("../static/icons/learn-more-what-next.svg");
-
- --site-features-analytics: url("../static/icons/site-features/analytics.svg");
- --site-features-analytics--light: url("../static/icons/site-features/analytics_light.svg");
- --site-features-bookingcalendar: url("../static/icons/site-features/bookingcalendar.svg");
- --site-features-bookingcalendar--light: url("../static/icons/site-features/bookingcalendar_light.svg");
- --site-features-email: url("../static/icons/site-features/email.svg");
- --site-features-email--light: url("../static/icons/site-features/email_light.svg");
- --site-features-filter: url("../static/icons/site-features/filter.svg");
- --site-features-filter--light: url("../static/icons/site-features/filter_light.svg");
- --site-features-form: url("../static/icons/site-features/form.svg");
- --site-features-form--light: url("../static/icons/site-features/form_light.svg");
- --site-features-lead: url("../static/icons/site-features/lead.svg");
- --site-features-lead--light: url("../static/icons/site-features/lead_light.svg");
- --site-features-search: url("../static/icons/site-features/search.svg");
- --site-features-search--light: url("../static/icons/site-features/search_light.svg");
- --site-features-security: url("../static/icons/site-features/security.svg");
- --site-features-security--light: url("../static/icons/site-features/security_light.svg");
- --site-features-share: url("../static/icons/site-features/share.svg");
- --site-features-share--light: url("../static/icons/site-features/share_light.svg");
- --site-features-wishlist: url("../static/icons/site-features/wishlist.svg");
- --site-features-wishlist--light: url("../static/icons/site-features/wishlist_light.svg");
-
- /*
- * Below Icons are commented because they get added to the CSS bundle and
- * CSS bundle created exceeded the permissible size.
- * Need to find a solution how do we deal with below icons or do we split page wise CSS bundles
- * Or can using these icon paths in background-image in pages's CSS help?
- */
-
- // --dog-icon: url("../static/icons/dog.svg");
- // --dog-white-icon: url("../static/icons/dog-white.svg");
-
- // --education-icon: url("../static/icons/education.svg");
- // --education-white-icon: url("../static/icons/education-white.svg");
-
- // --entertainment-icon: url("../static/icons/entertainment.svg");
- // --entertainment-white-icon: url("../static/icons/entertainment-white.svg");
-
- // --food-icon: url("../static/icons/food.svg");
- // --food-white-icon: url("../static/icons/food-white.svg");
-
- // --group-icon: url("../static/icons/group-team.svg");
- // --group-white-icon: url("../static/icons/group-team-white.svg");
-
- // --health-icon: url("../static/icons/health.svg");
- // --health-white-icon: url("../static/icons/health-white.svg");
-
- // --news-icon: url("../static/icons/news.svg");
- // --news-white-icon: url("../static/icons/news-white.svg");
-
- // --creative-icon: url("../static/icons/creative.svg");
- // --creative-white-icon: url("../static/icons/creative-white.svg");
-
- // --heart-icon: url("../static/icons/heart.svg");
- // --heart-white-icon: url("../static/icons/heart-white.svg");
-
- // --tech-icon: url("../static/icons/tech.svg");
- // --tech-white-icon: url("../static/icons/tech-white.svg");
-
- // --politics-icon: url("../static/icons/politics.svg");
- // --politics-white-icon: url("../static/icons/politics-white.svg");
+ --nfd-publish-icon: url(../static/icons/publish.svg);
+ --nfd-selling-icon: url(../static/icons/sell.svg);
+ --nfd-design-icon: url(../static/icons/design.svg);
+ --more-icon: url(../static/icons/more.svg);
+ --reload-icon: url(../static/icons/reload.svg);
+ --forward-icon: url(../static/icons/forward.svg);
+ --back-icon: url(../static/icons/back.svg);
+ --chevron-up-icon: url(../static/icons/chevron-up.svg);
+ --chevron-down-icon: url(../static/icons/chevron-down.svg);
+ --default-logo-icon: url(../static/icons/default-logo.svg);
+ --facebook-icon: url(../static/icons/social/facebook.svg);
+ --facebook-colored-icon: url(../static/icons/social/facebook-colored.svg);
+ --twitter-icon: url(../static/icons/social/twitter.svg);
+ --twitter-colored-icon: url(../static/icons/social/twitter-colored.svg);
+ --instagram-icon: url(../static/icons/social/instagram.svg);
+ --instagram-colored-icon: url(../static/icons/social/instagram-colored.svg);
+ --linkedin-icon: url(../static/icons/social/linkedin.svg);
+ --linkedin-colored-icon: url(../static/icons/social/linkedin-colored.svg);
+ --yelp-icon: url(../static/icons/social/yelp.svg);
+ --yelp-colored-icon: url(../static/icons/social/yelp-colored.svg);
+ --youtube-icon: url(../static/icons/social/youtube.svg);
+ --youtube-colored-icon: url(../static/icons/social/youtube-colored.svg);
+ --tiktok-icon: url(../static/icons/social/tiktok.svg);
+ --tiktok-colored-icon: url(../static/icons/social/tiktok-colored.svg);
+
+ --get-started-content-img: url(../static/images/content.png);
+ --get-started-design-img: url(../static/images/design.png);
+ --get-started-features-img: url(../static/images/features.png);
+
+
+ --chevron-left-icon: url(../static/icons/chevron-left.svg);
+ --chevron-right-icon: url(../static/icons/chevron-right.svg);
+
+ --business-icon: url(../static/icons/business.svg);
+ --business-white-icon: url(../static/icons/business-white.svg);
+ --nfd-onboarding-step-error-icon: url(../../Brands/bluehost/step-error-logo.svg);
+
+ --site-features-analytics: url(../static/icons/site-features/analytics.svg);
+ --site-features-analytics--light: url(../static/icons/site-features/analytics_light.svg);
+ --site-features-bookingcalendar: url(../static/icons/site-features/bookingcalendar.svg);
+ --site-features-bookingcalendar--light: url(../static/icons/site-features/bookingcalendar_light.svg);
+ --site-features-email: url(../static/icons/site-features/email.svg);
+ --site-features-email--light: url(../static/icons/site-features/email_light.svg);
+ --site-features-filter: url(../static/icons/site-features/filter.svg);
+ --site-features-filter--light: url(../static/icons/site-features/filter_light.svg);
+ --site-features-form: url(../static/icons/site-features/form.svg);
+ --site-features-form--light: url(../static/icons/site-features/form_light.svg);
+ --site-features-lead: url(../static/icons/site-features/lead.svg);
+ --site-features-lead--light: url(../static/icons/site-features/lead_light.svg);
+ --site-features-search: url(../static/icons/site-features/search.svg);
+ --site-features-search--light: url(../static/icons/site-features/search_light.svg);
+ --site-features-security: url(../static/icons/site-features/security.svg);
+ --site-features-security--light: url(../static/icons/site-features/security_light.svg);
+ --site-features-share: url(../static/icons/site-features/share.svg);
+ --site-features-share--light: url(../static/icons/site-features/share_light.svg);
+ --site-features-wishlist: url(../static/icons/site-features/wishlist.svg);
+ --site-features-wishlist--light: url(../static/icons/site-features/wishlist_light.svg);
}