fix(icon consistency): update global header icons (#7)

Attempting to unify our selection of icons across the dev and open source site.

Author: danielgolden

src/components/DarkModeToggle.js

@@ -10,14 +10,12 @@ const DarkModeToggle = ({ darkMode, className }) => {
         <Sun
           size={15}
           color={darkMode.value ? `#CEDEDE` : `#000d0d`}
-          fill={darkMode.value ? `#CEDEDE` : `#000d0d`}
           onClick={darkMode.disable}
         />
       ) : (
         <Moon
           size={15}
-          stroke="rgba(0,0,0, 0)"
-          fill={darkMode.value ? `#CEDEDE` : `#000d0d`}
+          color={darkMode.value ? `#CEDEDE` : `#000d0d`}
           onClick={darkMode.enable}
         />
       )}

src/components/GlobalHeader.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DarkModeToggle from './DarkModeToggle';
+import { GitHub, Edit } from 'react-feather';
 
 import styles from './GlobalHeader.module.scss';
 
-const GlobalHeader = ({ hasHeaderBg, className }) => {
+const GlobalHeader = ({ hasHeaderBg, className, editLink }) => {
   return (
     <div
       className={`${styles.globalHeaderContainer} ${
@@ -47,18 +48,36 @@ const GlobalHeader = ({ hasHeaderBg, className }) => {
         </div>
 
         <ul className={styles.rightSideButtons}>
-          <li className={styles.darkModeToggle}>
-            <DarkModeToggle />
+          <li
+            className={`${styles.rightSideButton} ${styles.editPageButton}`}
+            title="Edit this page"
+          >
+            <a
+              href={editLink}
+              className={styles.editPageButtonLink}
+              target="__blank"
+            >
+              <Edit color="#000D0D" size={14} className={styles.editIcon} />
+            </a>
           </li>
-          <li className={`${styles.rightSideButton} ${styles.githubButton}`}>
+          <li
+            className={`${styles.rightSideButton} ${styles.githubButton}`}
+            title="View the GitHub repo for this website"
+          >
             <a
               href="https://github.com/newrelic/opensource-website"
               className={styles.githubButtonLink}
               target="__blank"
             >
-              GitHub
+              <GitHub color="#000D0D" size={14} className={styles.githubIcon} />
             </a>
           </li>
+          <li
+            className={`styles.darkModeToggle ${styles.rightSideButton}`}
+            title="Toggle dark mode"
+          >
+            <DarkModeToggle />
+          </li>
         </ul>
       </div>
     </div>
@@ -67,7 +86,8 @@ const GlobalHeader = ({ hasHeaderBg, className }) => {
 
 GlobalHeader.propTypes = {
   hasHeaderBg: PropTypes.bool,
-  className: PropTypes.string
+  className: PropTypes.string,
+  editLink: PropTypes.string
 };
 
 export default GlobalHeader;

src/components/GlobalHeader.module.scss

@@ -83,14 +83,13 @@
 .right-side-button {
   width: 14px;
   height: 14px;
-  text-indent: 300%;
-  white-space: nowrap;
-  overflow: hidden;
+  border: none;
   padding: 0 8px 0;
   opacity: .45;
   background-repeat: no-repeat;
   background-position: center;
   transition: opacity .1s var(--ease-out-quad);
+  transform: translateY(-2px);
 
   &:hover {
     cursor: pointer;
@@ -101,6 +100,10 @@
     padding-right: 0;
     background-position: right;
   }
+
+  a {
+    border: none;
+  }
 }
 
 .search-button {
@@ -114,22 +117,18 @@
   width: 15px;
   height: 15px;
   text-indent: 0;
+  opacity: .45;
 }
 
 .github-button-link {
   display: block;
-  background-image: url('../images/icon-github.svg');
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .login-button {
   background-image: url('../images/icon-user.svg');
 }
 
 .dark-mode-toggle {
-  margin-right: 4px;
   position: relative;
   top: 3px;
   opacity: .45;
@@ -154,6 +153,15 @@
   .global-header-container {
     display: none;
   }    
+
+  .edit-icon {
+    stroke: #CEDEDE;
+  }
+
+  .dark-mode-toggle {
+    stroke: #CEDEDE;
+    fill: transparent;
+  }
 }
 
 // ==============================================================
@@ -172,7 +180,7 @@
   }
 
   .right-side-button {
-    opacity: .75;
+    opacity: .5;
 
     &:hover {
       opacity: 1;
@@ -187,10 +195,6 @@
   .search-button {
     background-image: url('../images/icon-search-small-light.svg');
   }
-  
-  .github-button-link {
-    background-image: url('../images/icon-github-light.svg');
-  }
 
   .login-button {
     background-image: url('../images/icon-user-light.svg');
@@ -204,4 +208,12 @@
       color: var(--color-neutrals-700);
     }
   }
+
+  .github-icon {
+    stroke: #CEDEDE;
+  }
+  
+  .edit-icon {
+    stroke: #CEDEDE;
+  }
 }

src/components/Header.js

@@ -10,7 +10,7 @@ import GlobalHeader from './GlobalHeader';
 
 import styles from './Header.module.scss';
 
-const Header = ({ hasHeaderBg }) => {
+const Header = ({ hasHeaderBg, editLink }) => {
   const [mobileMenuActive, setMobileMenuActive] = useState(false);
 
   const renderNavLinks = () => {
@@ -41,6 +41,7 @@ const Header = ({ hasHeaderBg }) => {
       <GlobalHeader
         hasHeaderBg={hasHeaderBg}
         className={mobileMenuActive ? styles.existsInActiveMobileMenu : ''}
+        editLink={editLink}
       />
       <header
         className={`${styles.primaryHeaderContainer} ${
@@ -76,7 +77,8 @@ const Header = ({ hasHeaderBg }) => {
 };
 
 Header.propTypes = {
-  hasHeaderBg: PropTypes.bool
+  hasHeaderBg: PropTypes.bool,
+  editLink: PropTypes.string
 };
 
 export default Header;

src/components/Header.module.scss

@@ -216,12 +216,21 @@ div.exists-in-active-mobile-menu {
       margin-top: 59px;
     }
   }
-
 
   .has-header-bg:after {
     top: -180px;
     transform: skewY(-3deg);
   }
+
+  .mobile-menu-active .header-dark-mode-toggle {
+    display: block;
+    transform: scale(1.25);
+
+    svg {
+      fill: transparent;
+      stroke: var(--color-brand-800);
+    }
+  }
 }
 
 // ==============================================================
@@ -259,6 +268,7 @@ div.exists-in-active-mobile-menu {
   }
 
   .mobile-menu-active .header-dark-mode-toggle svg {
-      fill: var(--color-neutrals-800);
+    fill: transparent;
+    stroke: var(--color-neutrals-800);
   }
 }

src/components/layout.js

@@ -27,7 +27,7 @@ const Layout = ({
       <Helmet>
         <link rel="icon" href={favicon} />
       </Helmet>
-      <Header hasHeaderBg={hasHeaderBg} />
+      <Header hasHeaderBg={hasHeaderBg} editLink={editLink} />
       <main
         className={`layout-container-main ${
           fullWidth ? `full-width` : ''