Nicer header

src/App.tsx

@@ -45,6 +45,9 @@ const useStyles = makeStyles((theme: Theme) =>
       padding: theme.spacing(3, 3),
       minHeight: 310
     },
+    boxButton: {
+      padding: theme.spacing(3, 3)
+    },
     boxHeader: {
       padding: theme.spacing(3, 3),
       height: theme.spacing(headerOffset),
@@ -65,7 +68,8 @@ const useStyles = makeStyles((theme: Theme) =>
     header: {
       backgroundColor: "#0b1216",
       color: "#f8f8f8",
-      padding: theme.spacing(9, 0, 6 + headerOffset),
+      textAlign: "center",
+      padding: theme.spacing(3, 0, 6 + headerOffset),
       marginBottom: -theme.spacing(headerOffset)
     },
     button: {

src/Header.tsx

@@ -5,7 +5,11 @@ import Typography from "@material-ui/core/Typography";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    root: {
+    title: {
+      // color: theme.palette.text.secondary,
+    },
+    subtitle: {
+      color: theme.palette.text.secondary,
       margin: theme.spacing(3, 0, 0)
     },
     lightBulb: {
@@ -14,6 +18,21 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     link: {
       color: theme.palette.primary.main
+    },
+    logoContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: theme.spacing(4)
+    },
+    logo: {
+      width: "25px",
+      marginRight: "4px"
+    },
+    logoText: {
+      display: "inline",
+      fontSize: "1.1rem",
+      fontWeight: 500
     }
   })
 );
@@ -22,14 +41,17 @@ export default function Header() {
   const classes = useStyles();
   return (
     <>
-      <Typography variant="h4" component="h1" gutterBottom>
+      <div className={classes.logoContainer}>
+        <img src="./favicon.ico" className={classes.logo} alt="logo" />
+        <Typography className={classes.logoText}>Commons Stack</Typography>
+      </div>
+
+      <Typography className={classes.title} variant="h4">
         Augmented Token Bonding Curve Design
       </Typography>
-      <Typography className={classes.root}>
+
-        Experiment and test augmented token bonding curves, part of the{" "}
+      <Typography className={classes.subtitle}>
-        <Link className={classes.link} href="https://commonsstack.org/">
+        Experiment and test augmented token bonding curves
-          Commons Stack
-        </Link>
       </Typography>
     </>
   );

src/app.css

@@ -1,4 +1,4 @@
 #root {
-  background-color: #202930;
+  background-color: #152128;
   min-height: 100vh;
 }