Added header with logo.

Author: dannyhp1

src/App/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import axios from 'axios';
+import Header from '../components/Header';
 import CodeEditor from '../components/CodeEditor';
 import ResultsEditor from '../components/ResultsEditor';
 import { Grid, Button, FormControl, FormControlLabel, Checkbox, Select, MenuItem } from '@material-ui/core';
@@ -153,6 +154,8 @@ class App extends Component {
   render() {
     return (
       <div className="App">
+        <Header />
+
         <Grid container style={{ marginBottom: '1.5%' }}>
           <Grid item xs={6}>
             <CodeEditor 

src/components/CodeEditor.js

@@ -15,7 +15,7 @@ class CodeEditor extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      editorHeight: '90vh',
+      editorHeight: '85vh',
       editorWidth: 'auto'
     }
     this.onResize = this.onResize.bind(this);

src/components/Header.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { makeStyles, AppBar, Toolbar, Typography, Button, IconButton } from '@material-ui/core';
+import logo from '../resources/logo.png'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+    paddingBottom: 2.5,
+  },
+  logo: {
+    width: '3.5vh',
+    height: '3.5vh'
+  },
+  bar: {
+    background: '#0269a4',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: '2.5px',
+    borderColor: '#013F64'
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    fontFamily: 'Roboto',
+    flexGrow: 1,
+  },
+}));
+
+export default function Header() {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <AppBar position='static' className={classes.bar}>
+        <Toolbar>
+          <IconButton edge='start' className={classes.menuButton} color='inherit' aria-label='menu'>
+            <img className={classes.logo} src={logo} alt='Logo' />
+          </IconButton>
+          <Typography variant='h5' className={classes.title}>
+            Coderpad
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </div>
+  )
+}

src/components/ResultsEditor.js

@@ -8,7 +8,7 @@ class ResultsEditor extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      editorHeight: '90vh',
+      editorHeight: '85vh',
       editorWidth: 'auto'
     }
     this.onResize = this.onResize.bind(this);