From 182fad2b113e70f5cf24170bd84c5864574d9fdf Mon Sep 17 00:00:00 2001
From: Adrian Bielec <adrian.bielec@arianelabs.com>
Date: Wed, 23 Oct 2024 09:58:32 +0200
Subject: [PATCH] refactor(upload): rename Error component to ErrorComponent

---
 .../src/components/form/Field.styles.ts        | 18 +++++++++++++++++-
 .../src/components/form/Upload/BaseUpload.tsx  |  5 ++++-
 .../react-kit/src/components/form/types.ts     |  1 +
 packages/react-kit/src/theme.ts                |  3 ++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/react-kit/src/components/form/Field.styles.ts b/packages/react-kit/src/components/form/Field.styles.ts
index 0c0f1b955..59186b605 100644
--- a/packages/react-kit/src/components/form/Field.styles.ts
+++ b/packages/react-kit/src/components/form/Field.styles.ts
@@ -128,6 +128,7 @@ export type FileUploadWrapperTheme = Partial<{
 }>;
 export const FileUploadWrapper = styled.div<{
   $error: unknown;
+  $v2?: boolean;
   theme: FileUploadWrapperTheme | undefined;
 }>`
   position: relative;
@@ -188,13 +189,28 @@ export const FileUploadWrapper = styled.div<{
     cursor: not-allowed;
     opacity: 0.5;
   }
+  ${({ $v2 }) =>
+    $v2 &&
+    css`
+      aspect-ratio: 1/1;
+      padding-inline: 1.5rem;
+      background: ${colors.white};
+      min-width: 9.375rem;
+      width: auto;
+      height: auto;
+      border-radius: 12px;
+      border: 2px solid ${theme.colors.light.border};
+      color: ${theme.colors.light.greyText};
+    `}
 `;
 
 export const FieldFileUpload = styled(FieldInput)`
   display: none;
 `;
 
-export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
+export const FieldFileUploadWrapper = styled.div<{
+  $disabled: boolean;
+}>`
   position: relative;
   display: inline-block;
   ${({ $disabled }) =>
diff --git a/packages/react-kit/src/components/form/Upload/BaseUpload.tsx b/packages/react-kit/src/components/form/Upload/BaseUpload.tsx
index bfc5f8ff2..0fd58b630 100644
--- a/packages/react-kit/src/components/form/Upload/BaseUpload.tsx
+++ b/packages/react-kit/src/components/form/Upload/BaseUpload.tsx
@@ -53,6 +53,7 @@ function BaseUpload({
   removeFile,
   saveButtonTheme,
   errorComponent,
+  v2,
   theme,
   ...props
 }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) {
@@ -220,6 +221,7 @@ function BaseUpload({
       handleLoading(true);
       try {
         const files = await saveToIpfs(efiles, true);
+        setErrorMessage(undefined);
         if (files) {
           setFiles(files);
         } else {
@@ -272,8 +274,8 @@ function BaseUpload({
           }}
         />
       )}
+      {errorMesage && errorComponent?.(errorMesage)}
       <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
-        {errorMesage && errorComponent?.(errorMesage)}
         <FieldInput
           {...props}
           hidden
@@ -317,6 +319,7 @@ function BaseUpload({
             data-disabled={disabled}
             onClick={handleChooseFile}
             $error={errorMessage}
+            $v2={v2}
             style={style}
             theme={theme?.triggerTheme}
           >
diff --git a/packages/react-kit/src/components/form/types.ts b/packages/react-kit/src/components/form/types.ts
index 2973a5de4..1c29f5561 100644
--- a/packages/react-kit/src/components/form/types.ts
+++ b/packages/react-kit/src/components/form/types.ts
@@ -138,6 +138,7 @@ export type UploadProps = BaseProps & {
   width?: number;
   height?: number;
   errorComponent?: (errorMessage: string) => React.ReactNode;
+  v2?: boolean;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
   theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
 } & (
diff --git a/packages/react-kit/src/theme.ts b/packages/react-kit/src/theme.ts
index 3d45b3313..99092e8f7 100644
--- a/packages/react-kit/src/theme.ts
+++ b/packages/react-kit/src/theme.ts
@@ -30,7 +30,8 @@ export const theme = {
       cyan: "#00FFFF",
       lightArrowColor: "#dedfe3",
       darkGreyTimeStamp: "#E8EAF1",
-      lightGrey2: "#eff0f7"
+      lightGrey2: "#eff0f7",
+      greyText: "rgba(28, 13, 24, 0.75)"
     }
   },
   mobile: "768px",