diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js index 88e9a6cd2..e0973c695 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js @@ -1,3 +1,8 @@ +import classNames from 'classnames'; +import { useContext } from '@wordpress/element'; +import { THEME_LIGHT } from '../../../../constants'; +import { ThemeContext } from '../../ThemeContextProvider'; + /** * Interface Cards with standard design. * @@ -7,13 +12,22 @@ */ const HeadingWithSubHeading = ( { title, subtitle } ) => { + const { theme } = useContext( ThemeContext ); + return (

{ title }

{ subtitle && (
{ subtitle } -
+
) }
diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss index a953cf381..d2ecccf73 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss @@ -25,10 +25,15 @@ display: inline-flex; width: 100px; height: 17px; + margin-left: 4px; background-image: var(--nfd-onboarding-logo-name); background-size: contain; background-repeat: no-repeat; filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(200%) contrast(200%); + + &--light { + filter: brightness(0) saturate(100%); + } } } } diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss index 8fbd1c460..2e10027f6 100644 --- a/src/OnboardingSPA/components/StartOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/StartOptions/stylesheet.scss @@ -8,13 +8,18 @@ color: var(--nfd-onboarding-primary); font-weight: 500; text-align: center; - font-size: 18px; + font-size: 20px; } &__container { display: flex; - justify-content: center; flex-wrap: wrap; + align-items: center; + justify-content: center; + + @media (max-width: #{ ($break-large) }) { + flex-direction: column; + } &__options { flex: 1; @@ -22,12 +27,24 @@ height: 130px; border: 1px solid #9ca2a7; text-align: center; - padding: 24px; - padding-top: 50px; + padding: 40px 24px; margin: 20px; border-radius: 16px; color: var(--nfd-onboarding-primary); font-size: 20px; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + transition: all 200ms ease-in-out; + background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.25); + + @media (max-width: #{ ($break-large) }) { + height: 60px; + margin: 12px; + padding: 12px; + min-width: 85vw; + } &__span { background-color: var(--nfd-onboarding-white); @@ -41,10 +58,10 @@ } &__options:hover { - background-color: rgba(6, 0, 0, 0.3); cursor: pointer; outline: 2px solid #9ca2a7; - transition: 0.1s linear; + box-shadow: 13px 18px 27px -6px rgba(0, 0, 0, 0.3); + background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.5); } &__heading { @@ -54,11 +71,15 @@ line-height: 1; &__title { - font-weight: 510; + font-weight: 500; text-align: center; color: var(--nfd-onboarding-primary); font-size: 20px; line-height: 20px; + + @media (max-width: #{ ($break-large) }) { + margin: 8px; + } } &__subtitle { diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index 7da697a97..3d8e7c794 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -1,7 +1,7 @@ import CommonLayout from '../../components/Layouts/Common'; import { useEffect } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../store'; import { FOOTER_SITEGEN, HEADER_SITEGEN } from '../../../constants'; @@ -12,6 +12,12 @@ import StartOptions from '../../components/StartOptions'; import getContents from './contents'; const TheFork = () => { + const { migrationUrl } = useSelect( ( select ) => { + return { + migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(), + }; + } ); + const { setIsHeaderEnabled, setSidebarActiveView, @@ -53,7 +59,9 @@ const TheFork = () => {
{ content.importtext } diff --git a/src/OnboardingSPA/steps/TheFork/stylesheet.scss b/src/OnboardingSPA/steps/TheFork/stylesheet.scss index 84b14e08c..c2f831d26 100644 --- a/src/OnboardingSPA/steps/TheFork/stylesheet.scss +++ b/src/OnboardingSPA/steps/TheFork/stylesheet.scss @@ -4,9 +4,13 @@ &__fork { display: flex; + align-items: center; flex-direction: column; justify-content: center; - align-items: center; + + @media (max-width: #{ ($break-large) }) { + margin-bottom: 80px; + } &__heading { color: var(--nfd-onboarding-primary); @@ -46,7 +50,7 @@ text-align: center; font-size: 18px; line-height: 20px; - margin-top: 35px !important; + margin: 35px !important; } } }