From e29b79d24e43ea37833b2de97648f1f5f7af99d6 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Wed, 11 Apr 2018 15:42:18 +0100
Subject: [PATCH] Adjust Nav styling

---
 .../learn/src/components/Header/header.css    |   8 ++
 packages/learn/src/components/Header/index.js | 106 ++++--------------
 2 files changed, 29 insertions(+), 85 deletions(-)
 create mode 100644 packages/learn/src/components/Header/header.css

diff --git a/packages/learn/src/components/Header/header.css b/packages/learn/src/components/Header/header.css
new file mode 100644
index 0000000000..ef83a2e104
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/learn/src/components/Header/index.js b/packages/learn/src/components/Header/index.js
index 7b1ae96415..5692bc54ef 100644
--- a/packages/learn/src/components/Header/index.js
+++ b/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();
-
-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 (
+function Header() {
+  return (
+    <header id='top-nav'>
       <div
         style={{
-          background: '#006400',
-          marginBottom: '0.45rem'
+          margin: '0 auto',
+          maxWidth: 960
         }}
         >
-        <div
+        <Link
           style={{
-            margin: '0 auto',
-            maxWidth: 960
+            color: 'white',
+            textDecoration: 'none'
           }}
+          to='/'
           >
-          <h1 style={{ margin: 0 }}>
-            <Link
-              style={{
-                color: 'white',
-                textDecoration: 'none'
-              }}
-              to='/'
-              >
-              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>
+          <img
+            alt='Logo - freeCodeCamp | Learn to code'
+            src={
+              'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'
+            }
+            title='freeCodeCamp | Learn to code'
+          />
+        </Link>
       </div>
-    );
-  }
+    </header>
+  );
 }
 
 export default Header;