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" /> ) : ( - + )} 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,