Some Lint 🎱

newfold-labs · Dec 5, 2023 · 304b33b · 304b33b
1 parent 5176870
commit 304b33b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss
@@ -1,10 +1,15 @@
 .nfd-onboarding-image-uploader {
 
 	&--with-text {
-		width: 600px;
+		width: 40vw;
 		margin: 16px;
 		border: 1.25px dashed var(--nfd-onboarding-site-logo-border);
 
+		@media (max-width: #{ ($break-large) }) {
+			width: 80vw;
+			margin: 24px;
+		}
+
 		&--not-dashed {
 			border: 1.25px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);
 			align-items: stretch;

diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
@@ -9,15 +9,19 @@
 				flex-direction: column;
 				align-items: center;
 				justify-content: center;
-				width: 600px;
+				width: 40vw;
+
+				@media (max-width: #{ ($break-large) }) {
+					width: 80vw;
+				}
 
 				&__buttons {
-					width: 108%;
+					width: 95%;
 					display: flex;
+					padding: 16px;
 					flex-direction: row;
 					align-items: center;
 					justify-content: flex-end;
-					padding: 16px;
 
 					&__skip {
 						font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
@@ -29,6 +33,16 @@
 							text-decoration: underline;
 							color: var(--nfd-onboarding-primary);
 						}
+
+						@media (max-width: #{ ($break-small) }) {
+							margin-right: 0;
+						}
+					}
+
+					@media (max-width: #{ ($break-small) }) {
+						justify-content: center;
+						margin-bottom: 50px;
+						margin-right: 0;
 					}
 				}
 

diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
@@ -76,6 +76,7 @@
 					}
 
 					@media (max-width: #{ ($break-small) }) {
+						width: 100%;
 						margin-right: 0;
 					}
 				}
@@ -95,10 +96,15 @@
 						border: none;
 						border-radius: 5px;
 						cursor: pointer;
+						justify-content: center;
 
 						&:hover {
 							background-color: #0065ea;
 						}
+
+						@media (max-width: #{ ($break-small) }) {
+							width: 100%;
+						}
 					}
 
 					&__button i {
@@ -110,7 +116,8 @@
 					}
 
 					@media (max-width: #{ ($break-small) }) {
-						margin: 30px;
+						width: 100%;
+						margin: 30px 0;
 					}
 				}
 			}
@@ -119,7 +126,7 @@
 
 				&__contain {
 					margin: 8px;
-					padding: 16px;
+					padding: 24px;
 					flex-direction: column;
 					justify-content: center;
 					align-items: center;