[#162] changed preview modal looks to follow figma (#163)

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

src/components/Calendar/Calendar.tsx

@@ -20,7 +20,7 @@ import {
 } from "../../utils/dateUtils";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { push } from "redux-first-history";
-import EventPreviewModal from "../../features/Events/EventDisplayPreview";
+import EventPreviewModal from "../Event/EventDisplayPreview";
 import { createSelector } from "@reduxjs/toolkit";
 import AddIcon from "@mui/icons-material/Add";
 import { TempCalendarsInput } from "./TempCalendarsInput";
@@ -161,10 +161,7 @@ export default function CalendarApp({
   }, [rangeKey, Object.keys(tempcalendars).join(","), pending]);
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [anchorPosition, setAnchorPosition] = useState<{
-    top: number;
-    left: number;
-  } | null>(null);
+
   const [openEventDisplay, setOpenEventDisplay] = useState(false);
   const [eventDisplayedId, setEventDisplayedId] = useState("");
   const [eventDisplayedTemp, setEventDisplayedTemp] = useState(false);
@@ -187,7 +184,6 @@ export default function CalendarApp({
     calendarRange,
     dispatch,
     setOpenEventDisplay,
-    setAnchorPosition,
     setEventDisplayedId,
     setEventDisplayedCalId,
     setEventDisplayedTemp,
@@ -431,7 +427,6 @@ export default function CalendarApp({
             eventId={eventDisplayedId}
             calId={eventDisplayedCalId}
             tempEvent={eventDisplayedTemp}
-            anchorPosition={anchorPosition}
             open={openEventDisplay}
             onClose={eventHandlers.handleCloseEventDisplay}
           />

src/components/Calendar/CalendarSelection.tsx

@@ -217,7 +217,7 @@ function CalendarSelector({
       <div>
         <label>
           <Checkbox
-            sx={{
+            style={{
               color: calendars[id].color,
               "&.Mui-checked": { color: calendars[id].color },
             }}

src/components/Calendar/handlers/eventHandlers.ts

@@ -20,7 +20,6 @@ export interface EventHandlersProps {
   calendarRange: { start: Date; end: Date };
   dispatch: any;
   setOpenEventDisplay: (open: boolean) => void;
-  setAnchorPosition: (position: { top: number; left: number } | null) => void;
   setEventDisplayedId: (id: string) => void;
   setEventDisplayedCalId: (id: string) => void;
   setEventDisplayedTemp: (temp: boolean) => void;
@@ -37,7 +36,6 @@ export const createEventHandlers = (props: EventHandlersProps) => {
     calendarRange,
     dispatch,
     setOpenEventDisplay,
-    setAnchorPosition,
     setEventDisplayedId,
     setEventDisplayedCalId,
     setEventDisplayedTemp,
@@ -79,7 +77,6 @@ export const createEventHandlers = (props: EventHandlersProps) => {
   };
 
   const handleCloseEventDisplay = () => {
-    setAnchorPosition(null);
     setOpenEventDisplay(false);
   };
 
@@ -109,10 +106,6 @@ export const createEventHandlers = (props: EventHandlersProps) => {
     } else {
       console.log(info.event);
       setOpenEventDisplay(true);
-      setAnchorPosition({
-        top: info.jsEvent.clientY,
-        left: info.jsEvent.clientX,
-      });
       setEventDisplayedId(info.event.extendedProps.uid);
       setEventDisplayedCalId(info.event.extendedProps.calId);
       setEventDisplayedTemp(info.event._def.extendedProps.temp);

src/components/Calendar/handlers/viewHandlers.ts

@@ -136,7 +136,12 @@ export const createViewHandlers = (props: ViewHandlersProps) => {
   const handleEventContent = (arg: any) => {
     const event = arg.event;
     const props = event._def.extendedProps;
-    const { calId, temp, attendees = [], class: classification } = props;
+    const {
+      calId,
+      temp,
+      attendee: attendees = [],
+      class: classification,
+    } = props;
 
     const calendarsSource = temp ? tempcalendars : calendars;
     const calendar = calendarsSource[calId];

src/components/Calendar/hooks/useCalendarEventHandlers.ts

@@ -23,13 +23,12 @@ export const useCalendarEventHandlers = (props: EventHandlersProps) => {
     ]),
     handleCloseEventDisplay: useCallback(
       eventHandlers.handleCloseEventDisplay,
-      [props.setAnchorPosition, props.setOpenEventDisplay]
+      [props.setOpenEventDisplay]
     ),
     handleMonthUp: useCallback(eventHandlers.handleMonthUp, []),
     handleMonthDown: useCallback(eventHandlers.handleMonthDown, []),
     handleEventClick: useCallback(eventHandlers.handleEventClick, [
       props.setOpenEventDisplay,
-      props.setAnchorPosition,
       props.setEventDisplayedId,
       props.setEventDisplayedCalId,
       props.setEventDisplayedTemp,