implement twake mui

src/components/Calendar/AccessTab.tsx

@@ -9,7 +9,7 @@ import {
   InputAdornment,
   Backdrop,
   CircularProgress,
-} from "@mui/material";
+} from "twake-mui";
 import { useState, useEffect } from "react";
 import {
   exportCalendar,

src/components/Calendar/Calendar.tsx

@@ -20,8 +20,7 @@ import { push } from "redux-first-history";
 import EventPreviewModal from "../../features/Events/EventDisplayPreview";
 import AddIcon from "@mui/icons-material/Add";
 import { TempCalendarsInput } from "./TempCalendarsInput";
-import Button from "@mui/material/Button";
-import { Box } from "@mui/material";
+import { Button, Box } from "twake-mui";
 import {
   updateSlotLabelVisibility,
   eventToFullCalendarFormat,
@@ -36,7 +35,7 @@ import momentTimezonePlugin from "@fullcalendar/moment-timezone";
 import { TimezoneSelector } from "./TimezoneSelector";
 import { MiniCalendar } from "./MiniCalendar";
 import { User } from "../Attendees/PeopleSearch";
-import { useTheme } from "@mui/material/styles";
+import { useTheme } from "twake-mui";
 import { updateDarkColor } from "./utils/calendarColorsUtils";
 import { useI18n } from "twake-i18n";
 import frLocale from "@fullcalendar/core/locales/fr";

src/components/Calendar/CalendarColorPicker.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
   Typography,
   useTheme,
-} from "@mui/material";
+} from "twake-mui";
 import { useState } from "react";
 import { HexColorPicker } from "react-colorful";
 import { useI18n } from "twake-i18n";

