ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate material-ui to v5

Browse Source
This commit is contained in:
Aria Moradi
2021-09-09 17:51:22 +04:30
parent fdfaf2f6d6
commit 5d005441ea
47 changed files with 2111 additions and 2222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@@ -17,6 +17,10 @@ module.exports = {
// Indent props with 4 spaces // Indent props with 4 spaces
'react/jsx-indent-props': ['error', 4], 'react/jsx-indent-props': ['error', 4],
'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }] 'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }],
// just why
'react/jsx-no-bind' : 'off',
}, },
}; };

9
package.json
View File

@@ -3,10 +3,13 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fontsource/roboto": "^4.3.0", "@fontsource/roboto": "^4.3.0",
"@material-ui/core": "^4.11.4", "@mui/icons-material": "^5.0.0-rc.1",
"@material-ui/icons": "^4.11.2", "@mui/lab": "^5.0.0-alpha.46",
"@material-ui/lab": "^4.0.0-alpha.58", "@mui/material": "^5.0.0-rc.1",
"@mui/styles": "^5.0.0-rc.1",
"axios": "^0.21.1", "axios": "^0.21.1",
"file-selector": "^0.2.4", "file-selector": "^0.2.4",
"react": "^17.0.2", "react": "^17.0.2",

219
src/App.tsx
View File

@@ -11,9 +11,11 @@ import {
Route, Route,
Redirect, Redirect,
} from 'react-router-dom'; } from 'react-router-dom';
import { Container } from '@material-ui/core'; import { Container, adaptV4Theme } from '@mui/material';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import {
createTheme, ThemeProvider, Theme, StyledEngineProvider,
} from '@mui/material/styles';
import NavBar from 'components/navbar/NavBar'; import NavBar from 'components/navbar/NavBar';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
import DarkTheme from 'context/DarkTheme'; import DarkTheme from 'context/DarkTheme';
@@ -38,6 +40,11 @@ import Player from 'screens/anime/Player';
import AnimeExtensions from 'screens/anime/AnimeExtensions'; import AnimeExtensions from 'screens/anime/AnimeExtensions';
import DownloadQueue from 'screens/manga/DownloadQueue'; import DownloadQueue from 'screens/manga/DownloadQueue';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
export default function App() { export default function App() {
const [title, setTitle] = useState<string>('Tachidesk'); const [title, setTitle] = useState<string>('Tachidesk');
const [action, setAction] = useState<any>(<div />); const [action, setAction] = useState<any>(<div />);
@@ -51,9 +58,9 @@ export default function App() {
const darkThemeContext = { darkTheme, setDarkTheme }; const darkThemeContext = { darkTheme, setDarkTheme };
const theme = React.useMemo( const theme = React.useMemo(
() => createMuiTheme({ () => createTheme(adaptV4Theme({
palette: { palette: {
type: darkTheme ? 'dark' : 'light', mode: darkTheme ? 'dark' : 'light',
}, },
overrides: { overrides: {
MuiCssBaseline: { MuiCssBaseline: {
@@ -70,114 +77,118 @@ export default function App() {
}, },
}, },
}, },
}), })),
[darkTheme], [darkTheme],
); );
return ( return (
<Router> <Router>
<ThemeProvider theme={theme}> <StyledEngineProvider injectFirst>
<NavbarContext.Provider value={navBarContext}> <ThemeProvider theme={theme}>
<CssBaseline /> <NavbarContext.Provider value={navBarContext}>
<NavBar /> <CssBaseline />
<Container <NavBar />
id="appMainContainer" <Container
maxWidth={false} id="appMainContainer"
disableGutters maxWidth={false}
style={{ paddingTop: '64px' }} disableGutters
> style={{ paddingTop: '64px' }}
>
<Switch>
{/* general routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider value={darkThemeContext}>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/manga/extensions">
<MangaExtensions />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/manga/sources">
<MangaSources />
</Route>
<Route path="/manga/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
{/* Anime Routes */}
<Route path="/anime/sources/:sourceId/search/">
<AnimeSearchSingle />
</Route>
<Route path="/anime/extensions">
<AnimeExtensions />
</Route>
<Route path="/anime/sources/:sourceId/popular/">
<SourceAnimes popular />
</Route>
<Route path="/anime/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/anime/sources">
<AnimeSources />
</Route>
<Route path="/anime/:animeId/episode/:episodeIndex">
<Player />
</Route>
<Route path="/anime/:id">
<Anime />
</Route>
</Switch>
</Container>
<Switch> <Switch>
{/* general routes */}
<Route <Route
exact path="/manga/:mangaId/chapter/:chapterIndex"
path="/" // passing a key re-mounts the reader when changing chapters
render={() => ( render={
<Redirect to="/library" /> (props:any) => <Reader key={props.match.params.chapterIndex} />
)} }
/> />
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider value={darkThemeContext}>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/manga/extensions">
<MangaExtensions />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/manga/sources">
<MangaSources />
</Route>
<Route path="/manga/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
{/* Anime Routes */}
<Route path="/anime/sources/:sourceId/search/">
<AnimeSearchSingle />
</Route>
<Route path="/anime/extensions">
<AnimeExtensions />
</Route>
<Route path="/anime/sources/:sourceId/popular/">
<SourceAnimes popular />
</Route>
<Route path="/anime/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/anime/sources">
<AnimeSources />
</Route>
<Route path="/anime/:animeId/episode/:episodeIndex">
<Player />
</Route>
<Route path="/anime/:id">
<Anime />
</Route>
</Switch> </Switch>
</Container> </NavbarContext.Provider>
<Switch> </ThemeProvider>
<Route </StyledEngineProvider>
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader when changing chapters
render={(props:any) => <Reader key={props.match.params.chapterIndex} />}
/>
</Switch>
</NavbarContext.Provider>
</ThemeProvider>
</Router> </Router>
); );
} }

