diff --git a/src/components/Onboarding/Screens/GardenMetadata.js b/src/components/Onboarding/Screens/GardenMetadata.js index d7a0e5300..1723271e8 100644 --- a/src/components/Onboarding/Screens/GardenMetadata.js +++ b/src/components/Onboarding/Screens/GardenMetadata.js @@ -328,6 +328,7 @@ function GardenMetadata() { file={formData[GARDEN_LOGO_TYPE]} id="file-uploader-0" label="HEADER LOGO" + description="Recommended Height: 40px" onDragAccepted={handleOnDragAccepted} onDragRejected={handleOnDragRejected} onFileUpdated={handleOnGardenLogoTypeUpdated} @@ -344,6 +345,7 @@ function GardenMetadata() { file={formData[GARDEN_LOGO]} id="file-uploader-1" label="GARDEN LOGO" + description="Recommended Size: 256x256px" onDragAccepted={handleOnDragAccepted} onDragRejected={handleOnDragRejected} onFileUpdated={handleOnGardenLogoUpdated} @@ -360,6 +362,7 @@ function GardenMetadata() { file={formData[TOKEN_LOGO]} id="file-uploader-2" label="GARDEN TOKEN ICON" + description="Recommended Size: 256x256px" onDragAccepted={handleOnDragAccepted} onDragRejected={handleOnDragRejected} onFileUpdated={handleOnTokenLogoUpdated} @@ -369,6 +372,7 @@ function GardenMetadata() {
) : null}
+ + The header logo height will be set to 40px. Adjust the width accordingly. Garden logo and token should be sized at a 1:1 ratio. The size can be larger but will be scaled down. + { const theme = useTheme() - const iconSize = 7 * GU + const iconSize = 6 * GU const validExtensions = allowedMIMETypes?.map(f => mimeToExtension(f).toUpperCase() ) @@ -117,14 +117,13 @@ export const FileUploaderField = ({ margin-top: ${1 * GU}px; `} > - {description} )} {/* Set dropzone here due to some problems with the field component and the onclick event bubbling. */} +
+ {description} +
+