feat: add Color calendar setting (#4141)

* feat: add Color calendar setting

Closes #4067

* fix: fix wrong imports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+
+import { ColorPickerButton } from '@/ui/input/button/components/ColorPickerButton';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+
+type SettingsAccountsColorSettingCardProps = {
+  onChange: (nextValue: ThemeColor) => void;
+  value: ThemeColor;
+};
+
+const StyledCardContent = styled(CardContent)`
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+  justify-content: space-between;
+`;
+
+export const SettingsAccountsColorSettingCard = ({
+  onChange,
+  value,
+}: SettingsAccountsColorSettingCardProps) => (
+  <Card>
+    <StyledCardContent>
+      {mainColorNames.map((colorName) => (
+        <ColorPickerButton
+          colorName={colorName}
+          isSelected={value === colorName}
+          onClick={() => onChange(colorName)}
+        />
+      ))}
+    </StyledCardContent>
+  </Card>
+);