diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx
new file mode 100644
index 0000000000..cd1d4ce5af
--- /dev/null
+++ b/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) => (
+
+
+ {mainColorNames.map((colorName) => (
+ onChange(colorName)}
+ />
+ ))}
+
+
+);
diff --git a/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx b/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx
index a3be98ab94..4cc753ccff 100644
--- a/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx
+++ b/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`
background-color: ${({ theme, colorName }) =>
theme.tag.background[colorName]};
border: 1px solid ${({ theme, colorName }) => theme.tag.text[colorName]};
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx
new file mode 100644
index 0000000000..e4042580ca
--- /dev/null
+++ b/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 &
+ Pick & {
+ 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) => (
+ }
+ onClick={onClick}
+ />
+);
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/__stories__/ColorPickerButton.stories.tsx b/packages/twenty-front/src/modules/ui/input/button/components/__stories__/ColorPickerButton.stories.tsx
new file mode 100644
index 0000000000..af23f34f2d
--- /dev/null
+++ b/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 = {
+ title: 'UI/Input/Button/ColorPickerButton',
+ component: ColorPickerButton,
+ decorators: [ComponentDecorator],
+ args: { colorName: 'green' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Selected: Story = { args: { isSelected: true } };
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
index fa62791b78..4d43b0ad21 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
+++ b/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,6 +46,16 @@ export const SettingsAccountsCalendarsSettings = () => {
{ children: connectedAccount?.handle || '' },
]}
/>
+
{
/>
{}}
+ onChange={(_value) => {}}
/>
@@ -71,7 +82,7 @@ export const SettingsAccountsCalendarsSettings = () => {
}
title="Auto-creation"
value={false}
- onToggle={() => {}}
+ onToggle={(_value) => {}}
/>
@@ -90,7 +101,7 @@ export const SettingsAccountsCalendarsSettings = () => {
}
title="Sync events"
value={false}
- onToggle={() => {}}
+ onToggle={(_value) => {}}
/>