From c1072a5f0cccc908a1cce7223f980fcbca86d0da Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Wed, 21 Dec 2022 15:50:17 +0530
Subject: [PATCH] add the right cursor states

---
 .../SelectableCardWithInfo/index.js           |   9 +-
 .../SelectableCardWithInfo/stylesheet.scss    |   6 +-
 .../pages/Steps/DesignColors/stylesheet.scss  | 111 +++++-----
 .../Steps/DesignHeaderMenu/stylesheet.scss    |   9 +-
 .../Steps/DesignHomepageMenu/stylesheet.scss  | 192 ++++++++----------
 .../DesignThemeStyles/Menu/stylesheet.scss    |   4 +-
 .../DesignThemeStyles/Preview/stylesheet.scss |   4 +
 .../Steps/DesignTypography/stylesheet.scss    |   5 +
 .../pages/Steps/SitePages/stylesheet.scss     |   8 +-
 9 files changed, 180 insertions(+), 168 deletions(-)

diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
index 3c643483b..fa8e93aa0 100644
--- 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
index 904526005..1dfcf0724 100644
--- 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
index 1371e2a22..c73a28055 100644
--- 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%;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
+	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
index 37d804ca5..75ad2a5fe 100644
--- 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 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
index a2b06f5d5..8cfac5805 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
@@ -5,121 +5,107 @@ $main-border-light: var(--nfd-onboarding-border);
 $main-border-main: var(--nfd-onboarding-primary-alt);
 
 .homepage_preview {
-    display: flex;
-    padding-top: 60px;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-
-    &__list {
-        width: 60vw;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        @media (max-width: #{ ($break-large) }) {
-            width: 95vw;
-            align-items: center;
-            flex-direction: column;
-        }
-
-        &__item {
-            flex: 1;
-            width: 100%;
-            margin: 24px;
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-            justify-content: center;
-
-            &__title-bar {
-                    width: 90%;
-                    height: 15px;
-                    display: flex;
-                    align-items: center;
-                    background-color: #E4E4E4;
-                    justify-content: space-between;
-                    border: 1px solid transparent;
-            
-                    &__browser {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-            
-                        &__dot {
-                            width: 8px;
-                            margin: 3px;
-                            height: 8px;
-                            border-radius: 50%;
-                            display: inline-block;
-                            background-color: #989ea7;
-                        }
-                    }
-            
-                    &--selected {
-                        z-index: 2;
-                        width: 40px;
-                        height: 40px;
-                        display: flex;
-                        margin-right: -15px;
-                        border-radius: 50%;
-                        align-items: center;
-                        justify-content: center;
-                        background-clip: padding-box;
-                        background-color: $main-border-main;
-            
-                        &__path {
-                            fill: $main-color-light;
-                            transform: scale(0.7);
-                        }
-                    }
-            
-                    &--unselected {
-                        display: none;
-                    }
-                }
-            &__live-preview-container {
+	display: flex;
+	padding-top: 60px;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+
+	&__list {
+		width: 60vw;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		@media (max-width: #{ ($break-large) }) {
+			width: 95vw;
+			align-items: center;
+			flex-direction: column;
+		}
+
+		&__item {
+			flex: 1;
+			width: 100%;
+			margin: 24px;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			justify-content: center;
+
+			&__title-bar {
+				width: 90%;
+				height: 15px;
+				display: flex;
+				align-items: center;
+				background-color: #e4e4e4;
+				justify-content: space-between;
+				border: 1px solid transparent;
+
+				&__browser {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					&__dot {
+						width: 8px;
+						margin: 3px;
+						height: 8px;
+						border-radius: 50%;
+						display: inline-block;
+						background-color: #989ea7;
+					}
+				}
+
+				&--selected {
+					z-index: 2;
+					width: 40px;
+					height: 40px;
+					display: flex;
+					margin-right: -15px;
+					border-radius: 50%;
+					align-items: center;
+					justify-content: center;
+					background-clip: padding-box;
+					background-color: $main-border-main;
+
+					&__path {
+						fill: $main-color-light;
+						transform: scale(0.7);
+					}
+				}
+
+				&--unselected {
+					display: none;
+				}
+			}
+
+			&__live-preview-container {
 				position: relative;
 				width: 90%;
 				align-items: center;
 				border: 1px solid #e3dfdf;
 
+
+				&:hover {
+					cursor: pointer;
+				}
+
 				.live-preview {
 
 					&__container {
 
 						&-custom {
 							width: 100%;
-							overflow: hidden;
-							height: 300px;
+							height: 45vh;
+							min-height: 400px;
+							// Enable Scrolling in Live Preview
+							overflow-y: scroll;
 						}
+
 					}
 				}
-
-            }
-
-            &__live-preview-container {
-                position: relative;
-                width: 90%;
-                align-items: center;
-                border: 1px solid #e3dfdf;
-
-                .live-preview {
-
-                    &__container {
-
-                        &-custom {
-                            width: 100%;
-                            height: 45vh;
-                            min-height: 400px;
-                            // Enable Scrolling in Live Preview
-                            overflow-y: scroll;
-                        }
-
-                    }
-                }
-            }
-        }
-    }
+			}
+		}
+	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
index 49aaa96ff..e40d69b1c 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
@@ -48,7 +48,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 					justify-content: center;
 
 					&__dot {
-                        background-color: #989EA7;
+						background-color: #989ea7;
 						width: 8px;
 						margin: 3px;
 						height: 8px;
@@ -125,7 +125,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 					}
 
 					&:hover {
-						cursor: pointer;
+						cursor: zoom-in;
 						opacity: 0.74;
 					}
 				}
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
index 9779caa0f..7e1f1a4d2 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
@@ -92,6 +92,10 @@
 		border: 1px solid #e3dfdf;
 		margin-bottom: 30px;
 
+		&:hover {
+			cursor: not-allowed;
+		}
+
 		.live-preview {
 
 			&__container {
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index e0ecc9b38..55d2017eb 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -40,6 +40,11 @@
 		border: 1px solid #e3dfdf;
 		margin-bottom: 30px;
 
+
+		&:hover {
+			cursor: not-allowed;
+		}
+
 		.live-preview {
 
 			&__container {
diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
index 058478de7..99ae99689 100644
--- a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
@@ -10,12 +10,12 @@
 		height: 100%;
 		column-count: 2;
 		vertical-align: auto;
-		
+
 		@media (max-width: #{ ($break-xlarge) }) {
 			width: 95vw;
 			column-count: 2;
 		}
-	
+
 		@media (max-width: #{ ($break-small) }) {
 			width: 95vw;
 			column-count: 1;
@@ -35,6 +35,10 @@
 				overflow: hidden;
 				align-items: center;
 
+				&:hover {
+					cursor: pointer;
+				}
+
 				.live-preview {
 
 					&__container {