Compare commits

..

1 Commits

Author SHA1 Message Date
58a91a937b
fiddling with upgrading react
All checks were successful
test and deploy / Build & Unit Test (push) Successful in 53s
test and deploy / Package & Push Container (push) Has been skipped
2024-10-11 09:02:12 +01:00
30 changed files with 1314 additions and 1037 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 243 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 213 KiB

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 189 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View File

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

962
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -19,13 +19,16 @@
}, },
"homepage": "https://github.com/Sarsoo/Mixonomer#readme", "homepage": "https://github.com/Sarsoo/Mixonomer#readme",
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.3", "@emotion/react": "^11.13.3",
"@material-ui/icons": "^4.11.2", "@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", "axios": "^1.7.2",
"chart.js": "^4.4.3", "chart.js": "^4.4.3",
"react": "^17.0.2", "react": "^18.3.1",
"react-dom": "^17.0.2", "react-dom": "^18.3.1",
"react-router-dom": "^5.2.0" "react-router-dom": "^6.26.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.22.10", "@babel/cli": "^7.22.10",

1018
poetry.lock generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom"; 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"; import Lock from "./Lock.js";

View File

@ -2,7 +2,7 @@ import React, { Component } from "react";
const axios = require('axios'); const axios = require('axios');
import showMessage from "../Toast.js" 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 * Admin functions card component

View File

