From 8ce2a8873d9289a4131f9550bfebf9ab96550483 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 15 Nov 2023 16:29:31 +0530 Subject: [PATCH 1/6] Add Building Page --- .../components/Loaders/SiteGenLoader/index.js | 18 ++++++ .../steps/SiteGen/Building/index.js | 14 ++++- .../steps/SiteGen/Building/stylesheet.scss | 63 +++++++++++++++++++ src/OnboardingSPA/styles/app.scss | 1 + 4 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js index 21893434d..afc73097b 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js @@ -1,12 +1,22 @@ import getContents from './contents'; +import { useSelect } from '@wordpress/data'; +import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from '@wordpress/element'; +import { store as nfdOnboardingStore } from '../../../store'; const SiteGenLoader = () => { let statusIdx = 0; const content = getContents(); + const navigate = useNavigate(); const [ percentage, setPercentage ] = useState( 0 ); const [ status, setStatus ] = useState( content.status[ statusIdx ].title ); + const { nextStep } = useSelect( ( select ) => { + return { + nextStep: select( nfdOnboardingStore ).getNextStep(), + }; + } ); + const checkStatus = async () => { // Make fake API Call to get the status. if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 ); @@ -24,6 +34,14 @@ const SiteGenLoader = () => { }; }, [] ); + useEffect( () => { + if ( percentage === 100 ) { + if ( nextStep ) { + navigate( nextStep.path ); + } + } + }, [ percentage ] ); + return (
{ content.title }
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js index 80c6b9bbc..6b657ad43 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js @@ -6,7 +6,7 @@ import { useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; import { HEADER_SITEGEN } from '../../../../constants'; -import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder'; +import SiteGenLoader from '../../../components/Loaders/SiteGenLoader'; const SiteGenBuilding = () => { const { @@ -27,7 +27,17 @@ const SiteGenBuilding = () => { isCentered className="nfd-onboarding-step--site-gen__building" > - +
+
+
+
+
+
+
+
+
+ +
); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss new file mode 100644 index 000000000..ca60b791f --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss @@ -0,0 +1,63 @@ +.nfd-onboarding-step--site-gen__building { + padding: 40px; + position: relative; +} + +.site-gen__building { + + &_skimmer { + + &--header { + height: 80px; + width: 90vw; + margin-bottom: 30px; + border-radius: 24px; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 0.25px solid rgba(255, 255, 255, 0.26); + } + + &--body { + height: 500px; + width: 90vw; + border-radius: 24px; + margin-bottom: 30px; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 0.25px solid rgba(255, 255, 255, 0.26); + } + + &--footer { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + + &_left { + height: 300px; + width: 55vw; + border-radius: 24px; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 0.25px solid rgba(255, 255, 255, 0.26); + } + + &_right { + height: 300px; + width: 33vw; + border-radius: 24px; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 0.25px solid rgba(255, 255, 255, 0.26); + } + } + } + + &_loader__overlay { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + } +} + diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 0cc81de2d..e40189907 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -70,6 +70,7 @@ @import "../steps/SiteGen/SiteDetails/stylesheet"; @import "../steps/SiteGen/Experience/stylesheet"; @import "../steps/SiteGen/Welcome/stylesheet"; +@import "../steps/SiteGen/Building/stylesheet"; .nfd-onboarding-container { display: flex; From 234c407ad8ebe4157b72af428270cd07bfeaaf9d Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Nov 2023 11:43:27 +0530 Subject: [PATCH 2/6] Add Animation --- .../Header/components/SiteGenHeader/index.js | 2 +- .../steps/SiteGen/Building/index.js | 8 ++-- .../steps/SiteGen/Building/stylesheet.scss | 47 ++++++++++--------- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index 2f0027111..db3390a10 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -34,7 +34,7 @@ const SiteGenHeader = () => { ); const currentStepIndex = findIndex( allSteps, { - path: currentStep.path, + path: currentStep?.path, } ); const progress = ( currentStepIndex / allSteps.length ) * 100; diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js index 6b657ad43..1f3af5a96 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js @@ -28,11 +28,11 @@ const SiteGenBuilding = () => { className="nfd-onboarding-step--site-gen__building" >
-
-
+
+
-
-
+
+
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss index ca60b791f..cc69c7c13 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss @@ -1,30 +1,37 @@ .nfd-onboarding-step--site-gen__building { - padding: 40px; + margin: 20px; + padding: 20px; position: relative; } +@property --angle { + inherits: true; + syntax: ""; + initial-value: 90deg; +} + .site-gen__building { &_skimmer { - &--header { - height: 80px; - width: 90vw; - margin-bottom: 30px; + &--main { border-radius: 24px; + margin-bottom: 30px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 0.25px solid rgba(255, 255, 255, 0.26); + animation: borderRotate 2500ms infinite forwards; + border-image: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.26) calc(var(--angle) + 0.5deg), rgba(168, 239, 255, 0.5) calc(var(--angle) + 1deg)) 30; + } + + &--header { + height: 80px; + width: 90vw; } &--body { - height: 500px; width: 90vw; - border-radius: 24px; - margin-bottom: 30px; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 0.25px solid rgba(255, 255, 255, 0.26); + height: 500px; } &--footer { @@ -34,21 +41,13 @@ justify-content: space-between; &_left { - height: 300px; width: 55vw; - border-radius: 24px; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 0.25px solid rgba(255, 255, 255, 0.26); + height: 300px; } &_right { - height: 300px; width: 33vw; - border-radius: 24px; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 0.25px solid rgba(255, 255, 255, 0.26); + height: 300px; } } } @@ -61,3 +60,9 @@ } } +@keyframes borderRotate { + + 100% { + --angle: 360deg; + } +} From f44285e04ffa26954b66ce1dc682f553a8176492 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Nov 2023 13:24:27 +0530 Subject: [PATCH 3/6] Update stylesheet.scss --- src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss index cc69c7c13..337852584 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss @@ -15,7 +15,6 @@ &_skimmer { &--main { - border-radius: 24px; margin-bottom: 30px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); From 5e7ebc294137cbd57c8d7bbe937dba79d8115f25 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Nov 2023 19:01:20 +0530 Subject: [PATCH 4/6] Support to maintain state --- .../Button/NextButtonSiteGen/index.js | 5 +++- .../components/CardWithOptions/index.js | 18 ++++++++---- .../steps/SiteGen/Experience/index.js | 28 ++++++++++++++----- .../steps/SiteGen/SiteDetails/index.js | 26 +++++++++++++---- 4 files changed, 58 insertions(+), 19 deletions(-) diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js index 65edb256a..145f392ea 100644 --- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js +++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js @@ -5,7 +5,7 @@ import { Button } from '@wordpress/components'; import { Icon, chevronRight } from '@wordpress/icons'; import { store as nfdOnboardingStore } from '../../../store'; -const NextButtonSiteGen = ( { text, className } ) => { +const NextButtonSiteGen = ( { text, className, callback = null } ) => { const navigate = useNavigate(); const { nextStep } = useSelect( ( select ) => { return { @@ -19,6 +19,9 @@ const NextButtonSiteGen = ( { text, className } ) => { className ) } onClick={ () => { + if ( callback && typeof callback === 'function' ) { + callback(); + } if ( nextStep ) { navigate( nextStep.path ); } diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js index 6437b0547..6ac5c8fff 100644 --- a/src/OnboardingSPA/components/CardWithOptions/index.js +++ b/src/OnboardingSPA/components/CardWithOptions/index.js @@ -1,6 +1,6 @@ import { Icon, chevronRight } from '@wordpress/icons'; -const CardWithOptions = ( { title, options, skip, setSelection } ) => { +const CardWithOptions = ( { title, options, skip, callback } ) => { const buildOptions = () => { return options.map( ( data, idx ) => { return ( @@ -10,10 +10,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => { tabIndex={ 0 } className={ 'nfd-sg-card__data__option' } onClick={ () => { - setSelection( idx ); + if ( callback && typeof callback === 'function' ) { + callback( idx + 1 ); + } } } onKeyDown={ () => { - setSelection( idx ); + if ( callback && typeof callback === 'function' ) { + callback( idx + 1 ); + } } } >
@@ -48,10 +52,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => { tabIndex={ 0 } className={ 'nfd-sg-card__skip' } onClick={ () => { - setSelection( -1 ); + if ( callback && typeof callback === 'function' ) { + callback( -1 ); + } } } onKeyDown={ () => { - setSelection( -1 ); + if ( callback && typeof callback === 'function' ) { + callback( -1 ); + } } } > { skip } diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js index 6ff78f893..d04bb4628 100644 --- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js @@ -13,10 +13,13 @@ const SiteGenExperience = () => { const navigate = useNavigate(); const content = getContents(); // Index of the selection user makes + /* eslint-disable no-unused-vars */ const [ selection, setSelection ] = useState(); - const { nextStep } = useSelect( ( select ) => { + const { currentData, nextStep } = useSelect( ( select ) => { return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), nextStep: select( nfdOnboardingStore ).getNextStep(), }; } ); @@ -26,6 +29,7 @@ const SiteGenExperience = () => { setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -33,15 +37,25 @@ const SiteGenExperience = () => { setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); + + if ( currentData.sitegen.experience?.level ) { + setSelection( currentData.sitegen.experience.level ); + } } ); - useEffect( () => { - // undefined => not selected, 0-2 => Selections, -1 => Skip - // console.log( 'Selection changed to', selection ); - if ( selection !== undefined && nextStep ) { + const checkAndNavigate = ( idx ) => { + // 0 - Not Selected + // 1-2 Options + // -1 Skip + setSelection( idx ); + currentData.sitegen.experience.level = idx; + setCurrentOnboardingData( currentData ); + // console.log( selection ); + // console.log( 'Navigate to the next screen!' ); + if ( nextStep ) { navigate( nextStep.path ); } - }, [ selection ] ); + }; return ( @@ -51,7 +65,7 @@ const SiteGenExperience = () => { title={ content.heading } options={ content.options } skip={ content.skip } - setSelection={ setSelection } + callback={ checkAndNavigate } />
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index be45c518e..efc9db610 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -1,4 +1,4 @@ -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import getContents from './contents'; @@ -14,11 +14,19 @@ const SiteGenSiteDetails = () => { const content = getContents(); const [ customerInput, setCustomerInput ] = useState(); + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + const { setIsHeaderEnabled, setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -26,12 +34,17 @@ const SiteGenSiteDetails = () => { setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); - } ); - // const checkAndNavigate = () => { - // // console.log( customerInput ); - // // console.log( 'Navigate to the next screen!' ); - // }; + if ( currentData.sitegen.siteDetails?.prompt !== '' ) { + setCustomerInput( currentData.sitegen.siteDetails.prompt ); + } + }, [] ); + + const checkAndNavigate = () => { + currentData.sitegen.siteDetails.prompt = customerInput; + setCurrentOnboardingData( currentData ); + // console.log( 'Navigate to the next screen!' ); + }; return ( @@ -49,6 +62,7 @@ const SiteGenSiteDetails = () => {
From 0b035259e35932580d6404c23adca9b783ba46b7 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Nov 2023 10:13:13 +0530 Subject: [PATCH 5/6] Fix Styling and Stuff --- .../CardWithOptions/stylesheet.scss | 18 ++++++------ .../components/Loaders/SiteGenLoader/index.js | 4 +-- .../Loaders/SiteGenLoader/stylesheet.scss | 6 ++-- .../{ => TextInputSiteBuild}/contents.js | 0 .../{ => TextInputSiteBuild}/index.js | 6 ++-- .../{ => TextInputSiteBuild}/stylesheet.scss | 0 .../TextInputSiteGen/stylesheet.scss | 5 ++-- .../steps/BasicInfo/basicInfoForm.js | 6 ++-- .../steps/SiteGen/Building/index.js | 2 +- .../steps/SiteGen/Building/stylesheet.scss | 28 +++++++++---------- src/OnboardingSPA/styles/_branding.scss | 20 +++++++++++-- src/OnboardingSPA/styles/app.scss | 2 +- 12 files changed, 55 insertions(+), 42 deletions(-) rename src/OnboardingSPA/components/TextInput/{ => TextInputSiteBuild}/contents.js (100%) rename src/OnboardingSPA/components/TextInput/{ => TextInputSiteBuild}/index.js (91%) rename src/OnboardingSPA/components/TextInput/{ => TextInputSiteBuild}/stylesheet.scss (100%) diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss index 1676d0f78..878145ca3 100644 --- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss @@ -1,4 +1,4 @@ -$background-color: #1e2327; +$background-color: var(--nfd-onboarding-admin-bar-background); .nfd-sg-card { @@ -11,7 +11,7 @@ $background-color: #1e2327; box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2); &__title { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); margin: 16px; line-height: 2; font-size: 18px; @@ -34,28 +34,28 @@ $background-color: #1e2327; transition: background-color 400ms ease-in-out; &:not(:last-child) { - border-bottom: 0.5px solid rgba(255, 255, 255, 0.3); + border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3); } &:hover { - background-color: #262c30; + background-color: var(--nfd-onboarding-hover); } &__left_top { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); font-size: 16px; font-weight: 500; padding-bottom: 12px; } &__left_bottom { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); font-size: 14px; font-weight: 300; } &__right { - fill: var(--nfd-onboarding-white); + fill: var(--nfd-onboarding-primary); transition: all 200ms ease-in-out; &:hover { @@ -70,10 +70,10 @@ $background-color: #1e2327; text-align: end; margin: 0 20px 6px 20px; transition: color 200ms ease-in-out; - color: rgba(var(--nfd-onboarding-white-rgb), 0.8); + color: rgba(var(--nfd-onboarding-primary-rgb), 0.8); &:hover { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); } } } diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js index afc73097b..72a0c9a8b 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js @@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; -const SiteGenLoader = () => { +const SiteGenLoader = ( { autoNavigate = false } ) => { let statusIdx = 0; const content = getContents(); const navigate = useNavigate(); @@ -36,7 +36,7 @@ const SiteGenLoader = () => { useEffect( () => { if ( percentage === 100 ) { - if ( nextStep ) { + if ( nextStep && autoNavigate ) { navigate( nextStep.path ); } } diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss index 7f6adf9b4..2b8da098c 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss @@ -1,4 +1,4 @@ -$background-color: #1e2327; +$background-color: var(--nfd-onboarding-admin-bar-background); .nfd-sg-loader { @@ -15,7 +15,7 @@ $background-color: #1e2327; font-size: 18px; text-align: center; letter-spacing: 1.5px; - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); } &__progress { @@ -59,7 +59,7 @@ $background-color: #1e2327; font-size: 14px; text-align: center; letter-spacing: 1.3px; - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); animation: fadeInFast 3s ease-out infinite; } } diff --git a/src/OnboardingSPA/components/TextInput/contents.js b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/contents.js similarity index 100% rename from src/OnboardingSPA/components/TextInput/contents.js rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/contents.js diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js similarity index 91% rename from src/OnboardingSPA/components/TextInput/index.js rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js index 6859ff853..ad2ae1dea 100644 --- a/src/OnboardingSPA/components/TextInput/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js @@ -1,7 +1,7 @@ import { useRef, useEffect, useState, memo } from '@wordpress/element'; import getContents from './contents'; -const TextInput = ( { +const TextInputSiteBuild = ( { title, hint, placeholder, @@ -58,5 +58,5 @@ const TextInput = ( { ); }; -const TextInputMemo = memo( TextInput ); -export default TextInputMemo; +const TextInputSiteBuildMemo = memo( TextInputSiteBuild ); +export default TextInputSiteBuildMemo; diff --git a/src/OnboardingSPA/components/TextInput/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/components/TextInput/stylesheet.scss rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/stylesheet.scss diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss index d34785317..c13ecdb00 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss @@ -1,4 +1,3 @@ -$border: #d6d6d6; $letter-spacing: 0.5px; $selected-detail: #1de082; @@ -9,7 +8,7 @@ $selected-detail: #1de082; &-box { margin-bottom: 10px; - border-bottom: 2px solid $border; + border-bottom: 2px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5); &__field { padding-top: 10px; @@ -29,7 +28,7 @@ $selected-detail: #1de082; &::placeholder { font-weight: 100; - color: $border; + color: rgba(var(--nfd-onboarding-primary-rgb), 0.8); } } diff --git a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js index cd49b12e8..7c085a4b0 100644 --- a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js @@ -2,7 +2,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useState, useEffect, useRef } from '@wordpress/element'; import getContents from './contents'; -import TextInput from '../../components/TextInput'; +import TextInputSiteBuild from '../../components/TextInput/TextInputSiteBuild'; import SkipButton from '../../components/SkipButton'; import MiniPreview from '../../components/MiniPreview'; import Animate from '../../components/Animate'; @@ -142,7 +142,7 @@ const BasicInfoForm = () => {
- { textValueSetter={ setSiteTitle } /> - {
- +
); diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss index 337852584..10982d026 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss @@ -1,15 +1,22 @@ -.nfd-onboarding-step--site-gen__building { - margin: 20px; - padding: 20px; - position: relative; -} - @property --angle { inherits: true; syntax: ""; initial-value: 90deg; } +@keyframes borderRotate { + + 100% { + --angle: 360deg; + } +} + +.nfd-onboarding-step--site-gen__building { + margin: 20px; + padding: 20px; + position: relative; +} + .site-gen__building { &_skimmer { @@ -19,7 +26,7 @@ background: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 0.25px solid rgba(255, 255, 255, 0.26); - animation: borderRotate 2500ms infinite forwards; + animation: borderRotate 3500ms infinite forwards; border-image: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.26) calc(var(--angle) + 0.5deg), rgba(168, 239, 255, 0.5) calc(var(--angle) + 1deg)) 30; } @@ -58,10 +65,3 @@ transform: translate(-50%, -50%); } } - -@keyframes borderRotate { - - 100% { - --angle: 360deg; - } -} diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 3f3ff7a55..47ed8906d 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -295,13 +295,27 @@ body { } } - .nfd-onboarding-sitegen-dark { - --nfd-onboarding-admin-bar-background: #1d2327; + .nfd-onboarding-sitegen-light { + --nfd-onboarding-primary: #000; + --nfd-onboarding-primary-rgb: 0, 0, 0; + --nfd-onboarding-hover: #c3c4c7; + --nfd-onboarding-secondary: #fff; --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-admin-bar-background: #fff; + --nfd-onboarding-progress-bar-fill: #0060f0; + --nfd-onboarding-progress-bar-background: #d5d5d5; --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); + } + + .nfd-onboarding-sitegen-dark { --nfd-onboarding-primary: #fff; + --nfd-onboarding-primary-rgb: 255, 255, 255; + --nfd-onboarding-hover: #262c30; --nfd-onboarding-secondary: #000; - --nfd-onboarding-progress-bar-background: #353a40; + --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-admin-bar-background: #1d2327; --nfd-onboarding-progress-bar-fill: #0060f0; + --nfd-onboarding-progress-bar-background: #353a40; + --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); } } diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index e40189907..5c5a32131 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -15,7 +15,7 @@ @import "../components/Tooltip/stylesheet"; @import "../components/ImageUploader/stylesheet"; @import "../components/SocialMediaForm/stylesheet"; -@import "../components/TextInput/stylesheet"; +@import "../components/TextInput/TextInputSiteBuild/stylesheet"; @import "../components/ExitToWordPress/stylesheet"; @import "../components/Accordion/stylesheet"; @import "../components/NewfoldLargeCard/stylesheet"; From 8d2cee4579f26de44a4af7b0e095ef78d9442794 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Nov 2023 10:33:52 +0530 Subject: [PATCH 6/6] Fix CSS --- .../components/CardWithOptions/stylesheet.scss | 2 +- .../components/Loaders/SiteGenLoader/stylesheet.scss | 7 ++++++- src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss | 8 ++++---- src/OnboardingSPA/styles/_branding.scss | 4 ++++ src/OnboardingSPA/styles/_interface.scss | 1 + 5 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss index 878145ca3..30b1d2ffd 100644 --- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss @@ -8,7 +8,7 @@ $background-color: var(--nfd-onboarding-admin-bar-background); border-radius: 12px; background-color: $background-color; width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem); - box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2); + box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05); &__title { color: var(--nfd-onboarding-primary); diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss index 2b8da098c..fb1c725c0 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss @@ -8,7 +8,12 @@ $background-color: var(--nfd-onboarding-admin-bar-background); border-radius: 12px; background-color: $background-color; width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem); - box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2); + box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-black-rgb), $alpha: 0.05); + + @media (max-width: #{ ($break-small) }) { + margin: 20px; + max-width: 80vw; + } &__title { line-height: 2; diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss index 10982d026..325405a1c 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss @@ -23,11 +23,11 @@ &--main { margin-bottom: 30px; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 0.25px solid rgba(255, 255, 255, 0.26); + background: rgba(var(--nfd-onboarding-primary-rgb), 0.05); + box-shadow: 0 4px 30px rgba(var(--nfd-onboarding-secondary-rgb), 0.1); animation: borderRotate 3500ms infinite forwards; - border-image: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.26) calc(var(--angle) + 0.5deg), rgba(168, 239, 255, 0.5) calc(var(--angle) + 1deg)) 30; + border: 0.25px solid rgba(var(--nfd-onboarding-secondary-rgb), 0.26); + border-image: conic-gradient(from var(--angle), rgba(var(--nfd-onboarding-secondary-rgb), 0.26) calc(var(--angle) + 0.5deg), rgba(var(--nfd-onboarding-shimmer-color), 0.5) calc(var(--angle) + 1deg)) 30; } &--header { diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 47ed8906d..a7346d818 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -300,7 +300,9 @@ body { --nfd-onboarding-primary-rgb: 0, 0, 0; --nfd-onboarding-hover: #c3c4c7; --nfd-onboarding-secondary: #fff; + --nfd-onboarding-secondary-rgb: 255, 255, 255; --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-shimmer-color: 0, 0, 0; --nfd-onboarding-admin-bar-background: #fff; --nfd-onboarding-progress-bar-fill: #0060f0; --nfd-onboarding-progress-bar-background: #d5d5d5; @@ -312,7 +314,9 @@ body { --nfd-onboarding-primary-rgb: 255, 255, 255; --nfd-onboarding-hover: #262c30; --nfd-onboarding-secondary: #000; + --nfd-onboarding-secondary-rgb: 0, 0, 0; --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-shimmer-color: 168, 239, 255; --nfd-onboarding-admin-bar-background: #1d2327; --nfd-onboarding-progress-bar-fill: #0060f0; --nfd-onboarding-progress-bar-background: #353a40; diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 75d7d1265..98b81f65e 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -25,6 +25,7 @@ body { --nfd-onboarding-white: #fff; --nfd-onboarding-white-rgb: 255, 255, 255; --nfd-onboarding-black: #000; + --nfd-onboarding-black-rgb: 0, 0, 0; --nfd-onboarding-header-base: var(--nfd-onboarding-light); --nfd-onboarding-header-contrast: var(--nfd-onboarding-dark); --nfd-onboarding-content-base: var(--nfd-onboarding-light);