From 8385d3cfdf6ef29698533ac435c11fe869825b66 Mon Sep 17 00:00:00 2001
From: Rishi Kant <110294979+kant-github@users.noreply.github.com>
Date: Tue, 24 Sep 2024 19:15:59 +0530
Subject: [PATCH] fix: #7226 -  Improve photo uploader design (#7234)

## Description

### Changes Made

- **Icon Size and Style**: Resized the icon**.
- **Icon Update**: Changed to **photo-up**.
- **Background Color**: Set to **transparent light**.
- **Hover Background Color**: Set to **transparent medium**.
- **Border**: Set to **Border/medium**.
- **Icon Color on Hover**: Set to **light** and **tertiary**.

## Preview of the changes made -

https://github.com/user-attachments/assets/72219531-7ffe-47b5-bae9-216764df68ee
---
 .../modules/ui/input/components/ImageInput.tsx    | 15 +++++++++------
 .../src/display/icon/components/TablerIcons.ts    |  1 +
 2 files changed, 10 insertions(+), 6 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 48674256c..77779acc5 100644
--- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
@@ -1,8 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { useMemo } from 'react';
-import { IconFileUpload, IconTrash, IconUpload, IconX } from 'twenty-ui';
-
+import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
 import { Button } from '@/ui/input/button/components/Button';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
@@ -15,8 +14,8 @@ const StyledContainer = styled.div`
 const StyledPicture = styled.button<{ withPicture: boolean }>`
   align-items: center;
   background: ${({ theme, disabled }) =>
-    disabled ? theme.background.secondary : theme.background.tertiary};
-  border: none;
+    disabled ? theme.background.secondary : theme.background.transparent.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.light};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
@@ -35,6 +34,10 @@ const StyledPicture = styled.button<{ withPicture: boolean }>`
     width: 100%;
   }
 
+  &:hover svg {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+
   ${({ theme, withPicture, disabled }) => {
     if ((withPicture || disabled) === true) {
       return '';
@@ -42,7 +45,7 @@ const StyledPicture = styled.button<{ withPicture: boolean }>`
 
     return `
       &:hover {
-        background: ${theme.background.quaternary};
+        background: ${theme.background.transparent.medium};
       }
     `;
   }};
@@ -122,7 +125,7 @@ export const ImageInput = ({
             alt="profile"
           />
         ) : (
-          <IconFileUpload size={theme.icon.size.md} />
+          <IconPhotoUp size={theme.icon.size.lg} />
         )}
       </StyledPicture>
       <StyledContent>
diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
index 190275cf9..8688d709a 100644
--- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@@ -134,6 +134,7 @@ export {
   IconPencil,
   IconPhone,
   IconPhoto,
+  IconPhotoUp,
   IconPilcrow,
   IconPlayerPlay,
   IconPlaystationSquare,