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/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 || '' },
           ]}
         />
+        <Section>
+          <H2Title
+            title="Color"
+            description="Define the color associated with this calendar"
+          />
+          <SettingsAccountsColorSettingCard
+            value="blue"
+            onChange={(_colorName) => {}}
+          />
+        </Section>
         <Section>
           <H2Title
             title="Event visibility"
@@ -52,7 +63,7 @@ export const SettingsAccountsCalendarsSettings = () => {
           />
           <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>