Work with UX group to get the header looking exactly correct (#1118)

app/assets/stylesheets/_header.scss

@@ -2,25 +2,50 @@
 @import "typography";
 @import "bootstrap";
 
-#header {
-    padding: 0px;
-    background-color: $black;
-    margin-bottom: 1em;
+.header-row {
+  display: flex;
+  width: 90rem;
+  height: 6.25rem;
+  padding: 1.5rem 1.25rem;
+  justify-content: space-between;
+  align-items: center;
+  background: #121212;
 
-    .navbar-brand {
+  .header-image {
+    width: 9.25rem;
+    height: 4.05475rem;
+    flex-shrink: 0;
+    // background: url('logo-image');
+  }
+
+  .header-details {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 0px;
+    padding-left: 0px;
+
+    .navbar-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.625rem;
+
+      a {
         color: $white;
-        margin: auto;
-        padding: 10px;
-    }
-    .btn.btn-warning.btn-sm {
-        --bs-btn-bg: #FBC129;
-        padding-left: 10px;
-        margin-left: 10px;
-        font-family: "Libre Franklin";
-        font-size: 16px;
-        color: $black;
-    }
+        text-decoration: none;
+      }
+    }  
+  }
+  .btn.btn-warning.btn-sm {
+    --bs-btn-bg: white;
+    padding: 0.5rem 2rem;
+    font-family: "Libre Franklin";
+    font-size: 16px;
+    color: $princeton-orange;
+  }
 }
+
 .container-fluid {
     max-width: 1200px;
     margin: 0 auto;

app/views/shared/_header.html.erb

@@ -1,37 +1,21 @@
 <header>
-<div id="header">
-  <nav class="navbar navbar-expand-lg">
-
-<div class="row header-row align-items-center">
-
-  <div class="col-lg-3 header-logo">
-    <a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a>
-  </div>
-
-  <div class="col-lg-9">
-  <div id="header-navigation">
-  <ul class="navbar-nav">
-  <li class="navbar-item"><%= link_to "Contact Us", "mailto:[email protected]", class: "navbar-contact-us" %></li>
-  <li class="navbar-item"><%= link_to "FAQ", "https://tigerdata.princeton.edu/frequently-asked-questions", class: "navbar-faq" %></li>
-  <% if current_user %>
-    <li class="navbar-item dropdown">
-        <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <%= current_user.uid%>
-        </a>
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-          <%= link_to "Log out", main_app.destroy_user_session_path, class: "dropdown-item" %>
-        </div>
-      </li>
-  <% else %>
-    <li class="navbar-item"><%= button_to "Log in", user_cas_omniauth_authorize_path, class: "btn btn-warning btn-sm" %></li>
-  <% end %>
+<div class="header-row">
+  <a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", id: "logo", class: "header-image") %></a>
+  <ul class="header-details">
+    <li class="navbar-item"><%= link_to "Contact Us", "mailto:[email protected]", class: "navbar-contact-us" %></li>
+    <li class="navbar-item"><%= link_to "FAQ", "https://tigerdata.princeton.edu/frequently-asked-questions", class: "navbar-faq" %></li>
+    <% if current_user %>
+      <li class="navbar-item dropdown">
+          <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <%= current_user.uid%>
+          </a>
+          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <%= link_to "Log out", main_app.destroy_user_session_path, class: "dropdown-item" %>
+          </div>
+        </li>
+    <% else %>
+      <li class="navbar-item"><%= button_to "Log in", user_cas_omniauth_authorize_path, class: "btn btn-warning btn-sm login-btn" %></li>
+    <% end %>
   </ul>
-  </div>
-  </div>
-
-
-</div>
-
-  </nav>
-</div>
+</div> 
 </header>