Merge pull request #165 from newfold-labs/enhance/PRESS2-579-remove-l…

…arge-previews-top-border Remove large live preview top border, consolidate large preview css
newfold-labs · Feb 8, 2023 · 8f66d4c · 8f66d4c
2 parents bcf5f30 + 116d070
commit 8f66d4c
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 223 deletions.
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
@@ -13,13 +13,20 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 			max-width: 320px;
 			max-height: 320px;
 		}
-		
+
 		&-large {
 			width: 70%;
-			height: 70%;
+			min-height: 90vh;
 			overflow: hidden;
-			max-width: 925px;
-			max-height: 925px;
+			position: relative;
+			align-items: center;
+			border: 1px solid #e3dfdf;
+			border-top: 0;
+			margin-bottom: 30px;
+
+			&:hover {
+				cursor: not-allowed;
+			}
 		}
 
 		&--is-skeleton {
@@ -60,13 +67,8 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 				width: 100%;
 				height: 100%;
 				position: absolute;
-				background-image: linear-gradient(90deg,
-						rgba($main-color-light-rgb, 0) 0,
-						rgba($main-color-light-rgb, 0.4) 20%,
-						rgba($main-color-light-rgb, 0.6) 60%,
-						rgba($main-color-light-rgb, 0.4) 90%,
-						rgba($main-color-light-rgb, 0.02) 100%,
-						$main-color-grey);
+				background-image:
+ linear-gradient(90deg, rgba($main-color-light-rgb, 0) 0, rgba($main-color-light-rgb, 0.4) 20%, rgba($main-color-light-rgb, 0.6) 60%, rgba($main-color-light-rgb, 0.4) 90%, rgba($main-color-light-rgb, 0.02) 100%, $main-color-grey);
 			}
 		}
 	}

diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -61,22 +61,20 @@ const StepDesignColors = () => {
 							<span className="theme-colors-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-colors-preview__live-preview-container">
-						{ ! pattern && (
-							<LivePreview
-								blockGrammer={ '' }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>

diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
@@ -1,10 +1,12 @@
 .theme-colors-preview {
 	flex: 1;
-	margin: 16px;
+	width: 100%;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
+	background-color: var(--nfd-onboarding-light-gray-5);
+	padding-top: 20px;
 
 	&__title-bar {
 		width: 70%;
@@ -30,29 +32,4 @@
 			}
 		}
 	}
-
-	&__live-preview-container {
-		width: 70%;
-		min-height: 90vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
@@ -46,15 +46,20 @@ const StepDesignHeaderMenu = () => {
 							<span className="theme-header-menu-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-header-menu-preview__live-preview-container">
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>

diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
@@ -5,58 +5,8 @@
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
-	background-color: #eee;
-
-	&__checkbox {
-		margin: 20px 0;
-		width: 70%;
-		display: inline;
-
-		.components-checkbox-control {
-
-			&__checked {
-				height: 32px;
-				width: 32px;
-				left: 0;
-				top: 0;
-			}
-
-			&__input-container {
-				height: 32px;
-				width: 32px;
-			}
-
-			&__input[type="checkbox"] {
-				height: 32px;
-				width: 32px;
-
-				&:focus {
-					box-shadow: none;
-				}
-			}
-		}
-
-		.components-base-control {
-
-			&__field {
-				display: flex;
-				flex-direction: row;
-			}
-		}
-
-		&__label {
-
-			margin-left: 15px;
-
-			&__hint {
-				color: #757575;
-				display: block;
-				font-style: italic;
-				margin-top: 5px;
-			}
-		}
-
-	}
+	background-color: var(--nfd-onboarding-light-gray-5);
+	padding-top: 20px;
 
 	&__title-bar {
 		width: 70%;
@@ -66,7 +16,6 @@
 		background-color: #ccc;
 		justify-content: space-between;
 		border: 1px solid transparent;
-		margin-top: 20px;
 
 		&__browser {
 			display: flex;
@@ -83,29 +32,4 @@
 			}
 		}
 	}
-
-	&__live-preview-container {
-		width: 70%;
-		min-height: 80vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -194,22 +194,20 @@ const StepDesignThemeStylesPreview = () => {
 							<span className="theme-styles-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-styles-preview__live-preview-container">
-						{ ! pattern && (
-							<LivePreview
-								blockGrammer={ '' }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
-	background-color: #eee;
+	background-color: var(--nfd-onboarding-light-gray-5);
 
 	&__checkbox {
 		margin: 20px 0;
@@ -82,28 +82,4 @@
 			}
 		}
 	}
-
-	&__live-preview-container {
-		width: 70%;
-		min-height: 80vh;
-		overflow: hidden;
-		position: relative;
-		align-items: center;
-		border: 1px solid #e3dfdf;
-		margin-bottom: 30px;
-
-		&:hover {
-			cursor: not-allowed;
-		}
-
-		.live-preview {
-
-			&__container {
-
-				&-custom {
-					width: 100%;
-				}
-			}
-		}
-	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -64,22 +64,20 @@ const StepDesignTypography = () => {
 							<span className="theme-fonts-preview__title-bar__browser__dot"></span>
 						</div>
 					</div>
-					<div className="theme-fonts-preview__live-preview-container">
-						{ ! pattern && (
-							<LivePreview
-								blockGrammer={ '' }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-						{ pattern && (
-							<LivePreview
-								blockGrammer={ pattern }
-								styling={ 'custom' }
-								viewportWidth={ 1300 }
-							/>
-						) }
-					</div>
+					{ ! pattern && (
+						<LivePreview
+							blockGrammer={ '' }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
+					{ pattern && (
+						<LivePreview
+							blockGrammer={ pattern }
+							styling={ 'large' }
+							viewportWidth={ 1300 }
+						/>
+					) }
 				</CommonLayout>
 			</GlobalStylesProvider>
 		</DesignStateHandler>