Make content responsive

newfold-labs · Nov 8, 2023 · 4dfa607 · 4dfa607
1 parent 902c689
commit 4dfa607
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 12 deletions.
diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
@@ -7,7 +7,19 @@
 		text-align: center;
 		width: 164px;
 		height: 50px;
-		font-size: 15px;
+		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 		margin-top: 24px;
+		border-radius: 6px;
+
+		@media (min-width: 2600px ) {
+			width: 250px;
+			height: 76px;
+		}
+
+		@media (max-width: #{ ($break-small) }) {
+			width: 100px;
+			height: 30px;
+			margin-top: 10px;
+		}
 	}
 }
diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js
@@ -7,7 +7,11 @@ import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics';
 import { store as nfdOnboardingStore } from '../../../store';
 import { switchFlow } from '../../../utils/api/flow';
 import { MAX_RETRIES_FLOW_SWITCH } from '../../../../constants';
-import { ECOMMERCE_FLOW } from '../../../data/flows/constants';
+import {
+	DEFAULT_FLOW,
+	ECOMMERCE_FLOW,
+	SITEGEN_FLOW,
+} from '../../../data/flows/constants';
 import { removeQueryParam } from '../../../utils';
 import { commerce } from '../../../chapters/commerce';
 import EcommerceStepLoader from '../../Loaders/Step/Ecommerce';
@@ -91,15 +95,15 @@ const FlowStateHandler = () => {
 	// TODO: Remove handleRender and replace with only children once Chapter Prioritization is enabled.
 	const handleRender = () => {
 		switch ( newFlow ) {
-			case 'ecommerce':
+			case ECOMMERCE_FLOW:
 				return <EcommerceStepLoader />;
 		}
 
 		switch ( window.nfdOnboarding.currentFlow ) {
-			case 'wp-setup':
-			case 'ecommerce':
+			case DEFAULT_FLOW:
+			case ECOMMERCE_FLOW:
 				return <SiteBuild />;
-			case 'sitegen':
+			case SITEGEN_FLOW:
 				return <SiteGen />;
 		}
 	};

diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
@@ -31,9 +31,9 @@ const SiteGenWelcome = () => {
 				<div className="nfd-onboarding-step--site-gen__welcome__container__animation"></div>
 				<div className="nfd-onboarding-step--site-gen__welcome__container__heading">
 					<div className="nfd-onboarding-step--site-gen__welcome__container__heading__image"></div>
-					<h3 className="nfd-onboarding-step--site-gen__welcome__container__heading__text">
+					<p className="nfd-onboarding-step--site-gen__welcome__container__heading__text">
 						{ content.heading }
-					</h3>
+					</p>
 				</div>
 				<div className="nfd-onboarding-step--site-gen__welcome__container__sub-heading">
 					<p className="nfd-onboarding-step--site-gen__welcome__container__sub-heading__text">

diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
@@ -13,6 +13,14 @@
 				justify-content: center;
 				width: 500px;
 
+				@media (max-width: #{ ($break-small) }) {
+					margin: 16px;
+				}
+
+				@media (min-width: 2600px ) {
+					width: 1000px;
+				}
+
 				&__animation {
 					background-image: var(--sitegen-ai-animation);
 					background-repeat: no-repeat;
@@ -24,7 +32,7 @@
 				&__heading {
 					display: flex;
 					flex-direction: row;
-					width: 450px;
+					width: 100%;
 					padding: 0;
 					justify-content: center;
 					align-items: center;
@@ -35,24 +43,37 @@
 						background-image: var(--sitegen-ai-icon);
 						background-repeat: no-repeat;
 						background-size: cover;
+
+						@media (max-width: #{ ($break-small) }) {
+							width: 32px;
+							height: 27px;
+						}
+
+						@media (min-width: 2600px ) {
+							width: 100px;
+							height: 86px;
+						}
+
 					}
 
 					&__text {
 						color: var(--nfd-onboarding-primary);
 						font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem);
-						padding-left: 15px;
+						margin-left: 15px;
+						white-space: normal;
+						line-height: 1;
 					}
 				}
 
 				&__sub-heading {
-					width: 450px;
+					width: 100%;
 					margin: 10px;
 					padding: 0;
 
 					&__text {
 						text-align: center;
 						color: var(--nfd-onboarding-primary);
-						font-size: 18px;
+						font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
 						margin: 0;
 						padding: 0;
 					}