From 16965170fafbe989171448e8086405421723227e Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 6 Jan 2020 04:13:25 +0300
Subject: Add icons to Header, replace News -> Contribute

---
 src/components/Header/Header.js | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 26ba45c..1479636 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,4 +1,5 @@
 import React from "react";
+
 import {
   AppBar,
   Tabs,
@@ -6,16 +7,19 @@ import {
   Typography,
   Toolbar,
 } from "@material-ui/core";
+
 import { makeStyles } from '@material-ui/core/styles';
+import TimerIcon from '@material-ui/icons/Timer';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import GitHubIcon from '@material-ui/icons/GitHub';
+
 
 const useStyles = makeStyles(theme => ({
   logo: {
     color: theme.palette.secondary.main,
     margin: theme.spacing(0, 2, 0, 3)
   },
-  tab: {
-    padding: theme.spacing(3, 0, 3, 0)
-  },
 }));
 
 
@@ -26,15 +30,26 @@ const Header = ({ page, setPage }) => {
     setPage(newPage);
   };
 
-  const menuItems = ['app', 'profile', 'scoreboard', 'news'];
+  const icons = {
+    app: (<TimerIcon />),
+    profile: (<AccountCircleIcon />),
+    scoreboard: (<AssignmentIcon />),
+    contribute: (<GitHubIcon />),
+  };
 
   return (
-  <AppBar position="sticky" className={classes.header}>
+  <AppBar position="sticky">
     <Toolbar>
       <Typography variant="h4" className={classes.logo}> ChronoCube </Typography>
       <Tabs onChange={handleChange} value={page}>
-        { menuItems.map(menuItem => (
-          <Tab label={menuItem} value={menuItem} key={menuItem} className={classes.tab}/>
+        { Object.keys(icons).map(item => (
+          <Tab
+            className={classes.tab}
+            label={item}
+            icon={icons[item]}
+            value={item}
+            key={item}
+          />
         ))}
       </Tabs>
     </Toolbar>
-- 
cgit v1.2.3


From 47902f480321c5021c7a18bad3ee001f70a03850 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 6 Jan 2020 11:47:55 +0300
Subject: Remove unused styles

---
 src/components/Header/Header.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 1479636..0600e7f 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -44,7 +44,6 @@ const Header = ({ page, setPage }) => {
       <Tabs onChange={handleChange} value={page}>
         { Object.keys(icons).map(item => (
           <Tab
-            className={classes.tab}
             label={item}
             icon={icons[item]}
             value={item}
-- 
cgit v1.2.3


From 6fe8204dbe1190637104513067c8a02c7aa45ba8 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 6 Jan 2020 19:10:03 +0300
Subject: Make icons appear to the left of the labels

---
 src/components/Header/Header.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 0600e7f..d6294db 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -18,8 +18,18 @@ import GitHubIcon from '@material-ui/icons/GitHub';
 const useStyles = makeStyles(theme => ({
   logo: {
     color: theme.palette.secondary.main,
-    margin: theme.spacing(0, 2, 0, 3)
+    margin: theme.spacing(0, 3, 0, 3),
   },
+  tab: {
+    '& .MuiTab-wrapper': {
+      padding: theme.spacing(2),
+      flexDirection: 'row',
+      '& svg': {
+        marginRight: theme.spacing(1),
+        marginBottom: '0 !important',
+      }
+    }
+  }
 }));
 
 
@@ -40,13 +50,16 @@ const Header = ({ page, setPage }) => {
   return (
   <AppBar position="sticky">
     <Toolbar>
-      <Typography variant="h4" className={classes.logo}> ChronoCube </Typography>
+      <Typography variant="h4" className={classes.logo}>
+        ChronoCube
+      </Typography>
       <Tabs onChange={handleChange} value={page}>
         { Object.keys(icons).map(item => (
           <Tab
             label={item}
             icon={icons[item]}
             value={item}
+            className={classes.tab}
             key={item}
           />
         ))}
-- 
cgit v1.2.3