From 3e5b0e059653870b6810ff0fb4e6bdd23e5d77f6 Mon Sep 17 00:00:00 2001
From: Ajay Yadav <ajay.yadav@newfold.com>
Date: Thu, 9 Nov 2023 12:33:17 +0530
Subject: [PATCH] PRESS2-1233 | merged changes

---
 .../components}/Animate/index.js              |  0
 .../components}/Animate/stylesheet.scss       |  0
 .../CheckboxTemplate/CheckboxItem/index.js    |  2 +-
 .../CheckboxListSkeleton/index.js             |  2 +-
 .../Drawer/DrawerPanel/DesignColors.js        |  2 +-
 .../DrawerPanel/Ecommerce/NavStoreInfo.js     |  2 +-
 .../Drawer/DrawerPanel/NavDesign.js           |  2 +-
 .../Drawer/DrawerPanel/NavGetStarted.js       |  2 +-
 .../components/Drawer/DrawerPanel/NavPage.js  |  2 +-
 .../Drawer/DrawerPanel/NavPrimary.js          |  2 +-
 .../Drawer/DrawerPanel/WithDesignBack.js      |  2 +-
 .../components/ErrorState/Step/index.js       |  2 +-
 .../components}/Layouts/Base.js               |  4 ++--
 .../components}/Layouts/Common.js             | 22 +++++++++----------
 .../components/Layouts/stylesheet.scss        | 17 ++++++++++++++
 .../LivePreview/BlockPreview/index.js         |  2 +-
 .../SelectableCardWithInfo/index.js           |  2 +-
 .../Loaders/Chapter/Interstitial/index.js     |  2 +-
 .../components/Loaders/ImageUpload/index.js   |  2 +-
 .../components/Loaders/Step/index.js          |  2 +-
 .../LearnMore/Skeleton/SidebarSkeleton.js     |  2 +-
 src/OnboardingSPA/components/Tab/index.js     |  2 +-
 src/OnboardingSPA/pages/ErrorPage/index.js    |  2 +-
 .../steps/BasicInfo/basicInfoForm.js          |  2 +-
 src/OnboardingSPA/steps/BasicInfo/index.js    |  2 +-
 src/OnboardingSPA/steps/DesignColors/index.js |  2 +-
 src/OnboardingSPA/steps/DesignFonts/index.js  |  2 +-
 .../steps/DesignHeaderMenu/index.js           |  2 +-
 .../steps/DesignHomepageMenu/index.js         |  2 +-
 .../steps/DesignThemeStyles/Menu/index.js     |  2 +-
 .../steps/DesignThemeStyles/Preview/index.js  |  2 +-
 .../steps/Ecommerce/StepAddress/index.js      |  4 ++--
 .../steps/Ecommerce/StepProducts/index.js     |  2 +-
 .../steps/Ecommerce/StepTax/index.js          |  4 ++--
 .../GetStarted/GetStartedExperience/index.js  |  4 ++--
 .../SiteTypeSetup/PrimarySite/index.js        |  4 ++--
 .../SiteTypeSetup/SecondarySite/index.js      |  4 ++--
 .../steps/GetStarted/Welcome/index.js         |  2 +-
 src/OnboardingSPA/steps/GetStarted/index.js   |  4 ++--
 src/OnboardingSPA/steps/SiteFeatures/index.js |  2 +-
 src/OnboardingSPA/steps/SitePages/index.js    |  2 +-
 src/OnboardingSPA/steps/TopPriority/index.js  |  2 +-
 src/OnboardingSPA/steps/WhatNext/index.js     |  2 +-
 src/OnboardingSPA/steps/index.js              |  2 +-
 src/OnboardingSPA/styles/app.scss             |  6 ++---
 src/Shared/Layouts/stylesheet.scss            | 22 -------------------
 src/SiteGenSPA/steps/DesignStudio/index.js    |  2 +-
 .../steps/SiteGenGetStarted/index.js          |  2 +-
 48 files changed, 80 insertions(+), 85 deletions(-)
 rename src/{Shared => OnboardingSPA/components}/Animate/index.js (100%)
 rename src/{Shared => OnboardingSPA/components}/Animate/stylesheet.scss (100%)
 rename src/{Shared => OnboardingSPA/components}/Layouts/Base.js (87%)
 rename src/{Shared => OnboardingSPA/components}/Layouts/Common.js (72%)
 create mode 100644 src/OnboardingSPA/components/Layouts/stylesheet.scss
 delete mode 100644 src/Shared/Layouts/stylesheet.scss

