implement twake mui

src/App.tsx

@@ -8,7 +8,7 @@ import { Loading } from "./components/Loading/Loading";
 import HandleLogin from "./features/User/HandleLogin";
 import CalendarLayout from "./components/Calendar/CalendarLayout";
 import { Error } from "./components/Error/Error";
-import { CustomThemeProvider } from "./theme/ThemeProvider";
+import { TwakeMuiThemeProvider } from "twake-mui";
 import { useAppDispatch, useAppSelector } from "./app/hooks";
 import { push } from "redux-first-history";
 import { ErrorSnackbar } from "./components/Error/ErrorSnackbar";
@@ -61,7 +61,7 @@ function App() {
   }, [error, dispatch]);
 
   return (
-    <CustomThemeProvider>
+    <TwakeMuiThemeProvider>
       <I18n
         dictRequire={(lang: keyof typeof locale) => locale[lang]}
         lang={lang}
@@ -79,7 +79,7 @@ function App() {
           <ErrorSnackbar error={error} type="user" />
         </Suspense>
       </I18n>
-    </CustomThemeProvider>
+    </TwakeMuiThemeProvider>
   );
 }
 

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

src/features/Events/AttendanceValidation/AttendanceValidation.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography } from "@linagora/twake-mui";
 import { Dispatch, SetStateAction } from "react";
 import { useI18n } from "twake-i18n";
 import { Calendar } from "../../Calendars/CalendarTypes";

src/features/Events/AttendanceValidation/RSVPButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button } from "@linagora/twake-mui";
 import { Dispatch, SetStateAction } from "react";
 import { useI18n } from "twake-i18n";
 import { useAppDispatch } from "../../../app/hooks";

src/features/Events/EventDisplayPreview.tsx

