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 && (
) }
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;
}
}
}