From 44587b4908a3e16eaf6f1191ab87d9670a630a51 Mon Sep 17 00:00:00 2001
From: Heber Santiago Alvarez Rincon
 <92112336+heber59@users.noreply.github.com>
Date: Wed, 18 Sep 2024 08:08:28 -0500
Subject: [PATCH] enhance picture uploader, change justify content (#6974)

Fixes https://github.com/twentyhq/twenty/issues/6966

to put label in the place and change remove button to gray.

sorry you dont assign this to me but I want to help, hope that if 6
hours pass u could check it

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../src/modules/ui/input/components/ImageInput.tsx  | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
index 1c8e348ac..48674256c 100644
--- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
@@ -52,16 +52,17 @@ const StyledContent = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: start;
   margin-left: ${({ theme }) => theme.spacing(4)};
+
+  gap: ${({ theme }) => theme.spacing(3)};
 `;
 
 const StyledButtonContainer = styled.div`
   display: flex;
   flex-direction: row;
-  > * + * {
-    margin-left: ${({ theme }) => theme.spacing(2)};
-  }
+
+  gap: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledText = styled.span`
@@ -143,7 +144,6 @@ export const ImageInput = ({
               variant="secondary"
               title="Abort"
               disabled={!pictureURI || disabled}
-              fullWidth
             />
           ) : (
             <Button
@@ -152,17 +152,14 @@ export const ImageInput = ({
               variant="secondary"
               title="Upload"
               disabled={disabled}
-              fullWidth
             />
           )}
           <Button
             Icon={IconTrash}
-            accent="danger"
             onClick={onRemove}
             variant="secondary"
             title="Remove"
             disabled={!pictureURI || disabled}
-            fullWidth
           />
         </StyledButtonContainer>
         <StyledText>