centered loading circle, pastel theme

.vscode/launch.json

@@ -19,6 +19,18 @@
                 "--no-debugger"
             ],
             "jinja": true
+        },
+        {
+            "command": "npm run devbuild",
+            "name": "Js: Build Dev",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "command": "npm run build",
+            "name": "Js: Build Release",
+            "request": "launch",
+            "type": "node-terminal"
         }
     ]
 }

src/js/Admin/Functions.js

@@ -54,7 +54,7 @@ class Functions extends Component {
                         <Typography variant="h4" color="textPrimary">Admin Functions</Typography>
                     </CardContent>
                     <CardActions>
-                        <ButtonGroup variant="contained" color="primary" className="full-width">
+                        <ButtonGroup variant="contained" color="secondary" className="full-width">
 
                             {/* RUN ALL PLAYLISTS BUTTON */}
                             <Button className="full-width button" onClick={this.runAllUsers}>Run All Users</Button>

src/js/Maths/PieChart.js

@@ -3,13 +3,21 @@ import { Chart, ArcElement, DoughnutController, Legend, Title, Tooltip } from 'c
 
 Chart.register(ArcElement, DoughnutController, Legend, Title, Tooltip);
 
-var pieColours = ['rgb(55, 61, 255)', //blue
+// var pieColours = ['rgb(55, 61, 255)', //blue
-'rgb(255, 55, 61)', //red
+// 'rgb(255, 55, 61)', //red
-'rgb(7, 211, 4)', //green
+// 'rgb(7, 211, 4)', //green
-'rgb(228, 242, 31)', //yellow
+// 'rgb(228, 242, 31)', //yellow
-'rgb(31, 242, 221)', //light blue
+// 'rgb(31, 242, 221)', //light blue
-'rgb(242, 31, 235)', //pink
+// 'rgb(242, 31, 235)', //pink
-'rgb(242, 164, 31)'];
+// 'rgb(242, 164, 31)'];
+
+var pieColours = ['rgb(144, 127, 164)',
+  'rgb(166, 214, 214)',
+  'rgb(237, 237, 208)',
+  'rgb(252, 209, 209)',
+  'rgb(222, 137, 113)',
+  'rgb(59, 83, 96)'
+];
 
 /**
  * Pie chart component using Chart.js

src/js/MusicTools.js

@@ -2,21 +2,20 @@ import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
 
 import NotFound from "./Error/NotFound.js";
-
+import Progress from "./Util/circularProgress.js";
-import showMessage from "./Toast.js"
+import showMessage from "./Toast.js";
 
 import GlobalTheme from './Theme.js';
 
-import { Typography, CircularProgress } from '@material-ui/core';
 import { ThemeProvider } from '@material-ui/core/styles';
 
-import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText} from '@material-ui/core';
+import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@material-ui/core';
 
 import MenuIcon from '@material-ui/icons/Menu';
-
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import HomeIcon from '@material-ui/icons/Home';
-import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork } from '@material-ui/icons'
+
+import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork } from '@material-ui/icons'
 
 const axios = require('axios');
 
@@ -177,7 +176,7 @@ class MusicTools extends Component {
 
                     <div className="full-width">
                         <Switch>
-                            <React.Suspense fallback={<LoadingMessage/>}>
+                            <React.Suspense fallback={<Progress/>}>
                                 <Route path="/app" exact component={LazyIndex} />
                                 <Route path="/app/playlists" component={LazyPlaylists} />
                                 <Route path="/app/tags" component={LazyTags} />
@@ -196,8 +195,4 @@ class MusicTools extends Component {
 
 }
 
-function LoadingMessage(props) {
-    return <CircularProgress/>;
-}
-
 export default MusicTools;

src/js/Playlist/New.js

@@ -155,7 +155,7 @@ class NewPlaylist extends Component {
 
                 {/* SUBMIT BUTTON */}
                 <CardActions>
-                    <Button variant="contained" color="primary" className="full-width" onClick={this.handleSubmit}>Create</Button>
+                    <Button variant="contained" color="secondary" className="full-width" onClick={this.handleSubmit}>Create</Button>
                 </CardActions>
             </Card>
             </div>

src/js/Playlist/PlaylistsList.js

@@ -1,11 +1,10 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Typography, Card, Grid, CircularProgress } from '@material-ui/core';
+import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
 const axios = require('axios');
 
 import showMessage from "../Toast.js"
