Merge pull request #384 from newfold-labs/fix-fork-page-issues

Fix Fork Page issues
newfold-labs · Dec 13, 2023 · 08feb2e · 08feb2e
2 parents e0e02b6 + 9ee916b
commit 08feb2e
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 12 deletions.
diff --git 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 (
 		<div className="nfd-onboarding-step__heading">
 			<h2 className="nfd-onboarding-step__heading__title">{ title }</h2>
 			{ subtitle && (
 				<div className="nfd-onboarding-step__heading__subtitle">
 					{ subtitle }
-					<div className="nfd-onboarding-step__heading__icon"></div>
+					<div
+						className={ classNames(
+							'nfd-onboarding-step__heading__icon',
+							theme === THEME_LIGHT
+								? 'nfd-onboarding-step__heading__icon--light'
+								: null
+						) }
+					></div>
 				</div>
 			) }
 		</div>

diff --git 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
@@ -8,26 +8,43 @@
 		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;
 			min-width: 310px;
 			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
@@ -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 = () => {
 			<br />
 			<a
 				className="nfd-onboarding-step--site-gen__fork__importsite"
-				href={ content.importlink }
+				href={ migrationUrl }
+				target={ '_blank' }
+				rel={ 'noreferrer' }
 			>
 				{ content.importtext }
 			</a>

diff --git 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;
 			}
 		}
 	}