@ -1,8 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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 { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@mui/styles';
import showMessage from "../Toast.js" import showMessage from "../Toast.js"

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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" import showMessage from "../Toast.js"

View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; 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 * Into card for the home page

View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; 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 NotFound from "./Error/NotFound.js";
import Progress from "./Util/circularProgress.js"; import Progress from "./Util/circularProgress.js";
@ -7,18 +7,20 @@ import showMessage from "./Toast.js";
import GlobalTheme from './Theme.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 MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import HomeIcon from '@material-ui/icons/Home'; 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'); const axios = require('axios');
import Playlists from './Playlist/AllPlaylistsRouter';
const LazyIndex = React.lazy(() => import(/* webpackChunkName: "index" */ "./Index/Index")) const LazyIndex = React.lazy(() => import(/* webpackChunkName: "index" */ "./Index/Index"))
const LazyPlaylists = React.lazy(() => import(/* webpackChunkName: "allPlaylists" */ "./Playlist/AllPlaylistsRouter")) const LazyPlaylists = React.lazy(() => import(/* webpackChunkName: "allPlaylists" */ "./Playlist/AllPlaylistsRouter"))
const LazyPlaylistView = React.lazy(() => import(/* webpackChunkName: "playlist" */ "./Playlist/View/PlaylistRouter")) const LazyPlaylistView = React.lazy(() => import(/* webpackChunkName: "playlist" */ "./Playlist/View/PlaylistRouter"))
@ -89,110 +91,117 @@ class MusicTools extends Component {
render(){ render(){
return ( return (
<Router> (<Router>
<ThemeProvider theme={GlobalTheme}> {/*<StyledEngineProvider injectFirst>*/}
<ThemeProvider theme={GlobalTheme}>
{/* TOP APP BAR */} {/* TOP APP BAR */}
<AppBar position="sticky"> <AppBar position="sticky">
<Toolbar> <Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu" onClick={(e) => this.setOpen(true)}> <IconButton
<MenuIcon /> edge="start"
</IconButton> color="inherit"
<Typography variant="h6"> aria-label="menu"
<Link to='/app/playlists' style={{textDecoration: 'none'}}> onClick={(e) => this.setOpen(true)}
<div className="title-small"> size="large">
<h1 >Mixonomer</h1> <MenuIcon />
</div> </IconButton>
</Link> <Typography variant="h6">
</Typography> <Link to='/app/playlists' style={{textDecoration: 'none'}}>
</Toolbar> <div className="title-small">
</AppBar> <h1 >Mixonomer</h1>
</div>
</Link>
</Typography>
</Toolbar>
</AppBar>
{/* MENU DRAWER */} {/* MENU DRAWER */}
<Drawer <Drawer
variant="persistent" variant="persistent"
anchor="left" anchor="left"
open={this.state.drawerOpen} open={this.state.drawerOpen}
onClose={(e) => this.setOpen(false)} onClose={(e) => this.setOpen(false)}
>
<div>
<IconButton onClick={(e) => this.setOpen(false)}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<div
role="presentation"
onClick={(e) => this.setOpen(false)}
onKeyDown={(e) => this.setOpen(false)}
> >
<List> <div>
{/* PLAYLISTS */} <IconButton onClick={(e) => this.setOpen(false)} size="large">
<ListItem button key="playlists" component={Link} to='/app/playlists'> <ChevronLeftIcon />
<ListItemIcon><QueueMusic /></ListItemIcon> </IconButton>
<ListItemText primary="Playlists" /> </div>
</ListItem> <Divider />
<div
{/* TAGS */} role="presentation"
<ListItem button key="tags" component={Link} to='/app/tags'> onClick={(e) => this.setOpen(false)}
<ListItemIcon><GroupWork /></ListItemIcon> onKeyDown={(e) => this.setOpen(false)}
<ListItemText primary="Tags" /> >
</ListItem> <List>
{/* PLAYLISTS */}
{/* SETTINGS */} <ListItem button key="playlists" component={Link} to='/app/playlists'>
<ListItem button key="settings" component={Link} to='/app/settings/password'> <ListItemIcon><QueueMusic /></ListItemIcon>
<ListItemIcon><Build /></ListItemIcon> <ListItemText primary="Playlists" />
<ListItemText primary="Settings" />
</ListItem>
{/* ADMIN */}
{ this.state.type == 'admin' &&
<ListItem button key="admin" component={Link} to='/app/admin/lock'>
<ListItemIcon><AccountCircle /></ListItemIcon>
<ListItemText primary="Admin" />
</ListItem> </ListItem>
}
<ListItem button key="privacy" onClick={(e) => { window.location.href = '/privacy' }}> {/* TAGS */}
<ListItemIcon><Policy /></ListItemIcon> <ListItem button key="tags" component={Link} to='/app/tags'>
<ListItemText primary="Privacy" /> <ListItemIcon><GroupWork /></ListItemIcon>
</ListItem> <ListItemText primary="Tags" />
</ListItem>
{/* LOGOUT */} {/* SETTINGS */}
<ListItem button key="logout" onClick={(e) => { window.location.href = '/auth/logout' }}> <ListItem button key="settings" component={Link} to='/app/settings/password'>
<ListItemIcon><KeyboardBackspace /></ListItemIcon> <ListItemIcon><Build /></ListItemIcon>
<ListItemText primary="Logout" /> <ListItemText primary="Settings" />
</ListItem> </ListItem>
{/* SARSOO.XYZ */} {/* ADMIN */}
<ListItem button key="sarsoo.xyz" onClick={(e) => { window.location.href = 'https://sarsoo.xyz' }}> { this.state.type == 'admin' &&
<ListItemIcon><ExitToApp /></ListItemIcon> <ListItem button key="admin" component={Link} to='/app/admin/lock'>
<ListItemText primary="sarsoo.xyz" /> <ListItemIcon><AccountCircle /></ListItemIcon>
</ListItem> <ListItemText primary="Admin" />
</List> </ListItem>
}
<ListItem button key="privacy" onClick={(e) => { window.location.href = '/privacy' }}>
<ListItemIcon><Policy /></ListItemIcon>
<ListItemText primary="Privacy" />
</ListItem>
{/* LOGOUT */}
<ListItem button key="logout" onClick={(e) => { window.location.href = '/auth/logout' }}>
<ListItemIcon><KeyboardBackspace /></ListItemIcon>
<ListItemText primary="Logout" />
</ListItem>
{/* SARSOO.XYZ */}
<ListItem button key="sarsoo.xyz" onClick={(e) => { window.location.href = 'https://sarsoo.xyz' }}>
<ListItemIcon><ExitToApp /></ListItemIcon>
<ListItemText primary="sarsoo.xyz" />
</ListItem>
</List>
</div>
</Drawer>
{/* ROUTER SWITCH */}
<div className="full-width">
<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> </div>
</Drawer> </ThemeProvider>
{/*</StyledEngineProvider>*/}
{/* ROUTER SWITCH */} </Router>)
<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>
</div>
</ThemeProvider>
</Router>
); );
} }

View File

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

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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" import showMessage from "../Toast.js"

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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" import showMessage from "../Toast.js"

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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" import showMessage from "../Toast.js"

View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom"; 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 ChangePassword from "./ChangePassword.js";
import SpotifyLink from "./SpotifyLink.js"; import SpotifyLink from "./SpotifyLink.js";

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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" import showMessage from "../Toast.js"

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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" import showMessage from "../Toast.js"

View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; 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'); const axios = require('axios');
@ -118,7 +118,7 @@ function TagGrid(props){
function TagCard(props){ function TagCard(props){
return ( return (
<Grid item xs> <Grid item xs>
<Card className="card"> <Card>
<CardContent> <CardContent>
{/* TAG NAME */} {/* TAG NAME */}

View File

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

View File

@ -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: { root: {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -22,7 +22,7 @@ let GlobalTheme = createTheme({
spacing: 5 spacing: 5
}, },
palette: { palette: {
type: 'dark', mode: 'dark',
// https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0 // https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0
primary: { primary: {
main: '#907FA4', main: '#907FA4',
@ -41,7 +41,7 @@ let GlobalTheme = createTheme({
status: { status: {
danger: 'orange', danger: 'orange',
} }
}); }));
GlobalTheme = responsiveFontSizes(GlobalTheme); GlobalTheme = responsiveFontSizes(GlobalTheme);
export default GlobalTheme; export default GlobalTheme;

View File

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

View File

@ -1,8 +1,20 @@
import React from "react"; 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"; 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 // 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} />);

View File

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