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,