Fix more conflicting dependencies

apps/metamigo-frontend/components/MetamigoAdmin.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from "react";
 import { Admin, Resource } from "react-admin";
 import { useApolloClient } from "@apollo/client";
 import polyglotI18nProvider from "ra-i18n-polyglot";
-import { ThemeProvider, createMuiTheme } from "@mui/material/styles";
+import { ThemeProvider, createTheme } from "@mui/material";
 import { metamigoDataProvider } from "../lib/dataprovider";
 import { theme } from "./layout/themes";
 import { Layout } from "./layout";
@@ -18,12 +18,16 @@ import voiceProviders from "./voice/providers";
 import webhooks from "./webhooks";
 import { AdminLogin, authProvider } from "./AdminLogin";
 
-const i18nProvider = polyglotI18nProvider((_locale) => englishMessages, "en");
+const i18nProvider = polyglotI18nProvider(
+  (_locale: any) => englishMessages,
+  "en"
+);
 
 const MetamigoAdmin: FC = () => {
   // eslint-disable-next-line unicorn/no-null
   const [dataProvider, setDataProvider] = useState(null);
   const client = useApolloClient();
+  const muiTheme = createTheme(theme);
 
   useEffect(() => {
     (async () => {
@@ -34,7 +38,7 @@ const MetamigoAdmin: FC = () => {
   }, [client]);
   return (
     dataProvider && (
-      <ThemeProvider theme={createMuiTheme(theme)}>
+      <ThemeProvider theme={muiTheme}>
         <Admin
           disableTelemetry
           dataProvider={dataProvider}

apps/metamigo-frontend/components/accounts/AccountEdit.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { makeStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 import {
   SimpleForm,
   TextInput,
@@ -27,7 +27,6 @@ type AccountEditToolbarProps = {
 
 const AccountEditToolbar: FC<AccountEditToolbarProps> = (props: any) => {
   const { data: session } = useSession();
-  // @ts-expect-error
   const classes = useStyles(props);
   return (
     <Toolbar className={classes.defaultToolbar} {...props}>

apps/metamigo-frontend/components/layout/AppBar.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 import { AppBar, UserMenu, MenuItemLink, useTranslate } from "react-admin";
 import Typography from "@mui/material/Typography";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { makeStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles({
   title: {
@@ -38,7 +38,6 @@ const CustomUserMenu = (props: any) => (
 );
 
 const CustomAppBar = (props: any) => {
-  // @ts-expect-error
   const classes = useStyles();
   return (
     <AppBar {...props} elevation={1} userMenu={<CustomUserMenu />}>

apps/metamigo-frontend/components/layout/Menu.tsx

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import SecurityIcon from "@mui/icons-material/Security";
 import VoiceIcon from "@mui/icons-material/PhoneInTalk";
 import { Box } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
+import { useTheme } from "@mui/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslate, MenuItemLink } from "react-admin";
 import users from "../users";
@@ -25,12 +25,13 @@ export const Menu: FC = ({ onMenuClick, logout, dense = false }: any) => {
   });
   const translate = useTranslate();
   const theme = useTheme();
+  // @ts-ignore
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
   const open = useSelector((state: any) => state.admin.ui.sidebarOpen);
   useSelector((state: any) => state.theme); // force rerender on theme change
 
   const handleToggle = (menu: MenuName) => {
-    setState((state) => ({ ...state, [menu]: !state[menu] }));
+    setState((state: any) => ({ ...state, [menu]: !state[menu] }));
   };
 
   return (

apps/metamigo-frontend/components/layout/SubMenu.tsx

@@ -6,7 +6,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Typography from "@mui/material/Typography";
 import Collapse from "@mui/material/Collapse";
 import Tooltip from "@mui/material/Tooltip";
-import { makeStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 import { useTranslate } from "react-admin";
 
 const useStyles = makeStyles((theme: any) => ({
@@ -42,13 +42,12 @@ export const SubMenu: FC<SubMenuProps> = ({
   icon,
   children,
   dense,
-}) => {
+}: any) => {
   const translate = useTranslate();
-  // @ts-expect-error
   const classes = useStyles();
 
   const header = (
-    // @ts-expect-error
+    // @ts-ignore
     <MenuItem dense={dense} button onClick={handleToggle}>
       <ListItemIcon className={classes.icon}>
         {isOpen ? <ExpandMore /> : icon}

apps/metamigo-frontend/components/users/UserEdit.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 import {
   SimpleForm,
   TextInput,
@@ -23,7 +23,6 @@ const useStyles = makeStyles((_theme: any) => ({
 }));
 
 const UserEditToolbar = (props: any) => {
-  // @ts-expect-error
   const classes = useStyles(props);
   const redirect = useRedirect();
 

apps/metamigo-frontend/components/voice/voicelines/MicInput.tsx

@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
 import MicIcon from "@mui/icons-material/Mic";
 import StopIcon from "@mui/icons-material/Stop";
 import Button from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles"; // makeStyles,
+import { useTheme } from "@mui/styles"; // makeStyles,
 // import AudioPlayer from "material-ui-audio-player";
 import { useStopwatch } from "react-timer-hook";
 import style from "./MicInput.module.css";
@@ -104,6 +104,7 @@ const MicInput = (props: any) => {
             className={isRecording ? style.visible : style.hidden}
             onStop={onStop}
             onData={onData}
+            // @ts-ignore
             strokeColor={theme.palette.primary.main}
             backgroundColor="white"
             mimeType="audio/webm"