Merge pull request #77 from newfold-labs/enhance/ecom-mvp-frontend-po…

…lish Phase 1 Frontend Polish
newfold-labs · Sep 16, 2022 · a4ac331 · a4ac331
2 parents 44cdf00 + 01c4249
commit a4ac331
Show file tree

Hide file tree

Showing 15 changed files with 426 additions and 204 deletions.
diff --git a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss
@@ -1,12 +1,19 @@
 .nfd-nav-card-button {
 	color: var(--nfd-onboarding-white);
 	background-color: var(--wp-admin-theme-color-darker-10);
-	height: 8vh;
-	width: 50vw;
-	margin: 0vw auto;
+	padding: 16px;
+	width: 90%;
 	font-size: clamp(0.7rem, 1.2vw, 1.4em);
 	font-weight: 500;
 	border-radius: 4px;
 	border: none;
 	outline: 1px solid transparent;
+
+	@media (max-width: #{($break-medium)}) {
+		padding: 24px 32px;
+	}
+
+	@media (min-width: 2600px) {
+		font-size: clamp(2.81rem, -0.48vw + 2.93rem, 1.78rem);
+	}
 }
diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss
@@ -1,30 +1,60 @@
 .nfd-step-card-heading {
-	margin: 8px;
+	margin: 5px;
 	font-weight: 700;
 	line-height: 1.25;
 	text-align: center;
-	font-size: clamp(1.5rem, 4vw, 2.2rem);
+	font-size: clamp(1.5rem, 1.82vw + 1.05rem, 2.5rem);
+
+	@media (max-width: #{($break-medium)}) {
+		font-size: clamp(1rem, 3.5vw, 1.2rem);
+		margin: 10px;
+	}
 
-	@media (max-width: #{ ($break-xlarge)}) {
-		font-size: clamp(1rem, 3.5vw, 2rem);
+	@media (min-width: 2600px) {
+		font-size: clamp(1rem, 2.44vw + 0.39rem, 6.25rem);
+		margin: 40px;
 	}
 }
 
 .nfd-step-card-subheading {
 	margin: 5px;
 	font-weight: 700;
 	color: var(--wp-admin-theme-color);
-	font-size: clamp(0.8rem, 2.5vw, 1.2rem);
+	font-size: clamp(1rem, 0.91vw + 0.77rem, 1.5rem);
+	text-align: center;
+	@media (min-width: #{ ($break-medium)}) {
+		padding-bottom: 30px;
+	}
+
+	@media (min-width: 2600px) {
+		font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem);
+		margin: 80px;
+	}
 }
 
 .nfd-step-card-subheading-other {
 	font-weight: 700;
-	margin-top: 30px;
+	margin-top: 35px;
 	color: var(--wp-admin-theme-color);
 	font-size: clamp(0.8rem, 2.5vw, 1.2rem);
+	@media (max-width: #{($break-medium)}) {
+		margin: 3px;
+		font-size: clamp(0.7rem, 2.2vw, 1.2rem);
+	}
+
+	@media (min-width: 2600px) {
+		font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem);
+		margin: 80px;
+	}
 }
 
 .nfd-step-card-question {
-	margin: 8px;
+	margin: 18px;
 	font-size: clamp(1rem, 2vw, 1.8rem);
+
+	@media (min-width: 2600px) {
+		font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem);
+		font-weight: 700;
+		margin: 60px;
+	}
 }
diff --git a/src/OnboardingSPA/components/Header/stylesheet.scss b/src/OnboardingSPA/components/Header/stylesheet.scss
@@ -36,7 +36,7 @@
         height: 100%;
         flex-grow: 1;
         justify-content: center;
-        min-width: 0;
+        min-width: 5px;
         font-weight: 600;
         font-size: 20px;
         line-height: $grid-unit-30;
@@ -95,5 +95,10 @@
     &_finish {
         padding-left: 22px !important;
     }
+
+    @media screen and (max-width: #{ ($break-medium) }) {
+        font-size: 13px;
+        padding: 15px 10px !important; 
+    }
 }
 
diff --git a/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss b/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss
@@ -9,4 +9,13 @@
 		text-decoration: none;
 		padding: 0px 0.4rem;
 	}
+
+	@media (max-width: #{($break-medium)}) {
+		padding: 9px;
+	}
+
+	@media (min-width: 2600px) {
+		font-size: clamp(1.6rem, -0.09vw + 1rem, 1.78rem);
+		font-weight: 450;
+	}
 }
diff --git a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss
@@ -1,39 +1,62 @@
 .nfd-onboarding-large-card {
 	display: flex;
+	max-width: 960px;
 	width: 60vw;
-	height: 70vh;
+	min-height: 60vh;
 	background: var(--nfd-onboarding-light);
 	position: relative;
 	transform-style: preserve-3d;
 	align-items: center;
 	flex-direction: column;
 	justify-content: space-evenly;
-	padding: 1rem;
+	padding: 24px 32px;
+	margin: 20px;
 
 	@media (max-width: #{($break-medium - 1)}) {
 		justify-items: center;
 		align-items: center;
-		padding: 30px;
+		padding: 16px;
 		transform-style: flat;
 	}
 
 	&::before {
 		content: "";
 		background: var(--nfd-onboarding-dark-icon) no-repeat;
-		width: 45vw;
-		height: 45vh;
+		width: 600px;
+		min-height: 500px;
 		transform: rotate(-14deg) translateZ(-1px);
 		position: absolute;
-		left: -10rem;
-		top: 0rem;
-		@media (max-width: #{ ($break-medium - 1) }) {
+		left: -15rem;
+		top: 2rem;
+	}
+
+	@media (max-width: #{ ($break-medium - 1) }) {
+		justify-items: center;
+		align-items: center;
+		transform-style: flat;
+		padding: 20px;
+		margin: 30px;
+		&::before {
 			display: none;
 		}
-		@media (min-width: #{ ($break-medium) }) and (max-width: 925px) {
-			width: 27vw;
-			height: 27vh;
-			left: -7rem;
-			margin-top: 5vh;
+	}
+
+	@media (min-width: #{ ($break-medium) }) and (max-width: 1300px) {
+		&::before {
+			width: 400px;
+			height: 350px;
+			left: -10.5rem;
+		}
+	}
+
+	@media (min-width: 2600px) {
+		max-width: 100%;
+		width: 50vw;
+		min-height: 960px;
+		&::before {
+			width: 860px;
+			min-height: 600px;
+			left: -19rem;
 		}
 	}