fiddling with upgrading react

music/templates/login.html

@@ -5,13 +5,14 @@
 <div class="card">
     <form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()" style="display: grid; gap: 30px;">
 
-        <h1 style="margin:0; text-align: center">Login</h1>
         <div>
-            <input type="text" name="username" class="full-width" placeholder="Username" />
+            <p>Username</p>
+            <input type="text" name="username" class="full-width" />
         </div>
 
         <div>
-            <input type="password" name="password" class="full-width" placeholder="Password" />
+            <p>Password</p>
+            <input type="password" name="password" class="full-width" />
         </div>
 
         <p id="status" style="display: none; color: red" class="center-text"></p>

package.json

@@ -19,13 +19,16 @@
   },
   "homepage": "https://github.com/Sarsoo/Mixonomer#readme",
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.3",
+    "@mui/material": "^6.1.3",
+    "@mui/styles": "^6.1.3",
     "axios": "^1.7.2",
     "chart.js": "^4.4.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",

src/js/Admin/AdminRouter.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Route, Link, Switch } from "react-router-dom";
-import { Paper, Tabs, Tab} from '@material-ui/core';
+import { Paper, Tabs, Tab} from '@mui/material';
 
 
 import Lock from "./Lock.js";

src/js/Admin/Functions.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import showMessage from "../Toast.js"
-import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@material-ui/core";
+import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@mui/material";
 
 /**
  * Admin functions card component

src/js/Admin/Lock.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, Button, CardActions, CardContent, Typography, Grid } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 import showMessage from "../Toast.js"
 

src/js/Admin/Tasks.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../Toast.js"
 

src/js/Index/Index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { Card, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, CardContent, Typography, Grid } from '@mui/material';
 
 /**
  * Into card for the home page

src/js/MusicTools.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, Link, Switch } from "react-router-dom";
 
 import NotFound from "./Error/NotFound.js";
 import Progress from "./Util/circularProgress.js";
@@ -7,18 +7,20 @@ import showMessage from "./Toast.js";
 
 import GlobalTheme from './Theme.js';
 
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/styles';
 
-import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@material-ui/core';
+import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@mui/material';
 
-import MenuIcon from '@material-ui/icons/Menu';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import HomeIcon from '@material-ui/icons/Home';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import HomeIcon from '@mui/icons-material/Home';
 
-import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork, Policy } from '@material-ui/icons'
+import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork, Policy } from '@mui/icons-material'
 
 const axios = require('axios');
 
+import Playlists from './Playlist/AllPlaylistsRouter';
+
 const LazyIndex = React.lazy(() => import(/* webpackChunkName: "index" */ "./Index/Index"))
 const LazyPlaylists = React.lazy(() => import(/* webpackChunkName: "allPlaylists" */ "./Playlist/AllPlaylistsRouter"))
 const LazyPlaylistView = React.lazy(() => import(/* webpackChunkName: "playlist" */ "./Playlist/View/PlaylistRouter"))
