From caee577929870603eb0ef7f28c89c2c4207b8050 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 26 Jan 2020 15:50:08 +0300
Subject: feat: initialize npm module, add components

---
 src/lib/components/Header/Header.js | 72 +++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/lib/components/Header/Header.js

(limited to 'src/lib/components/Header/Header.js')

diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js
new file mode 100644
index 0000000..1595141
--- /dev/null
+++ b/src/lib/components/Header/Header.js
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {
+  AppBar,
+  Tabs,
+  Tab,
+  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, 3, 0, 3),
+  },
+  tab: {
+    '& .MuiTab-wrapper': {
+      padding: theme.spacing(2),
+      flexDirection: 'row',
+      '& svg': {
+        marginRight: theme.spacing(1),
+        marginBottom: '0 !important',
+      }
+    }
+  }
+}));
+
+
+const Header = ({ page, setPage }) => {
+  const classes = useStyles();
+
+  const handleChange = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const icons = {
+    app: (<TimerIcon />),
+    profile: (<AccountCircleIcon />),
+    scoreboard: (<AssignmentIcon />),
+    contribute: (<GitHubIcon />),
+  };
+
+  return (
+  <AppBar position="sticky">
+    <Toolbar>
+      <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}
+          />
+        ))}
+      </Tabs>
+    </Toolbar>
+  </AppBar>
+  );
+};
+
+export default Header;
-- 
cgit v1.2.3


From 8a75fef7a7b68f82b745f7d73cbafdfb1f444825 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 27 Jan 2020 12:19:48 +0300
Subject: feat: update components

---
 src/lib/components/Header/Header.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/lib/components/Header/Header.js')

diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js
index 1595141..fddf8b3 100644
--- a/src/lib/components/Header/Header.js
+++ b/src/lib/components/Header/Header.js
@@ -16,9 +16,13 @@ import GitHubIcon from '@material-ui/icons/GitHub';
 
 
 const useStyles = makeStyles(theme => ({
+  root: {
+    background: theme.palette.background.elevation2,
+    color: theme.palette.text.primary,
+  },
   logo: {
-    color: theme.palette.secondary.main,
     margin: theme.spacing(0, 3, 0, 3),
+    color: theme.palette.primary.main,
   },
   tab: {
     '& .MuiTab-wrapper': {
@@ -48,7 +52,7 @@ const Header = ({ page, setPage }) => {
   };
 
   return (
-  <AppBar position="sticky">
+  <AppBar position="sticky" className={classes.root}>
     <Toolbar>
       <Typography variant="h4" className={classes.logo}>
         ChronoCube
-- 
cgit v1.2.3


From 8f0a5024a2b062c7ddf8d73f909b39050a624888 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 27 Jan 2020 19:48:22 +0300
Subject: feat: make Header more abstract

---
 src/lib/components/Header/Header.js | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

(limited to 'src/lib/components/Header/Header.js')

diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js
index fddf8b3..a055fcb 100644
--- a/src/lib/components/Header/Header.js
+++ b/src/lib/components/Header/Header.js
@@ -9,20 +9,16 @@ import {
 } 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 => ({
   root: {
     background: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
+    paddingLeft: theme.spacing(3),
   },
   logo: {
-    margin: theme.spacing(0, 3, 0, 3),
-    color: theme.palette.primary.main,
+    margin: theme.spacing(0, 3, 0, 1),
   },
   tab: {
     '& .MuiTab-wrapper': {
@@ -37,31 +33,25 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const Header = ({ page, setPage }) => {
+const Header = ({ logo, contents, page, setPage }) => {
   const classes = useStyles();
 
   const handleChange = (event, newPage) => {
     setPage(newPage);
   };
 
-  const icons = {
-    app: (<TimerIcon />),
-    profile: (<AccountCircleIcon />),
-    scoreboard: (<AssignmentIcon />),
-    contribute: (<GitHubIcon />),
-  };
-
   return (
   <AppBar position="sticky" className={classes.root}>
     <Toolbar>
-      <Typography variant="h4" className={classes.logo}>
-        ChronoCube
-      </Typography>
+        {logo.icon}
+        <Typography variant="h4" className={classes.logo} color="primary">
+          {logo.title}
+        </Typography>
       <Tabs onChange={handleChange} value={page}>
-        { Object.keys(icons).map(item => (
+        {contents && Object.keys(contents).map(item => (
           <Tab
             label={item}
-            icon={icons[item]}
+            icon={contents[item]}
             value={item}
             className={classes.tab}
             key={item}
-- 
cgit v1.2.3


From 386e4c97fd803aa54e96bf56711d4a6a8873489a Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 28 Jan 2020 11:36:22 +0300
Subject: feat: decrease font-size in Header

---
 src/lib/components/Header/Header.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/lib/components/Header/Header.js')

diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js
index a055fcb..3ade7b3 100644
--- a/src/lib/components/Header/Header.js
+++ b/src/lib/components/Header/Header.js
@@ -24,6 +24,7 @@ const useStyles = makeStyles(theme => ({
     '& .MuiTab-wrapper': {
       padding: theme.spacing(2),
       flexDirection: 'row',
+      fontSize: '0.8125rem',
       '& svg': {
         marginRight: theme.spacing(1),
         marginBottom: '0 !important',
@@ -43,10 +44,10 @@ const Header = ({ logo, contents, page, setPage }) => {
   return (
   <AppBar position="sticky" className={classes.root}>
     <Toolbar>
-        {logo.icon}
-        <Typography variant="h4" className={classes.logo} color="primary">
-          {logo.title}
-        </Typography>
+      {logo.icon}
+      <Typography variant="h5" className={classes.logo} color="primary">
+        {logo.title}
+      </Typography>
       <Tabs onChange={handleChange} value={page}>
         {contents && Object.keys(contents).map(item => (
           <Tab
-- 
cgit v1.2.3