Use MUI in Header

1 files changed, 26 insertions, 9 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index 47da527..4eceb6d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,15 +1,32 @@
 import React from "react";
+import { Tab, Tabs, Typography } from "@material-ui/core";
+import styled from 'styled-components';
 
 const Header = () => (
-  <div>
-    <span> ChronoCube </span>
-    <ul>
-      <li> Home </li>
-      <li> App </li>
-      <li> Scoreboard </li>
-      <li> News </li>
-    </ul>
-  </div>
+  <HeaderWrapper>
+    <Tabs>
+      <Typography variant="h4" id="logo"> ChronoCube </Typography>
+      <Tab label="Home" />
+      <Tab label="App" />
+      <Tab label="Scoreboard" />
+      <Tab label="News" />
+    </Tabs>
+  </HeaderWrapper>
+
 );
 
+const HeaderWrapper = styled.div`
+  border-bottom: 1px solid black;
+  background-color: darkgrey;
+  & .MuiTab-wrapper {
+    padding: 10px;
+  }
+  & .MuiTypography-root {
+    font-weight: bold;
+    padding: 10px;
+    margin-right: 50px;
+    margin-left: 30px;
+  }
+`;
+
 export default Header;