Add SettingsCard for Config Data Type and Accounts Settings (#7093)

https://github.com/twentyhq/twenty/issues/6950
Add new Settings Card for Config Data Type and accounts Settings
Before:
<img width="707" alt="Screenshot 2024-09-11 at 17 43 16"
src="https://github.com/user-attachments/assets/63ff9373-fa86-4b22-8e8b-21483039c3be">
After:
<img width="755" alt="Screenshot 2024-09-17 at 14 15 18"
src="https://github.com/user-attachments/assets/213c24a1-dc1c-4ffb-8890-7c1f63ed376c">
<img width="755" alt="Screenshot 2024-09-17 at 14 15 38"
src="https://github.com/user-attachments/assets/0fc12d19-b92a-493d-80fa-0064cf491fbc">

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

@@ -1,16 +1,16 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, IconComponent, Pill } from 'twenty-ui';
+import { IconChevronRight, Pill } from 'twenty-ui';
 
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { ReactNode } from 'react';
 
-type SettingsNavigationCardProps = {
-  children: ReactNode;
+type SettingsCardProps = {
+  description?: string;
   disabled?: boolean;
   soon?: boolean;
-  Icon: IconComponent;
+  Icon: ReactNode;
   onClick?: () => void;
   title: string;
   className?: string;
@@ -24,19 +24,23 @@ const StyledCard = styled(Card)<{
     disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
   cursor: ${({ disabled, onClick }) =>
     disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'};
+  width: 100%;
+  & :hover {
+    background-color: ${({ theme }) => theme.background.quaternary};
+  }
 `;
 
-const StyledCardContent = styled(CardContent)`
+const StyledCardContent = styled(CardContent)<object>`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(4, 3)};
+  padding: ${({ theme }) => theme.spacing(2, 2)};
 `;
 
 const StyledHeader = styled.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledTitle = styled.div<{ disabled?: boolean }>`
@@ -54,18 +58,27 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 `;
 
 const StyledDescription = styled.div`
-  padding-left: ${({ theme }) => theme.spacing(8)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(7)};
 `;
 
-export const SettingsNavigationCard = ({
-  children,
+const StyledIconContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+`;
+
+export const SettingsCard = ({
+  description,
   soon,
   disabled = soon,
   Icon,
   onClick,
   title,
   className,
-}: SettingsNavigationCardProps) => {
+}: SettingsCardProps) => {
   const theme = useTheme();
 
   return (
@@ -73,17 +86,18 @@ export const SettingsNavigationCard = ({
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
       className={className}
+      rounded={true}
     >
       <StyledCardContent>
         <StyledHeader>
-          <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
+          <StyledIconContainer>{Icon}</StyledIconContainer>
           <StyledTitle disabled={disabled}>
             {title}
             {soon && <Pill label="Soon" />}
           </StyledTitle>
           <StyledIconChevronRight size={theme.icon.size.sm} />
         </StyledHeader>
-        <StyledDescription>{children}</StyledDescription>
+        {description && <StyledDescription>{description}</StyledDescription>}
       </StyledCardContent>
     </StyledCard>
   );

packages/twenty-front/src/modules/settings/components/__stories__/SettingsCard.stories.tsx

@@ -0,0 +1,24 @@
+import { SettingsCard } from '@/settings/components/SettingsCard';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ComponentDecorator, IconMailCog } from 'twenty-ui';
+
+const meta: Meta<typeof SettingsCard> = {
+  title: 'Modules/Settings/SettingsCard',
+  component: SettingsCard,
+  decorators: [ComponentDecorator],
+};
+export default meta;
+type Story = StoryObj<typeof SettingsCard>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => {},
+    Icon: React.createElement(IconMailCog),
+    title: 'Settings Card',
+  },
+  argTypes: {
+    className: { control: 'false' },
+    Icon: { control: 'false' },
+  },
+};