From cf8b1161cc4989a7a58b9cad7fc48401610f0328 Mon Sep 17 00:00:00 2001 From: Ana Sofia Marin Alexandre <61988046+anamarn@users.noreply.github.com> Date: Fri, 13 Sep 2024 15:07:38 +0200 Subject: [PATCH] add field config new icons (#6996) 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) --- .../constants/SettingsFieldTypeConfigs.ts | 83 +++++++++---------- .../assets/illustration-calendar-event.svg | 8 ++ .../assets/illustration-calendar-time.svg | 9 ++ .../icon/assets/illustration-currency.svg | 13 +++ .../display/icon/assets/illustration-json.svg | 5 ++ .../display/icon/assets/illustration-link.svg | 17 ++++ .../display/icon/assets/illustration-mail.svg | 14 ++++ .../display/icon/assets/illustration-map.svg | 14 ++++ .../icon/assets/illustration-numbers.svg | 14 ++++ .../icon/assets/illustration-one-to-many.svg | 8 ++ .../icon/assets/illustration-phone.svg | 12 +++ .../icon/assets/illustration-setting.svg | 6 ++ .../display/icon/assets/illustration-star.svg | 10 +++ .../display/icon/assets/illustration-tag.svg | 6 ++ .../display/icon/assets/illustration-tags.svg | 6 ++ .../display/icon/assets/illustration-text.svg | 17 ++++ .../icon/assets/illustration-toggle.svg | 13 +++ .../display/icon/assets/illustration-uid.svg | 8 ++ .../display/icon/assets/illustration-user.svg | 6 ++ .../IllustrationIconCalendarEvent.tsx | 23 +++++ .../IllustrationIconCalendarTime.tsx | 24 ++++++ .../components/IllustrationIconCurrency.tsx | 25 ++++++ .../icon/components/IllustrationIconJson.tsx | 23 +++++ .../icon/components/IllustrationIconMail.tsx | 22 +++++ .../icon/components/IllustrationIconMap.tsx | 22 +++++ .../components/IllustrationIconNumbers.tsx | 24 ++++++ .../components/IllustrationIconOneToMany.tsx | 25 ++++++ .../icon/components/IllustrationIconPhone.tsx | 24 ++++++ .../components/IllustrationIconSetting.tsx | 26 ++++++ .../icon/components/IllustrationIconStar.tsx | 24 ++++++ .../icon/components/IllustrationIconTag.tsx | 23 +++++ .../icon/components/IllustrationIconTags.tsx | 23 +++++ .../icon/components/IllustrationIconText.tsx | 23 +++++ .../components/IllustrationIconToggle.tsx | 23 +++++ .../icon/components/IllustrationIconUid.tsx | 23 +++++ .../icon/components/IllustrationIconUser.tsx | 23 +++++ .../components/IllustrationIconWrapper.tsx | 13 +++ .../icon/components/llustrationIconLink.tsx | 23 +++++ packages/twenty-ui/src/display/index.ts | 19 +++++ .../theme/constants/IllustrationIconDark.ts | 6 ++ .../theme/constants/IllustrationIconLight.ts | 6 ++ .../src/theme/constants/ThemeDark.ts | 6 +- .../src/theme/constants/ThemeLight.ts | 5 +- packages/twenty-ui/src/theme/index.ts | 2 + packages/twenty-ui/tsconfig.dev.json | 2 +- 45 files changed, 703 insertions(+), 48 deletions(-) create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-calendar-event.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-calendar-time.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-currency.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-json.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-link.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-mail.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-map.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-numbers.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-phone.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-setting.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-star.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-tag.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-tags.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-text.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-toggle.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-uid.svg create mode 100644 packages/twenty-ui/src/display/icon/assets/illustration-user.svg create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx create mode 100644 packages/twenty-ui/src/display/icon/components/llustrationIconLink.tsx create mode 100644 packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts create mode 100644 packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts index ae770b4a3f..a6288fbe87 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts @@ -1,24 +1,23 @@ import { - IconCalendarEvent, - IconCalendarTime, - IconCheck, - IconCoins, IconComponent, - IconCreativeCommonsSa, - IconFilePencil, - IconJson, - IconKey, - IconLink, - IconMail, - IconMap, - IconNumbers, - IconPhone, - IconRelationManyToMany, - IconTag, - IconTags, - IconTextSize, - IconTwentyStar, - IconUser, + IllustrationIconCalendarEvent, + IllustrationIconCalendarTime, + IllustrationIconCurrency, + IllustrationIconJson, + IllustrationIconLink, + IllustrationIconMail, + IllustrationIconMap, + IllustrationIconNumbers, + IllustrationIconOneToMany, + IllustrationIconPhone, + IllustrationIconSetting, + IllustrationIconStar, + IllustrationIconTag, + IllustrationIconTags, + IllustrationIconText, + IllustrationIconToggle, + IllustrationIconUid, + IllustrationIconUser, } from 'twenty-ui'; import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode'; @@ -39,100 +38,100 @@ export type SettingsFieldTypeConfig = { export const SETTINGS_FIELD_TYPE_CONFIGS = { [FieldMetadataType.Uuid]: { label: 'Unique ID', - Icon: IconKey, + Icon: IllustrationIconUid, exampleValue: '00000000-0000-0000-0000-000000000000', category: 'Advanced', }, [FieldMetadataType.Text]: { label: 'Text', - Icon: IconTextSize, + Icon: IllustrationIconText, exampleValue: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.', category: 'Basic', }, [FieldMetadataType.Numeric]: { label: 'Numeric', - Icon: IconNumbers, + Icon: IllustrationIconNumbers, exampleValue: 2000, category: 'Basic', }, [FieldMetadataType.Number]: { label: 'Number', - Icon: IconNumbers, + Icon: IllustrationIconNumbers, exampleValue: 2000, category: 'Basic', }, [FieldMetadataType.Link]: { label: 'Link', - Icon: IconLink, + Icon: IllustrationIconLink, exampleValue: { url: 'www.twenty.com', label: '' }, category: 'Basic', }, [FieldMetadataType.Links]: { label: 'Links', - Icon: IconLink, + Icon: IllustrationIconLink, exampleValue: { primaryLinkUrl: 'twenty.com', primaryLinkLabel: '' }, category: 'Basic', }, [FieldMetadataType.Boolean]: { label: 'True/False', - Icon: IconCheck, + Icon: IllustrationIconToggle, exampleValue: true, category: 'Basic', }, [FieldMetadataType.DateTime]: { label: 'Date and Time', - Icon: IconCalendarTime, + Icon: IllustrationIconCalendarTime, exampleValue: DEFAULT_DATE_VALUE.toISOString(), category: 'Basic', }, [FieldMetadataType.Date]: { label: 'Date', - Icon: IconCalendarEvent, + Icon: IllustrationIconCalendarEvent, exampleValue: DEFAULT_DATE_VALUE.toISOString(), category: 'Basic', }, [FieldMetadataType.Select]: { label: 'Select', - Icon: IconTag, + Icon: IllustrationIconTag, category: 'Basic', }, [FieldMetadataType.MultiSelect]: { label: 'Multi-select', - Icon: IconTags, + Icon: IllustrationIconTags, category: 'Basic', }, [FieldMetadataType.Currency]: { label: 'Currency', - Icon: IconCoins, + Icon: IllustrationIconCurrency, exampleValue: { amountMicros: 2000000000, currencyCode: CurrencyCode.USD }, category: 'Basic', }, [FieldMetadataType.Relation]: { label: 'Relation', - Icon: IconRelationManyToMany, + Icon: IllustrationIconOneToMany, category: 'Relation', }, [FieldMetadataType.Email]: { label: 'Email', - Icon: IconMail, + Icon: IllustrationIconMail, category: 'Basic', }, [FieldMetadataType.Emails]: { label: 'Emails', - Icon: IconMail, + Icon: IllustrationIconMail, exampleValue: { primaryEmail: 'john@twenty.com' }, category: 'Basic', }, [FieldMetadataType.Phone]: { label: 'Phone', - Icon: IconPhone, + Icon: IllustrationIconPhone, exampleValue: '+1234-567-890', category: 'Basic', }, [FieldMetadataType.Phones]: { label: 'Phones', - Icon: IconPhone, + Icon: IllustrationIconPhone, exampleValue: { primaryPhoneNumber: '234-567-890', primaryPhoneCountryCode: '+1', @@ -141,19 +140,19 @@ export const SETTINGS_FIELD_TYPE_CONFIGS = { }, [FieldMetadataType.Rating]: { label: 'Rating', - Icon: IconTwentyStar, + Icon: IllustrationIconStar, exampleValue: '3', category: 'Basic', }, [FieldMetadataType.FullName]: { label: 'Full Name', - Icon: IconUser, + Icon: IllustrationIconUser, exampleValue: { firstName: 'John', lastName: 'Doe' }, category: 'Advanced', }, [FieldMetadataType.Address]: { label: 'Address', - Icon: IconMap, + Icon: IllustrationIconMap, exampleValue: { addressStreet1: '456 Oak Street', addressStreet2: 'Unit 3B', @@ -168,20 +167,20 @@ export const SETTINGS_FIELD_TYPE_CONFIGS = { }, [FieldMetadataType.RawJson]: { label: 'JSON', - Icon: IconJson, + Icon: IllustrationIconJson, exampleValue: { key: 'value' }, category: 'Basic', }, [FieldMetadataType.RichText]: { label: 'Rich Text', - Icon: IconFilePencil, + Icon: IllustrationIconSetting, exampleValue: { key: 'value' }, category: 'Basic', }, [FieldMetadataType.Actor]: { label: 'Actor', - Icon: IconCreativeCommonsSa, + Icon: IllustrationIconSetting, category: 'Basic', }, } as const satisfies Record< diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-calendar-event.svg b/packages/twenty-ui/src/display/icon/assets/illustration-calendar-event.svg new file mode 100644 index 0000000000..705ca57ac7 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-calendar-event.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-calendar-time.svg b/packages/twenty-ui/src/display/icon/assets/illustration-calendar-time.svg new file mode 100644 index 0000000000..6a5b335d29 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-calendar-time.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-currency.svg b/packages/twenty-ui/src/display/icon/assets/illustration-currency.svg new file mode 100644 index 0000000000..6f801b59dc --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-currency.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-json.svg b/packages/twenty-ui/src/display/icon/assets/illustration-json.svg new file mode 100644 index 0000000000..eb2a6a747c --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-json.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-link.svg b/packages/twenty-ui/src/display/icon/assets/illustration-link.svg new file mode 100644 index 0000000000..6852612db9 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-link.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-mail.svg b/packages/twenty-ui/src/display/icon/assets/illustration-mail.svg new file mode 100644 index 0000000000..67787031c9 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-mail.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-map.svg b/packages/twenty-ui/src/display/icon/assets/illustration-map.svg new file mode 100644 index 0000000000..a78cae3ae2 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-map.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-numbers.svg b/packages/twenty-ui/src/display/icon/assets/illustration-numbers.svg new file mode 100644 index 0000000000..238a1c474b --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-numbers.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg b/packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg new file mode 100644 index 0000000000..d8c0a8c2fd --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-phone.svg b/packages/twenty-ui/src/display/icon/assets/illustration-phone.svg new file mode 100644 index 0000000000..e286b05178 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-phone.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-setting.svg b/packages/twenty-ui/src/display/icon/assets/illustration-setting.svg new file mode 100644 index 0000000000..007c16e28b --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-setting.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-star.svg b/packages/twenty-ui/src/display/icon/assets/illustration-star.svg new file mode 100644 index 0000000000..9a0c714b5d --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-star.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-tag.svg b/packages/twenty-ui/src/display/icon/assets/illustration-tag.svg new file mode 100644 index 0000000000..9ca0212269 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-tag.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-tags.svg b/packages/twenty-ui/src/display/icon/assets/illustration-tags.svg new file mode 100644 index 0000000000..0174ac4fe9 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-tags.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-text.svg b/packages/twenty-ui/src/display/icon/assets/illustration-text.svg new file mode 100644 index 0000000000..3e35ec3c7e --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-text.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-toggle.svg b/packages/twenty-ui/src/display/icon/assets/illustration-toggle.svg new file mode 100644 index 0000000000..ad2d652673 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-toggle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-uid.svg b/packages/twenty-ui/src/display/icon/assets/illustration-uid.svg new file mode 100644 index 0000000000..4affb07a32 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-uid.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/twenty-ui/src/display/icon/assets/illustration-user.svg b/packages/twenty-ui/src/display/icon/assets/illustration-user.svg new file mode 100644 index 0000000000..05c928e0fd --- /dev/null +++ b/packages/twenty-ui/src/display/icon/assets/illustration-user.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx new file mode 100644 index 0000000000..32c4b6e4b2 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx @@ -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; + +export const IllustrationIconCalendarEvent = ( + props: IllustrationIconCalendarEventProps, +) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx new file mode 100644 index 0000000000..701415963d --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx @@ -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; + +export const IllustrationIconCalendarTime = ( + props: IllustrationIconCalendarTimeProps, +) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx new file mode 100644 index 0000000000..cd493e2e6b --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx @@ -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; + +export const IllustrationIconCurrency = ( + props: IllustrationIconCurrencyProps, +) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx new file mode 100644 index 0000000000..c95136c9fb --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx @@ -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; + +export const IllustrationIconJson = (props: IllustrationIconJsonProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx new file mode 100644 index 0000000000..bb5b631868 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx @@ -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; + +export const IllustrationIconMail = (props: IllustrationIconMailProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx new file mode 100644 index 0000000000..2fac17d9d7 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx @@ -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; + +export const IllustrationIconMap = (props: IllustrationIconMapProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx new file mode 100644 index 0000000000..74cbe38c76 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx @@ -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; + +export const IllustrationIconNumbers = ( + props: IllustrationIconNumbersProps, +) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx new file mode 100644 index 0000000000..9bad7f1325 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx @@ -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; + +export const IllustrationIconOneToMany = ( + props: IllustrationIconOneToManyProps, +) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx new file mode 100644 index 0000000000..d1f0f67a35 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx @@ -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; + +export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx new file mode 100644 index 0000000000..348f7bb1e8 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx @@ -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; + +export const IllustrationIconSetting = ( + props: IllustrationIconSettingProps, +) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx new file mode 100644 index 0000000000..b57ce132f6 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx @@ -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; + +export const IllustrationIconStar = (props: IllustrationIconStarProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx new file mode 100644 index 0000000000..fdfa375911 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx @@ -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; + +export const IllustrationIconTag = (props: IllustrationIconTagProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx new file mode 100644 index 0000000000..97fd173bb0 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx @@ -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; + +export const IllustrationIconTags = (props: IllustrationIconTagsProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx new file mode 100644 index 0000000000..93ef4d8d3a --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx @@ -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; + +export const IllustrationIconText = (props: IllustrationIconTextProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx new file mode 100644 index 0000000000..2ee16a190d --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx @@ -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; + +export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx new file mode 100644 index 0000000000..6c1fa241e2 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx @@ -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; + +export const IllustrationIconUid = (props: IllustrationIconUidProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx new file mode 100644 index 0000000000..4993dbb84c --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx @@ -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; + +export const IllustrationIconUser = (props: IllustrationIconUserProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx new file mode 100644 index 0000000000..d47495ca97 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/llustrationIconLink.tsx b/packages/twenty-ui/src/display/icon/components/llustrationIconLink.tsx new file mode 100644 index 0000000000..70a4800686 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/llustrationIconLink.tsx @@ -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; + +export const IllustrationIconLink = (props: IllustrationIconLinkProps) => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + const { color, fill } = theme.IllustrationIcon; + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index fd659f04f7..6aae613003 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -18,6 +18,25 @@ export * from './icon/components/IconMicrosoft'; export * from './icon/components/IconRelationManyToOne'; export * from './icon/components/IconTwentyStar'; export * from './icon/components/IconTwentyStarFilled'; +export * from './icon/components/IllustrationIconCalendarEvent'; +export * from './icon/components/IllustrationIconCalendarTime'; +export * from './icon/components/IllustrationIconCurrency'; +export * from './icon/components/IllustrationIconJson'; +export * from './icon/components/IllustrationIconMail'; +export * from './icon/components/IllustrationIconMap'; +export * from './icon/components/IllustrationIconNumbers'; +export * from './icon/components/IllustrationIconOneToMany'; +export * from './icon/components/IllustrationIconPhone'; +export * from './icon/components/IllustrationIconSetting'; +export * from './icon/components/IllustrationIconStar'; +export * from './icon/components/IllustrationIconTag'; +export * from './icon/components/IllustrationIconTags'; +export * from './icon/components/IllustrationIconText'; +export * from './icon/components/IllustrationIconToggle'; +export * from './icon/components/IllustrationIconUid'; +export * from './icon/components/IllustrationIconUser'; +export * from './icon/components/IllustrationIconWrapper'; +export * from './icon/components/llustrationIconLink'; export * from './icon/components/TablerIcons'; export * from './icon/hooks/useIcons'; export * from './icon/providers/IconsProvider'; diff --git a/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts b/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts new file mode 100644 index 0000000000..9c9715b4d1 --- /dev/null +++ b/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts @@ -0,0 +1,6 @@ +import { COLOR } from './Colors'; + +export const ILLUSTRATION_ICON_DARK = { + color: COLOR.blue50, + fill: COLOR.blue70, +}; diff --git a/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts b/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts new file mode 100644 index 0000000000..a292d9bfa6 --- /dev/null +++ b/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts @@ -0,0 +1,6 @@ +import { COLOR } from './Colors'; + +export const ILLUSTRATION_ICON_LIGHT = { + color: COLOR.blue40, + fill: COLOR.blue20, +}; diff --git a/packages/twenty-ui/src/theme/constants/ThemeDark.ts b/packages/twenty-ui/src/theme/constants/ThemeDark.ts index 6cbcf77872..10a1e54cc9 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeDark.ts +++ b/packages/twenty-ui/src/theme/constants/ThemeDark.ts @@ -1,15 +1,14 @@ import { BLUR_DARK } from '@ui/theme/constants/BlurDark'; - +import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark'; import { SNACK_BAR_DARK, ThemeType } from '..'; - import { ACCENT_DARK } from './AccentDark'; import { BACKGROUND_DARK } from './BackgroundDark'; import { BORDER_DARK } from './BorderDark'; import { BOX_SHADOW_DARK } from './BoxShadowDark'; +import { CODE_DARK } from './CodeDark'; import { FONT_DARK } from './FontDark'; import { TAG_DARK } from './TagDark'; import { THEME_COMMON } from './ThemeCommon'; -import { CODE_DARK } from './CodeDark'; export const THEME_DARK: ThemeType = { ...THEME_COMMON, @@ -24,5 +23,6 @@ export const THEME_DARK: ThemeType = { snackBar: SNACK_BAR_DARK, tag: TAG_DARK, code: CODE_DARK, + IllustrationIcon: ILLUSTRATION_ICON_DARK, }, }; diff --git a/packages/twenty-ui/src/theme/constants/ThemeLight.ts b/packages/twenty-ui/src/theme/constants/ThemeLight.ts index 259552e3ca..781bfc6353 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeLight.ts +++ b/packages/twenty-ui/src/theme/constants/ThemeLight.ts @@ -1,14 +1,14 @@ import { BLUR_LIGHT } from '@ui/theme/constants/BlurLight'; +import { ILLUSTRATION_ICON_LIGHT } from '@ui/theme/constants/IllustrationIconLight'; import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight'; - import { ACCENT_LIGHT } from './AccentLight'; import { BACKGROUND_LIGHT } from './BackgroundLight'; import { BORDER_LIGHT } from './BorderLight'; import { BOX_SHADOW_LIGHT } from './BoxShadowLight'; +import { CODE_LIGHT } from './CodeLight'; import { FONT_LIGHT } from './FontLight'; import { TAG_LIGHT } from './TagLight'; import { THEME_COMMON } from './ThemeCommon'; -import { CODE_LIGHT } from './CodeLight'; export const THEME_LIGHT = { ...THEME_COMMON, @@ -23,5 +23,6 @@ export const THEME_LIGHT = { snackBar: SNACK_BAR_LIGHT, tag: TAG_LIGHT, code: CODE_LIGHT, + IllustrationIcon: ILLUSTRATION_ICON_LIGHT, }, }; diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts index f1faaf6fcf..17eae52e1c 100644 --- a/packages/twenty-ui/src/theme/index.ts +++ b/packages/twenty-ui/src/theme/index.ts @@ -19,6 +19,8 @@ export * from './constants/FontLight'; export * from './constants/GrayScale'; export * from './constants/HoverBackground'; export * from './constants/Icon'; +export * from './constants/IllustrationIconDark'; +export * from './constants/IllustrationIconLight'; export * from './constants/MainColorNames'; export * from './constants/MainColors'; export * from './constants/MobileViewport'; diff --git a/packages/twenty-ui/tsconfig.dev.json b/packages/twenty-ui/tsconfig.dev.json index 7cf734bdd0..82ab7669eb 100644 --- a/packages/twenty-ui/tsconfig.dev.json +++ b/packages/twenty-ui/tsconfig.dev.json @@ -15,5 +15,5 @@ "src/**/*.tsx", "src/**/*.ts", "vite.config.ts" - ] +] }