chore: Top nav styles and image cleanup

newrelic · May 7, 2020 · f897798 · f897798
1 parent 9868f14
commit f897798
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 39 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Link, graphql, useStaticQuery } from 'gatsby';
+import { Link } from 'gatsby';
 import cx from 'classnames';
 
 import { link } from '../types';
@@ -12,26 +12,6 @@ import './Header.scss';
 const Header = ({ pages }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  // NOTE: we may want to abstract this
-  const data = useStaticQuery(graphql`
-    query {
-      nrLogo: file(relativePath: { eq: "NewRelic-logo.png" }) {
-        childImageSharp {
-          fixed(width: 739, height: 133, quality: 100) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-      ghLogo: file(relativePath: { eq: "GitHub-logo.png" }) {
-        childImageSharp {
-          fixed(width: 64, height: 64, quality: 100) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-    }
-  `);
-
   return (
     <header className={cx('Header--main', { 'is-open': isOpen })}>
       <Container>
@@ -43,15 +23,12 @@ const Header = ({ pages }) => {
           <h3 className="u-hideOnDesktop">Sites</h3>
           <ul>
             <li className="u-hideOnMobile">
-              <ExternalLink href="//newrelic.com">
-                <img
-                  src={data.nrLogo.childImageSharp.fixed.src}
-                  alt="New Relic homepage"
-                />
-              </ExternalLink>
+              <ExternalLink className="Header-nav-logo" href="//newrelic.com" />
             </li>
             <li>
-              <Link to="/">Developers</Link>
+              <Link to="/" className="is-active">
+                Developers
+              </Link>
             </li>
             <li>
               <ExternalLink href="//opensource.newrelic.com">
@@ -87,11 +64,10 @@ const Header = ({ pages }) => {
           <h3 className="u-hideOnDesktop">Tools</h3>
           <ul>
             <li>
-              <ExternalLink href="//github.com/newrelic">
-                <img
-                  src={data.ghLogo.childImageSharp.fixed.src}
-                  alt="Contribute on GitHub"
-                />
+              <ExternalLink
+                className="Header-nav-github"
+                href="//github.com/newrelic"
+              >
                 <span className="u-hideOnDesktop">Contribute on GitHub</span>
               </ExternalLink>
             </li>

diff --git a/src/components/Header.scss b/src/components/Header.scss
@@ -1,5 +1,10 @@
 header.Header--main {
-  background-color: #d7e6e8;
+  // TODO: fix this for mobile
+  background-image: linear-gradient(
+    var(--color-neutrals-100),
+    var(--color-neutrals-100) 30px,
+    var(--color-white) 30px
+  );
 
   .u-container {
     display: grid;
@@ -45,6 +50,29 @@ header.Header--main {
     grid-area: nr;
   }
 
+  .Header-nav--nr a:not(.Header-nav-logo) {
+    color: var(--color-neutrals-600);
+    font-size: 0.7em;
+    padding: 4px 9px;
+    line-height: 22px;
+
+    &:hover,
+    &.is-active {
+      background-color: var(--color-neutrals-200);
+      color: var(--color-neutrals-700);
+    }
+  }
+
+  .Header-nav--nr .Header-nav-logo {
+    width: 79px;
+    height: 15px;
+    padding: 0;
+    margin: 0.5em;
+    margin-right: 1.5em;
+    background-image: url('../images/NewRelic-logo.png');
+    background-size: contain;
+  }
+
   .Header-nav--tools {
     grid-area: tools;
 
@@ -53,6 +81,21 @@ header.Header--main {
     }
   }
 
+  // TODO: fix this on mobile
+  .Header-nav--tools .Header-nav-github {
+    width: 1.1em;
+    height: 1.1em;
+    padding: 0;
+    margin: 0.4em;
+    opacity: 0.6;
+    background-image: url('../images/GitHub-logo.png');
+    background-size: contain;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .Header-nav--main {
     grid-area: main;
 
@@ -67,11 +110,6 @@ header.Header--main {
     padding: 0.6rem;
     display: inline-block;
     display: flex;
-
-    &:hover {
-      cursor: pointer;
-      text-decoration: underline;
-    }
   }
 
   h3 {