Moved li element into Login and SignedIn components and added class names for more precise styling. Adjusted the search bar hits so they're centered on the page again. (#290)

packages/learn/src/components/Header/components/Login.js

@@ -4,14 +4,16 @@ import { Button } from 'react-bootstrap';
 
 function Login() {
   return (
-    <Button
+    <li className='sign-in-btn'>
-      bsStyle='default'
+      <Button
-      className='btn-cta'
+        bsStyle='default'
-      href={HOME_PATH + '/signin'}
+        className='btn-cta sign-in-btn'
-      target='_blank'
+        href={HOME_PATH + '/signin'}
-      >
+        target='_blank'
-      Sign In
+        >
-    </Button>
+        Sign In
+      </Button>
+    </li>
   );
 }
 

packages/learn/src/components/Header/components/SignedIn.js

@@ -11,9 +11,11 @@ const mapStateToProps = createSelector(userSelector, ({ picture }) => ({
 
 function SignedIn({ picture }) {
   return (
-    <a href={HOME_PATH + '/settings'}>
+    <li className='user-settings'>
-      <img height='38px' src={picture} />
+      <a href={HOME_PATH + '/settings'}>
-    </a>
+        <img className='profile-pic' src={picture} />
+      </a>
+    </li>
   );
 }
 

packages/learn/src/components/Header/header.css

@@ -7,33 +7,41 @@ header {
 
 #top-nav {
   background: #006400;
-  margin-bottom: 0.45rem;
-  height: 36px;
-  margin-bottom: 0px;
-  border-radius: 0;
-  border: none;
   display: flex;
-  justify-content: space-between;
+  margin: auto;
+  height: 36px;
   padding: 0 30px 0 15px;
+  line-height: 1;
 }
 
-#top-nav .home-link {
+#top-left-nav {
   display: flex;
+  flex-grow: 0.29;
+  margin: 0;
+  justify-content: center;
   align-items: center;
 }
 
-#top-nav img {
+.home-link {
+  padding: 5.5px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-logo {
   max-height: 25px;
   min-width: 35px;
-  margin: 0 5px 0 15px;
+  margin: auto;
 }
 
 #top-right-nav {
   display: flex;
   width: auto;
-  margin: 0;
+  margin: 0 0 0 auto;
   list-style: none;
   justify-content: space-around;
+  align-items: center;
 }
 
 #top-right-nav a,
@@ -61,7 +69,7 @@ header {
 }
 
 #top-right-nav > li > a {
-  padding: 10px 15px;
+  padding: 7.5px 15px;
 }
 
 .sign-in-btn {
@@ -94,18 +102,31 @@ header {
 }
 
 .user-state-spinner {
-  height: 40px;
+  height: 36px;
+  margin-left: 11px;
 }
 
 .user-state-spinner > div {
   animation-duration: 1.5s !important;
 }
 
+#top-right-nav > li.user-settings {
+  margin-left: 15px;
+}
+
+#top-right-nav li.user-settings > a {
+  padding: 0;
+}
+
+.profile-pic {
+  height: 36px;
+  width: 36px;
+}
+
 /* Search bar */
 .fcc_searchBar {
-  flex-grow: 0.4;
+  width: auto;
-  padding: 3px 10px 0;
+  flex-grow: 1;
-  margin-right: auto;
 }
 .ais-SearchBox-input {
   max-height: 30px;
@@ -116,5 +137,11 @@ header {
 .ais-Hits {
   left: 0;
   right: 0;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+  width: 90vw;
+  /* rules above used so the search
+  hits search bar's margin-right
+  and are centered on the page */
+  background-color: #fff;
 }

packages/learn/src/components/Header/index.js

@@ -11,10 +11,12 @@ function Header() {
   return (
     <header>
       <nav id='top-nav'>
-        <a className='home-link' href='https://www.freecodecamp.org'>
+        <ul id='top-left-nav'>
-          <NavLogo />
+          <a className='home-link' href='https://freecodecamp.org'>
-        </a>
+            <NavLogo />
-        <FCCSearch />
+          </a>
+          <FCCSearch />
+        </ul>
         <ul id='top-right-nav'>
           <li className='nav-btn'>
             <Link to='/'>Curriculum</Link>
@@ -30,7 +32,6 @@ function Header() {
             </a>
           </li>
           <li className='sign-in-btn'>
-
             <UserState />
           </li>
         </ul>