Update glphy classname (#1132)

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
       });
 

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"
           >

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

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`
         }
       />
     );

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");
   }

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%;

scss/overrides/_glyphs.scss

@@ -1,9 +0,0 @@
-.profile-edit-page {
-  .twitter,
-  .linkedin,
-  .github {
-    &::before {
-      display: none;
-    }
-  }
-}