admin panel fast follows (#10723)

fast follows:
- https://discord.com/channels/1130383047699738754/1346433965451382845
- https://discord.com/channels/1130383047699738754/1346434512757981264
- https://discord.com/channels/1130383047699738754/1346453484911853610

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -42,10 +42,12 @@ type SettingsListCardProps<ListItem extends { id: string }> = {
   onRowClick?: (item: ListItem) => void;
   RowIcon?: IconComponent;
   RowIconFn?: (item: ListItem) => IconComponent;
+  RowIconColor?: string;
   RowRightComponent: ComponentType<{ item: ListItem }>;
   footerButtonLabel?: string;
   onFooterButtonClick?: () => void;
   to?: (item: ListItem) => string;
+  rounded?: boolean;
 };
 
 export const SettingsListCard = <
@@ -61,21 +63,24 @@ export const SettingsListCard = <
   onRowClick,
   RowIcon,
   RowIconFn,
+  RowIconColor,
   RowRightComponent,
   onFooterButtonClick,
   footerButtonLabel,
   to,
+  rounded,
 }: SettingsListCardProps<ListItem>) => {
   const theme = useTheme();
 
   if (isLoading === true) return <SettingsListSkeletonCard />;
 
   return (
-    <Card>
+    <Card rounded={rounded}>
       {items.map((item, index) => (
         <SettingsListItemCardContent
           key={item.id}
           LeftIcon={RowIconFn ? RowIconFn(item) : RowIcon}
+          LeftIconColor={RowIconColor}
           label={getItemLabel(item)}
           description={getItemDescription?.(item)}
           rightComponent={<RowRightComponent item={item} />}

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared';
-import { CardContent, IconComponent } from 'twenty-ui';
+import { CardContent, IconChevronRight, IconComponent } from 'twenty-ui';
 
 const StyledRow = styled(CardContent)`
   align-items: center;
@@ -17,6 +17,12 @@ const StyledRow = styled(CardContent)`
   min-height: ${({ theme }) => theme.spacing(6)};
 `;
 
+const StyledRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledContent = styled.div`
   flex: 1 0 auto;
   display: flex;
@@ -43,6 +49,7 @@ type SettingsListItemCardContentProps = {
   description?: string;
   divider?: boolean;
   LeftIcon?: IconComponent;
+  LeftIconColor?: string;
   onClick?: () => void;
   rightComponent: ReactNode;
   to?: string;
@@ -53,6 +60,7 @@ export const SettingsListItemCardContent = ({
   description,
   divider,
   LeftIcon,
+  LeftIconColor,
   onClick,
   rightComponent,
   to,
@@ -61,12 +69,25 @@ export const SettingsListItemCardContent = ({
 
   const content = (
     <StyledRow onClick={onClick} divider={divider}>
-      {!!LeftIcon && <LeftIcon size={theme.icon.size.md} />}
+      {!!LeftIcon && (
+        <LeftIcon
+          size={theme.icon.size.md}
+          color={LeftIconColor ?? 'currentColor'}
+        />
+      )}
       <StyledContent>
         {label}
         {!!description && <StyledDescription>{description}</StyledDescription>}
       </StyledContent>
-      {rightComponent}
+      <StyledRightContainer>
+        {rightComponent}
+        {!!to && (
+          <IconChevronRight
+            size={theme.icon.size.md}
+            color={theme.font.color.tertiary}
+          />
+        )}
+      </StyledRightContainer>
     </StyledRow>
   );