Merge pull request #139 from newfold-labs/add/PRESS2-478-live-preview…

…-cursor-states Live preview cursor states
newfold-labs · Jan 4, 2023 · 0b4e51b · 0b4e51b
2 parents 83dc3ee + babb833
commit 0b4e51b
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 169 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 vendor
-.DS_Store
+.DS_Store
+.vscode
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
@@ -9,6 +9,7 @@ $main-color-light: var(--nfd-onboarding-white);
     margin-top: 16px;
     background: $main-color-light;
     border: 0.5px solid $white-offset;
+    cursor: not-allowed;
     width: clamp(15rem, 25vw, 35rem);
     box-shadow: 0px 2px 8px 2px rgba(204, 204, 204, 0.175295);
 }
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
@@ -28,6 +28,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 			height: 100%;
 			display: flex;
 			position: absolute;
+			cursor: not-allowed;
 			align-items: center;
 			flex-direction: column;
 			background-color: $main-color-grey;

diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
@@ -27,10 +27,11 @@ const SelectableCardWithInfo = ( {
 	};
 
 	return (
-		<div
-			className={ `${ className }` }
-		>
-			<div className={ `${ className }__live-preview-container` }>
+		<div className={ `${ className }` }>
+			<div
+				className={ `${ className }__live-preview-container` }
+				onClick={ () => handleCheck( ! selected ) }
+			>
 				<LivePreview
 					styling={ styling }
 					blockGrammer={ blockGrammer }

diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss
@@ -22,9 +22,14 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 		align-items: center;
 		border: 1px solid #e3dfdf;
 
+		&:hover {
+			cursor: pointer;
+		}
+
 		.live-preview {
 
 			&__container {
+
 				&-custom {
 					width: 100%;
 					overflow: hidden;
@@ -36,4 +41,3 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 	}
 }
 
-
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
@@ -1,55 +1,58 @@
-
-
 .theme-colors-preview {
-    flex: 1;
-    margin: 16px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-
-    &__title-bar {
-        width: 70%;
-        height: 15px;
-        display: flex;
-        align-items: center;
-        background-color: #ccc;
-        justify-content: space-between;
-        border: 1px solid transparent;
-
-        &__browser {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &__dot {
-                background-color: #989ea7;
-                width: 8px;
-                margin: 3px;
-                height: 8px;
-                border-radius: 50%;
-                display: inline-block;
-            }
-        }
-    }
-
-    &__live-preview-container {
-        width: 70%;
-        min-height: 90vh;
-        overflow: hidden;
-        position: relative;
-        align-items: center;
-        border: 1px solid #e3dfdf;
-        margin-bottom: 30px;
-
-        .live-preview {
-
-            &__container {
-
-                &-custom {
-                    width: 100%;
-                }
-            }
-        }
-    }
-}
+	flex: 1;
+	margin: 16px;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+
+	&__title-bar {
+		width: 70%;
+		height: 15px;
+		display: flex;
+		align-items: center;
+		background-color: #ccc;
+		justify-content: space-between;
+		border: 1px solid transparent;
+
+		&__browser {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&__dot {
+				background-color: #989ea7;
+				width: 8px;
+				margin: 3px;
+				height: 8px;
+				border-radius: 50%;
+				display: inline-block;
+			}
+		}
+	}
+
+	&__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/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
@@ -66,7 +66,7 @@
 		background-color: #ccc;
 		justify-content: space-between;
 		border: 1px solid transparent;
-        margin-top: 20px;
+		margin-top: 20px;
 
 		&__browser {
 			display: flex;
@@ -93,6 +93,11 @@
 		border: 1px solid #e3dfdf;
 		margin-bottom: 30px;
 
+
+		&:hover {
+			cursor: not-allowed;
+		}
+
 		.live-preview {
 
 			&__container {
@@ -103,4 +108,4 @@
 			}
 		}
 	}
-}
+}