@@ -13,7 +13,7 @@ import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
 import RepeatIcon from "@mui/icons-material/Repeat";
 import SubjectIcon from "@mui/icons-material/Subject";
 import VideocamIcon from "@mui/icons-material/Videocam";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography } from "@linagora/twake-mui";
 import EventPopover from "./EventModal";
 import {
   Button,
@@ -23,8 +23,8 @@ import {
   Menu,
   MenuItem,
   Tooltip,
-} from "@mui/material";
-import AvatarGroup from "@mui/material/AvatarGroup";
+} from "@linagora/twake-mui";
+import { AvatarGroup } from "@linagora/twake-mui";
 import { useEffect, useState, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { CalendarName } from "../../components/Calendar/CalendarName";
@@ -49,7 +49,6 @@ import { userAttendee } from "../User/models/attendee";
 import { browserDefaultTimeZone } from "../../utils/timezone";
 import { AttendanceValidation } from "./AttendanceValidation/AttendanceValidation";
 import { Calendar } from "../Calendars/CalendarTypes";
-import { userData } from "../User/userDataTypes";
 import { createEventContext } from "./createEventContext";
 
 export default function EventPreviewModal({
@@ -100,7 +99,7 @@ export default function EventPreviewModal({
   const attendeePreview = makeAttendeePreview(event.attendee, t);
   const hasCheckedSessionStorageRef = useRef(false);
 
-  const [toggleActionMenu, setToggleActionMenu] = useState<Element | null>(
+  const [toggleActionMenu, setToggleActionMenu] = useState<HTMLElement | null>(
     null
   );
   const mailSpaUrl = (window as any).MAIL_SPA_URL ?? null;
@@ -369,7 +368,7 @@ export default function EventPreviewModal({
                           `${mailSpaUrl}/mailto/?uri=mailto:${event.attendee
                             .map((a) => a.cal_address)
                             .filter((mail) => mail !== user.email)
-                            .join(",")}?subject=${event.title}`
+                            .join(",")}?subject=${encodeURIComponent(event.title ?? "")}`
                         )
                       }
                     >
@@ -402,18 +401,28 @@ export default function EventPreviewModal({
                                 eventId
                               )
                           );
-                          setOpenEditModePopup("edit");
+                          setOpenEditModePopup("delete");
                         } else {
                           onClose({}, "backdropClick");
-                          await dispatch(
-                            deleteEventAsync({
-                              calId,
-                              eventId,
-                              eventURL: event.URL,
-                            })
-                          );
+                          try {
+                            const result = await dispatch(
+                              deleteEventAsync({
+                                calId,
+                                eventId,
+                                eventURL: event.URL,
+                              })
+                            );
+
+                            // For compatibility with tests that may not mock unwrap
+                            if (result && typeof result.unwrap === "function") {
+                              await result.unwrap();
+                            }
+
+                            updateTempList();
+                          } catch (error) {
+                            console.error("Failed to delete event:", error);
+                          }
                         }
-                        updateTempList();
                       }}
                     >
                       {t("eventPreview.deleteEvent")}
@@ -616,7 +625,15 @@ export default function EventPreviewModal({
                 }
                 text={t("eventPreview.alarmText", {
                   trigger: t(`event.form.notifications.${event.alarm.trigger}`),
-                  action: t(`event.form.notifications.${event.alarm.action}`),
+                  action: (() => {
+                    if (!event.alarm.action) return "";
+                    const translationKey = `event.form.notifications.${event.alarm.action}`;
+                    const translated = t(translationKey);
+                    // If translation returns the key itself, it means translation not found, use raw value
+                    return translated === translationKey
+                      ? event.alarm.action
+                      : translated;
+                  })(),
                 })}
                 style={{
                   fontSize: "16px",

src/features/Events/EventModal.tsx

@@ -1,5 +1,5 @@
 import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
-import { Box, Button } from "@mui/material";
+import { Box, Button } from "twake-mui";
 import AddIcon from "@mui/icons-material/Add";
 import React, {
   useEffect,

src/features/Events/EventUpdateModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button } from "twake-mui";
 import AddIcon from "@mui/icons-material/Add";
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";

src/features/Search/SearchResultsPage.tsx

@@ -2,8 +2,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import RepeatIcon from "@mui/icons-material/Repeat";
 import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
 import VideocamIcon from "@mui/icons-material/Videocam";
-import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
-import CircularProgress from "@mui/material/CircularProgress";
+import { Box, Button, IconButton, Stack, Typography, CircularProgress } from "twake-mui";
 import { useI18n } from "twake-i18n";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";

src/features/Settings/SettingsPage.tsx

@@ -15,7 +15,7 @@ import {
   Snackbar,
   Switch,
   FormControlLabel,
-} from "@mui/material";
+} from "twake-mui";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import SettingsIcon from "@mui/icons-material/Settings";
 // import SyncIcon from "@mui/icons-material/Sync";

src/theme/ThemeProvider.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "@mui/material/styles";
-import { CssBaseline } from "@mui/material";
-import { customTheme } from "./theme";
-
-interface CustomThemeProviderProps {
-  children: React.ReactNode;
-}
-
-export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
-  return (
-    <ThemeProvider theme={customTheme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  );
-}
-
-export { customTheme };

src/theme/theme.ts

@@ -1,38 +0,0 @@
-import { createTheme } from "@mui/material/styles";
-
-// Custom theme for Twake Calendar
-export const customTheme = createTheme({
-  palette: {
-    text: {
-      primary: "#000000",
-      secondary: "#717D96",
-      secondaryContainer: "#243B55",
-    },
-  },
-  typography: {
-    caption: {
-      fontSize: "0.75rem",
-      fontWeight: 400,
-      lineHeight: 1.4,
-      color: "#8C9CAF", // Custom secondary text color
-    },
-  },
-  components: {
-    // Custom Typography component
-    MuiTypography: {
-      styleOverrides: {
-        // Custom variant for event info text
-        caption: {
-          fontSize: "13px",
-          color: "#717D96",
-        },
-      },
-    },
-    // Custom Button component
-    // Custom Dialog component
-    // Custom DialogActions component
-  },
-});
-
-// Export theme type for TypeScript
-export type CustomTheme = typeof customTheme;