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,99 +1,35 @@
-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() {
-
+  return (
-class Header extends Component {
+    <header id='top-nav'>
-  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
         style={{
-          background: '#006400',
+          margin: '0 auto',
-          marginBottom: '0.45rem'
+          maxWidth: 960
         }}
         >
-        <div
+        <Link
           style={{
-            margin: '0 auto',
+            color: 'white',
-            maxWidth: 960
+            textDecoration: 'none'
           }}
+          to='/'
           >
-          <h1 style={{ margin: 0 }}>
+          <img
-            <Link
+            alt='Logo - freeCodeCamp | Learn to code'
-              style={{
+            src={
-                color: 'white',
+              'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'
-                textDecoration: 'none'
+            }
-              }}
+            title='freeCodeCamp | Learn to code'
-              to='/'
+          />
-              >
+        </Link>
-              freeCodeCamp
-            </Link>
-          </h1>
-          {this.state.authenticated ? (
-            <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>
-    );
+    </header>
-  }
+  );
 }
 
 export default Header;