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>
+);

packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx

@@ -5,10 +5,12 @@ import { ThemeColor } from '@/ui/theme/constants/colors';
 
 export type ColorSampleVariant = 'default' | 'pipeline';
 
-const StyledColorSample = styled.div<{
+export type ColorSampleProps = {
   colorName: ThemeColor;
   variant?: ColorSampleVariant;
-}>`
+};
+
+const StyledColorSample = styled.div<ColorSampleProps>`
   background-color: ${({ theme, colorName }) =>
     theme.tag.background[colorName]};
   border: 1px solid ${({ theme, colorName }) => theme.tag.text[colorName]};

packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx

@@ -0,0 +1,44 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {
+  ColorSample,
+  ColorSampleProps,
+} from '@/ui/display/color/components/ColorSample';
+import {
+  LightIconButton,
+  LightIconButtonProps,
+} from '@/ui/input/button/components/LightIconButton';
+
+type ColorPickerButtonProps = Pick<ColorSampleProps, 'colorName'> &
+  Pick<LightIconButtonProps, 'onClick'> & {
+    isSelected?: boolean;
+  };
+
+const StyledButton = styled(LightIconButton)<{
+  isSelected?: boolean;
+}>`
+  ${({ isSelected, theme }) =>
+    isSelected
+      ? css`
+          background-color: ${theme.background.transparent.medium};
+
+          &:hover {
+            background-color: ${theme.background.transparent.medium};
+          }
+        `
+      : ''}
+`;
+
+export const ColorPickerButton = ({
+  colorName,
+  isSelected,
+  onClick,
+}: ColorPickerButtonProps) => (
+  <StyledButton
+    size="medium"
+    isSelected={isSelected}
+    Icon={() => <ColorSample colorName={colorName} />}
+    onClick={onClick}
+  />
+);

packages/twenty-front/src/modules/ui/input/button/components/__stories__/ColorPickerButton.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ColorPickerButton } from '../ColorPickerButton';
+
+const meta: Meta<typeof ColorPickerButton> = {
+  title: 'UI/Input/Button/ColorPickerButton',
+  component: ColorPickerButton,
+  decorators: [ComponentDecorator],
+  args: { colorName: 'green' },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerButton>;
+
+export const Default: Story = {};
+
+export const Selected: Story = { args: { isSelected: true } };

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx

@@ -7,6 +7,7 @@ import {
   SettingsAccountsEventVisibilitySettingsCard,
 } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
 import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+import { SettingsAccountsColorSettingCard } from '@/settings/accounts/components/SettingsAccountsColorSettingCard';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -45,14 +46,24 @@ export const SettingsAccountsCalendarsSettings = () => {
             { children: connectedAccount?.handle || '' },
           ]}
         />
+        <Section>
+          <H2Title
+            title="Color"
+            description="Define the color associated with this calendar"
+          />
+          <SettingsAccountsColorSettingCard
+            value="blue"
+            onChange={(_colorName) => {}}
+          />
+        </Section>
         <Section>
           <H2Title
             title="Event visibility"
             description="Define what will be visible to other users in your workspace"
           />
           <SettingsAccountsEventVisibilitySettingsCard
             value={EventSettingsVisibilityValue.Everything}
-            onChange={() => {}}
+            onChange={(_value) => {}}
           />
         </Section>
         <Section>
@@ -71,7 +82,7 @@ export const SettingsAccountsCalendarsSettings = () => {
             }
             title="Auto-creation"
             value={false}
-            onToggle={() => {}}
+            onToggle={(_value) => {}}
           />
         </Section>
         <Section>
@@ -90,7 +101,7 @@ export const SettingsAccountsCalendarsSettings = () => {
             }
             title="Sync events"
             value={false}
-            onToggle={() => {}}
+            onToggle={(_value) => {}}
           />
         </Section>
       </SettingsPageContainer>