Feature/remove dependency mui system (#331)

* Remove duplicated dependency "@mui/system"

Already included in "@mui/material"

* Remove duplicated dependency "@mui/system" - Fix theme "custom" palette

Already included in "@mui/material"

* Remove duplicated dependency "@mui/system" - Fix imports

Already included in "@mui/material"

src/components/ExtensionCard.tsx

@@ -12,7 +12,7 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { IExtension, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
 import requestManager from 'lib/RequestManager';

src/components/MangaCard.tsx

@@ -11,10 +11,9 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Avatar, CardContent, Grid } from '@mui/material';
+import { Avatar, CardContent, Grid, Box, styled } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
-import { Box, styled } from '@mui/system';
 import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { BACK } from 'util/useBackTo';
 import { IMangaCard } from 'typings';

src/components/MangaGrid.tsx

@@ -10,8 +10,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Grid from '@mui/material/Grid';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import { Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Typography, Box } from '@mui/material';
 import MangaCard from 'components/MangaCard';
 import { GridLayout } from 'components/context/LibraryOptionsContext';
 import { IMangaCard } from 'typings';

src/components/SourceCard.tsx

@@ -6,13 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CardActionArea } from '@mui/material';
+import { CardActionArea, Box, styled } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { Box, styled } from '@mui/system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';

src/components/library/UpdateChecker.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import makeToast from 'components/util/Toast';
 import { IUpdateStatus } from 'typings';

src/components/manga/ChapterList.tsx

@@ -6,9 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, CircularProgress, Stack } from '@mui/material';
+import { Button, CircularProgress, Stack, styled } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/system';
 import useSubscription from 'components/library/useSubscription';
 import ChapterCard from 'components/manga/ChapterCard';
 import ResumeFab from 'components/manga/ResumeFAB';

src/components/manga/SelectionFAB.tsx

@@ -7,8 +7,7 @@
  */
 
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
-import { Fab, Menu } from '@mui/material';
-import { Box } from '@mui/system';
+import { Fab, Menu, Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import type { IChapterWithMeta } from 'components/manga/ChapterList';
 import SelectionFABActionItem from 'components/manga/SelectionFABActionItem';

src/components/molecules/DownloadStateIndicator.tsx

@@ -6,9 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CircularProgress } from '@mui/material';
+import { CircularProgress, Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IDownloadChapter, TranslationKey } from 'typings';

src/components/molecules/OptionsPanel.tsx

