From eb82968a9f4a97f1f784d9f90fd3acd588bfc843 Mon Sep 17 00:00:00 2001
From: Shan Rauf <40217167+shanrauf@users.noreply.github.com>
Date: Tue, 11 Jun 2019 14:46:37 -0700
Subject: [PATCH] Fix hover effect on Log in and Sign up nav items (#1085)

* Fix hover effect on Log in and Sign up nav items

* Fix Login and Signup unequal spacing

* Fix HTML syntax and right nav__item-header hover
---
 client/components/Nav.jsx          | 16 ++++++++++------
 client/styles/components/_nav.scss | 14 ++++++++++----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 987ba11d..253146b0 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
         </ul>
         { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
           <ul className="nav__items-right" title="user-menu">
-            <li className="nav__item">
-              <p>
-                <Link to="/login">Log in</Link>
-                <span className="nav__item-spacer">or</span>
-                <Link to="/signup">Sign up</Link>
-              </p>
+            <li>
+              <Link to="/login">
+                <span className="nav__item-header">Log in</span>
+              </Link>
+            </li>
+            <span className="nav__item-spacer">or</span>
+            <li>
+              <Link to="/signup">
+                <span className="nav__item-header">Sign up</span>
+              </Link>
             </li>
           </ul>}
         { __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 707636bd..30496400 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -51,10 +51,6 @@
   padding-right: #{15 / $base-font-size}rem;
 }
 
-.nav__item-header {
-  margin-right: #{5 / $base-font-size}rem;
-}
-
 .nav__item:hover {
   .nav__item-header {
     @include themify() {
@@ -69,6 +65,16 @@
   }
 }
 
+.nav__item-header:hover {
+  @include themify() {
+      color: getThemifyVariable('nav-hover-color');
+    }
+}
+
+.nav__item-header-triangle {
+	margin-left: #{5 / $base-font-size}rem;
+}
+
 .nav__dropdown {
   @include themify() {
     background-color: map-get($theme-map, 'modal-background-color');