twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-25 13:02:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: #7226 - Improve photo uploader design (#7234)

Browse Source 
## 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
This commit is contained in:
Rishi Kant 2024-09-24 19:15:59 +05:30 committed by GitHub
parent c3e79e54b5
commit 8385d3cfdf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
View File

@ -1,8 +1,7 @@
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import React, { useMemo } from 'react'; 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 { Button } from '@/ui/input/button/components/Button';
import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI'; import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
import { isDefined } from '~/utils/isDefined'; import { isDefined } from '~/utils/isDefined';
@ -15,8 +14,8 @@ const StyledContainer = styled.div`
const StyledPicture = styled.button<{ withPicture: boolean }>` const StyledPicture = styled.button<{ withPicture: boolean }>`
align-items: center; align-items: center;
background: ${({ theme, disabled }) => background: ${({ theme, disabled }) =>
disabled ? theme.background.secondary : theme.background.tertiary}; disabled ? theme.background.secondary : theme.background.transparent.light};
border: none; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.light}; color: ${({ theme }) => theme.font.color.light};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
@ -35,6 +34,10 @@ const StyledPicture = styled.button<{ withPicture: boolean }>`
width: 100%; width: 100%;
} }
&:hover svg {
color: ${({ theme }) => theme.font.color.tertiary};
}
${({ theme, withPicture, disabled }) => { ${({ theme, withPicture, disabled }) => {
if ((withPicture || disabled) === true) { if ((withPicture || disabled) === true) {
return ''; return '';
@ -42,7 +45,7 @@ const StyledPicture = styled.button<{ withPicture: boolean }>`
return ` return `
&:hover { &:hover {
background: ${theme.background.quaternary}; background: ${theme.background.transparent.medium};
} }
`; `;
}}; }};
@ -122,7 +125,7 @@ export const ImageInput = ({
alt="profile" alt="profile"
/> />
) : ( ) : (
<IconFileUpload size={theme.icon.size.md} /> <IconPhotoUp size={theme.icon.size.lg} />
)} )}
</StyledPicture> </StyledPicture>
<StyledContent> <StyledContent>

1
packages/twenty-ui/src/display/icon/components/TablerIcons.ts
View File

@ -134,6 +134,7 @@ export {
IconPencil, IconPencil,
IconPhone, IconPhone,
IconPhoto, IconPhoto,
IconPhotoUp,
IconPilcrow, IconPilcrow,
IconPlayerPlay, IconPlayerPlay,
IconPlaystationSquare, IconPlaystationSquare,