Merge pull request #514 from newfold-labs/PRESS2-1821-logo-container-…

…background fix style lint for logo container background changes
newfold-labs · Mar 18, 2024 · aa916ba · aa916ba
2 parents 8fc1a49 + 6103183
commit aa916ba
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 92 deletions.
diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js
@@ -168,9 +168,9 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 			'nfd-onboarding-image-uploader--with-text--not-dashed':
 				isImageUploaded,
 			'nfd-onboarding-image-uploader--with-text--not-dashed__dark':
-				pngLogoBgTheme === THEME_DARK,
+				isImageUploaded && pngLogoBgTheme === THEME_DARK,
 			'nfd-onboarding-image-uploader--with-text--not-dashed__light':
-				pngLogoBgTheme === THEME_LIGHT,
+				isImageUploaded && pngLogoBgTheme === THEME_LIGHT,
 		}
 	);
 

diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss
@@ -10,30 +10,108 @@
 			margin: 24px;
 		}
 
+		&__site_logo {
+
+			&__preview {
+				display: flex;
+				flex-direction: row;
+
+				&__wrapper {
+					background-color: transparent;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border-radius: 2px;
+				}
+
+				&__image {
+					width: 130px;
+					height: 100px;
+					object-fit: contain;
+					border-radius: 4px;
+				}
+
+				&__details {
+					color: var(--nfd-onboarding-primary);
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					margin-left: 18px;
+					max-width: 26vw;
+
+					@media (max-width: #{ ($break-large) }) {
+						width: 60vw;
+					}
+
+					&__filename {
+						margin: 0;
+						margin-bottom: 8px;
+						width: 28vw;
+						font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1.75rem);
+					}
+
+					&__filesize {
+						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
+						margin: 0;
+					}
+				}
+
+				&__reset {
+					width: 100%;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+
+					&__button {
+						padding: 0;
+						width: 40px;
+						height: 40px;
+						border: none;
+						font-weight: 510;
+						font-style: normal;
+						background-color: transparent;
+						color: var(--nfd-onboarding-primary);
+						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
+
+						&:hover {
+							cursor: pointer;
+							text-decoration: underline;
+						}
+
+						&__icon {
+							fill: var(--nfd-onboarding-primary);
+						}
+					}
+				}
+			}
+		}
+
 		&--not-dashed {
 			border: 1.25px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);
 			align-items: stretch;
 
-			&__dark{
-				background-color: rgba(0,0,0,0.7);
+			&__dark {
+				background-color: rgba(0, 0, 0, 0.7);
 
-				.nfd-onboarding-image-uploader--with-text__site_logo__preview__details{
-					color: white;
+				.nfd-onboarding-image-uploader--with-text__site_logo__preview__details {
+					color: #fff;
 				}
-				.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon{
-					fill: white;
+
+				.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon {
+					fill: #fff;
 				}
 			}
 
-			&__light{
-				background-color: rgba(255,255,255,0.7);
-
-				.nfd-onboarding-image-uploader--with-text__site_logo__preview__details{
-					color: black;
-				}	
-				.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon{
-					fill:black;
-				}			
+			&__light {
+				background-color: rgba(255, 255, 255, 0.7);
+
+				.nfd-onboarding-image-uploader--with-text__site_logo__preview__details {
+					color: #000;
+				}
+
+				.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon {
+					fill: #000;
+				}
 			}
 		}
 		border-radius: 8px;
@@ -109,80 +187,5 @@
 			}
 		}
 
-		&__site_logo {
-
-			&__preview {
-				display: flex;
-				flex-direction: row;
-
-				&__wrapper {
-					background-color: transparent;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					border-radius: 2px;
-				}
-
-				&__image {
-					width: 130px;
-					height: 100px;
-					object-fit: contain;
-					border-radius: 4px;
-				}
-
-				&__details {
-					color: var(--nfd-onboarding-primary);
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-					margin-left: 18px;
-					max-width: 26vw;
-
-					@media (max-width: #{ ($break-large) }) {
-						width: 60vw;
-					}
-
-					&__filename {
-						margin: 0;
-						margin-bottom: 8px;
-						width: 28vw;
-						font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1.75rem);
-					}
-
-					&__filesize {
-						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
-						margin: 0;
-					}
-				}
-
-				&__reset {
-					width: 100%;
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-
-					&__button {
-						padding: 0;
-						width: 40px;
-						height: 40px;
-						border: none;
-						font-weight: 510;
-						font-style: normal;
-						background-color: transparent;
-						color: var(--nfd-onboarding-primary);
-						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
-
-						&:hover {
-							cursor: pointer;
-							text-decoration: underline;
-						}
-
-						&__icon {
-							fill: var(--nfd-onboarding-primary);
-						}
-					}
-				}
-			}
-		}
 	}
 }