feat: create Settings/Accounts/Calendars page (#4090)

* feat: create Settings/Accounts/Calendars page

Closes #4059

* docs: add SettingsAccountsCalendars stories

* refactor: add SettingsNavigationDrawerItem component

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

@@ -11,7 +11,7 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
 type SettingsNavigationCardProps = {
   children: ReactNode;
   disabled?: boolean;
-  hasSoonPill?: boolean;
+  soon?: boolean;
   Icon: IconComponent;
   onClick?: () => void;
   title: string;
@@ -22,7 +22,8 @@ const StyledCard = styled(Card)<{
   disabled?: boolean;
   onClick?: () => void;
 }>`
-  color: ${({ theme }) => theme.font.color.tertiary};
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
   cursor: ${({ disabled, onClick }) =>
     disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'};
 `;
@@ -40,8 +41,9 @@ const StyledHeader = styled.div`
   gap: ${({ theme }) => theme.spacing(3)};
 `;
 
-const StyledTitle = styled.div`
-  color: ${({ theme }) => theme.font.color.secondary};
+const StyledTitle = styled.div<{ disabled?: boolean }>`
+  color: ${({ disabled, theme }) =>
+    disabled ? 'inherit' : theme.font.color.secondary};
   display: flex;
   flex: 1 0 auto;
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -59,8 +61,8 @@ const StyledDescription = styled.div`
 
 export const SettingsNavigationCard = ({
   children,
-  disabled,
-  hasSoonPill,
+  soon,
+  disabled = soon,
   Icon,
   onClick,
   title,
@@ -69,13 +71,17 @@ export const SettingsNavigationCard = ({
   const theme = useTheme();
 
   return (
-    <StyledCard disabled={disabled} onClick={onClick} className={className}>
+    <StyledCard
+      disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      className={className}
+    >
       <StyledCardContent>
         <StyledHeader>
           <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
-          <StyledTitle className={className}>
+          <StyledTitle disabled={disabled}>
             {title}
-            {hasSoonPill && <SoonPill />}
+            {soon && <SoonPill />}
           </StyledTitle>
           <StyledIconChevronRight size={theme.icon.size.sm} />
         </StyledHeader>