+import Progress from "../Util/circularProgress.js";
 
 /**
  * Top-level object for hosting playlist card grid with new/run all buttons
@@ -124,7 +123,7 @@ class PlaylistsView extends Component {
                             handleDeletePlaylist={this.handleDeletePlaylist}
                             handleRunAll={this.handleRunAll}/>;
 
-        return this.state.isLoading ? <CircularProgress /> : grid;
+        return this.state.isLoading ? <Progress /> : grid;
     }
 }
 
@@ -140,7 +139,7 @@ function PlaylistGrid(props){
                 direction="row"
                 justify="flex-start"
                 alignItems="flex-start"
-                style={{padding: '24px'}}>
+                style={{padding: 24}}>
 
             {/* BUTTON BLOCK (NEW/RUN ALL) */}
             <Grid item xs={12} sm={6} md={2}>
@@ -183,12 +182,19 @@ function PlaylistCard(props){
                     <Typography variant="h4" component="h2">
                     { props.playlist.name }
                     </Typography>
+
+                    {"lastfm_stat_percent" in props.playlist && 
+                    props.playlist.lastfm_stat_percent != null && 
+                        <Typography component="h6" style={{color: "#b3b3b3"}}>
+                            { Math.round(props.playlist.lastfm_stat_percent) }%
+                        </Typography>
+                    }
                 </CardContent>
 
                 {/* BUTTONS */}
                 <CardActions>
                     <ButtonGroup 
-                    color="primary" 
+                    color="secondary" 
                     variant="contained">
 
                         {/* VIEW */}

src/js/Playlist/View/Edit.js

@@ -1,12 +1,13 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, FormControlLabel, 
+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';
 
 import showMessage from "../../Toast.js";
+import Progress from "../../Util/circularProgress.js";
 
 var thisMonth = [
     'january',
@@ -467,7 +468,7 @@ export class Edit extends Component{
                             {/* SHUFFLE */}
                             <FormControlLabel
                                 control={
-                                <Switch color="primary" name="shuffle" checked={this.state.shuffle} onChange={this.handleCheckChange} />
+                                <Switch color="secondary" name="shuffle" checked={this.state.shuffle} onChange={this.handleCheckChange} />
                                 }
                                 labelPlacement="bottom"
                                 label="Shuffle"/>
@@ -475,7 +476,7 @@ export class Edit extends Component{
                             {/* RECOMMENDATIONS */}
                             <FormControlLabel
                                 control={
-                                <Switch color="primary" checked={this.state.include_recommendations} name="include_recommendations" onChange={this.handleCheckChange} />
+                                <Switch color="secondary" checked={this.state.include_recommendations} name="include_recommendations" onChange={this.handleCheckChange} />
                                 }
                                 labelPlacement="bottom"
                                 label="Recommendations"/>
@@ -483,7 +484,7 @@ export class Edit extends Component{
                             {/* LIBRARY TRACKS */}
                             <FormControlLabel
                                 control={
-                                <Switch color="primary" checked={this.state.include_library_tracks} name="include_library_tracks" onChange={this.handleCheckChange} />
+                                <Switch color="secondary" checked={this.state.include_library_tracks} name="include_library_tracks" onChange={this.handleCheckChange} />
                                 }
                                 labelPlacement="bottom"
                                 label="Library Tracks"/>
@@ -556,7 +557,7 @@ export class Edit extends Component{
                             {/* THIS MONTH */}
                             <FormControlLabel
                                 control={
-                                <Switch color="primary" checked={this.state.add_this_month} name="add_this_month" onChange={this.handleCheckChange} />
+                                <Switch color="secondary" checked={this.state.add_this_month} name="add_this_month" onChange={this.handleCheckChange} />
                                 }
                                 label="This Month"
                                 labelPlacement="bottom"
@@ -565,7 +566,7 @@ export class Edit extends Component{
                             {/* LAST MONTH */}
                             <FormControlLabel
                                 control={
-                                <Switch color="primary" checked={this.state.add_last_month} name="add_last_month" onChange={this.handleCheckChange} />
+                                <Switch color="secondary" checked={this.state.add_last_month} name="add_last_month" onChange={this.handleCheckChange} />
                                 }
                                 label="Last Month"
                                 labelPlacement="bottom"
@@ -608,7 +609,7 @@ export class Edit extends Component{
         </div>
         );
 
-        return this.state.isLoading ? <CircularProgress /> : table;
+        return this.state.isLoading ? <Progress /> : table;
     }
 
 }

src/js/Settings/ChangePassword.js

@@ -140,7 +140,7 @@ class ChangePassword extends Component {
                         
                         {/* SUBMIT BUTTON */}
                         <CardActions>
-                            <Button type="submit" variant="contained" className="full-width" onClick={this.runStats}>Change</Button>
+                            <Button color="secondary" type="submit" variant="contained" className="full-width" onClick={this.runStats}>Change</Button>
                         </CardActions>
                     </form>
                 </Card>

src/js/Settings/LastFM.js

@@ -107,7 +107,7 @@ class LastFM extends Component {
 
                         {/* SUBMIT BUTTON */}
                         <CardActions>
-                            <Button type="submit" variant="contained" className="full-width">Save</Button>
+                            <Button color="secondary" type="submit" variant="contained" className="full-width">Save</Button>
                         </CardActions>
                     </form>
                 </Card>

src/js/Settings/SpotifyLink.js

@@ -65,7 +65,7 @@ class SpotifyLink extends Component {
  * @returns Button component
  */
 function AuthButton(props) {
-    return <Button component='a' variant="contained" className="full-width" href="/auth/spotify">Auth</Button>;
+    return <Button color="secondary" component='a' variant="contained" className="full-width" href="/auth/spotify">Auth</Button>;
 }
 
 /**
@@ -74,7 +74,7 @@ function AuthButton(props) {
  * @returns Button component
  */
 function DeAuthButton(props) {
-    return <Button component='a' variant="contained" className="full-width" href="/auth/spotify/deauth">De-Auth</Button>;
+    return <Button color="secondary" component='a' variant="contained" className="full-width" href="/auth/spotify/deauth">De-Auth</Button>;
 }
 
 export default SpotifyLink;

src/js/Tag/TagList.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Typography, Card, Grid, CircularProgress } from '@material-ui/core';
+import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
-import CardActions from '@material-ui/core/CardActions';
+
-import CardContent from '@material-ui/core/CardContent';
 const axios = require('axios');
 
 import showMessage from "../Toast.js"
+import Progress from "../Util/circularProgress.js"
 
 /**
  * Tag card list component
@@ -67,7 +67,7 @@ class TagList extends Component {
         const grid =   <TagGrid tags={this.state.tags}
                             handleDeleteTag={this.handleDeleteTag}/>;
 
-        return this.state.isLoading ? <CircularProgress /> : grid;
+        return this.state.isLoading ? <Progress /> : grid;
     }
 }
 
@@ -135,7 +135,7 @@ function TagCard(props){
                 </CardContent>
                 <CardActions>
                     <ButtonGroup
-                    color="primary"
+                    color="secondary"
                     variant="contained">
 
                         {/* VIEW BUTTON */}

src/js/Tag/View.js

@@ -1,11 +1,12 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import { Card, Button, CircularProgress, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
+import { Card, Button, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
 import { Delete } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/core/styles';
 
 import showMessage from "../Toast.js";
+import Progress from "../Util/circularProgress.js"
 
 const BarChart = React.lazy(() => import("../Maths/BarChart"))
 const PieChart = React.lazy(() => import("../Maths/PieChart"))
@@ -438,7 +439,7 @@ class TagView extends Component{
         </div>
         );
 
-        return this.state.isLoading ? <CircularProgress /> : table;
+        return this.state.isLoading ? <Progress /> : table;
     }    
 }
 

src/js/Theme.js

@@ -23,15 +23,20 @@ let GlobalTheme = createMuiTheme({
     },
     palette: {
         type: 'dark',
+        // https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0
         primary: {
-            main: '#1976d2',
+            main: '#907FA4',
         },
         secondary: {
-            main: '#dc004e',
+            main: '#A6D6D6',
         },
+        // https://colorhunt.co/palette/de89717b6079a7d0cdffe9d6
         error: {
-            main: '#f44336'
+            main: '#DE8971'
-        }
+        },
+        info: {
+            main: "#A7D0CD"
+        },
     },
     status: {
         danger: 'orange',

src/js/Util/circularProgress.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Grid, CircularProgress } from '@material-ui/core';
+
+function Progress (props) {
+    return (
+        <Grid container justify="flex-start" alignItems="flex-start" align="center" style={{ padding: props.padding }}>
+            <Grid item xs={ props.colWidth }>
+                <CircularProgress color="secondary" />
+            </Grid>
+        </Grid>
+    );
+}
+
+Progress.defaultProps = {
+    padding: 36,
+    colWidth: 12,
+}
+
+export default Progress;