@@ -6,8 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Drawer } from '@mui/material';
-import { Box } from '@mui/system';
+import { Drawer, Box } from '@mui/material';
 import React from 'react';
 
 interface IProps {

src/components/navbar/DefaultNavBar.tsx

@@ -11,7 +11,7 @@ import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import { useMediaQuery } from '@mui/material';
+import { useMediaQuery, Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
@@ -27,7 +27,6 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import { Link, useHistory } from 'react-router-dom';
 import NavBarContext from 'components/context/NavbarContext';
 import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
-import { Box } from '@mui/system';
 import { createPortal } from 'react-dom';
 import useBackTo from 'util/useBackTo';
 import DesktopSideBar from 'components/navbar/navigation/DesktopSideBar';

src/components/navbar/ReaderNavBar.tsx

@@ -18,12 +18,11 @@ import { useHistory, useLocation } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
-import { Divider, FormControl, MenuItem, Select } from '@mui/material';
+import { Divider, FormControl, MenuItem, Select, styled } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
-import { styled } from '@mui/system';
 import useBackTo from 'util/useBackTo';
 import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
 import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -7,9 +7,8 @@
  */
 
 import React from 'react';
-import { ListItem, ListItemIcon, Tooltip } from '@mui/material';
+import { ListItem, ListItemIcon, Tooltip, styled } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
-import { styled } from '@mui/system';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 const SideNavBarContainer = styled('div')(({ theme }) => ({
     height: '100vh',
     width: theme.spacing(8),
-    backgroundColor: theme.palette.custom,
+    backgroundColor: theme.palette.custom.dark,
     position: 'fixed',
     top: 0,
     left: 0,

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -7,8 +7,7 @@
  */
 
 import React from 'react';
-import { ListItem } from '@mui/material';
-import { styled, Box } from '@mui/system';
+import { ListItem, styled, Box } from '@mui/material';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';

src/components/reader/DoublePage.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Box, styled } from '@mui/system';
+import { Box, styled } from '@mui/material';
 import { IReaderSettings } from 'typings';
 
 const Image = styled('img')({

src/components/reader/Page.tsx

@@ -8,7 +8,7 @@
 
 import React, { useRef } from 'react';
 import SpinnerImage from 'components/util/SpinnerImage';
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
 import { IReaderSettings } from 'typings';
 
 function imageStyle(settings: IReaderSettings): any {

src/components/reader/PageNumber.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { IReaderSettings } from 'typings';
 
 interface IProps {

src/components/reader/pager/DoublePagedPager.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import DoublePage from 'components/reader/DoublePage';
 import { IReaderProps } from 'typings';

src/components/reader/pager/HorizontalPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import { IReaderProps } from 'typings';
 

src/components/reader/pager/PagedPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import { IReaderProps } from 'typings';
 

src/components/reader/pager/VerticalPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import { IReaderProps } from 'typings';
 

src/components/source/SourceOptions.tsx

@@ -7,8 +7,7 @@
  */
 
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { Button, Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Button, Stack, Box } from '@mui/material';
 import OptionsPanel from 'components/molecules/OptionsPanel';
 import React from 'react';
 import CheckBoxFilter from 'components/source/filters/CheckBoxFilter';

src/components/source/filters/GroupFilter.tsx

@@ -7,8 +7,7 @@
  */
 
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, ListItemButton, ListItemText, Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import React from 'react';
 // eslint-disable-next-line import/no-cycle
 import { Options } from 'components/source/SourceOptions';

src/components/source/filters/SortFilter.tsx

@@ -7,8 +7,7 @@
  */
 
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, ListItemButton, ListItemText, Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import SortRadioInput from 'components/atoms/SortRadioInput';
 import React from 'react';
 import { IState } from 'typings';

src/components/util/EmptyView.tsx

@@ -11,8 +11,7 @@
 import React, { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { useMediaQuery } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, useMediaQuery } from '@mui/material';
 
 const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
 

src/components/util/LoadingPlaceholder.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 
 interface IProps {
     shouldRender?: boolean | (() => boolean);

src/components/util/SpinnerImage.tsx

@@ -8,9 +8,8 @@
 
 import React, { useEffect, useState, CSSProperties } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import Box from '@mui/system/Box';
-import { Theme } from '@mui/system/createTheme';
-import { SxProps } from '@mui/system/styleFunctionSx';
+import Box from '@mui/material/Box';
+import { Theme, SxProps } from '@mui/material';
 
 interface IProps {
     src: string;

src/components/util/StyledFab.tsx

@@ -6,8 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fab } from '@mui/material';
-import { styled } from '@mui/system';
+import { Fab, styled } from '@mui/material';
 
 export const DEFAULT_FAB_STYLE = {
     position: 'fixed',

src/screens/DownloadQueue.tsx

@@ -10,7 +10,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import DragHandle from '@mui/icons-material/DragHandle';
 import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import { Card, CardActionArea, Stack } from '@mui/material';
+import { Card, CardActionArea, Stack, Box } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import NavbarContext from 'components/context/NavbarContext';
 import EmptyView from 'components/util/EmptyView';
@@ -18,7 +18,6 @@ import React, { useContext, useEffect } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
 import useSubscription from 'components/library/useSubscription';
 import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import { NavbarToolbar } from 'components/navbar/DefaultNavBar';

src/screens/Library.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, Tab, Tabs } from '@mui/material';
+import { Chip, Tab, Tabs, styled } from '@mui/material';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
 import EmptyView from 'components/util/EmptyView';
@@ -18,7 +18,6 @@ import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import UpdateChecker from 'components/library/UpdateChecker';
 import { useTranslation } from 'react-i18next';
-import { styled } from '@mui/system';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import requestManager from 'lib/RequestManager';
 

src/screens/Manga.tsx

@@ -7,8 +7,7 @@
  */
 
 import { Warning } from '@mui/icons-material';
-import { CircularProgress, IconButton, Stack, Tooltip } from '@mui/material';
-import { Box } from '@mui/system';
+import { CircularProgress, IconButton, Stack, Tooltip, Box } from '@mui/material';
 import NavbarContext, { useSetDefaultBackTo } from 'components/context/NavbarContext';
 import ChapterList from 'components/manga/ChapterList';
 import { useRefreshManga } from 'components/manga/hooks';

src/screens/Reader.tsx

@@ -16,7 +16,7 @@ import DoublePagedPager from 'components/reader/pager/DoublePagedPager';
 import VerticalPager from 'components/reader/pager/VerticalPager';
 import ReaderNavBar from 'components/navbar/ReaderNavBar';
 import NavbarContext from 'components/context/NavbarContext';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { requestUpdateMangaMetadata } from 'util/metadata';
 import {
     checkAndHandleMissingStoredReaderSettings,

src/screens/Updates.tsx

@@ -7,13 +7,12 @@
  */
 
 import DownloadIcon from '@mui/icons-material/Download';
-import { CardActionArea } from '@mui/material';
+import { Box, CardActionArea, styled } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { Box, styled } from '@mui/system';
 import NavbarContext from 'components/context/NavbarContext';
 import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import EmptyView from 'components/util/EmptyView';

src/screens/settings/DefaultReaderSettings.tsx

@@ -8,7 +8,7 @@
 
 import React, { useContext, useEffect } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import { requestUpdateServerMetadata } from 'util/metadata';
 import makeToast from 'components/util/Toast';

src/screens/settings/LibrarySettings.tsx

@@ -20,7 +20,7 @@ import Button from '@mui/material/Button';
 import ListItemButton from '@mui/material/ListItemButton';
 import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
 import DialogTitle from '@mui/material/DialogTitle';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material';
 import makeToast from 'components/util/Toast';
 import { t as translate } from 'i18next';
 import { useTranslation } from 'react-i18next';

src/theme.ts

@@ -6,20 +6,27 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createTheme as createMuiTheme } from '@mui/material/styles';
+import { createTheme as createMuiTheme, Palette as MuiPalette, Theme } from '@mui/material/styles';
+
+declare module '@mui/material/styles/createPalette' {
+    interface Palette {
+        custom: Palette['primary'];
+    }
 
-declare module '@mui/material/styles' {
     interface PaletteOptions {
-        custom?: PaletteOptions['primary'];
+        custom: PaletteOptions['primary'];
     }
 }
 
+type DefaultMuiPalette = Omit<MuiPalette, 'custom'>;
+type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };
+
 const createTheme = (dark?: boolean) => {
-    const baseTheme = createMuiTheme({
+    const baseTheme: DefaultMuiTheme = createMuiTheme({
         palette: {
             mode: dark ? 'dark' : 'light',
         },
-    });
+    } as Theme);
 
     const tachideskTheme = createMuiTheme(
         {