Settings Option Card component (#8456)

fixes - #8195

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx

@@ -11,8 +11,8 @@ export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
   return (
     <IllustrationIconWrapper>
       <IllustrationIconArrayRaw
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
         height={size}
         width={size}
       />

packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx

@@ -13,8 +13,8 @@ export const IllustrationIconCalendarEvent = (
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCalendarEventRaw
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
         height={size}
         width={size}
       />

packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx

@@ -16,8 +16,8 @@ export const IllustrationIconCalendarTime = (
       <IllustrationIconCalendarTimeRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx

@@ -17,8 +17,8 @@ export const IllustrationIconCurrency = (
       <IllustrationIconCurrencyRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
       <IllustrationIconJsonRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
       <IllustrationIconLinkRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx

@@ -14,8 +14,8 @@ export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
       <IllustrationIconMailRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx

@@ -16,8 +16,8 @@ export const IllustrationIconManyToMany = (
       <IllustrationIconManyToManyRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx

@@ -14,8 +14,8 @@ export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
       <IllustrationIconMapRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx

@@ -16,8 +16,8 @@ export const IllustrationIconNumbers = (
       <IllustrationIconNumbersRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx

@@ -17,8 +17,8 @@ export const IllustrationIconOneToMany = (
       <IllustrationIconOneToManyRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx

@@ -17,8 +17,8 @@ export const IllustrationIconOneToOne = (
       <IllustrationIconOneToOneRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx

@@ -16,8 +16,8 @@ export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
       <IllustrationIconPhoneRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx

@@ -18,8 +18,8 @@ export const IllustrationIconSetting = (
       <IllustrationIconSettingRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx

@@ -16,8 +16,8 @@ export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
       <IllustrationIconStarRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
       <IllustrationIconTagRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
       <IllustrationIconTagsRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconText = (props: IllustrationIconTextProps) => {
       <IllustrationIconTextRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
       <IllustrationIconToggleRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
       <IllustrationIconUidRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx

@@ -15,8 +15,8 @@ export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
       <IllustrationIconUserRaw
         height={size}
         width={size}
-        fill={fill}
-        color={color}
+        fill={fill.blue}
+        color={color.blue}
       />
     </IllustrationIconWrapper>
   );

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

@@ -110,6 +110,7 @@ export {
   IconCurrencyZloty,
   IconDatabase,
   IconDatabaseExport,
+  IconDecimal,
   IconDeviceFloppy,
   IconDoorEnter,
   IconDotsVertical,
@@ -212,6 +213,7 @@ export {
   IconSend,
   IconSettings,
   IconSettingsAutomation,
+  IconSlash,
   IconSortDescending,
   IconSparkles,
   IconSql,
@@ -232,6 +234,7 @@ export {
   IconUpload,
   IconUser,
   IconUserCircle,
+  IconUserPlus,
   IconUsers,
   IconVariablePlus,
   IconVideo,

packages/twenty-ui/src/display/index.ts

@@ -24,6 +24,7 @@ export * from './icon/components/IllustrationIconCalendarEvent';
 export * from './icon/components/IllustrationIconCalendarTime';
 export * from './icon/components/IllustrationIconCurrency';
 export * from './icon/components/IllustrationIconJson';
+export * from './icon/components/IllustrationIconLink';
 export * from './icon/components/IllustrationIconMail';
 export * from './icon/components/IllustrationIconManyToMany';
 export * from './icon/components/IllustrationIconMap';
@@ -40,7 +41,6 @@ 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';

packages/twenty-ui/src/display/typography/components/H2Title.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 type H2TitleProps = {
   title: string;
   description?: string;
-  addornment?: React.ReactNode;
+  adornment?: React.ReactNode;
   className?: string;
 };
 
@@ -37,13 +37,13 @@ const StyledDescription = styled.h3`
 export const H2Title = ({
   title,
   description,
-  addornment,
+  adornment,
   className,
 }: H2TitleProps) => (
   <StyledContainer className={className}>
     <StyledTitleContainer>
       <StyledTitle>{title}</StyledTitle>
-      {addornment}
+      {adornment}
     </StyledTitleContainer>
     {description && <StyledDescription>{description}</StyledDescription>}
   </StyledContainer>

packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts

@@ -1,6 +1,13 @@
+import { GRAY_SCALE } from '@ui/theme/constants/GrayScale';
 import { COLOR } from './Colors';
 
 export const ILLUSTRATION_ICON_DARK = {
-  color: COLOR.blue50,
-  fill: COLOR.blue70,
+  color: {
+    blue: COLOR.blue50,
+    grey: GRAY_SCALE.gray50,
+  },
+  fill: {
+    blue: COLOR.blue70,
+    grey: GRAY_SCALE.gray70,
+  },
 };

packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts

@@ -1,6 +1,13 @@
+import { GRAY_SCALE } from '@ui/theme/constants/GrayScale';
 import { COLOR } from './Colors';
 
 export const ILLUSTRATION_ICON_LIGHT = {
-  color: COLOR.blue40,
-  fill: COLOR.blue20,
+  color: {
+    blue: COLOR.blue40,
+    grey: GRAY_SCALE.gray40,
+  },
+  fill: {
+    blue: COLOR.blue20,
+    grey: GRAY_SCALE.gray20,
+  },
 };