4
src/components/LoadingPlaceholder.tsx
View File

@@ -8,8 +8,8 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
const useStyles = makeStyles({ const useStyles = makeStyles({
loading: { loading: {

2
src/components/SpinnerImage.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
interface IProps { interface IProps {
src: string src: string

28
src/components/TemporaryDrawer.tsx
View File

@@ -6,19 +6,19 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@mui/material/Drawer';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark'; import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import CollectionsBookmarkOutlinedIcon from '@material-ui/icons/CollectionsBookmarkOutlined'; import CollectionsBookmarkOutlinedIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
import VideoLibraryOutlinedIcon from '@material-ui/icons/VideoLibraryOutlined'; import VideoLibraryOutlinedIcon from '@mui/icons-material/VideoLibraryOutlined';
import ExploreIcon from '@material-ui/icons/Explore'; import ExploreIcon from '@mui/icons-material/Explore';
import ExtensionIcon from '@material-ui/icons/Extension'; import ExtensionIcon from '@mui/icons-material/Extension';
import GetAppIcon from '@material-ui/icons/GetApp'; import GetAppIcon from '@mui/icons-material/GetApp';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import SettingsIcon from '@material-ui/icons/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
@@ -36,7 +36,7 @@ interface IProps {
export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) { export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
const classes = useStyles(); const classes = useStyles();
const [workingMode, setWorkingMode] = useLocalStorage<'manga'|'anime'>('workingMode', 'manga'); const [workingMode, setWorkingMode] = useLocalStorage<'manga' | 'anime'>('workingMode', 'manga');
const otherMode = () => { const otherMode = () => {
if (workingMode === 'manga') return 'Anime'; if (workingMode === 'manga') return 'Anime';

6
src/components/Toast.tsx
View File

@@ -7,9 +7,9 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React from 'react'; import React from 'react';
import Slide, { SlideProps } from '@material-ui/core/Slide'; import Slide, { SlideProps } from '@mui/material/Slide';
import Snackbar from '@material-ui/core/Snackbar'; import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { Color as Severity } from '@material-ui/lab/Alert'; import MuiAlert, { AlertColor as Severity } from '@mui/material/Alert';
function removeToast(id: string) { function removeToast(id: string) {
const container = document.querySelector(`#${id}`)!!; const container = document.querySelector(`#${id}`)!!;

13
src/components/anime/AnimeCard.tsx
View File

@@ -6,13 +6,13 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import CardActionArea from '@material-ui/core/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia'; import CardMedia from '@mui/material/CardMedia';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Grid } from '@material-ui/core'; import { Grid } from '@mui/material';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
const useStyles = makeStyles({ const useStyles = makeStyles({
@@ -60,6 +60,7 @@ const AnimeCard = React.forwardRef((props: IProps, ref) => {
return ( return (
<Grid item xs={6} sm={4} md={3} lg={2}> <Grid item xs={6} sm={4} md={3} lg={2}>
<Link to={`/anime/${id}/`}> <Link to={`/anime/${id}/`}>
{/* @ts-ignore */}
<Card className={classes.root} ref={ref}> <Card className={classes.root} ref={ref}>
<CardActionArea> <CardActionArea>
<div className={classes.wrapper}> <div className={classes.wrapper}>

19
src/components/anime/AnimeDetails.tsx
View File

@@ -5,13 +5,13 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core'; import makeStyles from '@mui/styles/makeStyles';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import { Theme } from '@material-ui/core/styles'; import { Theme } from '@mui/material/styles';
import FavoriteIcon from '@material-ui/icons/Favorite'; import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'; import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import FilterListIcon from '@material-ui/icons/FilterList'; import FilterListIcon from '@mui/icons-material/FilterList';
import PublicIcon from '@material-ui/icons/Public'; import PublicIcon from '@mui/icons-material/Public';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
import client from 'util/client'; import client from 'util/client';
@@ -153,6 +153,7 @@ export default function AnimeDetails(props: IProps) {
aria-label="display more actions" aria-label="display more actions"
edge="end" edge="end"
color="inherit" color="inherit"
size="large"
> >
<FilterListIcon /> <FilterListIcon />
</IconButton> </IconButton>
@@ -228,7 +229,7 @@ export default function AnimeDetails(props: IProps) {
</div> </div>
<div className={classes.buttons}> <div className={classes.buttons}>
<div> <div>
<IconButton onClick={() => handleButtonClick()}> <IconButton onClick={() => handleButtonClick()} size="large">
{inLibrary === 'In Library' && <FavoriteIcon />} {inLibrary === 'In Library' && <FavoriteIcon />}
{inLibrary !== 'In Library' && <FavoriteBorderIcon />} {inLibrary !== 'In Library' && <FavoriteBorderIcon />}
<span>{inLibrary}</span> <span>{inLibrary}</span>
@@ -236,7 +237,7 @@ export default function AnimeDetails(props: IProps) {
</div> </div>
{ /* eslint-disable-next-line react/jsx-no-target-blank */ } { /* eslint-disable-next-line react/jsx-no-target-blank */ }
<a href={manga.url} target="_blank"> <a href={manga.url} target="_blank">
<IconButton> <IconButton size="large">
<PublicIcon /> <PublicIcon />
<span>Open Site</span> <span>Open Site</span>
</IconButton> </IconButton>

2
src/components/anime/AnimeGrid.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Grid from '@material-ui/core/Grid'; import Grid from '@mui/material/Grid';
import AnimeCard from './AnimeCard'; import AnimeCard from './AnimeCard';
interface IProps{ interface IProps{

23
src/components/anime/EpisodeCard.tsx
View File

@@ -6,16 +6,17 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useTheme } from '@mui/material/styles';
import Card from '@material-ui/core/Card'; import makeStyles from '@mui/styles/makeStyles';
import CardContent from '@material-ui/core/CardContent'; import Card from '@mui/material/Card';
import IconButton from '@material-ui/core/IconButton'; import CardContent from '@mui/material/CardContent';
import MoreVertIcon from '@material-ui/icons/MoreVert'; import IconButton from '@mui/material/IconButton';
import Typography from '@material-ui/core/Typography'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import BookmarkIcon from '@material-ui/icons/Bookmark'; import BookmarkIcon from '@mui/icons-material/Bookmark';
import client from 'util/client'; import client from 'util/client';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@@ -86,7 +87,7 @@ export default function EpisodeCard(props: IProps) {
.then(() => triggerEpisodesUpdate()); .then(() => triggerEpisodesUpdate());
}; };
const readChapterColor = theme.palette.type === 'dark' ? '#acacac' : '#b0b0b0'; const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0';
return ( return (
<> <>
<li> <li>
@@ -117,7 +118,7 @@ export default function EpisodeCard(props: IProps) {
</div> </div>
</Link> </Link>
<IconButton aria-label="more" onClick={handleClick}> <IconButton aria-label="more" onClick={handleClick} size="large">
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
<Menu <Menu

12
src/components/anime/ExtensionCard.tsx
View File

@@ -6,12 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useState } from 'react'; import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@mui/material/CardContent';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@mui/material/Avatar';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import client from 'util/client'; import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';

12
src/components/anime/SourceCard.tsx
View File

@@ -6,12 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@mui/material/CardContent';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@mui/material/Avatar';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
import { langCodeToName } from 'util/language'; import { langCodeToName } from 'util/language';

19
src/components/manga/CategorySelect.tsx
View File

@@ -6,15 +6,16 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { makeStyles, createStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Button from '@material-ui/core/Button'; import createStyles from '@mui/styles/createStyles';
import DialogTitle from '@material-ui/core/DialogTitle'; import Button from '@mui/material/Button';
import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@mui/material/DialogContent';
import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@mui/material/DialogActions';
import Checkbox from '@material-ui/core/Checkbox'; import Dialog from '@mui/material/Dialog';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import client from 'util/client'; import client from 'util/client';
const useStyles = makeStyles(() => createStyles({ const useStyles = makeStyles(() => createStyles({

25
src/components/manga/ChapterCard.tsx
View File

@@ -6,16 +6,17 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useTheme } from '@mui/material/styles';
import Card from '@material-ui/core/Card'; import makeStyles from '@mui/styles/makeStyles';
import CardContent from '@material-ui/core/CardContent'; import Card from '@mui/material/Card';
import IconButton from '@material-ui/core/IconButton'; import CardContent from '@mui/material/CardContent';
import MoreVertIcon from '@material-ui/icons/MoreVert'; import IconButton from '@mui/material/IconButton';
import Typography from '@material-ui/core/Typography'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Menu from '@material-ui/core/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import BookmarkIcon from '@material-ui/icons/Bookmark'; import BookmarkIcon from '@mui/icons-material/Bookmark';
import client from 'util/client'; import client from 'util/client';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@@ -92,7 +93,7 @@ export default function ChapterCard(props: IProps) {
handleClose(); handleClose();
}; };
const readChapterColor = theme.palette.type === 'dark' ? '#acacac' : '#b0b0b0'; const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0';
return ( return (
<> <>
<li> <li>
@@ -124,7 +125,7 @@ export default function ChapterCard(props: IProps) {
</div> </div>
</Link> </Link>
<IconButton aria-label="more" onClick={handleClick}> <IconButton aria-label="more" onClick={handleClick} size="large">
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
<Menu <Menu
@@ -134,7 +135,7 @@ export default function ChapterCard(props: IProps) {
onClose={handleClose} onClose={handleClose}
> >
{downloadingString.length === 0 {downloadingString.length === 0
&& <MenuItem onClick={downloadChapter}>Download</MenuItem> } && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
<MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}> <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
{chapter.bookmarked && 'Remove bookmark'} {chapter.bookmarked && 'Remove bookmark'}
{!chapter.bookmarked && 'Bookmark'} {!chapter.bookmarked && 'Bookmark'}

12
src/components/manga/ExtensionCard.tsx
View File

@@ -6,12 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useState } from 'react'; import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@mui/material/CardContent';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@mui/material/Avatar';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import client from 'util/client'; import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';

24
src/components/manga/ExtensionLangSelect.tsx
View File

@@ -6,17 +6,18 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useState } from 'react'; import React, { useState } from 'react';
import { makeStyles, createStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Button from '@material-ui/core/Button'; import createStyles from '@mui/styles/createStyles';
import DialogTitle from '@material-ui/core/DialogTitle'; import Button from '@mui/material/Button';
import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@mui/material/DialogContent';
import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@mui/material/DialogActions';
import Switch from '@material-ui/core/Switch'; import Dialog from '@mui/material/Dialog';
import IconButton from '@material-ui/core/IconButton'; import Switch from '@mui/material/Switch';
import FilterListIcon from '@material-ui/icons/FilterList'; import IconButton from '@mui/material/IconButton';
import { List, ListItemSecondaryAction, ListItemText } from '@material-ui/core'; import FilterListIcon from '@mui/icons-material/FilterList';
import ListItem from '@material-ui/core/ListItem'; import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
import ListItem from '@mui/material/ListItem';
import { langCodeToName } from 'util/language'; import { langCodeToName } from 'util/language';
import cloneObject from 'util/cloneObject'; import cloneObject from 'util/cloneObject';
@@ -68,6 +69,7 @@ export default function ExtensionLangSelect(props: IProps) {
aria-label="display more actions" aria-label="display more actions"
edge="end" edge="end"
color="inherit" color="inherit"
size="large"
> >
<FilterListIcon /> <FilterListIcon />
</IconButton> </IconButton>

11
src/components/manga/MangaCard.tsx
View File

@@ -6,12 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import CardActionArea from '@material-ui/core/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Grid } from '@material-ui/core'; import { Grid } from '@mui/material';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
import SpinnerImage from 'components/SpinnerImage'; import SpinnerImage from 'components/SpinnerImage';
@@ -78,6 +78,7 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
return ( return (
<Grid item xs={6} sm={4} md={3} lg={2}> <Grid item xs={6} sm={4} md={3} lg={2}>
<Link to={`/manga/${id}/`}> <Link to={`/manga/${id}/`}>
{/* @ts-ignore */}
<Card className={classes.root} ref={ref}> <Card className={classes.root} ref={ref}>
<CardActionArea> <CardActionArea>
<div className={classes.wrapper}> <div className={classes.wrapper}>

19
src/components/manga/MangaDetails.tsx
View File

@@ -5,13 +5,13 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core'; import makeStyles from '@mui/styles/makeStyles';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import { Theme } from '@material-ui/core/styles'; import { Theme } from '@mui/material/styles';
import FavoriteIcon from '@material-ui/icons/Favorite'; import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'; import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import FilterListIcon from '@material-ui/icons/FilterList'; import FilterListIcon from '@mui/icons-material/FilterList';
import PublicIcon from '@material-ui/icons/Public'; import PublicIcon from '@mui/icons-material/Public';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
import client from 'util/client'; import client from 'util/client';
@@ -151,6 +151,7 @@ export default function MangaDetails(props: IProps) {
aria-label="display more actions" aria-label="display more actions"
edge="end" edge="end"
color="inherit" color="inherit"
size="large"
> >
<FilterListIcon /> <FilterListIcon />
</IconButton> </IconButton>
@@ -226,7 +227,7 @@ export default function MangaDetails(props: IProps) {
</div> </div>
<div className={classes.buttons}> <div className={classes.buttons}>
<div> <div>
<IconButton onClick={() => handleButtonClick()}> <IconButton onClick={() => handleButtonClick()} size="large">
{inLibrary === 'In Library' && <FavoriteIcon />} {inLibrary === 'In Library' && <FavoriteIcon />}
{inLibrary !== 'In Library' && <FavoriteBorderIcon />} {inLibrary !== 'In Library' && <FavoriteBorderIcon />}
<span>{inLibrary}</span> <span>{inLibrary}</span>
@@ -234,7 +235,7 @@ export default function MangaDetails(props: IProps) {
</div> </div>
{ /* eslint-disable-next-line react/jsx-no-target-blank */ } { /* eslint-disable-next-line react/jsx-no-target-blank */ }
<a href={manga.realUrl} target="_blank"> <a href={manga.realUrl} target="_blank">
<IconButton> <IconButton size="large">
<PublicIcon /> <PublicIcon />
<span>Open Site</span> <span>Open Site</span>
</IconButton> </IconButton>

2
src/components/manga/MangaGrid.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Grid from '@material-ui/core/Grid'; import Grid from '@mui/material/Grid';
import MangaCard from './MangaCard'; import MangaCard from './MangaCard';
interface IProps{ interface IProps{

12
src/components/manga/SourceCard.tsx
View File

@@ -6,12 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@material-ui/core/Card'; import Card from '@mui/material/Card';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@mui/material/CardContent';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@mui/material/Avatar';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
import { langCodeToName } from 'util/language'; import { langCodeToName } from 'util/language';

2
src/components/manga/reader/DoublePage.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React from 'react'; import React from 'react';
const useStyles = (settings: IReaderSettings) => makeStyles({ const useStyles = (settings: IReaderSettings) => makeStyles({

5
src/components/manga/reader/Page.tsx
View File

@@ -5,12 +5,11 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import { CSSProperties } from '@material-ui/core/styles/withStyles';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import SpinnerImage from 'components/SpinnerImage'; import SpinnerImage from 'components/SpinnerImage';
function imageStyle(settings: IReaderSettings): CSSProperties { function imageStyle(settings: IReaderSettings): any {
if (settings.readerType === 'DoubleLTR' if (settings.readerType === 'DoubleLTR'
|| settings.readerType === 'DoubleRTL' || settings.readerType === 'DoubleRTL'
|| settings.readerType === 'ContinuesHorizontalLTR' || settings.readerType === 'ContinuesHorizontalLTR'

2
src/components/manga/reader/PageNumber.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React from 'react'; import React from 'react';
const useStyles = (settings: IReaderSettings) => makeStyles({ const useStyles = (settings: IReaderSettings) => makeStyles({

2
src/components/manga/reader/pager/DoublePagedPager.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Page from '../Page'; import Page from '../Page';

2
src/components/manga/reader/pager/HorizontalPager.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Page from '../Page'; import Page from '../Page';

2
src/components/manga/reader/pager/PagedPager.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Page from '../Page'; import Page from '../Page';

2
src/components/manga/reader/pager/VerticalPager.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import Page from '../Page'; import Page from '../Page';

4
src/components/manga/sourceConfiguration/CheckBoxPreference.tsx
View File

@@ -5,8 +5,8 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import React from 'react'; import React from 'react';
export default function CheckBoxPreference({ title, summary }: CheckBoxPreferenceProps) { export default function CheckBoxPreference({ title, summary }: CheckBoxPreferenceProps) {

59
src/components/navbar/NavBar.tsx
View File

@@ -6,12 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@mui/material/AppBar';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import MenuIcon from '@material-ui/icons/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import NavBarContext from '../../context/NavbarContext'; import NavBarContext from '../../context/NavbarContext';
import DarkTheme from '../../context/DarkTheme'; import DarkTheme from '../../context/DarkTheme';
import TemporaryDrawer from '../TemporaryDrawer'; import TemporaryDrawer from '../TemporaryDrawer';
@@ -39,29 +39,30 @@ export default function NavBar() {
<> <>
{override.status && override.value} {override.status && override.value}
{!override.status {!override.status
&& ( && (
<div className={classes.root}> <div className={classes.root}>
<AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}> <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
<Toolbar> <Toolbar>
<IconButton <IconButton
edge="start" edge="start"
className={classes.menuButton} className={classes.menuButton}
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
disableRipple disableRipple
onClick={() => setDrawerOpen(true)} onClick={() => setDrawerOpen(true)}
> size="large"
<MenuIcon /> >
</IconButton> <MenuIcon />
<Typography variant="h6" className={classes.title}> </IconButton>
{title} <Typography variant="h6" className={classes.title}>
</Typography> {title}
{action} </Typography>
</Toolbar> {action}
</AppBar> </Toolbar>
<TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> </AppBar>
</div> <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
)} </div>
)}
</> </>
); );
} }

118
src/components/navbar/ReaderNavBar.tsx
View File

@@ -5,28 +5,28 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@mui/icons-material/Close';
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import Typography from '@material-ui/core/Typography'; import Typography from '@mui/material/Typography';
import { useHistory, Link } from 'react-router-dom'; import { useHistory, Link } from 'react-router-dom';
import Slide from '@material-ui/core/Slide'; import Slide from '@mui/material/Slide';
import Fade from '@material-ui/core/Fade'; import Fade from '@mui/material/Fade';
import Zoom from '@material-ui/core/Zoom'; import Zoom from '@mui/material/Zoom';
import { Switch } from '@material-ui/core'; import { Switch } from '@mui/material';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import Select from '@material-ui/core/Select'; import Select from '@mui/material/Select';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@mui/material/Collapse';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import NavBarContext from '../../context/NavbarContext'; import NavBarContext from '../../context/NavbarContext';
const useStyles = (settings: IReaderSettings) => makeStyles({ const useStyles = (settings: IReaderSettings) => makeStyles({
@@ -209,17 +209,18 @@ export default function ReaderNavBar(props: IProps) {
<div className={classes.root}> <div className={classes.root}>
<header> <header>
{!settings.staticNav {!settings.staticNav
&& ( && (
<IconButton <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
disableRipple disableRipple
onClick={() => setDrawerOpen(false)} onClick={() => setDrawerOpen(false)}
> size="large"
<KeyboardArrowLeftIcon /> >
</IconButton> <KeyboardArrowLeftIcon />
) } </IconButton>
) }
<Typography variant="h1"> <Typography variant="h1">
{/* {title} */} {/* {title} */}
{chapter.name} {chapter.name}
@@ -230,6 +231,7 @@ export default function ReaderNavBar(props: IProps) {
aria-label="menu" aria-label="menu"
disableRipple disableRipple
onClick={() => history.push(`/manga/${manga.id}`)} onClick={() => history.push(`/manga/${manga.id}`)}
size="large"
> >
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
@@ -244,6 +246,7 @@ export default function ReaderNavBar(props: IProps) {
disableRipple disableRipple
disableFocusRipple disableFocusRipple
onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)} onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
size="large"
> >
{settingsCollapseOpen && <KeyboardArrowUpIcon />} {settingsCollapseOpen && <KeyboardArrowUpIcon />}
{!settingsCollapseOpen && <KeyboardArrowDownIcon />} {!settingsCollapseOpen && <KeyboardArrowDownIcon />}
@@ -297,9 +300,9 @@ export default function ReaderNavBar(props: IProps) {
</MenuItem> </MenuItem>
{/* <MenuItem value="SingleVertical"> {/* <MenuItem value="SingleVertical">
Vertical(WIP) Vertical(WIP)
</MenuItem> */} </MenuItem> */}
<MenuItem value="DoubleLTR"> <MenuItem value="DoubleLTR">
Double Page (LTR) Double Page (LTR)
@@ -341,33 +344,33 @@ export default function ReaderNavBar(props: IProps) {
</span> </span>
<div className={classes.navigationChapters}> <div className={classes.navigationChapters}>
{chapter.index > 1 {chapter.index > 1
&& ( && (
<Link <Link
style={{ gridArea: 'prev' }} style={{ gridArea: 'prev' }}
to={`/manga/${manga.id}/chapter/${chapter.index - 1}`} to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
>
<Button
variant="outlined"
startIcon={<KeyboardArrowLeftIcon />}
> >
<Button Prev. Chapter
variant="outlined" </Button>
startIcon={<KeyboardArrowLeftIcon />} </Link>
> )}
Prev. Chapter
</Button>
</Link>
)}
{chapter.index < chapter.chapterCount {chapter.index < chapter.chapterCount
&& ( && (
<Link <Link
style={{ gridArea: 'next' }} style={{ gridArea: 'next' }}
to={`/manga/${manga.id}/chapter/${chapter.index + 1}`} to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
>
<Button
variant="outlined"
endIcon={<KeyboardArrowRightIcon />}
> >
<Button Next Chapter
variant="outlined" </Button>
endIcon={<KeyboardArrowRightIcon />} </Link>
> )}
Next Chapter
</Button>
</Link>
)}
</div> </div>
</div> </div>
</div> </div>
@@ -382,6 +385,7 @@ export default function ReaderNavBar(props: IProps) {
disableRipple disableRipple
disableFocusRipple disableFocusRipple
onClick={() => setDrawerOpen(true)} onClick={() => setDrawerOpen(true)}
size="large"
> >
<KeyboardArrowRightIcon /> <KeyboardArrowRightIcon />
</IconButton> </IconButton>

41
src/screens/Settings.tsx
View File

@@ -6,26 +6,26 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import ListAltIcon from '@material-ui/icons/ListAlt'; import ListAltIcon from '@mui/icons-material/ListAlt';
import BackupIcon from '@material-ui/icons/Backup'; import BackupIcon from '@mui/icons-material/Backup';
import Brightness6Icon from '@material-ui/icons/Brightness6'; import Brightness6Icon from '@mui/icons-material/Brightness6';
import DnsIcon from '@material-ui/icons/Dns'; import DnsIcon from '@mui/icons-material/Dns';
import EditIcon from '@material-ui/icons/Edit'; import EditIcon from '@mui/icons-material/Edit';
import InfoIcon from '@material-ui/icons/Info'; import InfoIcon from '@mui/icons-material/Info';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Switch from '@material-ui/core/Switch'; import Switch from '@mui/material/Switch';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import Dialog from '@material-ui/core/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogActions from '@material-ui/core/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@material-ui/core/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText'; import DialogContentText from '@mui/material/DialogContentText';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import FavoriteIcon from '@material-ui/icons/Favorite'; import FavoriteIcon from '@mui/icons-material/Favorite';
import NavbarContext from '../context/NavbarContext'; import NavbarContext from '../context/NavbarContext';
import DarkTheme from '../context/DarkTheme'; import DarkTheme from '../context/DarkTheme';
import useLocalStorage from '../util/useLocalStorage'; import useLocalStorage from '../util/useLocalStorage';
@@ -106,6 +106,7 @@ export default function Settings() {
onClick={() => { onClick={() => {
handleDialogOpen(); handleDialogOpen();
}} }}
size="large"
> >
<EditIcon /> <EditIcon />
</IconButton> </IconButton>

3
src/screens/anime/Anime.tsx
View File

@@ -6,7 +6,8 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useState, useContext } from 'react'; import React, { useEffect, useState, useContext } from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles'; import { Theme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
import EpisodeCard from 'components/anime/EpisodeCard'; import EpisodeCard from 'components/anime/EpisodeCard';

6
src/screens/anime/AnimeSearchSingle.tsx
View File

@@ -6,9 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import AnimeGrid from 'components/anime/AnimeGrid'; import AnimeGrid from 'components/anime/AnimeGrid';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';

4
src/screens/anime/Player.tsx
View File

@@ -5,8 +5,8 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';

34
src/screens/manga/DownloadQueue.tsx
View File

@@ -10,21 +10,20 @@
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import PlayArrowIcon from '@material-ui/icons/PlayArrow'; import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@material-ui/icons/Pause'; import PauseIcon from '@mui/icons-material/Pause';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@material-ui/icons/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import client from 'util/client'; import client from 'util/client';
import { import {
DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDraggingStyle, DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDraggingStyle,
} from 'react-beautiful-dnd'; } from 'react-beautiful-dnd';
import { useTheme } from '@material-ui/core/styles'; import { useTheme, Palette } from '@mui/material/styles';
import { Palette } from '@material-ui/core/styles/createPalette'; import List from '@mui/material/List';
import List from '@material-ui/core/List'; import DragHandleIcon from '@mui/icons-material/DragHandle';
import DragHandleIcon from '@material-ui/icons/DragHandle'; import ListItem from '@mui/material/ListItem';
import ListItem from '@material-ui/core/ListItem'; import { ListItemIcon } from '@mui/material';
import { ListItemIcon } from '@material-ui/core'; import ListItemText from '@mui/material/ListItemText';
import ListItemText from '@material-ui/core/ListItemText';
const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws'); const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
@@ -34,7 +33,7 @@ const getItemStyle = (isDragging: boolean,
...draggableStyle, ...draggableStyle,
...(isDragging && { ...(isDragging && {
background: palette.type === 'dark' ? '#424242' : 'rgb(235,235,235)', background: palette.mode === 'dark' ? '#424242' : 'rgb(235,235,235)',
}), }),
}); });
@@ -66,13 +65,13 @@ export default function DownloadQueue() {
setAction(() => { setAction(() => {
if (status === 'Stopped') { if (status === 'Stopped') {
return ( return (
<IconButton onClick={toggleQueueStatus}> <IconButton onClick={toggleQueueStatus} size="large">
<PlayArrowIcon /> <PlayArrowIcon />
</IconButton> </IconButton>
); );
} }
return ( return (
<IconButton onClick={toggleQueueStatus}> <IconButton onClick={toggleQueueStatus} size="large">
<PauseIcon /> <PauseIcon />
</IconButton> </IconButton>
); );
@@ -122,14 +121,15 @@ export default function DownloadQueue() {
<ListItemText <ListItemText
primary={ primary={
`${item.chapter.name} | ` `${item.chapter.name} | `
+ ` (${item.progress * 100}%)` + ` (${item.progress * 100}%)`
+ ` => state: ${item.state}` + ` => state: ${item.state}`
} }
/> />
<IconButton <IconButton
onClick={() => { onClick={() => {
// deleteCategory(index); // deleteCategory(index);
}} }}
size="large"
> >
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>

5
src/screens/manga/Library.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { Tab, Tabs } from '@material-ui/core'; import { Tab, Tabs } from '@mui/material';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import MangaGrid from 'components/manga/MangaGrid'; import MangaGrid from 'components/manga/MangaGrid';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
@@ -129,7 +129,8 @@ export default function Library() {
textColor="primary" textColor="primary"
centered={!scrollableTabs} centered={!scrollableTabs}
variant={scrollableTabs ? 'scrollable' : 'fullWidth'} variant={scrollableTabs ? 'scrollable' : 'fullWidth'}
scrollButtons="on" scrollButtons
allowScrollButtonsMobile
> >
{tabDefines} {tabDefines}
</Tabs> </Tabs>

3
src/screens/manga/Manga.tsx
View File

@@ -6,7 +6,8 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect, useState, useContext } from 'react'; import React, { useEffect, useState, useContext } from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles'; import { Theme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
import ChapterCard from 'components/manga/ChapterCard'; import ChapterCard from 'components/manga/ChapterCard';

5
src/screens/manga/MangaExtensions.tsx
View File

@@ -7,8 +7,8 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { fromEvent } from 'file-selector'; import { fromEvent } from 'file-selector';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@mui/material/IconButton';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@mui/icons-material/Add';
import ExtensionCard from 'components/manga/ExtensionCard'; import ExtensionCard from 'components/manga/ExtensionCard';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
import client from 'util/client'; import client from 'util/client';
@@ -63,6 +63,7 @@ export default function MangaExtensions() {
onClick={ onClick={
() => document.getElementById('external-extension-file')?.click() () => document.getElementById('external-extension-file')?.click()
} }
size="large"
> >
<AddIcon /> <AddIcon />
</IconButton> </IconButton>

4
src/screens/manga/Reader.tsx
View File

@@ -5,8 +5,8 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom'; import { useHistory, useParams } from 'react-router-dom';
import HorizontalPager from 'components/manga/reader/pager/HorizontalPager'; import HorizontalPager from 'components/manga/reader/pager/HorizontalPager';

6
src/screens/manga/SearchSingle.tsx
View File

@@ -6,9 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import makeStyles from '@mui/styles/makeStyles';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import MangaGrid from 'components/manga/MangaGrid'; import MangaGrid from 'components/manga/MangaGrid';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';

2
src/screens/manga/SourceConfigure.tsx
View File

@@ -10,7 +10,7 @@ import NavbarContext from 'context/NavbarContext';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import client from 'util/client'; import client from 'util/client';
import CheckBoxPreference from 'components/manga/sourceConfiguration/CheckBoxPreference'; import CheckBoxPreference from 'components/manga/sourceConfiguration/CheckBoxPreference';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
function getPrefComponent(type: string) { function getPrefComponent(type: string) {
switch (type) { switch (type) {

9
src/screens/settings/About.tsx
View File

@@ -1,8 +1,9 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { CircularProgress, makeStyles } from '@material-ui/core'; import { CircularProgress } from '@mui/material';
import List from '@material-ui/core/List'; import makeStyles from '@mui/styles/makeStyles';
import ListItem from '@material-ui/core/ListItem'; import List from '@mui/material/List';
import ListItemText from '@material-ui/core/ListItemText'; import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import client from '../../util/client'; import client from '../../util/client';
import ListItemLink from '../../util/ListItemLink'; import ListItemLink from '../../util/ListItemLink';
import NavbarContext from '../../context/NavbarContext'; import NavbarContext from '../../context/NavbarContext';

6
src/screens/settings/Backup.tsx
View File

@@ -6,9 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useEffect } from 'react'; import React, { useContext, useEffect } from 'react';
import List from '@material-ui/core/List'; import List from '@mui/material/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import { fromEvent } from 'file-selector'; import { fromEvent } from 'file-selector';
import makeToast from 'components/Toast'; import makeToast from 'components/Toast';
import ListItemLink from '../../util/ListItemLink'; import ListItemLink from '../../util/ListItemLink';

36
src/screens/settings/Categories.tsx
View File

@@ -15,27 +15,26 @@ import {
ListItemText, ListItemText,
ListItemIcon, ListItemIcon,
IconButton, IconButton,
} from '@material-ui/core'; } from '@mui/material';
import { import {
DragDropContext, Droppable, Draggable, DropResult, DraggingStyle, NotDraggingStyle, DragDropContext, Droppable, Draggable, DropResult, DraggingStyle, NotDraggingStyle,
} from 'react-beautiful-dnd'; } from 'react-beautiful-dnd';
import DragHandleIcon from '@material-ui/icons/DragHandle'; import DragHandleIcon from '@mui/icons-material/DragHandle';
import EditIcon from '@material-ui/icons/Edit'; import EditIcon from '@mui/icons-material/Edit';
import { useTheme } from '@material-ui/core/styles'; import { useTheme, Palette } from '@mui/material/styles';
import Fab from '@material-ui/core/Fab'; import Fab from '@mui/material/Fab';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@material-ui/icons/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import Button from '@material-ui/core/Button'; import Button from '@mui/material/Button';
import TextField from '@material-ui/core/TextField'; import TextField from '@mui/material/TextField';
import Dialog from '@material-ui/core/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogActions from '@material-ui/core/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@material-ui/core/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import NavbarContext from 'context/NavbarContext'; import NavbarContext from 'context/NavbarContext';
import client from 'util/client'; import client from 'util/client';
import { Palette } from '@material-ui/core/styles/createPalette';
const getItemStyle = (isDragging: boolean, const getItemStyle = (isDragging: boolean,
draggableStyle: DraggingStyle | NotDraggingStyle | undefined, palette: Palette) => ({ draggableStyle: DraggingStyle | NotDraggingStyle | undefined, palette: Palette) => ({
@@ -43,7 +42,7 @@ const getItemStyle = (isDragging: boolean,
...draggableStyle, ...draggableStyle,
...(isDragging && { ...(isDragging && {
background: palette.type === 'dark' ? '#424242' : 'rgb(235,235,235)', background: palette.mode === 'dark' ? '#424242' : 'rgb(235,235,235)',
}), }),
}); });
@@ -176,6 +175,7 @@ export default function Categories() {
onClick={() => { onClick={() => {
handleEditDialogOpen(index); handleEditDialogOpen(index);
}} }}
size="large"
> >
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
@@ -183,6 +183,7 @@ export default function Categories() {
onClick={() => { onClick={() => {
deleteCategory(index); deleteCategory(index);
}} }}
size="large"
> >
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
@@ -243,6 +244,5 @@ export default function Categories() {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</> </>
); );
} }

2
src/util/ListItemLink.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import ListItem, { ListItemProps } from '@material-ui/core/ListItem'; import ListItem, { ListItemProps } from '@mui/material/ListItem';
export default function ListItemLink(props: ListItemProps<'a', { button?: true }>) { export default function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading

3490
yarn.lock
View File

File diff suppressed because it is too large Load Diff