chore: cleaned up logo classes

newrelic · May 7, 2020 · 3f2ae6f · 3f2ae6f
1 parent f897798
commit 3f2ae6f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -23,7 +23,10 @@ const Header = ({ pages }) => {
           <h3 className="u-hideOnDesktop">Sites</h3>
           <ul>
             <li className="u-hideOnMobile">
-              <ExternalLink className="Header-nav-logo" href="//newrelic.com" />
+              <ExternalLink
+                className="logo Header-nav-logo--nr"
+                href="//newrelic.com"
+              />
             </li>
             <li>
               <Link to="/" className="is-active">
@@ -65,7 +68,7 @@ const Header = ({ pages }) => {
           <ul>
             <li>
               <ExternalLink
-                className="Header-nav-github"
+                className="logo Header-nav-logo--github"
                 href="//github.com/newrelic"
               >
                 <span className="u-hideOnDesktop">Contribute on GitHub</span>

diff --git a/src/components/Header.scss b/src/components/Header.scss
@@ -5,6 +5,7 @@ header.Header--main {
     var(--color-neutrals-100) 30px,
     var(--color-white) 30px
   );
+  border-bottom: 1px solid var(--color-neutrals-100);
 
   .u-container {
     display: grid;
@@ -50,7 +51,7 @@ header.Header--main {
     grid-area: nr;
   }
 
-  .Header-nav--nr a:not(.Header-nav-logo) {
+  .Header-nav--nr a:not(.logo) {
     color: var(--color-neutrals-600);
     font-size: 0.7em;
     padding: 4px 9px;
@@ -63,14 +64,17 @@ header.Header--main {
     }
   }
 
-  .Header-nav--nr .Header-nav-logo {
+  .logo {
+    padding: 0;
+    background-size: contain;
+  }
+
+  .Header-nav--nr .Header-nav-logo--nr {
     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 {
@@ -82,14 +86,12 @@ header.Header--main {
   }
 
   // TODO: fix this on mobile
-  .Header-nav--tools .Header-nav-github {
+  .Header-nav--tools .Header-nav-logo--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;