Press2 1570 visual fixes preview editor (#431)

* Visual fixes * Removed DEFAULT colors * changed customize icon * added white stroked outline on selected preview * editor sidebar view all tab fixes * postioned the loader in the center of viewport * merged enhance/ai-onboarding * update package.lock file * update package.lock file * removed border on sidebar * fixed js linting * removed unsed secondary palatte * refactored logic for click and mouseover event in sidebar tab * icon via background image * fixed lint --------- Co-authored-by: arunshenoy99 <[email protected]>
newfold-labs · Jan 29, 2024 · 8cb0d9a · 8cb0d9a
1 parent 8ef143f
commit 8cb0d9a
Show file tree

Hide file tree

Showing 23 changed files with 2,457 additions and 2,005 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -21,24 +21,28 @@ const CardWithOptions = ( { title, options, skip, callback } ) => {
 						}
 					} }
 				>
-					<div className={ 'nfd-sg-card__data__option__left' }>
-						<div
-							className={ 'nfd-sg-card__data__option__left_top' }
-						>
-							{ data.title }
-						</div>
-						<div
-							className={
-								'nfd-sg-card__data__option__left_bottom'
-							}
-						>
-							{ data.desc }
+					<div className={ 'nfd-sg-card__data__option__wrapper' }>
+						<div className={ 'nfd-sg-card__data__option__left' }>
+							<div
+								className={
+									'nfd-sg-card__data__option__left_top'
+								}
+							>
+								{ data.title }
+							</div>
+							<div
+								className={
+									'nfd-sg-card__data__option__left_bottom'
+								}
+							>
+								{ data.desc }
+							</div>
 						</div>
+						<Icon
+							className={ 'nfd-sg-card__data__option__right' }
+							icon={ chevronRight }
+						/>
 					</div>
-					<Icon
-						className={ 'nfd-sg-card__data__option__right' }
-						icon={ chevronRight }
-					/>
 				</div>
 			);
 		} );

diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -18,43 +18,49 @@ $background-color: var(--nfd-onboarding-card-background);
 	&__title {
 		color: var(--nfd-onboarding-primary);
 		margin: 16px;
-		line-height: 2;
+		line-height: 1.5;
 		font-size: 18px;
 		text-align: center;
 		margin-bottom: 30px;
-		letter-spacing: 1.5px;
+		font-weight: 400;
+		letter-spacing: 1.5;
 	}
 
 	&__data {
 		margin: 12px;
 
 		&__option {
-			display: flex;
-			cursor: pointer;
-			margin: 16px 4px;
-			align-items: center;
-			border-radius: 4px 4px 0 0;
-			padding: 16px 12px 16px 12px;
-			justify-content: space-between;
-			transition: background-color 400ms ease-in-out;
 
-			&:not(:last-child) {
-				border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+			&__wrapper {
+				display: flex;
+				cursor: pointer;
+				margin: 16px 4px;
+				align-items: center;
+				border-radius: 8px;
+				padding: 16px 12px 16px 12px;
+				justify-content: space-between;
+				transition: background-color 400ms ease-in-out;
+
+				&:hover {
+					background-color: var(--nfd-onboarding-hover);
+				}
 			}
 
-			&:hover {
-				background-color: var(--nfd-onboarding-hover);
+			&:not(:last-child) {
+				border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
 			}
 
 			&__left_top {
 				color: var(--nfd-onboarding-primary);
-				font-size: 16px;
+				font-size: 15px;
 				font-weight: 500;
-				padding-bottom: 12px;
+				margin-bottom: 7px;
+				line-height: 24px;
 			}
 
 			&__left_bottom {
-				color: var(--nfd-onboarding-primary);
+				color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
+
 				font-size: 14px;
 				font-weight: 300;
 			}
@@ -76,6 +82,7 @@ $background-color: var(--nfd-onboarding-card-background);
 		margin: 0 20px 6px 20px;
 		transition: color 200ms ease-in-out;
 		color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
+		font-weight: 500;
 
 		&:hover {
 			color: var(--nfd-onboarding-primary);

diff --git a/src/OnboardingSPA/components/ColorPickerButton/index.js b/src/OnboardingSPA/components/ColorPickerButton/index.js
@@ -32,9 +32,7 @@ const ColorPickerButton = ( {
 				style={ {
 					backgroundColor: `${ color }`,
 				} }
-			>
-				{ isColorSelected ? <>&#10003;</> : null }
-			</div>
+			></div>
 			<div className="custom-palette__below__row__text">{ name }</div>
 		</div>
 	);

diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -479,10 +479,6 @@
 				align-items: center;
 				justify-content: center;
 				border: 1px solid rgba(0, 0, 0, 0.3);
-
-				&--selected-border {
-					box-shadow: 0 0 5px 3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.5);
-				}
 			}
 		}
 	}

diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
@@ -65,6 +65,7 @@
 				padding: 6px 56px 6px 56px;
 				border-radius: 8px;
 				gap: 6px;
+				border: none;
 			}
 
 			&:hover {

diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -2,9 +2,9 @@ $background-color: var(--nfd-onboarding-card-background);
 
 .nfd-sg-loader {
 
-	margin: 8px;
+	margin-bottom: 8px;
 	max-width: 90vw;
-	padding: 16px 12px;
+	padding: 18px 12px 10px 12px;
 	border-radius: 12px;
 	background-color: $background-color;
 	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
@@ -16,16 +16,17 @@ $background-color: var(--nfd-onboarding-card-background);
 	}
 
 	&__title {
-		line-height: 2;
-		font-size: 18px;
+		line-height: 19px;
+		font-size: 16px;
 		text-align: center;
-		letter-spacing: 1.5px;
+		font-weight: 500;
 		color: var(--nfd-onboarding-primary);
+		letter-spacing: 1.5;
 	}
 
 	&__progress {
 		display: flex;
-		margin: 20px 60px;
+		margin: 17px 60px 04px 60px;
 		align-items: center;
 		justify-content: center;
 

diff --git a/...SPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js b/...SPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js
@@ -3,22 +3,14 @@ import { ColorPalette, Popover } from '@wordpress/components';
 import './stylesheet.scss';
 import { __ } from '@wordpress/i18n';
 
-const CustomColorPalette = ( {
-	onChange,
-	paletteSecondaryColors,
-	palettePrimaryColors,
-} ) => {
+const CustomColorPalette = ( { onChange, palettePrimaryColors } ) => {
 	const [ color, setColor ] = useState( palettePrimaryColors[ 0 ].color );
 	const baseClassName =
 		'nfd-onboarding-sidebar--customize__custom-color-palette';
 	const colors = [
 		{
 			colors: palettePrimaryColors,
-			name: __( 'Primary colors', 'wp-module-onboarding' ),
-		},
-		{
-			colors: paletteSecondaryColors,
-			name: __( 'Secondary colors', 'wp-module-onboarding' ),
+			name: __( 'THEME', 'wp-module-onboarding' ),
 		},
 	];
 	const handleColorChange = ( newColor ) => {

diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
@@ -50,18 +50,6 @@ const DesignColorsPanel = ( {
 	const [ showColorPicker, setShowColorPicker ] = useState( false );
 	const customPaletteId = colors.length - 1;
 
-	const paletteSecondaryColors = Object.entries( colorPalettes[ 1 ] )
-		.map( ( [ name, color ] ) => {
-			if ( name !== 'name' ) {
-				return {
-					name: __( 'Custom', 'wp-module-onboarding' ),
-					color,
-				};
-			}
-			return null;
-		} )
-		.filter( Boolean );
-
 	const handleApplyCustomColors = () => {
 		setSelectedCustomColors( true );
 		setIsEditingCustomColors( false );
@@ -219,7 +207,6 @@ const DesignColorsPanel = ( {
 					<CustomColorPalette
 						onChange={ handleColorPicker }
 						palettePrimaryColors={ palettePrimaryColors }
-						paletteSecondaryColors={ paletteSecondaryColors }
 					/>
 				) }
 			</div>
@@ -263,9 +250,9 @@ const DesignColorsPanel = ( {
 									label={
 										idx === 0
 											? __(
-													'Default',
-													'wp-module-onboarding'
-											  )
+												'Default',
+												'wp-module-onboarding'
+											)
 											: ''
 									}
 									selectedPalette={ selectedPalette }

diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
@@ -20,17 +20,11 @@ const FontGroup = ( {
 			role="presentation"
 			onClick={ () => handleGroupSelect( group.id ) }
 		>
-			<Dashicon
-				className={ `${ baseClassName }__font-group__container__button__icon` }
-				icon={ 'yes-alt' }
-				size={ 30 }
-				style={ {
-					color:
-						selectedGroup === group.id
-							? 'var(--nfd-onboarding-sitegen-customize-icon-selected)'
-							: 'var(--nfd-onboarding-sitegen-customize-grey-1)',
-				} }
-			/>
+			<span
+				className={ `${ baseClassName }__font-group__container__button__icon${
+					selectedGroup === group.id ? ` selected` : ``
+				}` }
+			></span>
 			<div
 				className={ `${ baseClassName }__font-group__container__button__font-name__container` }
 			>

diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss
@@ -53,7 +53,14 @@
 				}
 
 				&__icon {
+					width: 24px;
+					height: 24px;
 					margin-right: 10px;
+					background-image: var(--sitegen-sidebar-radio-unchecked);
+
+					&.selected {
+						background-image: var(--sitegen-sidebar-radio-checked);
+					}
 				}
 
 				&__font-name__container {

diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
@@ -286,11 +286,6 @@ const SitegenEditorPatternsSidebar = () => {
 														'wp-module-onboarding'
 													) }
 												</p>
-												<Button
-													className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__icon"
-													onClick={ closeSideBar }
-													icon={ closeSmall }
-												></Button>
 											</div>
 										),
 										content:
@@ -358,8 +353,15 @@ const SitegenEditorPatternsSidebar = () => {
 									},
 								] }
 								callback={ setActiveTab }
+								triggerEvent="click"
 							></TabPanelHover>
 						</div>
+
+						<Button
+							className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__icon"
+							onClick={ closeSideBar }
+							icon={ closeSmall }
+						></Button>
 					</PanelHeader>
 					{ activeTab &&
 						homepages &&

diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
@@ -26,7 +26,18 @@
 
 			&__tab-panel {
 				font-size: 13px;
-				width: 300px;
+
+				.components-tab-panel__tabs-item {
+
+					&.is-active {
+						color: #1e1e1e;
+						box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 #1e1e1e;
+					}
+
+					&.is-not-active {
+						box-shadow: none !important;
+					}
+				}
 
 				&__favorites-tab {
 					display: flex;
@@ -68,7 +79,8 @@
 										height: 140px;
 										border-radius: 8px;
 										cursor: pointer;
-										border: 3px solid #0060f0;
+										border: 3px solid #fff;
+										box-shadow: 0 0 0 3px #0060f0;
 									}
 								}
 							}

diff --git a/src/OnboardingSPA/components/Sidebar/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/stylesheet.scss
@@ -28,6 +28,7 @@
 
 .nfd-onboarding-sidebar__panel.is-open {
 	width: $nav-sidebar-width;
+	border-left: 1px solid var(--nfd-onboarding-sidebar-border-left);
 
 	.nfd-onboarding-sidebar__panel-inner,
 	.interface-interface-skeleton__sidebar {