seperate components - seperate concern

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -2,7 +2,7 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
-import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { Card, H2Title, IllustrationIconUserPlus } from 'twenty-ui';
@@ -64,8 +64,7 @@ export const SettingsAccountsCalendarChannelDetails = ({
           description="Automatically create contacts for people you've participated in an event with."
         />
         <Card rounded>
-          <SettingsOptionCardContent
-            variant="toggle"
+          <SettingsOptionCardContentToggle
             Icon={IllustrationIconUserPlus}
             title="Auto-creation"
             description="Automatically create contacts for people."

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -15,7 +15,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
-import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 
 type SettingsAccountsMessageChannelDetailsProps = {
@@ -105,8 +105,7 @@ export const SettingsAccountsMessageChannelDetails = ({
       </Section>
       <Section>
         <Card rounded>
-          <SettingsOptionCardContent
-            variant="toggle"
+          <SettingsOptionCardContentToggle
             Icon={IllustrationIconBriefcase}
             title="Exclude non-professional emails"
             description="Don’t create contacts from/to Gmail, Outlook emails"
@@ -118,8 +117,7 @@ export const SettingsAccountsMessageChannelDetails = ({
               );
             }}
           />
-          <SettingsOptionCardContent
-            variant="toggle"
+          <SettingsOptionCardContentToggle
             Icon={IllustrationIconUsers}
             title="Exclude group emails"
             description="Don’t sync emails from team@ support@ noreply@..."

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { CardContent } from 'twenty-ui';
+
+type StyledCardContentProps = {
+  disabled?: boolean;
+  divider?: boolean;
+};
+
+export const StyledSettingsOptionCardContent = styled(
+  CardContent,
+)<StyledCardContentProps>`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+export const StyledSettingsOptionCardIcon = styled.div`
+  align-items: center;
+  border: 2px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  background-color: ${({ theme }) => theme.background.primary};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(8)};
+  min-width: ${({ theme }) => theme.icon.size.md};
+`;
+
+export const StyledSettingsOptionCardTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const StyledSettingsOptionCardDescription = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx

@@ -0,0 +1,59 @@
+import { SettingsCounter } from '@/settings/components/SettingsCounter';
+import {
+  StyledSettingsOptionCardContent,
+  StyledSettingsOptionCardDescription,
+  StyledSettingsOptionCardIcon,
+  StyledSettingsOptionCardTitle,
+} from '@/settings/components/SettingsOptions/SettingsOptionCardContentBase';
+import { useTheme } from '@emotion/react';
+import { IconComponent } from 'twenty-ui';
+
+type SettingsOptionCardContentCounterProps = {
+  Icon?: IconComponent;
+  title: React.ReactNode;
+  description?: string;
+  divider?: boolean;
+  disabled?: boolean;
+  value: number;
+  onChange: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+};
+
+export const SettingsOptionCardContentCounter = ({
+  Icon,
+  title,
+  description,
+  divider,
+  disabled = false,
+  value,
+  onChange,
+  minValue,
+  maxValue,
+}: SettingsOptionCardContentCounterProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledSettingsOptionCardContent divider={divider} disabled={disabled}>
+      {Icon && (
+        <StyledSettingsOptionCardIcon>
+          <Icon size={theme.icon.size.xl} stroke={theme.icon.stroke.lg} />
+        </StyledSettingsOptionCardIcon>
+      )}
+      <div>
+        <StyledSettingsOptionCardTitle>{title}</StyledSettingsOptionCardTitle>
+        {description && (
+          <StyledSettingsOptionCardDescription>
+            {description}
+          </StyledSettingsOptionCardDescription>
+        )}
+      </div>
+      <SettingsCounter
+        value={value}
+        onChange={onChange}
+        minValue={minValue}
+        maxValue={maxValue}
+      />
+    </StyledSettingsOptionCardContent>
+  );
+};