Replace file upload with image upload

centrifuge · Dec 12, 2024 · bd65c97 · bd65c97
1 parent 17d3fde
commit bd65c97
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 26 deletions.
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx
@@ -70,8 +70,7 @@ export function IssuerInput({ waitingForStoredIssuer = false }: Props) {
                 form.setFieldValue('issuerLogo', file)
               }}
               label="Issuer logo"
-              requirements="JPG/PNG/SVG, max 1MB, max 480x480px"
-              buttonLabel="Choose issuer logo"
+              placeholder="JPG/PNG/SVG, max 1MB, max 480x480px"
               errorMessage={meta.touched && meta.error ? meta.error : undefined}
               accept="image/*"
             />

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -5,6 +5,7 @@ import {
   CurrencyInput,
   FileUpload,
   Grid,
+  ImageUpload,
   InputErrorMessage,
   Select,
   Text,
@@ -49,7 +50,7 @@ export const PoolDetailsSection = () => {
           />
           <Field name="poolIcon" validate={validate.poolIcon}>
             {({ field, meta, form }: FieldProps) => (
-              <FileUpload
+              <ImageUpload
                 name="poolIcon"
                 file={field.value}
                 onFileChange={async (file) => {
@@ -59,8 +60,9 @@ export const PoolDetailsSection = () => {
                 label="Pool icon*"
                 errorMessage={meta.touched && meta.error ? meta.error : undefined}
                 accept="image/svg+xml"
-                fileTypeText="SVG (in square size)"
-                onClear={() => form.setFieldValue('poolIcon', null)}
+                placeholder="SVG (in square size)"
+                id="poolIcon"
+                height={144}
               />
             )}
           </Field>
@@ -142,13 +144,14 @@ export const PoolDetailsSection = () => {
             </Field>
             <Field name="issuerLogo">
               {({ field, meta, form }: FieldProps) => (
-                <FileUpload
+                <ImageUpload
                   file={field.value}
                   onFileChange={(file) => form.setFieldValue('issuerLogo', file)}
                   accept="image/png, image/jpeg, image/jpg"
-                  fileTypeText="SVG, PNG, or JPG (max. 1MB; 480x480px)"
+                  placeholder="SVG, PNG, or JPG (max. 1MB; 480x480px)"
                   label="Issuer logo"
-                  onClear={() => form.setFieldValue('issuerLogo', null)}
+                  id="issuerLogo"
+                  height={144}
                 />
               )}
             </Field>

diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx
@@ -174,10 +174,10 @@ export function Details() {
                       form.setFieldTouched('poolIcon', true, false)
                       form.setFieldValue('poolIcon', file)
                     }}
-                    requirements=""
                     label="Pool icon: SVG in square size*"
                     errorMessage={meta.touched ? meta.error : undefined}
                     accept="image/svg+xml"
+                    onClear={() => form.setFieldValue('poolIcon', null)}
                   />
                 )}
               </Field>
@@ -193,7 +193,7 @@ export function Details() {
                 {({ field, meta, form }: FieldProps) => (
                   <Select
                     name="assetClass"
-                    label={<Tooltips type="assetClass" label="Asset class*" variant="secondary" />}
+                    label={<Tooltips type="assetClass" label="Asset class*" />}
                     onChange={(event) => {
                       form.setFieldValue('assetClass', event.target.value)
                       form.setFieldValue('subAssetClass', '', false)

diff --git a/fabric/src/components/FileUpload/index.tsx b/fabric/src/components/FileUpload/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { Box, IconUpload, InputUnit, InputUnitProps, StyledTextInput, Text } from '../..'
+import { Box, IconButton, IconUpload, IconX, InputUnit, InputUnitProps, StyledTextInput, Text } from '../..'
 import { useControlledState } from '../../utils/useControlledState'
 import { Stack } from '../Stack'
 
@@ -40,7 +40,7 @@ const FileDragOverContainer = styled(Stack)<{ $disabled?: boolean; $active: bool
   align-items: center;
   text-align: center;
   cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
-  padding: 16px;
+  padding: 8px;
   &::before {
     content: '';
     width: 100%;
@@ -187,12 +187,23 @@ export function FileUpload({
           small={small}
         >
           {small && (
-            <Box display="flex" justifyContent="space-between" width="100%">
+            <Box display="flex" justifyContent="space-between" width="100%" alignItems="center">
               <Text color={curFile && typeof curFile !== 'string' && curFile.name ? 'textPrimary' : 'textSecondary'}>
                 {' '}
                 {(curFile && typeof curFile !== 'string' && curFile.name) || 'Click to upload'}
               </Text>
-              <IconUpload size={20} />
+              {curFile && typeof curFile !== 'string' && curFile.name ? (
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleClear()
+                  }}
+                >
+                  <IconX size={20} />
+                </IconButton>
+              ) : (
+                <IconUpload size={20} />
+              )}
             </Box>
           )}
           {!small && (

diff --git a/fabric/src/components/ImageUpload/index.tsx b/fabric/src/components/ImageUpload/index.tsx
@@ -46,6 +46,8 @@ const FormField = styled.input`
 `
 
 const Container = styled(Grid)<{ $disabled?: boolean; $active: boolean }>`
+  background-color: white;
+  border-radius: 8px;
   position: relative;
   &::before {
     content: '';
@@ -66,15 +68,13 @@ const Container = styled(Grid)<{ $disabled?: boolean; $active: boolean }>`
   }
   &:hover::before,
   &:has(:focus-visible)::before {
-    border: ${({ theme, $disabled }) => !$disabled && `1px solid ${theme.colors.accentPrimary}`};
+    border: ${({ theme, $disabled }) => !$disabled && `1px solid ${theme.colors.textPrimary}`};
   }
 `
 
 export type ImageUploadProps = Omit<FileUploadProps, 'file' | 'height'> & {
   file?: File | null
-  requirements?: string
   height?: ResponsiveValue<Size>
-  buttonLabel?: string
 }
 
 export function ImageUpload({
@@ -87,10 +87,8 @@ export function ImageUpload({
   disabled,
   label,
   secondaryLabel,
-  requirements,
   height,
-  placeholder = 'Drag a file here',
-  buttonLabel = 'Choose file',
+  placeholder = '',
   ...inputProps
 }: ImageUploadProps) {
   const defaultId = React.useId()
@@ -187,6 +185,7 @@ export function ImageUpload({
             disabled={disabled}
             tabIndex={-1}
             ref={inputRef}
+            accept={accept}
             {...inputProps}
           />
           <Container
@@ -217,13 +216,19 @@ export function ImageUpload({
               style={{ opacity: fileUrl ? 0 : 1 }}
             >
               <Stack gap={1} alignItems="center" justifyContent="center" width="max-content">
-                <IconUpload size="iconMedium" />
-                <Text variant="heading3">{placeholder}</Text>
-                {requirements && <Text variant="label2">{requirements}</Text>}
+                <IconUpload size={24} />
+                <Box textAlign="center">
+                  <Box>
+                    <Text variant="heading4">Click to upload </Text>
+                    <Text variant="body3" color="textSecondary">
+                      or drag and drop
+                    </Text>
+                  </Box>
+                  <Text variant="body3" color="textSecondary">
+                    {placeholder}
+                  </Text>
+                </Box>
               </Stack>
-              <Button onClick={handleUploadBtnClick} variant="secondary" style={{ zIndex: 3 }}>
-                {buttonLabel}
-              </Button>
             </Stack>
             <Stack p={2} gridArea="unit" justifySelf="stretch" style={{ visibility: fileUrl ? 'visible' : 'hidden' }}>
               <Shelf px={1} pb={1} justifyContent="space-between">