src/components/Calendar/CalendarItemList.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { MenuItem } from "@mui/material";
-import { Calendar } from "../../features/Calendars/CalendarTypes";
+import { MenuItem } from "@linagora/twake-mui";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { CalendarName } from "./CalendarName";
 
 export function CalendarItemList(
-  userPersonalCalendars: Calendar[]
+  userPersonalCalendars: Calendars[]
 ): React.ReactNode {
   return Object.values(userPersonalCalendars).map((calendar) => (
     <MenuItem key={calendar.id} value={calendar.id}>

src/components/Calendar/CalendarModal.tsx

@@ -1,4 +1,4 @@
-import { Button, DialogActions, Tab, Tabs } from "@mui/material";
+import { Button, Tab, Tabs } from "twake-mui";
 import { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
@@ -198,7 +198,7 @@ function CalendarPopover({
         </Tabs>
       }
       actions={
-        <DialogActions>
+        <>
           <Button
             variant="outlined"
             onClick={(e) => handleClose({}, "backdropClick")}
@@ -216,7 +216,7 @@ function CalendarPopover({
                 ? t("actions.save")
                 : t("actions.create")}
           </Button>
-        </DialogActions>
+        </>
       }
     >
       {tab === "import" && (

src/components/Calendar/CalendarName.tsx

@@ -1,7 +1,7 @@
-import { Box, Typography } from "@mui/material";
-import { Calendar } from "../../features/Calendars/CalendarTypes";
+import { Box, Typography } from "@linagora/twake-mui";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
 import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
-export function CalendarName({ calendar }: { calendar: Calendar }) {
+export function CalendarName({ calendar }: { calendar: Calendars }) {
   return (
     <Box style={{ display: "flex", flexDirection: "row", gap: 8 }}>
       <SquareRoundedIcon

src/components/Calendar/CalendarSearch.tsx

@@ -1,17 +1,19 @@
 import CloseIcon from "@mui/icons-material/Close";
-import Avatar from "@mui/material/Avatar";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import { useTheme } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
+import {
+  Avatar,
+  Box,
+  Button,
+  IconButton,
+  Typography,
+  TextField,
+  useTheme,
+} from "@linagora/twake-mui";
 import { useI18n } from "twake-i18n";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendars } from "../../features/Calendars/CalendarApi";
 import { addSharedCalendarAsync } from "../../features/Calendars/CalendarSlice";
-import { Calendar } from "../../features/Calendars/CalendarTypes";
-import TextField from "@mui/material/TextField";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { PeopleSearch, User } from "../Attendees/PeopleSearch";
 import { ResponsiveDialog } from "../Dialog";
 import { ColorPicker } from "./CalendarColorPicker";
@@ -93,7 +95,7 @@ function SelectedCalendarsList({
   onRemove,
   onColorChange,
 }: {
-  calendars: Record<string, Calendar>;
+  calendars: Record<string, Calendars>;
   selectedCal: CalendarWithOwner[];
   onRemove: (cal: CalendarWithOwner) => void;
   onColorChange: (

src/components/Calendar/CalendarSelection.tsx

@@ -1,18 +1,23 @@
-import Accordion from "@mui/material/Accordion";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import Typography from "@mui/material/Typography";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+  IconButton,
+  Checkbox,
+  Divider,
+  ListItem,
+  Menu,
+  MenuItem,
+} from "twake-mui";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AddIcon from "@mui/icons-material/Add";
 import { useState, useMemo, useEffect } from "react";
 import CalendarPopover from "./CalendarModal";
 import { Calendar } from "../../features/Calendars/CalendarTypes";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import IconButton from "@mui/material/IconButton";
-import Checkbox from "@mui/material/Checkbox";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CalendarSearch from "./CalendarSearch";
-import { Divider, ListItem, Menu, MenuItem } from "@mui/material";
 import { removeCalendarAsync } from "../../features/Calendars/CalendarSlice";
 import { DeleteCalendarDialog } from "./DeleteCalendarDialog";
 import { trimLongTextWithoutSpace } from "../../utils/textUtils";

src/components/Calendar/DeleteCalendarDialog.tsx

@@ -1,10 +1,12 @@
-import Dialog from "@mui/material/Dialog";
-import { Calendar } from "../../features/Calendars/CalendarTypes";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
-import Button from "@mui/material/Button";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+} from "@linagora/twake-mui";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { useI18n } from "twake-i18n";
 
 export function DeleteCalendarDialog({
@@ -17,7 +19,7 @@ export function DeleteCalendarDialog({
 }: {
   deletePopupOpen: boolean;
   setDeletePopupOpen: (e: boolean) => void;
-  calendars: Record<string, Calendar>;
+  calendars: Record<string, Calendars>;
   id: string;
   isPersonal: boolean;
   handleDeleteConfirm: () => void;

src/components/Calendar/ImportTab.tsx

@@ -9,7 +9,7 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
-} from "@mui/material";
+} from "twake-mui";
 import { useEffect, useState } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { CalendarItemList } from "./CalendarItemList";

src/components/Calendar/SettingsTab.tsx

@@ -8,7 +8,7 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
-} from "@mui/material";
+} from "twake-mui";
 import { useI18n } from "twake-i18n";
 import { useState, useEffect } from "react";
 import { useAppSelector } from "../../app/hooks";

src/components/Calendar/TempCalendarsInput.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material/styles";
+import { useTheme } from "twake-mui";
 import { useRef } from "react";
 import { useI18n } from "twake-i18n";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
@@ -8,7 +8,7 @@ import {
 } from "../../features/Calendars/CalendarSlice";
 import { Calendar } from "../../features/Calendars/CalendarTypes";
 import { setView } from "../../features/Settings/SettingsSlice";
-import TextField from "@mui/material/TextField";
+import { TextField } from "twake-mui";
 import { User, PeopleSearch } from "../Attendees/PeopleSearch";
 import { getAccessiblePair } from "./utils/calendarColorsUtils";
 

src/components/Calendar/TimezoneSelector.tsx

@@ -1,4 +1,4 @@
-import { Button, Popover } from "@mui/material";
+import { Button, Popover } from "twake-mui";
 import { useI18n } from "twake-i18n";
 import moment from "moment";
 import { MouseEvent, useMemo, useState } from "react";

src/components/Calendar/utils/calendarColorsUtils.tsx

@@ -1,4 +1,4 @@
-import { darken, getContrastRatio, lighten, Theme } from "@mui/material";
+import { darken, getContrastRatio, lighten, Theme } from "twake-mui";
 import { ThunkDispatch } from "@reduxjs/toolkit";
 import { updateCalColor } from "../../../features/Calendars/CalendarSlice";
 import { Calendar } from "../../../features/Calendars/CalendarTypes";