diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerInput.tsx
index 25d811daa5..ac2ba587c3 100644
--- 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
index 3b8509d170..8e74ccc505 100644
--- 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, meta, form }: FieldProps) => (
- {
@@ -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}
/>
)}
@@ -142,13 +144,14 @@ export const PoolDetailsSection = () => {
{({ field, meta, form }: FieldProps) => (
- 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}
/>
)}
diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx
index 0ba902a43f..8a61118305 100644
--- 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)}
/>
)}
@@ -193,7 +193,7 @@ export function Details() {
{({ field, meta, form }: FieldProps) => (
}
+ label={}
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
index c93e3af865..eece23aa94 100644
--- 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 && (
-
+
{' '}
{(curFile && typeof curFile !== 'string' && curFile.name) || 'Click to upload'}
-
+ {curFile && typeof curFile !== 'string' && curFile.name ? (
+ {
+ e.stopPropagation()
+ handleClear()
+ }}
+ >
+
+
+ ) : (
+
+ )}
)}
{!small && (
diff --git a/fabric/src/components/ImageUpload/index.tsx b/fabric/src/components/ImageUpload/index.tsx
index 0aa1edb918..1799ca3af4 100644
--- 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 & {
file?: File | null
- requirements?: string
height?: ResponsiveValue
- 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}
/>
-
- {placeholder}
- {requirements && {requirements}}
+
+
+
+ Click to upload
+
+ or drag and drop
+
+
+
+ {placeholder}
+
+
-