UI Overhaul

client/app/components/header/header.scss

@@ -0,0 +1,37 @@
+@import '../../scss/variables';
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, $primaryBlue, darken($primaryBlue, 20%));
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 20px;
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+  }
+
+  &__nav-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    background: $primaryBlue;
+    border: none;
+    color: $white;
+    border-right: 1px solid darken($primaryBlue, 2%);
+    cursor: pointer;
+    outline: none;
+    &:hover {
+      background: darken($primaryBlue, 5%);
+    }
+  }
+}

client/app/components/header/header.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './header.scss';
+
+interface IProps {
+  onButtonClick: () => void;
+}
+
+export class Header extends React.Component<IProps, any> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="header">
+        <div className="header__title-container">
+          <button className="header__nav-button" onClick={this.props.onButtonClick}>
+            <i className="fa fa-lg fa-bars" />
+          </button>
+          <h2 style={{ margin: 0 }}>Sound Bot</h2>
+        </div>
+        <a href="https://github.com/mgerb/go-discord-bot" className="fa fa-lg fa-github" target="_blank" />
+      </div>
+    );
+  }
+}