diff options
| -rw-r--r-- | src/components/Header.js | 26 | ||||
| -rw-r--r-- | src/styles/main.css | 28 |
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 */ |