Enhance Site Logo Design

newfold-labs · Nov 30, 2023 · 13d6019 · 13d6019
1 parent 2a0359f
commit 13d6019
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 20,035 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
         "@newfold-labs/js-utility-ui-analytics": "1.2.0",
         "@wordpress/interface": "^5.10.0",
         "@wordpress/style-engine": "^0.11.0",
+        "bytes": "^3.1.2",
         "classnames": "^2.3.1",
         "react-error-boundary": "^3.1.4",
         "react-router-dom": "^6.11.1",

diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js
@@ -6,6 +6,8 @@ import Spinner from '../../../Loaders/Spinner';
 import { ThemeContext } from '../../../ThemeContextProvider';
 import classNames from 'classnames';
 import { THEME_LIGHT } from '../../../../../constants';
+import bytes from 'bytes';
+import { Icon, closeSmall } from '@wordpress/icons';
 
 const ImageUploaderWithText = ( { image, imageSetter } ) => {
 	const inputRef = useRef( null );
@@ -17,14 +19,17 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 		if ( fileData ) {
 			setIsUploading( true );
 			const res = await uploadImage( fileData );
-			if ( res ) {
-				const id = res?.body?.id;
-				const url = res?.body?.source_url;
-				imageSetter( {
-					id,
-					url,
-				} );
+			if ( ! res?.body ) {
+				return setIsUploading( false );
 			}
+			const id = res.body?.id;
+			const url = res.body?.source_url;
+			imageSetter( {
+				id,
+				url,
+				fileName: fileData?.name,
+				fileSize: fileData?.size,
+			} );
 		}
 
 		setIsUploading( false );
@@ -81,11 +86,17 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 		}
 	};
 
