From 0874b661050e2f2241e234ee8f0752292ca6f86f Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Fri, 9 Aug 2019 10:56:00 -0700
Subject: [PATCH] Update glphy classname (#1132)

---
 components/bio/bio.jsx             |  2 +-
 components/footer/footer.jsx       |  6 +++---
 components/navbar/navbar.jsx       |  2 +-
 pages/search/search.jsx            |  2 +-
 scss/foundation-styles/glyphs.scss | 17 +++++++++--------
 scss/main.scss                     |  1 -
 scss/overrides/_glyphs.scss        |  9 ---------
 7 files changed, 15 insertions(+), 24 deletions(-)
 delete mode 100644 scss/overrides/_glyphs.scss

diff --git a/components/bio/bio.jsx b/components/bio/bio.jsx
index 7d7cbe2..df2b529 100644
--- a/components/bio/bio.jsx
+++ b/components/bio/bio.jsx
@@ -61,7 +61,7 @@ class Bio extends React.Component {
         return;
       }
 
-      let classname = classNames(`social-media ${type} x-small`, {
+      let classname = classNames(`social-media ${type}-glyph x-small`, {
         "mr-sm-1": i !== list.length - 1
       });
 
diff --git a/components/footer/footer.jsx b/components/footer/footer.jsx
index 8660ace..7e09214 100644
--- a/components/footer/footer.jsx
+++ b/components/footer/footer.jsx
@@ -7,7 +7,7 @@ export default class Footer extends React.Component {
       <ul className="d-flex pl-0">
         <li className="mr-2">
           <a
-            className="twitter small d-inline-block"
+            className="twitter-glyph small d-inline-block"
             href="https://twitter.com/mozilla"
             target="_blank"
           >
@@ -16,7 +16,7 @@ export default class Footer extends React.Component {
         </li>
         <li className="mr-2">
           <a
-            className="instagram small d-inline-block"
+            className="instagram-glyph small d-inline-block"
             href="https://www.instagram.com/mozilla/"
             target="_blank"
           >
@@ -25,7 +25,7 @@ export default class Footer extends React.Component {
         </li>
         <li className="mr-2">
           <a
-            className="github small d-inline-block"
+            className="github-glyph small d-inline-block"
             href="https://www.github.com/mozilla/foundation.mozilla.org/"
             target="_blank"
           >
diff --git a/components/navbar/navbar.jsx b/components/navbar/navbar.jsx
index 2649477..c4ca931 100644
--- a/components/navbar/navbar.jsx
+++ b/components/navbar/navbar.jsx
@@ -52,7 +52,7 @@ class NavBar extends React.Component {
       return null;
     }
 
-    let classes = "signupin d-none d-md-flex align-items-md-center";
+    let classes = "signupin-glyph d-none d-md-flex align-items-md-center";
 
     let link = (
       <a
diff --git a/pages/search/search.jsx b/pages/search/search.jsx
index 8fa19b6..855157d 100644
--- a/pages/search/search.jsx
+++ b/pages/search/search.jsx
@@ -105,7 +105,7 @@ class Search extends React.Component {
     return (
       <span
         className={
-          this.state.searchBoxFocused ? `search-focus` : `search-glyph`
+          this.state.searchBoxFocused ? `search-focus-glyph` : `search-glyph`
         }
       />
     );
diff --git a/scss/foundation-styles/glyphs.scss b/scss/foundation-styles/glyphs.scss
index b1a59a5..1eaa152 100644
--- a/scss/foundation-styles/glyphs.scss
+++ b/scss/foundation-styles/glyphs.scss
@@ -43,17 +43,17 @@
   }
 }
 
-.twitter {
+.twitter-glyph {
   @include compositeGlyph("twitter");
   @include hoverGlyph("twitter-hover");
 }
 
-.linkedin {
+.linkedin-glyph {
   @include compositeGlyph("linkedin");
   @include hoverGlyph("linkedin-hover");
 }
 
-.github {
+.github-glyph {
   @include compositeGlyph("github");
   @include hoverGlyph("github-hover");
 }
@@ -64,7 +64,7 @@
 }
 
 // New glyph added for Pulse
-.search-focus {
+.search-focus-glyph {
   @include compositeGlyph("search-focus");
 }
 
@@ -78,23 +78,24 @@
   @include compositeGlyph("dismiss-focus");
 }
 
-.signupin {
+// New glyph added for Pulse
+.signupin-glyph {
   @include compositeGlyph("signupin");
   @include hoverGlyph("signupin-hover");
 }
 
 .dark-theme {
-  .twitter {
+  .twitter-glyph {
     @include compositeGlyph("twitter-dark-theme");
     @include hoverGlyph("twitter-dark-theme-hover");
   }
 
-  .instagram {
+  .instagram-glyph {
     @include compositeGlyph("instagram-dark-theme");
     @include hoverGlyph("instagram-dark-theme-hover");
   }
 
-  .github {
+  .github-glyph {
     @include compositeGlyph("github-dark-theme");
     @include hoverGlyph("github-dark-theme-hover");
   }
diff --git a/scss/main.scss b/scss/main.scss
index 7e842ea..242b8ef 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -24,7 +24,6 @@
 @import './foundation-styles/glyphs.scss';
 @import './overrides/type.scss';
 @import './overrides/buttons.scss';
-@import './overrides/glyphs.scss';
 
 html {
   height: 100%;
diff --git a/scss/overrides/_glyphs.scss b/scss/overrides/_glyphs.scss
deleted file mode 100644
index b6ff200..0000000
--- a/scss/overrides/_glyphs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.profile-edit-page {
-  .twitter,
-  .linkedin,
-  .github {
-    &::before {
-      display: none;
-    }
-  }
-}