Adjust Nav styling

packages/learn/src/components/Header/header.css

@@ -0,0 +1,8 @@
+#top-nav {
+  background: #006400;
+  margin-bottom: 0.45rem;
+}
+
+#top-nav img {
+  margin-bottom: 0;
+}

packages/learn/src/components/Header/index.js

@@ -1,55 +1,17 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Link from 'gatsby-link';
 
-import Auth from '../../auth';
+import './header.css';
 
-const auth = new Auth();
+function Header() {
-
-class Header extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      authenticated: false
-    };
-  }
-
-  login() {
-    auth.login();
-
-    this.setState({
-      authenticated: auth.isAuthenticated()
-    });
-  }
-
-  logout() {
-    auth.logout();
-
-    this.setState({
-      authenticated: auth.isAuthenticated()
-    });
-  }
-
-  componentDidMount() {
-    // this.setState({
-    //   authenticated: auth.isAuthenticated()
-    // });
-  }
-
-  render() {
   return (
-      <div
+    <header id='top-nav'>
-        style={{
-          background: '#006400',
-          marginBottom: '0.45rem'
-        }}
-        >
       <div
         style={{
           margin: '0 auto',
           maxWidth: 960
         }}
         >
-          <h1 style={{ margin: 0 }}>
         <Link
           style={{
             color: 'white',
@@ -57,43 +19,17 @@ class Header extends Component {
           }}
           to='/'
           >
-              freeCodeCamp
+          <img
-            </Link>
+            alt='Logo - freeCodeCamp | Learn to code'
-          </h1>
+            src={
-          {this.state.authenticated ? (
+              'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'
-            <span>
-              <a
-                href='#'
-                onClick={this.logout.bind(this)}
-                style={{
-                  boxShadow: 'none',
-                  lineHeight: '37px',
-                  color: '#fff'
-                }}
-                >
-                Log Out
-                {auth.getUserName() && <span> ({auth.getUserName()})</span>}
-              </a>
-            </span>
-          ) : (
-            <span>
-              <a
-                href='#'
-                onClick={this.login.bind(this)}
-                style={{
-                  boxShadow: 'none',
-                  lineHeight: '37px',
-                  color: '#fff'
-                }}
-                >
-                Log In
-              </a>
-            </span>
-          )}
-        </div>
-      </div>
-    );
             }
+            title='freeCodeCamp | Learn to code'
+          />
+        </Link>
+      </div>
+    </header>
+  );
 }
 
 export default Header;