@@ -89,14 +91,20 @@ class MusicTools extends Component {
 
     render(){
         return (
-            <Router>
+            (<Router>
+                {/*<StyledEngineProvider injectFirst>*/}
                     <ThemeProvider theme={GlobalTheme}>
 
                         {/* TOP APP BAR */}
 
                         <AppBar position="sticky">
                             <Toolbar>
-                            <IconButton edge="start" color="inherit" aria-label="menu" onClick={(e) => this.setOpen(true)}>
+                                <IconButton
+                                    edge="start"
+                                    color="inherit"
+                                    aria-label="menu"
+                                    onClick={(e) => this.setOpen(true)}
+                                    size="large">
                                 <MenuIcon />
                                 </IconButton>
                                 <Typography variant="h6">
@@ -118,7 +126,7 @@ class MusicTools extends Component {
                             onClose={(e) => this.setOpen(false)}
                         >
                             <div>
-                            <IconButton onClick={(e) => this.setOpen(false)}>
+                                <IconButton onClick={(e) => this.setOpen(false)} size="large">
                                     <ChevronLeftIcon />
                                 </IconButton>
                             </div>
@@ -178,21 +186,22 @@ class MusicTools extends Component {
                         {/* ROUTER SWITCH */}
 
                         <div className="full-width">
-                        <Switch>
-                            <React.Suspense fallback={<Progress/>}>
-                                <Route path="/app" exact component={LazyIndex} />
-                                <Route path="/app/playlists" component={LazyPlaylists} />
-                                <Route path="/app/tags" component={LazyTags} />
-                                <Route path="/app/tag/:tag_id" component={LazyTag} />
-                                <Route path="/app/settings" component={LazySettings} />
-                                { this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }
-                                <Route path='/app/playlist/:name' component={LazyPlaylistView} />
-                            </React.Suspense>
-                            <Route component={NotFound} />
-                        </Switch>
+                            <Routes>
+                                {/*<React.Suspense fallback={<Progress/>}>*/}
+                                {/*    <Route path="/app" exact component={LazyIndex} />*/}
+                                    <Route path="/app/playlists" element={<Playlists/>} />
+                                    {/*<Route path="/app/tags" component={LazyTags} />*/}
+                                    {/*<Route path="/app/tag/:tag_id" component={LazyTag} />*/}
+                                    {/*<Route path="/app/settings" component={LazySettings} />*/}
+                                    {/*{ this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }*/}
+                                    {/*<Route path='/app/playlist/:name' component={LazyPlaylistView} />*/}
+                                {/*</React.Suspense>*/}
+                                {/*<Route component={NotFound} />*/}
+                            </Routes>
                         </div>
                     </ThemeProvider>
-            </Router>
+                {/*</StyledEngineProvider>*/}
+            </Router>)
         );
     }
 

src/js/Playlist/AllPlaylistsRouter.js

@@ -14,10 +14,10 @@ class Playlists extends Component {
                 <Switch>
 
                     {/* PLAYLIST LIST */}
-                    <Route exact path={`${this.props.match.url}/`} component={PlaylistsView} />
+                    <Route exact path={`${this.props.match.url}/`} element={PlaylistsView} />
 
                     {/* NEW PLAYLIST */}
-                    <Route path={`${this.props.match.url}/new`} component={NewPlaylist} />
+                    <Route path={`${this.props.match.url}/new`} element={NewPlaylist} />
                 </Switch>
             </div>
         );

src/js/Playlist/New.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../Toast.js"
 

src/js/Playlist/PlaylistsList.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
+import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@mui/material';
 const axios = require('axios');
 
 import showMessage from "../Toast.js"
@@ -137,8 +137,8 @@ function PlaylistGrid(props){
         <Grid container 
                 spacing={3} 
                 direction="row"
-                justifyContent="center"
-                alignItems="stretch"
+                justifyContent="flex-start"
+                alignItems="flex-start"
                 style={{padding: 24}}>
 
             {/* BUTTON BLOCK (NEW/RUN ALL) */}
@@ -175,7 +175,7 @@ function PlaylistGrid(props){
 function PlaylistCard(props){
     return (
         <Grid item xs>
-            <Card className="card">
+            <Card>
 
                 {/* NAME TITLE */}
                 <CardContent>

src/js/Playlist/View/Count.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, Button, CardActions, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../../Toast.js"
 
@@ -77,7 +77,7 @@ export class Count extends Component {
     render() {
         return (
             <div style={{margin: 'auto', marginTop: '20px'}}>
-            <Card align="center" className="card">
+            <Card align="center">
                 <CardContent>
                     <Grid container>
 

src/js/Playlist/View/Edit.js

@@ -2,9 +2,9 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import { Card, Button, FormControl, TextField, InputLabel, Select, FormControlLabel, 
-    CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@material-ui/core';
-import { Delete } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+    CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@mui/material';
+import { Delete } from '@mui/icons-material';
+import { makeStyles } from '@mui/styles';
 
 import showMessage from "../../Toast.js";
 import Progress from "../../Util/circularProgress.js";
@@ -367,7 +367,7 @@ export class Edit extends Component{
 
         const table = (
             <div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
-            <Card align="center" className="card">
+            <Card align="center">
                 <CardContent>
 
                     {/* PLAYLIST NAME TITLE */}

src/js/Playlist/View/PlaylistRouter.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
-import { Route, Link, Switch } from "react-router-dom";
-import { Paper, Tabs, Tab} from '@material-ui/core';
+import { Route, Link, Routes } from "react-router-dom";
+import { Paper, Tabs, Tab} from '@mui/material';
 
 
 import {Edit} from "./Edit.js";
@@ -49,14 +49,14 @@ class View extends Component{
                     <Tab label="Count" component={Link} to={`${this.props.match.url}/count`} />
                 </Tabs>
             </Paper>
-            <Switch>
+            <Routes>
 
                 {/* VIEW/EDIT */}
                 <Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} />
                 
                 {/* STATS */}
                 <Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
-            </Switch>
+            </Routes>
             </div>
         );
     }

src/js/Settings/ChangePassword.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@material-ui/core";
+import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@mui/material";
 
 import showMessage from "../Toast.js"
 

src/js/Settings/LastFM.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@material-ui/core";
+import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@mui/material";
 
 import showMessage from "../Toast.js"
 

src/js/Settings/SettingsRouter.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Route, Link, Switch } from "react-router-dom";
-import { Paper, Tabs, Tab} from '@material-ui/core';
+import { Paper, Tabs, Tab} from '@mui/material';
 
 import ChangePassword from "./ChangePassword.js";
 import SpotifyLink from "./SpotifyLink.js";

src/js/Settings/SpotifyLink.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CardContent, CardActions, Typography } from "@material-ui/core";
+import { Card, Button, CardContent, CardActions, Typography } from "@mui/material";
 
 import showMessage from "../Toast.js"
 

src/js/Tag/New.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, TextField, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Card, Button, TextField, CardActions, CardContent, Typography, Grid } from '@mui/material';
 
 import showMessage from "../Toast.js"
 

src/js/Tag/TagList.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
+import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@mui/material';
 
 const axios = require('axios');
 
@@ -118,7 +118,7 @@ function TagGrid(props){
 function TagCard(props){
     return (
         <Grid item xs>
-            <Card className="card">
+            <Card>
                 <CardContent>
 
                     {/* TAG NAME */}

src/js/Tag/View.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, ButtonGroup, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
-import { Delete, ExitToApp } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, Button, ButtonGroup, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@mui/material';
+import { Delete, ExitToApp } from '@mui/icons-material';
+import { makeStyles } from '@mui/styles';
 
 import showMessage from "../Toast.js";
 import Progress from "../Util/circularProgress.js"
@@ -371,7 +371,7 @@ class TagView extends Component{
 
         const table = (
             <div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
-            <Card align="center" className="card">
+            <Card align="center">
                 <CardContent>
 
                     {/* TAG NAME TITLE */}

src/js/Theme.js

@@ -1,6 +1,6 @@
-import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';
+import { createTheme, adaptV4Theme, responsiveFontSizes } from '@mui/material/styles';
 
-let GlobalTheme = createTheme({
+let GlobalTheme = createTheme(adaptV4Theme({
     root: {
         display: 'flex',
         flexDirection: 'column',
@@ -22,7 +22,7 @@ let GlobalTheme = createTheme({
         spacing: 5
     },
     palette: {
-        type: 'dark',
+        mode: 'dark',
         // https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0
         primary: {
             main: '#907FA4',
@@ -41,7 +41,7 @@ let GlobalTheme = createTheme({
     status: {
         danger: 'orange',
     }
-});
+}));
 GlobalTheme = responsiveFontSizes(GlobalTheme);
 
 export default GlobalTheme;

src/js/Util/circularProgress.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, CircularProgress } from '@material-ui/core';
+import { Grid, CircularProgress } from '@mui/material';
 
 function Progress (props) {
     return (

src/js/app.js

@@ -1,8 +1,20 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider, StyledEngineProvider, makeStyles } from '@mui/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
 
 import MusicTools from "./MusicTools";
 
+const theme = createTheme();
+
+const useStyles = makeStyles((theme) => {
+    root: {
+        // some CSS that accesses the theme
+    }
+});
+
 // ROOT file for bootstrapping the Mixonomer component and app
 
-ReactDOM.render(<MusicTools />, document.getElementById('react'));
+// ReactDOM.render(<MusicTools theme={theme} />, document.getElementById('react'));
+const root = createRoot(document.getElementById('react')); // createRoot(container!) if you use TypeScript
+root.render(<MusicTools theme={theme} />);

src/scss/style.scss

@@ -1,6 +1,6 @@
 $font-stack: 'Roboto', arial; 
-$background-colour: #2b2b2b;
-$ui-colour: #3c3c3c;
+$background-colour: #202124;
+$ui-colour: #131313;
 $light-ui: #575757;
 $text-colour: white;
 $ui-element: #505050;
@@ -48,7 +48,7 @@ p {
 }
 
 .button {
-	background-color: #907FA4;
+	background-color: $ui-element;
 	color: $text-colour;
 
 	display: inline-block;
@@ -79,7 +79,7 @@ p {
 input[type=text], input[type=password], input[type=number], select {
 	padding: 15px;
 	background-color: $ui-element;
-	border-color: #907FA4;
+	border: black;
 	border-radius: 3px;
 	color: white;
 }
@@ -193,19 +193,31 @@ input[type=text], input[type=password], input[type=number], select {
 }
 
 .card {
-	background-color: $ui-colour !important;
-	box-shadow: 5px 5px 0 #0f0f0f !important;
-	padding: 15px !important;
-	margin: 5px !important;
-	transition: box-shadow 0.5s;
-	border-style: solid !important;
-	border-color: black !important;
-	border-width: 5px !important;
-}
+	/*background-color: grey;*/
+	background-color: $ui-colour;
+	box-shadow: 4px 4px 8px black;
+	padding: 20px;
+	//margin: calc($pad-px / 2);
+	/*border-radius: 3px;*/
 
-.card:hover {
-	box-shadow: none;
-	offset: 4px 4px;
+	h1 {
+		text-align: center;
+		color: $text-colour;
+		text-shadow: 1px 1px 2px #4f4f4f;
+	}
+
+	img {
+		width: 100%;
+		border-radius: 3px;
+		margin-bottom: 8px;	
+		box-shadow: 2px 2px 2px black;
+		margin-left: auto;
+    	margin-right: auto;
+	}
+
+	p {
+		margin-top: 20px;
+	}
 }
 
 ul.navbar {