Color picker rework (#232)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/features/Events/EventApi.ts

@@ -36,7 +36,7 @@ export async function getEvent(event: CalendarEvent, isMaster?: boolean) {
 
   const eventjson = parseCalendarEvent(
     targetVevent[1],
-    event.color ?? "",
+    event.color ?? {},
     event.calId,
     event.URL
   );

src/features/Events/EventDisplay.tsx

@@ -48,6 +48,7 @@ import { userAttendee } from "../User/userDataTypes";
 import { getEvent } from "./EventApi";
 import { formatLocalDateTime } from "../../components/Event/EventFormFields";
 import { CalendarEvent, RepetitionObject } from "./EventsTypes";
+import { light } from "@mui/material/styles/createPalette";
 
 export default function EventDisplayModal({
   eventId,
@@ -224,7 +225,8 @@ export default function EventDisplayModal({
             <Typography variant="body2">
               <CircleIcon
                 style={{
-                  color: userPersonnalCalendars[index].color ?? "#3788D8",
+                  color:
+                    userPersonnalCalendars[index].color?.light ?? "#3788D8",
                   width: 12,
                   height: 12,
                 }}
@@ -238,7 +240,7 @@ export default function EventDisplayModal({
             <Typography variant="body2">
               <CircleIcon
                 style={{
-                  color: calendars[index].color ?? "#3788D8",
+                  color: calendars[index].color?.light ?? "#3788D8",
                   width: 12,
                   height: 12,
                 }}

src/features/Events/EventDisplayPreview.tsx

@@ -577,7 +577,7 @@ export default function EventPreviewModal({
           <CalendarTodayIcon style={{ fontSize: 16 }} />
           <CircleIcon
             style={{
-              color: calendar.color ?? "#3788D8",
+              color: calendar.color?.light ?? "#3788D8",
               width: 12,
               height: 12,
             }}

src/features/Events/EventsTypes.ts

@@ -17,7 +17,7 @@ export interface CalendarEvent {
   attendee: userAttendee[];
   stamp?: string;
   sequence?: Number;
-  color?: string;
+  color?: Record<string, string>;
   allday?: boolean;
   error?: string;
   status?: string;

src/features/Events/eventUtils.ts

@@ -1,5 +1,5 @@
 import { userAttendee } from "../User/userDataTypes";
-import { AlarmObject, CalendarEvent } from "./EventsTypes";
+import { AlarmObject, CalendarEvent, RepetitionObject } from "./EventsTypes";
 import ICAL from "ical.js";
 import { TIMEZONES } from "../../utils/timezone-data";
 import moment from "moment";
@@ -7,7 +7,7 @@ type RawEntry = [string, Record<string, string>, string, any];
 
 export function parseCalendarEvent(
   data: RawEntry[],
-  color: string,
+  color: Record<string, string>,
   calendarid: string,
   eventURL: string,
   valarm?: RawEntry[]