Convert side bar to a header with title

2 files changed, 23 insertions, 31 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index a0cdae8..ccb8e87 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
+import Button from "@mui/material/Button";
 
 class Header extends React.Component {
     static propTypes = {
@@ -10,19 +11,18 @@ class Header extends React.Component {
     render() {
         return (
             <div id="header">
-                <ul>
-                    <li>
-                        <Link to="/">Home</Link>
-                    </li>
-                </ul>
-                <hr />
-                <ul>
-                    <li>
-                        <Link to="/" onClick={this.props.clearToken}>
-                            Sign out
-                        </Link>
-                    </li>
-                </ul>
+                <div id="title">
+                    <Link to="/">✨ SOC Dashboard</Link>
+                </div>
+                <div id="right">
+                    <Button
+                        variant="contained"
+                        color="error"
+                        onClick={this.props.clearToken}
+                    >
+                        Sign out
+                    </Button>
+                </div>
             </div>
         );
     }
diff --git a/src/styles/main.css b/src/styles/main.css
index 2868e7b..1146b80 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -16,10 +16,6 @@ a:visited {
     color: blue;
 }
 
-#root {
-    display: flex;
-}
-
 #list-container,
 #object-view {
     width: 100%;
@@ -27,23 +23,19 @@ a:visited {
 }
 
 /* Header */
-
 #header {
-    margin: 0;
-    border-right: 1px solid black;
-    width: 10em;
-}
-
-#header li {
-    list-style-type: none;
-}
-
-#header ul {
-    padding-left: 2em;
+    padding: 2em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-#header hr {
-    width: 70%;
+#header #title a {
+    text-decoration: none;
+    color: pink;
+    font-size: 2em;
+    font-weight: bold;
+    font-style: italic;
 }
 
 /* Object */