Sidebar fixes

newfold-labs · Dec 7, 2023 · be0a560 · be0a560
1 parent e0bf252
commit be0a560
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 39 deletions.
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js
@@ -90,13 +90,15 @@ const LivePreviewSiteGenCard = ( {
 						{ title }
 					</div>
 				</div>
-				<div className={ `${ className }__buttons__regenerate` }>
+				<div
+					className={ `${ className }__buttons__regenerate` }
+					role="button"
+					tabIndex={ 0 }
+					onClick={ () => handleRegenerate() }
+					onKeyDown={ () => handleRegenerate() }
+				>
 					<div
 						className={ `${ className }__buttons__regenerate__icon` }
-						role="button"
-						tabIndex={ 0 }
-						onClick={ () => handleRegenerate() }
-						onKeyDown={ () => handleRegenerate() }
 					></div>
 					<div
 						className={ `${ className }__buttons__regenerate__text` }

diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss
@@ -5,14 +5,16 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
+		width: 80%;
+		justify-self: center;
+		align-self: center;
 
 		&__live-preview-container {
 			position: relative;
 			width: 90%;
 			overflow: hidden;
 			align-items: center;
-			border-radius: 8px;
+			border-radius: 12px;
 
 			&:hover {
 				cursor: pointer;

diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
@@ -29,12 +29,16 @@ const SitegenEditorPatternsSidebar = () => {
 	const [ activeHomepage, setActiveHomepage ] = useState();
 	const [ globalStyles, setGlobalStyles ] = useState( [] );
 	const [ activeTab, setActiveTab ] = useState();
-	const { currentData } = useSelect( ( select ) => {
-		return {
-			currentData:
-				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-		};
-	} );
+	const { currentData, isSidebarOpened, sideBarView } = useSelect(
+		( select ) => {
+			return {
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+				isSidebarOpened: select( nfdOnboardingStore ).isSidebarOpened(),
+				sideBarView: select( nfdOnboardingStore ).getSidebarView(),
+			};
+		}
+	);
 
 	const { setIsSidebarOpened, setCurrentOnboardingData } =
 		useDispatch( nfdOnboardingStore );
@@ -84,12 +88,11 @@ const SitegenEditorPatternsSidebar = () => {
 					};
 				}
 			} );
-			currentData.sitegen.homepages.data = homepagesResponse;
-			setCurrentOnboardingData( currentData );
-
 			homepagesResponse.forEach( ( homepage ) => {
 				homepagesObject[ homepage.slug ] = homepage;
 			} );
+			currentData.sitegen.homepages.data = homepagesObject;
+			setCurrentOnboardingData( currentData );
 		} else {
 			homepagesObject = currentData.sitegen.homepages.data;
 		}
@@ -100,19 +103,23 @@ const SitegenEditorPatternsSidebar = () => {
 	};
 
 	useEffect( () => {
-		loadData();
-	}, [] );
+		if (
+			SIDEBAR_SITEGEN_EDITOR_PATTERNS === sideBarView &&
+			isSidebarOpened
+		) {
+			loadData();
+		}
+	}, [ sideBarView, isSidebarOpened ] );
 
 	useEffect( () => {
 		setActiveTab( {
-			name: 'All Versions',
+			name: __( 'All Versions', 'wp-module-onboarding' ),
 			title: (
 				<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab">
 					<p>{ __( 'All Versions', 'wp-module-onboarding' ) }</p>
 				</div>
 			),
 			content:
-				activeTab &&
 				homepages &&
 				activeHomepage &&
 				Object.keys( homepages ).map( ( homepage ) => {
@@ -123,23 +130,28 @@ const SitegenEditorPatternsSidebar = () => {
 					return (
 						<div
 							className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container` }
-							onClick={ () => handlePreview( data.slug ) }
-							role="button"
-							tabIndex={ 0 }
-							onKeyDown={ () => handlePreview( data.slug ) }
 							key={ data.slug }
 						>
-							<LivePreview
-								styling={
-									data.slug !== activeHomepage.slug
-										? 'custom'
-										: 'custom__highlighted'
-								}
-								blockGrammer={ data.content }
-								viewportWidth={ 1300 }
-								previewSettings={ newPreviewSettings }
-								skeletonLoadingTime={ 0 }
-							/>
+							<div
+								className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__previews"
+								onClick={ () => handlePreview( data.slug ) }
+								role="button"
+								tabIndex={ 0 }
+								onKeyDown={ () => handlePreview( data.slug ) }
+							>
+								<LivePreview
+									styling={
+										data.slug !== activeHomepage.slug
+											? 'custom'
+											: 'custom__highlighted'
+									}
+									blockGrammer={ data.content }
+									viewportWidth={ 1300 }
+									previewSettings={ newPreviewSettings }
+									skeletonLoadingTime={ 0 }
+								/>
+							</div>
+
 							<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context">
 								<div
 									className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon ${
@@ -182,7 +194,10 @@ const SitegenEditorPatternsSidebar = () => {
 								}
 								tabs={ [
 									{
-										name: 'All Versions',
+										name: __(
+											'All Versions',
+											'wp-module-onboarding'
+										),
 										title: (
 											<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab">
 												<p>

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -58,11 +58,11 @@ const SiteGenPreview = () => {
 					};
 				}
 			} );
-			currentData.sitegen.homepages.data = homepagesResponse;
-			setCurrentOnboardingData( currentData );
 			homepagesResponse.forEach( ( homepage ) => {
 				homepagesObject[ homepage.slug ] = homepage;
 			} );
+			currentData.sitegen.homepages.data = homepagesObject;
+			setCurrentOnboardingData( currentData );
 		} else {
 			homepagesObject = currentData.sitegen.homepages.data;
 		}

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
@@ -13,7 +13,7 @@
 				color: var(--nfd-onboarding-primary);
 				display: flex;
 				flex-direction: column;
-				width: 450px;
+				width: 420px;
 				justify-content: center;
 				align-items: center;
 				margin: 16px 0;