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

@@ -0,0 +1,104 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+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 SettingsCardProps = {
+  description?: string;
+  disabled?: boolean;
+  soon?: boolean;
+  Icon: ReactNode;
+  onClick?: () => void;
+  title: string;
+  className?: string;
+};
+
+const StyledCard = styled(Card)<{
+  disabled?: boolean;
+  onClick?: () => void;
+}>`
+  color: ${({ disabled, theme }) =>
+    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)<object>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2, 2)};
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+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};
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: flex-start;
+`;
+
+const StyledIconChevronRight = styled(IconChevronRight)`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
+const StyledDescription = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(7)};
+`;
+
+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,
+}: SettingsCardProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledCard
+      disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      className={className}
+      rounded={true}
+    >
+      <StyledCardContent>
+        <StyledHeader>
+          <StyledIconContainer>{Icon}</StyledIconContainer>
+          <StyledTitle disabled={disabled}>
+            {title}
+            {soon && <Pill label="Soon" />}
+          </StyledTitle>
+          <StyledIconChevronRight size={theme.icon.size.sm} />
+        </StyledHeader>
+        {description && <StyledDescription>{description}</StyledDescription>}
+      </StyledCardContent>
+    </StyledCard>
+  );
+};