admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add field config new icons (#6996)

Browse Source 
https://github.com/twentyhq/twenty/issues/6950
Add new icons to Object Fields Data types.

Before:

![image](https://github.com/user-attachments/assets/55697e31-841d-435e-8c70-13ff1c59268d)


After:

![image](https://github.com/user-attachments/assets/bd43f0ec-d3f7-4ecf-a95f-87a030f68e24)

![image](https://github.com/user-attachments/assets/369893a9-35be-43f8-bfcb-55149effa78a)
This commit is contained in:
Ana Sofia Marin Alexandre
2024-09-13 15:07:38 +02:00
committed by GitHub
parent 7fd86a860c
commit cf8b1161cc
45 changed files with 703 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import IllustrationIconCalendarEventRaw from '@ui/display/icon/assets/illustration-calendar-event.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconCalendarEventProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconCalendarEvent = (
props: IllustrationIconCalendarEventProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconCalendarEventRaw
fill={fill}
color={color}
height={size}
width={size}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import IllustrationIconCalendarTimeRaw from '@ui/display/icon/assets/illustration-calendar-time.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconCalendarTimeProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconCalendarTime = (
props: IllustrationIconCalendarTimeProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconCalendarTimeRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

25
packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconCurrencyRaw from '@ui/display/icon/assets/illustration-currency.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconCurrencyProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconCurrency = (
props: IllustrationIconCurrencyProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconCurrencyRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconJsonRaw from '@ui/display/icon/assets/illustration-json.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconJsonProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconJsonRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

22
packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useTheme } from '@emotion/react';
import IllustrationIconMailRaw from '@ui/display/icon/assets/illustration-mail.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconMailProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconMailRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

22
packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useTheme } from '@emotion/react';
import IllustrationIconMapRaw from '@ui/display/icon/assets/illustration-map.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconMapProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconMapRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import IllustrationIconNumbersRaw from '@ui/display/icon/assets/illustration-numbers.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconNumbersProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconNumbers = (
props: IllustrationIconNumbersProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconNumbersRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

25
packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconOneToManyRaw from '@ui/display/icon/assets/illustration-one-to-many.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconOneToManyProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconOneToMany = (
props: IllustrationIconOneToManyProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconOneToManyRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconPhoneRaw from '@ui/display/icon/assets/illustration-phone.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconPhoneProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconPhoneRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

26
packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx Normal file
View File

@ -0,0 +1,26 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconSettingRaw from '@ui/display/icon/assets/illustration-setting.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconSettingProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconSetting = (
props: IllustrationIconSettingProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconSettingRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconStarRaw from '@ui/display/icon/assets/illustration-star.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconStarProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconStarRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconTagRaw from '@ui/display/icon/assets/illustration-tag.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconTagProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconTagRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconTagsRaw from '@ui/display/icon/assets/illustration-tags.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconTagsProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconTagsRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconTextRaw from '@ui/display/icon/assets/illustration-text.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconTextProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconText = (props: IllustrationIconTextProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconTextRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconToggleRaw from '@ui/display/icon/assets/illustration-toggle.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconToggleProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconToggleRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconUidRaw from '@ui/display/icon/assets/illustration-uid.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconUidProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconUidRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconUserRaw from '@ui/display/icon/assets/illustration-user.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconUserProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconUserRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

13
packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx Normal file
View File

@ -0,0 +1,13 @@
import styled from '@emotion/styled';
const StyledRectangleIllustrationIcon = styled('div')`
background-color: ${({ theme }) => theme.background.primary};
border: solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
justify-content: center;
size: auto;
box-sizing: content-box;
`;
export const IllustrationIconWrapper = StyledRectangleIllustrationIcon;

23
packages/twenty-ui/src/display/icon/components/llustrationIconLink.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconLinkRaw from '@ui/display/icon/assets/illustration-link.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconLinkProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconLinkRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};