diff --git a/src/OnboardingSPA/components/Animate/stylesheet.scss b/src/OnboardingSPA/components/Animate/stylesheet.scss index 2f187e862..00ce8b300 100644 --- a/src/OnboardingSPA/components/Animate/stylesheet.scss +++ b/src/OnboardingSPA/components/Animate/stylesheet.scss @@ -109,6 +109,32 @@ } } +@-webkit-keyframes spin { + + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin { + + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + .animate { &__blank { @@ -141,7 +167,6 @@ @media (prefers-reduced-motion) { animation: none !important; - translation: none !important; } } @@ -150,7 +175,6 @@ @media (prefers-reduced-motion) { animation: none !important; - translation: none !important; } } @@ -159,7 +183,6 @@ @media (prefers-reduced-motion) { animation: none !important; - translation: none !important; } } } diff --git a/src/OnboardingSPA/components/Button/ButtonNext/index.js b/src/OnboardingSPA/components/Button/ButtonNext/index.js new file mode 100644 index 000000000..fdac41e89 --- /dev/null +++ b/src/OnboardingSPA/components/Button/ButtonNext/index.js @@ -0,0 +1,43 @@ +import { useNavigate } from 'react-router-dom'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { Button } from '@wordpress/components'; +import { Icon, chevronRight } from '@wordpress/icons'; + +import { store as nfdOnboardingStore } from '../../../store'; +import classNames from 'classnames'; + +const ButtonNext = ( { disabled = false } ) => { + const { nextStep } = useSelect( ( select ) => { + return { + nextStep: select( nfdOnboardingStore ).getNextStep(), + }; + } ); + /* [TODO]: some sense of isStepComplete to enable/disable */ + const navigate = useNavigate(); + const navigateNext = () => { + if ( disabled ) { + return; + } + + navigate( nextStep.path, { state: { origin: 'header' } } ); + }; + return ( + + ); +}; + +export default ButtonNext; diff --git a/src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss b/src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss new file mode 100644 index 000000000..96d85ed9f --- /dev/null +++ b/src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss @@ -0,0 +1,21 @@ +.nfd-onboarding-button { + + &--next { + background-color: var(--nfd-onboarding-primary); + color: var(--nfd-onboarding-secondary); + width: 80px; + height: 50px; + font-size: 15px; + border-radius: 8px; + padding: 16px; + + &--disabled { + background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.4); + + &:hover { + cursor: not-allowed; + color: var(--nfd-onboarding-secondary); + } + } + } +} diff --git a/src/OnboardingSPA/components/ImageUploader/index.js b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithIcon/index.js similarity index 93% rename from src/OnboardingSPA/components/ImageUploader/index.js rename to src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithIcon/index.js index 61a28a607..5fcd79058 100644 --- a/src/OnboardingSPA/components/ImageUploader/index.js +++ b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithIcon/index.js @@ -1,14 +1,14 @@ import { __ } from '@wordpress/i18n'; import { memo, useRef, useState } from '@wordpress/element'; -import { ImageUploadLoader } from '../Loaders'; -import { uploadImage } from '../../utils/api/uploader'; +import { ImageUploadLoader } from '../../../Loaders'; +import { uploadImage } from '../../../../utils/api/uploader'; /* * Image Uploader * */ -const ImageUploader = ( { icon, iconSetter } ) => { +const ImageUploaderWithIcon = ( { icon, iconSetter } ) => { const inputRef = useRef( null ); const [ isUploading, setIsUploading ] = useState( false ); const [ onDragActive, setOnDragActive ] = useState( false ); @@ -151,4 +151,4 @@ const ImageUploader = ( { icon, iconSetter } ) => { ); }; -export default memo( ImageUploader ); +export default memo( ImageUploaderWithIcon ); diff --git a/src/OnboardingSPA/components/ImageUploader/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithIcon/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/components/ImageUploader/stylesheet.scss rename to src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithIcon/stylesheet.scss diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js new file mode 100644 index 000000000..ed1ae1fc1 --- /dev/null +++ b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js @@ -0,0 +1,168 @@ +import { __ } from '@wordpress/i18n'; + +import { memo, useContext, useRef, useState } from '@wordpress/element'; +import { uploadImage } from '../../../../utils/api/uploader'; +import Spinner from '../../../Loaders/Spinner'; +import { ThemeContext } from '../../../ThemeContextProvider'; +import classNames from 'classnames'; +import { THEME_LIGHT } from '../../../../../constants'; + +const ImageUploaderWithText = ( { image, imageSetter } ) => { + const inputRef = useRef( null ); + const { theme } = useContext( ThemeContext ); + const [ isUploading, setIsUploading ] = useState( false ); + const [ onDragActive, setOnDragActive ] = useState( false ); + + async function updateItem( fileData ) { + if ( fileData ) { + setIsUploading( true ); + const res = await uploadImage( fileData ); + if ( res ) { + const id = res?.body?.id; + const url = res?.body?.source_url; + imageSetter( { + id, + url, + } ); + } + } + + setIsUploading( false ); + } + + const handleClick = () => { + inputRef?.current.click(); + }; + + const handleDragEnter = ( e ) => { + e.preventDefault(); + e.stopPropagation(); + setOnDragActive( true ); + }; + + const handleDragLeave = ( e ) => { + e.preventDefault(); + e.stopPropagation(); + setOnDragActive( false ); + }; + + const handleDragOver = ( e ) => { + e.preventDefault(); + e.stopPropagation(); + setOnDragActive( true ); + }; + + const removeSelectedImage = () => { + imageSetter( { + id: 0, + url: '', + } ); + if ( inputRef?.current?.files.length > 0 ) { + inputRef.current.value = ''; + } + }; + + const imageChange = ( e ) => { + if ( e?.target?.files && e?.target?.files.length > 0 ) { + updateItem( e?.target?.files[ 0 ] ); + } + }; + + const handleDrop = ( e ) => { + e.preventDefault(); + e.stopPropagation(); + setOnDragActive( false ); + if ( e?.dataTransfer?.files && e?.dataTransfer?.files.length > 0 ) { + if ( + e?.dataTransfer?.files[ 0 ]?.type.split( '/' )[ 0 ] === 'image' + ) { + updateItem( e?.dataTransfer?.files[ 0 ] ); + } + } + }; + + return ( +
handleDrop( e ) } + onDragOver={ ( e ) => handleDragOver( e ) } + onDragEnter={ ( e ) => handleDragEnter( e ) } + onDragLeave={ ( e ) => handleDragLeave( e ) } + > + { isUploading ? ( + + ) : ( + <> + { ( image === undefined || image?.id === 0 ) && ( + <> +
+
+

+ + { __( + 'Drop your logo here, or ', + 'wp-module-onboarding' + ) } + + + +

+
+
+

+ { __( + 'supports .jpg, .png, .gif', + 'wp-module-onboarding' + ) } +

+
+ + ) } + { image?.id !== 0 && image?.id !== undefined && ( + <> + Thumb +
+ +
+ + ) } + + ) } +
+ ); +}; + +export default memo( ImageUploaderWithText ); diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss new file mode 100644 index 000000000..d55204e64 --- /dev/null +++ b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss @@ -0,0 +1,109 @@ +.nfd-onboarding-image-uploader { + + &--with-text { + width: 600px; + margin: 16px; + border: 1.25px dashed var(--nfd-onboarding-admin-bar-background); + border-radius: 8px; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &--on-drag { + background-color: var(--nfd-onboarding-site-logo-on-drag); + } + + &__heading { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + &__icon { + background-image: var(--sitegen-image-upload-icon); + width: 18px; + height: 22px; + background-repeat: no-repeat; + background-size: contain; + + &--light { + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(103%) contrast(101%); + } + } + + &__text { + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.7955rem + 0.3977vw, 1.75rem); + margin-left: 15px; + white-space: normal; + line-height: 1; + + &__modal { + background-color: transparent; + border: 0; + padding: 0; + margin: 0; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.7955rem + 0.3977vw, 1.75rem); + text-decoration: underline; + cursor: pointer; + + &:hover { + color: var(--wp-admin-theme-color); + } + } + + &__input { + display: none; + } + } + } + + &__subheading { + display: flex; + align-items: center; + justify-content: center; + + &__text { + color: var(--nfd-onboarding-primary); + font-size: clamp(0.625rem, 0.5227rem + 0.5114vw, 1.75rem); + white-space: normal; + line-height: 1; + text-align: center; + margin-top: 5px; + padding: 0; + } + } + + &__site_logo { + width: 50%; + height: 20%; + + &-reset { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-end; + + &__button { + font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem); + font-style: normal; + font-weight: 510; + margin-right: 24px; + color: var(--nfd-onboarding-primary); + background-color: transparent; + border: none; + padding: 0; + + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + } + } + } +} diff --git a/src/OnboardingSPA/components/Loaders/Spinner/index.js b/src/OnboardingSPA/components/Loaders/Spinner/index.js new file mode 100644 index 000000000..33eeec4e0 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Spinner/index.js @@ -0,0 +1,5 @@ +const Spinner = () => { + return
; +}; + +export default Spinner; diff --git a/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss new file mode 100644 index 000000000..2702b7db4 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss @@ -0,0 +1,25 @@ +.nfd-onboarding-loader { + + &--spinner { + border-radius: 50%; + width: 10em; + height: 10em; + font-size: 8px; + border-top: 1.1em solid rgba(var(--nfd-onboarding-primary-rgb), 0.2); + border-right: 1.1em solid rgba(var(--nfd-onboarding-primary-rgb), 0.2); + border-bottom: 1.1em solid rgba(var(--nfd-onboarding-primary-rgb), 0.2); + border-left: 1.1em solid var(--nfd-onboarding-primary); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: spin 1.1s infinite linear; + animation: spin 1.1s infinite linear; + } + + &::after { + border-radius: 50%; + width: 10em; + height: 10em; + } +} + diff --git a/src/OnboardingSPA/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index 0e0826675..ae54f4477 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/src/OnboardingSPA/components/SkipButton/index.js @@ -10,8 +10,9 @@ import { store as nfdOnboardingStore } from '../../store'; import { getSettings, setSettings } from '../../utils/api/settings'; import { pluginDashboardPage } from '../../../constants'; import { CATEGORY } from '../../utils/analytics/hiive/constants'; +import classNames from 'classnames'; -const SkipButton = ( { callback = false } ) => { +const SkipButton = ( { callback = false, className, text } ) => { const navigate = useNavigate(); const location = useLocation(); const { nextStep, currentData, socialData } = useSelect( ( select ) => { @@ -63,19 +64,16 @@ const SkipButton = ( { callback = false } ) => { } function skipStep() { - if ( isLastStep ) { - return ( - - ); - } return ( - ); } diff --git a/src/OnboardingSPA/static/icons/sitegen/image-upload.svg b/src/OnboardingSPA/static/icons/sitegen/image-upload.svg new file mode 100644 index 000000000..e3e21f35c --- /dev/null +++ b/src/OnboardingSPA/static/icons/sitegen/image-upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/OnboardingSPA/static/icons/sitegen-ai-icon.svg b/src/OnboardingSPA/static/icons/sitegen/sitegen-ai-icon.svg similarity index 100% rename from src/OnboardingSPA/static/icons/sitegen-ai-icon.svg rename to src/OnboardingSPA/static/icons/sitegen/sitegen-ai-icon.svg diff --git a/src/OnboardingSPA/static/icons/toggle-dark-mode.svg b/src/OnboardingSPA/static/icons/sitegen/toggle-dark-mode.svg similarity index 100% rename from src/OnboardingSPA/static/icons/toggle-dark-mode.svg rename to src/OnboardingSPA/static/icons/sitegen/toggle-dark-mode.svg diff --git a/src/OnboardingSPA/static/icons/toggle-light-mode.png b/src/OnboardingSPA/static/icons/sitegen/toggle-light-mode.png similarity index 100% rename from src/OnboardingSPA/static/icons/toggle-light-mode.png rename to src/OnboardingSPA/static/icons/sitegen/toggle-light-mode.png diff --git a/src/OnboardingSPA/static/images/sitegen-ai-animation.gif b/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif similarity index 100% rename from src/OnboardingSPA/static/images/sitegen-ai-animation.gif rename to src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif diff --git a/src/OnboardingSPA/static/images/sitegen-bg.png b/src/OnboardingSPA/static/images/sitegen/sitegen-bg.png similarity index 100% rename from src/OnboardingSPA/static/images/sitegen-bg.png rename to src/OnboardingSPA/static/images/sitegen/sitegen-bg.png diff --git a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js index cd49b12e8..512e162e3 100644 --- a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js @@ -8,7 +8,7 @@ import MiniPreview from '../../components/MiniPreview'; import Animate from '../../components/Animate'; import { getSettings } from '../../utils/api/settings'; import { store as nfdOnboardingStore } from '../../store'; -import ImageUploader from '../../components/ImageUploader'; +import ImageUploaderWithIcon from '../../components/ImageUploader/components/ImageUploaderWithIcon'; import SocialMediaForm from '../../components/SocialMediaForm'; /** @@ -171,7 +171,7 @@ const BasicInfoForm = () => {
- diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/contents.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/contents.js new file mode 100644 index 000000000..53335f24d --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/contents.js @@ -0,0 +1,21 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( + 'Do you have a logo you would like to use for this site?', + 'wp-module-onboarding' + ), + imageUploader: { + subHeading: __( + 'supports .jpg, .png, .svg', + 'wp-module-onboarding' + ), + }, + buttons: { + skip: __( 'Skip for now', 'wp-module-onboarding' ), + }, + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index f7dbff317..a81b5fef5 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -1,33 +1,95 @@ import CommonLayout from '../../../components/Layouts/Common'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; -import { useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; import { HEADER_SITEGEN } from '../../../../constants'; -import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder'; +import getContents from './contents'; +import ImageUploaderWithText from '../../../components/ImageUploader/components/ImageUploaderWithText'; +import ButtonNext from '../../../components/Button/ButtonNext'; +import SkipButton from '../../../components/SkipButton'; const SiteGenSiteLogo = () => { + const [ siteLogo, setSiteLogo ] = useState(); + + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + const { setIsHeaderEnabled, setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); + const resetSiteLogo = () => { + const currentDataCopy = { ...currentData }; + currentDataCopy.sitegen.siteLogo = { + id: 0, + url: '', + }; + setCurrentOnboardingData( currentDataCopy ); + setSiteLogo( undefined ); + }; + useEffect( () => { setIsHeaderEnabled( true ); setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); - } ); + if ( currentData.sitegen.siteLogo?.id !== 0 ) { + setSiteLogo( currentData.sitegen.siteLogo ); + } + }, [] ); + + useEffect( () => { + if ( undefined !== siteLogo ) { + const currentDataCopy = { ...currentData }; + currentDataCopy.sitegen.siteLogo.id = siteLogo.id; + currentDataCopy.sitegen.siteLogo.url = siteLogo.url; + setCurrentOnboardingData( currentDataCopy ); + } + }, [ siteLogo ] ); + + const content = getContents(); return ( - +
+
+
+

+ { content.heading } +

+
+ +
+ resetSiteLogo() } + className="nfd-onboarding-step--site-gen__site-logo__container__buttons__skip" + text={ content.buttons.skip } + /> + +
+
); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss new file mode 100644 index 000000000..35b84b0c5 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss @@ -0,0 +1,55 @@ +.nfd-onboarding-step { + + &--site-gen { + + &__site-logo { + + &__container { + + &__heading { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &__animation { + background-image: var(--sitegen-ai-animation); + background-repeat: no-repeat; + background-size: contain; + width: 83px; + height: 72px; + } + + &__text { + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); + margin-left: 15px; + white-space: normal; + line-height: 1; + } + } + + &__buttons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + padding: 16px; + + &__skip { + font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem); + font-style: normal; + font-weight: 510; + margin-right: 24px; + + &:hover { + text-decoration: underline; + color: var(--nfd-onboarding-primary); + } + } + } + + } + } + } +} diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index bd3c59080..2fc574b70 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -300,9 +300,12 @@ body { --nfd-onboarding-admin-bar-color: #c3c4c7; --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-primary: #fff; + --nfd-onboarding-primary-rgb: 255, 255, 255; --nfd-onboarding-secondary: #000; --nfd-onboarding-progress-bar-background: #353a40; --nfd-onboarding-progress-bar-fill: #0060f0; + --nfd-onboarding-site-logo-border: rgba(156, 162, 167, 1); + --nfd-onboarding-site-logo-on-drag: rgba(156, 162, 167, 0.3); } .nfd-onboarding-sitegen-light { @@ -310,6 +313,7 @@ body { --nfd-onboarding-admin-bar-color: #c3c4c7; --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-primary: #000; + --nfd-onboarding-primary-rgb: 0, 0, 0; --nfd-onboarding-secondary: #fff; --nfd-onboarding-progress-bar-background: #353a40; --nfd-onboarding-progress-bar-fill: #0060f0; diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index f70a327f3..17b6bad17 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -37,9 +37,10 @@ body { --site-features-wishlist: url(../static/icons/site-features/wishlist.svg); --site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg); - --sitegen-background: url(../static/images/sitegen-bg.png); - --sitegen-ai-icon: url(../static/icons/sitegen-ai-icon.svg); - --sitegen-ai-animation: url(../static/images/sitegen-ai-animation.gif); - --sitegen-toggle-theme-icon-dark: url(../static/icons/toggle-dark-mode.svg); - --sitegen-toggle-theme-icon-light: url(../static/icons/toggle-light-mode.png); + --sitegen-background: url(../static/images/sitegen/sitegen-bg.png); + --sitegen-ai-icon: url(../static/icons/sitegen/sitegen-ai-icon.svg); + --sitegen-image-upload-icon: url(../static/icons/sitegen/image-upload.svg); + --sitegen-ai-animation: url(../static/images/sitegen/sitegen-ai-animation.gif); + --sitegen-toggle-theme-icon-dark: url(../static/icons/sitegen/toggle-dark-mode.svg); + --sitegen-toggle-theme-icon-light: url(../static/icons/sitegen/toggle-light-mode.png); } diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 41c94debd..a3b7f8946 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -13,7 +13,7 @@ @import "../components/Loaders/stylesheet"; @import "../components/MiniPreview/stylesheet"; @import "../components/Tooltip/stylesheet"; -@import "../components/ImageUploader/stylesheet"; +@import "../components/ImageUploader/components/ImageUploaderWithIcon/stylesheet"; @import "../components/SocialMediaForm/stylesheet"; @import "../components/TextInput/stylesheet"; @import "../components/ExitToWordPress/stylesheet"; @@ -46,6 +46,9 @@ @import "../components/AdminBar/stylesheet"; @import "../components/ProgressBar/stylesheet"; @import "../components/Button/ButtonDark/stylesheet"; +@import "../components/ImageUploader/components/ImageUploaderWithText/stylesheet"; +@import "../components/Button/ButtonNext/stylesheet"; +@import "../components/Loaders/Spinner/stylesheet"; @import "../components/SiteGenPlaceholder/stylesheet"; @import "../components/ToggleDarkMode/stylesheet"; @import "../components/Button/NextButtonSiteGen/stylesheet"; @@ -64,6 +67,7 @@ @import "../steps/DesignHeaderMenu/stylesheet"; @import "../steps/SiteFeatures/stylesheet"; @import "../steps/TheFork/stylesheet"; +@import "../steps/SiteGen/SiteLogo/stylesheet"; @import "../steps/SiteGen/Welcome/stylesheet"; .nfd-onboarding-container {