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

Author: shanrauf

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 &&

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');