+	const isImageUploaded =
+		! isUploading && image?.id !== 0 && image?.id !== undefined;
+
 	return (
 		<div
 			className={ `nfd-onboarding-image-uploader--with-text ${
 				onDragActive &&
 				'nfd-onboarding-image-uploader--with-text--on-drag'
+			} ${
+				isImageUploaded &&
+				'nfd-onboarding-image-uploader--with-text--not-dashed'
 			}` }
 			onDrop={ ( e ) => handleDrop( e ) }
 			onDragOver={ ( e ) => handleDragOver( e ) }
@@ -96,7 +107,7 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 				<Spinner />
 			) : (
 				<>
-					{ ( image === undefined || image?.id === 0 ) && (
+					{ ! isImageUploaded && (
 						<>
 							<div className="nfd-onboarding-image-uploader--with-text__heading">
 								<div
@@ -142,22 +153,36 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 							</div>
 						</>
 					) }
-					{ image?.id !== 0 && image?.id !== undefined && (
-						<>
+					{ isImageUploaded && (
+						<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview">
 							<img
-								className="nfd-onboarding-image-uploader--with-text__site_logo"
-								src={ image?.url }
-								alt="Thumb"
+								className="nfd-onboarding-image-uploader--with-text__site_logo__preview__image"
+								src={ image.url }
+								alt={ __(
+									'Site Logo Preview',
+									'wp-module-onboarding'
+								) }
 							/>
-							<div className="nfd-onboarding-image-uploader--with-text__site_logo-reset">
+							<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details">
+								<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filename">
+									{ image.fileName }
+								</p>
+								<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filesize">
+									{ bytes( image.fileSize ) }
+								</p>
+							</div>
+							<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset">
 								<button
-									className="nfd-onboarding-image-uploader--with-text__site_logo-reset__button"
+									className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button"
 									onClick={ removeSelectedImage }
 								>
-									{ __( 'Reset', 'wp-module-onboarding' ) }
+									<Icon
+										className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon"
+										icon={ closeSmall }
+									/>
 								</button>
 							</div>
-						</>
+						</div>
 					) }
 				</>
 			) }

diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss
@@ -3,7 +3,12 @@
 	&--with-text {
 		width: 600px;
 		margin: 16px;
-		border: 1.25px dashed var(--nfd-onboarding-admin-bar-background);
+		border: 1.25px dashed var(--nfd-onboarding-site-logo-border);
+
+		&--not-dashed {
+			border: 1.25px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);
+			align-items: stretch;
+		}
 		border-radius: 8px;
 		padding: 24px;
 		display: flex;
@@ -78,29 +83,62 @@
 		}
 
 		&__site_logo {
-			width: 50%;
-			height: 20%;
 
-			&-reset {
-				width: 100%;
+			&__preview {
 				display: flex;
 				flex-direction: row;
-				justify-content: flex-end;
-				align-items: flex-end;
-
-				&__button {
-					font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
-					font-style: normal;
-					font-weight: 510;
-					margin-right: 24px;
+
+				&__image {
+					width: 130px;
+					height: 100px;
+					object-fit: cover;
+					border-radius: 8px;
+				}
+
+				&__details {
 					color: var(--nfd-onboarding-primary);
-					background-color: transparent;
-					border: none;
-					padding: 0;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					margin-left: 18px;
 
-					&:hover {
-						cursor: pointer;
-						text-decoration: underline;
+					&__filename {
+						margin: 0;
+						margin-bottom: 8px;
+						width: 300px;
+						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: row;
+					justify-content: flex-end;
+
+					&__button {
+						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
+						font-style: normal;
+						font-weight: 510;
+						margin-right: 24px;
+						color: var(--nfd-onboarding-primary);
+						background-color: transparent;
+						border: none;
+						padding: 0;
+
+						&:hover {
+							cursor: pointer;
+							text-decoration: underline;
+						}
+
+						&__icon {
+							fill: var(--nfd-onboarding-primary);
+						}
 					}
 				}
 			}

diff --git a/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss
@@ -14,6 +14,9 @@
 		transform: translateZ(0);
 		-webkit-animation: spin 1.1s infinite linear;
 		animation: spin 1.1s infinite linear;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	&::after {

diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
@@ -34,6 +34,8 @@ const SiteGenSiteLogo = () => {
 		currentDataCopy.sitegen.siteLogo = {
 			id: 0,
 			url: '',
+			fileName: '',
+			fileSize: 0,
 		};
 		setCurrentOnboardingData( currentDataCopy );
 		setSiteLogo( undefined );
@@ -54,6 +56,8 @@ const SiteGenSiteLogo = () => {
 			const currentDataCopy = { ...currentData };
 			currentDataCopy.sitegen.siteLogo.id = siteLogo.id;
 			currentDataCopy.sitegen.siteLogo.url = siteLogo.url;
+			currentDataCopy.sitegen.siteLogo.fileName = siteLogo.fileName;
+			currentDataCopy.sitegen.siteLogo.fileSize = siteLogo.fileSize;
 			setCurrentOnboardingData( currentDataCopy );
 		}
 	}, [ siteLogo ] );

diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
@@ -5,12 +5,18 @@
 		&__site-logo {
 
 			&__container {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 600px;
 
 				&__heading {
 					display: flex;
 					flex-direction: row;
 					align-items: center;
-					justify-content: center;
+					justify-content: flex-start;
+					width: 100%;
 
 					&__animation {
 						background-image: var(--sitegen-ai-animation);

diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
@@ -309,6 +309,7 @@ body {
 		--nfd-onboarding-progress-bar-background: #d5d5d5;
 		--nfd-onboarding-site-logo-on-drag: rgba(53, 59, 64, 0.3);
 		--nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35);
+		--nfd-onboarding-site-logo-border: var(--nfd-onboarding-primary);
 	}
 
 	.nfd-onboarding-sitegen-dark {
@@ -325,5 +326,6 @@ body {
 		--nfd-onboarding-progress-bar-background: #353a40;
 		--nfd-onboarding-site-logo-on-drag: rgba(156, 162, 167, 0.3);
 		--nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35);
+		--nfd-onboarding-site-logo-border: rgba(156, 162, 167, 1);
 	}
 }