feat: commandline chic

client/src/components/Header/components/SignedIn.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'gatsby';
-
-function SignedIn() {
-  return (
-    <Link className='top-right-nav-link' to='/settings'>
-      Settings
-    </Link>
-  );
-}
-
-SignedIn.displayName = 'SignedIn';
-SignedIn.propTypes = {
-  picture: PropTypes.string
-};
-
-export default SignedIn;

client/src/components/Header/components/UserState.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Link } from 'gatsby';
 import Spinner from 'react-spinkit';
 
 import { isSignedInSelector, userFetchStateSelector } from '../../../redux';
 import Login from './Login';
-import SignedIn from './SignedIn';
 
 const mapStateToProps = createSelector(
   userFetchStateSelector,
@@ -41,7 +41,13 @@ function UserState(props) {
       />
     );
   }
-  return isSignedIn ? <SignedIn /> : <Login />;
+  return isSignedIn ? (
+    <Link className='top-right-nav-link' to='/settings'>
+      Settings
+    </Link>
+  ) : (
+    <Login />
+  );
 }
 
 UserState.displayName = 'UserState';

client/src/components/Header/components/login.css

@@ -1,23 +1,3 @@
 .signup-btn {
-  background-color: #ffac33;
-  background-image: linear-gradient(#ffcc4d, #ffac33);
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#ffac33,  GradientType=0)';
-  border-color: #f1a02a;
-  color: #292f33 !important;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   padding: 4px 12px;
 }
-.signup-btn:hover,
-.signup-btn:focus,
-.signup-btn:active:hover {
-  background-color: #e99110;
-  background-image: linear-gradient(#ffcc4d, #e99110);
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#e99110,  GradientType=0)';
-  border-color: #ec8b11;
-  color: #292f33 !important;
-}
-.signup-btn:active {
-  background-color: #f2a330;
-  background-image: none;
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
-}

client/src/components/Header/components/menuButton.css

@@ -4,12 +4,11 @@
   margin: 0 20px 0 12px;
   padding: 2px 14px;
   border: 1px solid #fff;
-  border-radius: 3px;
 }
 
 #top-nav .menu-button-open {
   background: white;
-  color: #006400;
+  color: var(--theme-color);
 }
 
 @media (min-width: 735px) {

client/src/components/Header/components/menuLinks.css

@@ -4,7 +4,6 @@
   list-style: none;
   justify-content: space-between;
   align-items: center;
-  background-color: #006400;
 }
 
 #top-right-nav li {
@@ -16,13 +15,14 @@
   color: #fff;
   font-size: 18px;
   padding: 8px 15px;
+  text-decoration: none;
 }
 
 .top-right-nav-link:hover,
 .top-right-nav-link:focus,
 .top-right-nav-link:active {
   background-color: #fff;
-  color: #006400;
+  color: var(--theme-color);
   text-decoration: none;
 }
 
@@ -35,6 +35,10 @@
   animation-duration: 1.5s !important;
 }
 
+.top-nav-expanded {
+  background-color: var(--theme-color);
+}
+
 #top-right-nav .signup-btn,
 #top-right-nav .settings-link {
   margin: 0 15px;

client/src/components/Header/header.css

@@ -1,7 +1,3 @@
-:root {
-  --header-height: 38px;
-}
-
 header {
   top: 0;
   position: fixed;
@@ -10,7 +6,7 @@ header {
 }
 
 #top-nav {
-  background: #006400;
+  background: var(--theme-color);
   height: var(--header-height);
   margin-bottom: 0;
   border-radius: 0;
@@ -26,6 +22,10 @@ header {
   align-items: center;
 }
 
+#top-nav .home-link:hover {
+  background-color: var(--theme-color);
+}
+
 /* Navbar logo */
 
 #top-nav .nav-logo {