diff --git a/src/Shared/Animate/index.js b/src/OnboardingSPA/components/Animate/index.js
similarity index 100%
rename from src/Shared/Animate/index.js
rename to src/OnboardingSPA/components/Animate/index.js
diff --git a/src/Shared/Animate/stylesheet.scss b/src/OnboardingSPA/components/Animate/stylesheet.scss
similarity index 100%
rename from src/Shared/Animate/stylesheet.scss
rename to src/OnboardingSPA/components/Animate/stylesheet.scss
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
index ef3d2acd4..0198951f5 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
@@ -2,7 +2,7 @@ import { useState } from '@wordpress/element';
 import { Icon, help } from '@wordpress/icons';
 
 import { CheckboxControl } from '@wordpress/components';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 /**
  * Checkbox Item Component
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
index 8505b463d..7b17cf1a1 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
@@ -1,4 +1,4 @@
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 /**
  * Checkbox List Skeleton Component
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index 1c63b68bf..6fe244b1e 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, ColorPicker } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 import {
 	OnboardingEvent,
 	trackOnboardingEvent,
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js
index e8db42d5a..b329c672a 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js
@@ -6,7 +6,7 @@ import { NavLink } from 'react-router-dom';
 import { VIEW_NAV_PRIMARY } from '../../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../../store';
-import Animate from '../../../../../Shared/Animate';
+import Animate from '../../../Animate';
 import { commerce as commerceChapter } from '../../../../chapters/commerce';
 
 const NavStoreInfo = () => {
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js
index aadad8436..28745a047 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js
@@ -7,7 +7,7 @@ import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const NavDesign = () => {
 	const { designRoutes } = useSelect( ( select ) => {
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js
index 046a91e45..4114e1f65 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js
@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 import { demographic as demographicChapter } from '../../../chapters/demographic';
 
 const NavGetStarted = () => {
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js
index 258aef053..041e3650e 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js
@@ -5,7 +5,7 @@ import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useDispatch } from '@wordpress/data';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const NavPage = () => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
index 3cb678bcd..ad704082f 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
@@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const NavPrimary = () => {
 	const location = useLocation();
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js
index 634937e33..a54b169e8 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js
@@ -5,7 +5,7 @@ import { useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { VIEW_NAV_DESIGN } from '../../../../constants';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const WithDesignBack = ( { children } ) => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
diff --git a/src/OnboardingSPA/components/ErrorState/Step/index.js b/src/OnboardingSPA/components/ErrorState/Step/index.js
index 13fb44e46..d97570176 100644
--- a/src/OnboardingSPA/components/ErrorState/Step/index.js
+++ b/src/OnboardingSPA/components/ErrorState/Step/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import HeadingWithSubHeading from '../../HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 
diff --git a/src/Shared/Layouts/Base.js b/src/OnboardingSPA/components/Layouts/Base.js
similarity index 87%
rename from src/Shared/Layouts/Base.js
rename to src/OnboardingSPA/components/Layouts/Base.js
index b6a7b9e3e..67b6b9696 100644
--- a/src/Shared/Layouts/Base.js
+++ b/src/OnboardingSPA/components/Layouts/Base.js
@@ -6,8 +6,8 @@ import { useLocation } from 'react-router-dom';
 import {
 	OnboardingEvent,
 	sendOnboardingEvent,
-} from '../../OnboardingSPA/utils/analytics/hiive';
-import { ACTION_PAGEVIEW } from '../../OnboardingSPA/utils/analytics/hiive/constants';
+} from '../../utils/analytics/hiive';
+import { ACTION_PAGEVIEW } from '../../utils/analytics/hiive/constants';
 
 const BaseLayout = ( {
 	className = 'nfd-onboarding-layout__base',
diff --git a/src/Shared/Layouts/Common.js b/src/OnboardingSPA/components/Layouts/Common.js
similarity index 72%
rename from src/Shared/Layouts/Common.js
rename to src/OnboardingSPA/components/Layouts/Common.js
index 4cd4f878c..0fb1a0d45 100644
--- a/src/Shared/Layouts/Common.js
+++ b/src/OnboardingSPA/components/Layouts/Common.js
@@ -6,7 +6,7 @@ import Animate from '../Animate';
 /**
  *
  * @param {*} param0
- * @return {ReturnType} Returns the inner contianer
+ * @return
  */
 const InnerContainer = ( { children } ) => {
 	return <section className="is-contained">{ children }</section>;
@@ -15,16 +15,16 @@ const InnerContainer = ( { children } ) => {
 /**
  * The Common Layout extends the Base Layout and applies structural styles and animations.
  *
- * @param {Object}  props
- * @param {string}  props.className
- * @param {Object}  props.children
- * @param {boolean} props.isBgPrimary
- * @param {boolean} props.isCentered
- * @param {boolean} props.isVerticallyCentered
- * @param {boolean} props.isContained
- * @param {boolean} props.isPadded
- * @param {boolean} props.isFadeIn
- * @return {ReturnType} Returns the common layout
+ * @param {Object} props
+ * @param          props.className
+ * @param          props.children
+ * @param          props.isBgPrimary
+ * @param          props.isCentered
+ * @param          props.isVerticallyCentered
+ * @param          props.isContained
+ * @param          props.isPadded
+ * @param          props.isFadeIn
+ * @return
  */
 const CommonLayout = ( {
 	className = '',
diff --git a/src/OnboardingSPA/components/Layouts/stylesheet.scss b/src/OnboardingSPA/components/Layouts/stylesheet.scss
new file mode 100644
index 000000000..f17bfc953
--- /dev/null
+++ b/src/OnboardingSPA/components/Layouts/stylesheet.scss
@@ -0,0 +1,17 @@
+.nfd-onboarding-layout__common {
+    min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$admin-bar-height-big});
+    @include break-medium {
+        min-height: calc(100vh - #{$header-height} - #{$border-width});
+    }
+    &.is-padded {
+        min-height: calc(100vw - #{$header-height} - #{$border-width} - #{$grid-unit * 18} - #{$admin-bar-height-big});
+        @include break-medium {
+            min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$grid-unit * 18});
+        }
+        padding: #{$grid-unit * 9};
+    }
+    > .is-contained {
+        width: 100%;
+        max-width: $break-huge;
+    }
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
index 55d2ae499..966560070 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
@@ -6,7 +6,7 @@ import { useEffect, useState, memo } from '@wordpress/element';
 import AutoHeightBlockPreview from './auto';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { store as nfdOnboardingStore } from '../../../store';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const BlockPreview = ( {
 	blockGrammer,
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
index 8c4c7be93..7562e070a 100644
--- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
+++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
@@ -3,7 +3,7 @@ import { Icon, help } from '@wordpress/icons';
 import { CheckboxControl } from '@wordpress/components';
 
 import { LivePreview } from '..';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const SelectableCardWithInfo = ( {
 	className = 'live-preview--selectable-card--title-description',
diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js
index 3ac8bb251..e157cafea 100644
--- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js
+++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js
@@ -5,7 +5,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
 
 import { store as nfdOnboardingStore } from '../../../../store';
 import CardHeader from '../../../CardHeader';
-import CommonLayout from '../../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../Layouts/Common';
 import NewfoldLargeCard from '../../../NewfoldLargeCard';
 import getContents from './contents';
 import ButtonWithBackground from '../../../Button/ButtonWithBackground';
diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/index.js b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js
index 90801914d..b22795070 100644
--- a/src/OnboardingSPA/components/Loaders/ImageUpload/index.js
+++ b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js
@@ -1,4 +1,4 @@
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const ImageUploadLoader = () => {
 	return (
diff --git a/src/OnboardingSPA/components/Loaders/Step/index.js b/src/OnboardingSPA/components/Loaders/Step/index.js
index 6f3a19562..ea84b1950 100644
--- a/src/OnboardingSPA/components/Loaders/Step/index.js
+++ b/src/OnboardingSPA/components/Loaders/Step/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import HeadingWithSubHeading from '../../HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 
diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js
index 6440a4594..75c69addb 100644
--- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js
+++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js
@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { Fragment } from '@wordpress/element';
 
-import Animate from '../../../../../../Shared/Animate';
+import Animate from '../../../../Animate';
 import { store as nfdOnboardingStore } from '../../../../../store';
 
 /** Skeleton Structure for the SideBar */
diff --git a/src/OnboardingSPA/components/Tab/index.js b/src/OnboardingSPA/components/Tab/index.js
index 9b80bb447..26214741d 100644
--- a/src/OnboardingSPA/components/Tab/index.js
+++ b/src/OnboardingSPA/components/Tab/index.js
@@ -4,7 +4,7 @@
  * @return Tab
  */
 
-import Animate from '../../../Shared/Animate';
+import Animate from '../Animate';
 
 const Tab = ( { title, text, imgType, className, animationName } ) => {
 	return (
diff --git a/src/OnboardingSPA/pages/ErrorPage/index.js b/src/OnboardingSPA/pages/ErrorPage/index.js
index 181abf7d3..eb14fc4e0 100644
--- a/src/OnboardingSPA/pages/ErrorPage/index.js
+++ b/src/OnboardingSPA/pages/ErrorPage/index.js
@@ -1,7 +1,7 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PAGE } from '../../../constants';
 import { store as nfdOnboardingStore } from '../../store';
diff --git a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
index bb766e5bc..cd49b12e8 100644
--- a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
+++ b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
@@ -5,7 +5,7 @@ import getContents from './contents';
 import TextInput from '../../components/TextInput';
 import SkipButton from '../../components/SkipButton';
 import MiniPreview from '../../components/MiniPreview';
-import Animate from '../../../Shared/Animate';
+import Animate from '../../components/Animate';
 import { getSettings } from '../../utils/api/settings';
 import { store as nfdOnboardingStore } from '../../store';
 import ImageUploader from '../../components/ImageUploader';
diff --git a/src/OnboardingSPA/steps/BasicInfo/index.js b/src/OnboardingSPA/steps/BasicInfo/index.js
index b877d8ad9..4c73b3fc6 100644
--- a/src/OnboardingSPA/steps/BasicInfo/index.js
+++ b/src/OnboardingSPA/steps/BasicInfo/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import BasicInfoForm from './basicInfoForm';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants';
diff --git a/src/OnboardingSPA/steps/DesignColors/index.js b/src/OnboardingSPA/steps/DesignColors/index.js
index 133bf0237..91b2e3447 100644
--- a/src/OnboardingSPA/steps/DesignColors/index.js
+++ b/src/OnboardingSPA/steps/DesignColors/index.js
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import { DesignStateHandler } from '../../components/StateHandlers';
 import {
 	LivePreview,
diff --git a/src/OnboardingSPA/steps/DesignFonts/index.js b/src/OnboardingSPA/steps/DesignFonts/index.js
index 44c0691cd..098c7691a 100644
--- a/src/OnboardingSPA/steps/DesignFonts/index.js
+++ b/src/OnboardingSPA/steps/DesignFonts/index.js
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import {
 	SIDEBAR_LEARN_MORE,
 	THEME_STATUS_INIT,
diff --git a/src/OnboardingSPA/steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/steps/DesignHeaderMenu/index.js
index 5e1c06aa2..375d29a79 100644
--- a/src/OnboardingSPA/steps/DesignHeaderMenu/index.js
+++ b/src/OnboardingSPA/steps/DesignHeaderMenu/index.js
@@ -1,7 +1,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useLayoutEffect } from '@wordpress/element';
 
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import { DesignStateHandler } from '../../components/StateHandlers';
 import {
 	LivePreview,
diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js
index 5cf4ce2ea..91e772c7c 100644
--- a/src/OnboardingSPA/steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import {
 	VIEW_NAV_DESIGN,
 	THEME_STATUS_ACTIVE,
diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js
index 485bc7f24..9409a42ce 100644
--- a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js
+++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js
@@ -4,7 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 
 import getContents from '../contents';
 import { store as nfdOnboardingStore } from '../../../store';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { getPatterns } from '../../../utils/api/patterns';
diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js
index 4fefd65eb..111ecbf0d 100644
--- a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js
@@ -8,7 +8,7 @@ import {
 	GlobalStylesProvider,
 } from '../../../components/LivePreview';
 import getContents from '../contents';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import {
 	VIEW_DESIGN_THEME_STYLES_PREVIEW,
 	THEME_STATUS_ACTIVE,
diff --git a/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js
index ede7bad80..3a081d056 100644
--- a/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js
@@ -6,14 +6,14 @@ import {
 	VIEW_NAV_ECOMMERCE_STORE_INFO,
 } from '../../../../constants';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';
 import countries from '../countries.json';
 import currencies from '../currencies.json';
 import { useWPSettings as getWPSettings } from '../useWPSettings';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../../components/Animate';
 import getContents from './contents';
 import NavCardButton from '../../../components/Button/NavCardButton';
 
diff --git a/src/OnboardingSPA/steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/steps/Ecommerce/StepProducts/index.js
index 4209e0385..f3b98955b 100644
--- a/src/OnboardingSPA/steps/Ecommerce/StepProducts/index.js
+++ b/src/OnboardingSPA/steps/Ecommerce/StepProducts/index.js
@@ -7,7 +7,7 @@ import {
 } from '../../../../constants';
 import NavCardButton from '../../../components/Button/NavCardButton';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';
diff --git a/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js
index b5e09ad44..cb5e27ef5 100644
--- a/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js
+++ b/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js
@@ -7,12 +7,12 @@ import {
 	VIEW_NAV_ECOMMERCE_STORE_INFO,
 } from '../../../../constants';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useWPSettings as getWPSettings } from '../useWPSettings';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 import getContents from './contents';
 
 function createReverseLookup( state ) {
diff --git a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js
index f55e6dbd3..93c26a97d 100644
--- a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js
+++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import CardHeader from '../../../components/CardHeader';
 import NavCardButton from '../../../components/Button/NavCardButton';
@@ -11,7 +11,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../../components/Animate';
 import getContents from './contents';
 import {
 	OnboardingEvent,
diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
index dd4cedf8c..6a4cc0dc4 100644
--- a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
+++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../../components/NewfoldLargeCard';
 import {
 	SIDEBAR_LEARN_MORE,
@@ -11,7 +11,7 @@ import { useState, useEffect } from '@wordpress/element';
 import CardHeader from '../../../../components/CardHeader';
 import NavCardButton from '../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../components/NeedHelpTag';
-import Animate from '../../../../../Shared/Animate';
+import Animate from '../../../../components/Animate';
 import { getSiteClassification } from '../../../../utils/api/siteClassification';
 import {
 	OnboardingEvent,
diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
index 30d02ea60..0ef3af4cd 100644
--- a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
+++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../../components/NewfoldLargeCard';
 import {
 	SIDEBAR_LEARN_MORE,
@@ -11,7 +11,7 @@ import { useEffect, useState } from '@wordpress/element';
 import CardHeader from '../../../../components/CardHeader';
 import NavCardButton from '../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../components/NeedHelpTag';
-import Animate from '../../../../../Shared/Animate';
+import Animate from '../../../../components/Animate';
 import { getSiteClassification } from '../../../../utils/api/siteClassification';
 import {
 	OnboardingEvent,
diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js
index a6a25b57d..356bc66a7 100644
--- a/src/OnboardingSPA/steps/GetStarted/Welcome/index.js
+++ b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { chevronRight, external } from '@wordpress/icons';
 
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import CardHeader from '../../../components/CardHeader';
 import NavCardButton from '../../../components/Button/NavCardButton';
diff --git a/src/OnboardingSPA/steps/GetStarted/index.js b/src/OnboardingSPA/steps/GetStarted/index.js
index c07a901a3..75f5808f6 100644
--- a/src/OnboardingSPA/steps/GetStarted/index.js
+++ b/src/OnboardingSPA/steps/GetStarted/index.js
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../store';
-// import CommonLayout from '../../../Shared/Layouts/Common';
-import CommonLayout from '../../../Shared/Layouts/Common';
+// import CommonLayout from '../../components/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import NewfoldLargeCard from '../../components/NewfoldLargeCard';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED } from '../../../constants';
 
diff --git a/src/OnboardingSPA/steps/SiteFeatures/index.js b/src/OnboardingSPA/steps/SiteFeatures/index.js
index 2757074ab..a8265e459 100644
--- a/src/OnboardingSPA/steps/SiteFeatures/index.js
+++ b/src/OnboardingSPA/steps/SiteFeatures/index.js
@@ -6,7 +6,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../store';
 
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import { getSiteFeatures } from '../../utils/api/plugins';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import CheckboxList from '../../components/CheckboxTemplate/CheckboxList';
diff --git a/src/OnboardingSPA/steps/SitePages/index.js b/src/OnboardingSPA/steps/SitePages/index.js
index 17ff16364..bea7a884e 100644
--- a/src/OnboardingSPA/steps/SitePages/index.js
+++ b/src/OnboardingSPA/steps/SitePages/index.js
@@ -3,7 +3,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { useLocation } from 'react-router-dom';
 
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import { getPatterns } from '../../utils/api/patterns';
 import {
diff --git a/src/OnboardingSPA/steps/TopPriority/index.js b/src/OnboardingSPA/steps/TopPriority/index.js
index c46037a95..37a66e526 100644
--- a/src/OnboardingSPA/steps/TopPriority/index.js
+++ b/src/OnboardingSPA/steps/TopPriority/index.js
@@ -5,7 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 import SkipButton from '../../components/SkipButton';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import SelectableCardList from '../../components/SelectableCardList/selectable-card-list';
 import getContents from './contents';
diff --git a/src/OnboardingSPA/steps/WhatNext/index.js b/src/OnboardingSPA/steps/WhatNext/index.js
index c8b9b9152..c90fbdd20 100644
--- a/src/OnboardingSPA/steps/WhatNext/index.js
+++ b/src/OnboardingSPA/steps/WhatNext/index.js
@@ -1,7 +1,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import NewfoldLargeCard from '../../components/NewfoldLargeCard';
 import CardHeader from '../../components/CardHeader';
 import NavCardButton from '../../components/Button/NavCardButton';
diff --git a/src/OnboardingSPA/steps/index.js b/src/OnboardingSPA/steps/index.js
index 400ca5ae8..592fb72d3 100644
--- a/src/OnboardingSPA/steps/index.js
+++ b/src/OnboardingSPA/steps/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../Shared/Layouts/Common';
+import CommonLayout from '../components/Layouts/Common';
 
 const StepBase = () => {
 	return <CommonLayout isCentered>StepBase</CommonLayout>;
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index ea73992da..95f7350c3 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -8,7 +8,7 @@
 @import "../components/Drawer/stylesheet";
 @import "../components/Header/stylesheet";
 @import "../components/Content/stylesheet";
-@import "../../Shared/Layouts/stylesheet";
+@import "../components/Layouts/stylesheet";
 @import "../components/SkipButton/stylesheet";
 @import "../components/Loaders/stylesheet";
 @import "../components/MiniPreview/stylesheet";
@@ -38,7 +38,7 @@
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";
-@import "../../Shared/Animate/stylesheet";
+@import "../components/Animate/stylesheet";
 @import "../components/NewfoldInterfaceSkeleton/style";
 @import "../components/Loaders/Chapter/Interstitial/stylesheet";
 @import "../components/Grid/stylesheet";
@@ -46,7 +46,7 @@
 @import "../components/AdminBar/stylesheet";
 @import "../components/ProgressBar/stylesheet";
 @import "../components/Button/ButtonDark/stylesheet";
-@import "../components//SiteGenPlaceholder/stylesheet.scss";
+@import "../components/SiteGenPlaceholder/stylesheet.scss";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";
diff --git a/src/Shared/Layouts/stylesheet.scss b/src/Shared/Layouts/stylesheet.scss
deleted file mode 100644
index 86089d6c7..000000000
--- a/src/Shared/Layouts/stylesheet.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.nfd-onboarding-layout__common {
-	min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$admin-bar-height-big});
-
-	@include break-medium {
-		min-height: calc(100vh - #{$header-height} - #{$border-width});
-	}
-
-	&.is-padded {
-		min-height: calc(100vw - #{$header-height} - #{$border-width} - #{$grid-unit * 18} - #{$admin-bar-height-big});
-
-		@include break-medium {
-			min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$grid-unit * 18});
-		}
-
-		padding: #{$grid-unit * 9};
-	}
-
-	>.is-contained {
-		width: 100%;
-		max-width: $break-huge;
-	}
-}
diff --git a/src/SiteGenSPA/steps/DesignStudio/index.js b/src/SiteGenSPA/steps/DesignStudio/index.js
index 9f037d64c..905ae194f 100644
--- a/src/SiteGenSPA/steps/DesignStudio/index.js
+++ b/src/SiteGenSPA/steps/DesignStudio/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../../OnboardingSPA/components/Layouts/Common';
 import { LivePreview } from '../../../OnboardingSPA/components/LivePreview';
 // import TopBar from './TopBar';
 // import { addThemeSuffix } from '../../utils/helper';
diff --git a/src/SiteGenSPA/steps/SiteGenGetStarted/index.js b/src/SiteGenSPA/steps/SiteGenGetStarted/index.js
index 88bb9cd02..931804560 100644
--- a/src/SiteGenSPA/steps/SiteGenGetStarted/index.js
+++ b/src/SiteGenSPA/steps/SiteGenGetStarted/index.js
@@ -1,4 +1,4 @@
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../../OnboardingSPA/components/Layouts/Common';
 import HeadingWithSubHeading from './headingwithsubheading';
 import getContents from './contents';