implement twake mui

src/components/Attendees/PeopleSearch.tsx

@@ -1,12 +1,13 @@
-import Autocomplete, {
-  AutocompleteRenderInputParams,
-} from "@mui/material/Autocomplete";
-import Avatar from "@mui/material/Avatar";
-import CircularProgress from "@mui/material/CircularProgress";
-import ListItem from "@mui/material/ListItem";
-import ListItemAvatar from "@mui/material/ListItemAvatar";
-import ListItemText from "@mui/material/ListItemText";
-import TextField from "@mui/material/TextField";
+import {
+  Autocomplete,
+  type AutocompleteRenderInputParams,
+  Avatar,
+  CircularProgress,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  TextField,
+} from "twake-mui";
 import {
   type ReactNode,
   useCallback,
@@ -16,12 +17,11 @@ import {
 } from "react";
 import { searchUsers } from "../../features/User/userAPI";
 import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined";
-import Chip from "@mui/material/Chip";
-import { useTheme } from "@mui/material/styles";
+import { Chip, useTheme } from "twake-mui";
 import { getAccessiblePair } from "../Calendar/utils/calendarColorsUtils";
 import { useI18n } from "twake-i18n";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
-import { PopperProps, PaperProps } from "@mui/material";
+import { PopperProps, PaperProps } from "twake-mui";
 
 export interface User {
   email: string;

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";

src/components/Dialog/ResponsiveDialog.tsx

@@ -11,7 +11,7 @@ import {
   SxProps,
   Theme,
   Box,
-} from "@mui/material";
+} from "twake-mui";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
@@ -132,7 +132,7 @@ function ResponsiveDialog({
     "& .MuiDialogActions-root .MuiBox-root": {
       maxWidth: isExpanded ? expandedContentMaxWidth : undefined,
       margin: isExpanded ? "0 auto" : undefined,
-      padding: isExpanded ? "0 12px" : undefined,
+      padding: "0",
       width: isExpanded ? "100%" : undefined,
       justifyContent: isExpanded ? "flex-end" : undefined,
     },
@@ -140,7 +140,6 @@ function ResponsiveDialog({
 
   const baseContentSx: SxProps<Theme> = {
     width: "100%",
-    padding: isExpanded ? "16px" : undefined,
   };
 
   const contentWrapperSx: SxProps<Theme> = {
@@ -239,8 +238,6 @@ function ResponsiveDialog({
               ? (theme) => `1px solid ${theme.palette.divider}`
               : undefined,
             justifyContent: actionsJustifyContent,
-            paddingTop: "18px",
-            paddingBottom: "18px",
           }}
         >
           {actions}

src/components/Error/Error.tsx

@@ -1,6 +1,6 @@
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import ReplayIcon from "@mui/icons-material/Replay";
-import { Box, Button, Fade, Paper, Stack, Typography } from "@mui/material";
+import { Box, Button, Fade, Paper, Stack, Typography } from "twake-mui";
 import { useEffect, useRef } from "react";
 import { push } from "redux-first-history";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";

src/components/Error/ErrorSnackbar.tsx

@@ -1,6 +1,4 @@
-import Snackbar from "@mui/material/Snackbar";
-import Alert from "@mui/material/Alert";
-import Button from "@mui/material/Button";
+import { Snackbar, Alert, Button } from "twake-mui";
 import { useAppDispatch } from "../../app/hooks";
 import { clearError as calendarClearError } from "../../features/Calendars/CalendarSlice";
 import { clearError as userClearError } from "../../features/User/userSlice";

src/components/Event/AddDescButton.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, TextField } from "@mui/material";
+import { Box, Button, TextField } from "twake-mui";
 import { useI18n } from "twake-i18n";
 import { FieldWithLabel } from "./components/FieldWithLabel";
 import { Description as DescriptionIcon } from "@mui/icons-material";

src/components/Event/EditModeDialog.tsx

@@ -8,7 +8,7 @@ import {
   FormControlLabel,
   Radio,
   RadioGroup,
-} from "@mui/material";
+} from "twake-mui";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
 import { useState } from "react";
 import { useI18n } from "twake-i18n";

src/components/Event/EventChip/ErrorEventChip.tsx

@@ -1,4 +1,4 @@
-import { Card, Typography } from "@mui/material";
+import { Card, Typography } from "twake-mui";
 import { useRef, useEffect } from "react";
 import { EventErrorHandler } from "../../Error/EventErrorHandler";
 

src/components/Event/EventChip/EventChip.tsx

@@ -5,7 +5,7 @@ import {
   CardContent,
   CardHeader,
   Typography,
-} from "@mui/material";
+} from "twake-mui";
 import React, { useEffect, useRef, useState } from "react";
 import { stringAvatar } from "../utils/eventUtils";
 import { ErrorEventChip } from "./ErrorEventChip";

src/components/Event/EventChip/EventChipUtils.tsx

@@ -1,7 +1,7 @@
 import CancelIcon from "@mui/icons-material/Cancel";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import LockOutlineIcon from "@mui/icons-material/LockOutline";
-import { Box, getContrastRatio } from "@mui/material";
+import { Box, getContrastRatio } from "twake-mui";
 import moment from "moment";
 import React, { useLayoutEffect, useState } from "react";
 import { Calendar } from "../../../features/Calendars/CalendarTypes";

src/components/Event/EventChip/SimpleEventChip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, Typography } from "@mui/material";
+import { Card, Typography } from "twake-mui";
 
 export function SimpleEventChip({ title }: { title: string }) {
   return (

src/components/Event/EventDuplicate.tsx

@@ -1,4 +1,4 @@
-import { MenuItem } from "@mui/material";
+import { MenuItem } from "twake-mui";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
 import { useI18n } from "twake-i18n";
 

src/components/Event/EventFormFields.tsx

@@ -13,7 +13,7 @@ import {
   TextField,
   ToggleButtonGroup,
   ToggleButton,
-} from "@mui/material";
+} from "twake-mui";
 import {
   Description as DescriptionIcon,
   Public as PublicIcon,

src/components/Event/EventRepeat.tsx

@@ -12,7 +12,7 @@ import {
   FormGroup,
   Radio,
   RadioGroup,
-} from "@mui/material";
+} from "twake-mui";
 import { useEffect, useState } from "react";
 import { RepetitionObject } from "../../features/Events/EventsTypes";
 import { useI18n } from "twake-i18n";

src/components/Event/InfoRow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography, Link } from "@mui/material";
+import { Box, Typography, Link } from "twake-mui";
 
 type InfoRowProps = {
   icon: React.ReactNode;

src/components/Event/components/DateTimeFields.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
-import { Box, Typography } from "@mui/material";
-import { TextFieldProps } from "@mui/material/TextField";
+import { Box, Typography } from "twake-mui";
+import { TextFieldProps } from "twake-mui";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { DatePickerFieldProps } from "@mui/x-date-pickers/DatePicker";
 import { TimePicker } from "@mui/x-date-pickers/TimePicker";

src/components/Event/components/EditableTimeField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import TextField from "@mui/material/TextField";
+import { TextField } from "twake-mui";
 import {
   PickerFieldAdapter,
   PickerValidationScope,

src/components/Event/components/FieldWithLabel.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography } from "twake-mui";
 
 /**
  * Helper component for field with label

src/components/Event/components/ReadOnlyPickerField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TextField from "@mui/material/TextField";
+import { TextField } from "twake-mui";
 import {
   PickerFieldAdapter,
   PickerValidationScope,

src/components/Event/utils/eventUtils.tsx

@@ -1,9 +1,6 @@
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import Avatar from "@mui/material/Avatar";
-import Badge from "@mui/material/Badge";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import { Avatar, Badge, Box, Typography } from "twake-mui";
 import { ThunkDispatch } from "@reduxjs/toolkit";
 import {
   emptyEventsCal,

src/components/Loading/SnackBarAlert.tsx

@@ -1,5 +1,5 @@
-import Alert, { AlertColor } from "@mui/material/Alert";
-import Snackbar from "@mui/material/Snackbar";
+import { Alert, Snackbar } from "twake-mui";
+import type { AlertColor } from "twake-mui";
 
 export function SnackbarAlert({
   open,

src/components/Menubar/EventSearchBar.tsx

@@ -14,8 +14,8 @@ import {
   Stack,
   TextField,
   Typography,
-} from "@mui/material";
-import { type AutocompleteRenderInputParams } from "@mui/material/Autocomplete";
+} from "twake-mui";
+import { type AutocompleteRenderInputParams } from "twake-mui";
 import { useRef, useState, useEffect } from "react";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import SearchIcon from "@mui/icons-material/Search";

src/components/Menubar/Menubar.tsx

@@ -22,7 +22,7 @@ import {
   Typography,
   Box,
   Divider,
-} from "@mui/material";
+} from "twake-mui";
 import { push } from "redux-first-history";
 import { CalendarApi } from "@fullcalendar/core";
 import { useI18n } from "twake-i18n";
@@ -194,7 +194,7 @@ export function Menubar({
           </div>
           <div className="menu-items">
             <div className="current-date-time">
-              <Typography variant="h6" component="div">
+              <Typography variant="h3" component="div">
                 {dateLabel}
               </Typography>
             </div>

src/components/Timezone/TimezoneAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete, TextField } from "twake-mui";
 import { PublicOutlined as TimezoneIcon } from "@mui/icons-material";
 import { useMemo } from "react";