From 7d09949d8903aca282e4349e1ccfd589e59a4624 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Tue, 31 Dec 2019 16:24:00 +0300
Subject: Use AppBar and wrap the Tabs in a styled component

---
 src/components/Header.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 4eceb6d..cd217fc 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,23 +1,26 @@
 import React from "react";
-import { Tab, Tabs, Typography } from "@material-ui/core";
+import {
+  AppBar,
+  Tabs,
+  Tab,
+  Typography
+} from "@material-ui/core";
 import styled from 'styled-components';
 
 const Header = () => (
-  <HeaderWrapper>
-    <Tabs>
+  <AppBar position="static">
+    <TabsWrapper>
       <Typography variant="h4" id="logo"> ChronoCube </Typography>
       <Tab label="Home" />
       <Tab label="App" />
       <Tab label="Scoreboard" />
       <Tab label="News" />
-    </Tabs>
-  </HeaderWrapper>
-
+    </TabsWrapper>
+  </AppBar>
 );
 
-const HeaderWrapper = styled.div`
+const TabsWrapper = styled(Tabs)`
   border-bottom: 1px solid black;
-  background-color: darkgrey;
   & .MuiTab-wrapper {
     padding: 10px;
   }
-- 
cgit v1.2.3