[TASK] Change theme color and update icons

public/index.html

@@ -7,7 +7,13 @@
       name="viewport"
       content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
     >
-    <meta name="theme-color" content="#000000" />
+    <!-- pwa icons -->
+    <link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/images/android-icon-512x512.png">
+    <!-- favicons -->
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/images/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/images/favicon-96x96.png">
+    <meta name="theme-color" content="#ffffff" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/manifest.json

@@ -4,37 +4,47 @@
   "icons": [
     {
       "src": "images/favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "96x96 64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "images/icons-48.png",
+      "src": "images/android-icon-36x36.png",
+      "type": "image/png",
+      "sizes": "36x36"
+    },
+    {
+      "src": "images/android-icon-48x48.png",
       "type": "image/png",
       "sizes": "48x48"
     },
     {
-      "src": "images/icons-72.png",
+      "src": "images/android-icon-72x72.png",
       "type": "image/png",
       "sizes": "78x78"
     },
     {
-      "src": "images/icons-96.png",
+      "src": "images/android-icon-96x96.png",
       "type": "image/png",
       "sizes": "96x96"
     },
     {
-      "src": "images/icons-192.png",
+      "src": "images/android-icon-144x144.png",
+      "type": "image/png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "images/android-icon-192x192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "images/icons-512.png",
+      "src": "images/android-icon-512x512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#41D0DD",
-  "background_color": "#41D0DD"
+  "theme_color": "#2196f3",
+  "background_color": "#2196f3"
 }

src/components/App/index.jsx

@@ -18,8 +18,11 @@ import Content from 'components/Content.jsx'
 import TopBar from './TopBar'
 import DrawerMenu from './DrawerMenu'
 
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import blue from '@material-ui/core/colors/blue';
+import pink from '@material-ui/core/colors/pink';
 
-const App = ({ classes, theme }) => {
+const App = ({ classes }) => {
   const [ drawerIsOpen, setDrawerIsOpen ] = useState(false)
   const toggleDrawer = () => setDrawerIsOpen(!drawerIsOpen)
 
@@ -34,6 +37,16 @@ const App = ({ classes, theme }) => {
   )
   const [ configurationOfSets, setSets ] = useState(defaultSets)
 
+  const theme = createMuiTheme({
+    palette: {
+      primary: blue,
+      secondary: pink,
+    },
+    typography: {
+      useNextVariants: true,
+    },
+  });
+
   // Get sets from indexedDB
   useEffect(() => {
     getFromDb('sets').then(sets => {
@@ -44,30 +57,32 @@ const App = ({ classes, theme }) => {
   }, [])
 
   return (
-    <div className={classes.root}>
-      <CssBaseline />
-      <TopBar
-        classes={classes}
-        drawerIsOpen={drawerIsOpen}
-        currentLocation={currentLocation}
-        toggleDrawer={toggleDrawer}
-      />
-      <DrawerMenu
-        drawerIsOpen={drawerIsOpen}
-        toggleDrawer={toggleDrawer}
-        classes={classes}
-        moveTo={moveTo}
-      />
-      <SetConfigurationContext.Provider value={{ configurationOfSets, setSets, sets: config.DATA.sets }}>
-        <Content
-          route={currentLocation}
+    <MuiThemeProvider theme={theme}>
+      <div className={classes.root}>
+        <CssBaseline />
+        <TopBar
+          classes={classes}
+          drawerIsOpen={drawerIsOpen}
+          currentLocation={currentLocation}
+          toggleDrawer={toggleDrawer}
+        />
+        <DrawerMenu
+          drawerIsOpen={drawerIsOpen}
+          toggleDrawer={toggleDrawer}
           classes={classes}
-          className={classNames(classes.content, {
-            [classes.contentShift]: drawerIsOpen,
-          })}
+          moveTo={moveTo}
         />
-      </SetConfigurationContext.Provider>
-    </div>
+        <SetConfigurationContext.Provider value={{ configurationOfSets, setSets, sets: config.DATA.sets }}>
+          <Content
+            route={currentLocation}
+            classes={classes}
+            className={classNames(classes.content, {
+              [classes.contentShift]: drawerIsOpen,
+            })}
+          />
+        </SetConfigurationContext.Provider>
+      </div>
+    </MuiThemeProvider>
   );
 }