mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-25 04:55:30 +03:00
## 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:
parent
c3e79e54b5
commit
8385d3cfdf
@ -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>
|
||||||
|
@ -134,6 +134,7 @@ export {
|
|||||||
IconPencil,
|
IconPencil,
|
||||||
IconPhone,
|
IconPhone,
|
||||||
IconPhoto,
|
IconPhoto,
|
||||||
|
IconPhotoUp,
|
||||||
IconPilcrow,
|
IconPilcrow,
|
||||||
IconPlayerPlay,
|
IconPlayerPlay,
|
||||||
IconPlaystationSquare,
|
IconPlaystationSquare,
|
||||||
|
Loading…
Reference in New Issue
Block a user