Rename glyph classnames (#3505)

* update glyph classnames for 'heart' and 'twitter'

* update glyph classnames for 'email', 'github', 'heart', 'instagram', 'linkedin', 'medium', 'twitter', and 'youtube'

* revert file name changes

* update maintenance.html

* remove old code

* add missing file back

maintenance/maintenance.html

@@ -127,9 +127,9 @@
               <div class="col-lg-4">
                 <h5 class="h5-heading">More about us</h5>
                 <ul class="d-flex">
-                  <li class="mr-2"><a class="twitter small d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">Twitter</span></a></li>
-                  <li class="mr-2"><a class="instagram small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
-                  <li class="mr-2"><a class="github small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">Github</span></a></li>
+                  <li class="mr-2"><a class="twitter-glyph small d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">Twitter</span></a></li>
+                  <li class="mr-2"><a class="instagram-glyph small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
+                  <li class="mr-2"><a class="github-glyph small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">Github</span></a></li>
                 </ul>
               </div>
               <div class="col-lg-8">

network-api/networkapi/mozfest/templates/partials/mozfest_footer.html

@@ -23,10 +23,10 @@
 {% endblock %}
 
 {% block social_links %}
-  <li class="mr-2"><a class="twitter small d-inline-block" data-platform="twitter" href="https://twitter.com/mozillafestival"><span class="sr-only">Twitter</span></a></li>
-  <li class="mr-2"><a class="medium small d-inline-block" data-platform="medium" href="https://www.medium.com/mozilla-festival"><span class="sr-only">Youtube</span></a></li>
-  <li class="mr-2"><a class="youtube small d-inline-block" data-platform="youtube" href="https://www.youtube.com/playlist?list=PLnRGhgZaGeBt11miYYvKSSgbxkkbKKT7p"><span class="sr-only">Youtube</span></a></li>
-  <li class="mr-2"><a class="email small d-inline-block" data-platform="email" href="mailto:festival@mozilla.org"><span class="sr-only">Email</span></a></li>
+  <li class="mr-2"><a class="twitter-glyph small d-inline-block" data-platform="twitter" href="https://twitter.com/mozillafestival"><span class="sr-only">Twitter</span></a></li>
+  <li class="mr-2"><a class="medium-glyph small d-inline-block" data-platform="medium" href="https://www.medium.com/mozilla-festival"><span class="sr-only">Youtube</span></a></li>
+  <li class="mr-2"><a class="youtube-glyph small d-inline-block" data-platform="youtube" href="https://www.youtube.com/playlist?list=PLnRGhgZaGeBt11miYYvKSSgbxkkbKKT7p"><span class="sr-only">Youtube</span></a></li>
+  <li class="mr-2"><a class="email-glyph small d-inline-block" data-platform="email" href="mailto:festival@mozilla.org"><span class="sr-only">Email</span></a></li>
 {% endblock %}
 
 {% block general_links %}

network-api/networkapi/templates/partials/footer.html

@@ -36,9 +36,9 @@
             <h5 class="h5-heading">More about us</h5>
             <ul class="d-flex">
               {% block social_links %}
-              <li class="mr-2"><a class="twitter small d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">Twitter</span></a></li>
-              <li class="mr-2"><a class="instagram small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
-              <li class="mr-2"><a class="github small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">Github</span></a></li>
+              <li class="mr-2"><a class="twitter-glyph small d-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">Twitter</span></a></li>
+              <li class="mr-2"><a class="instagram-glyph small d-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">Instagram</span></a></li>
+              <li class="mr-2"><a class="github-glyph small d-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">Github</span></a></li>
               {% endblock %}
             </ul>
           </div>

network-api/networkapi/templates/partials/primary_nav.html

@@ -50,7 +50,7 @@
                 </div>
               </div>
               <div class="d-flex align-items-center">
-                <a id="donate-header-btn" class="donate-header mr-md-3" href="https://donate.mozilla.org?utm_source=foundation.mozilla.org&utm_medium=referral&utm_content=header" target="_blank" rel="noopener noreferrer">Donate</a>
+                <a id="donate-header-btn" class="heart-glyph mr-md-3" href="https://donate.mozilla.org?utm_source=foundation.mozilla.org&utm_medium=referral&utm_content=header" target="_blank" rel="noopener noreferrer">Donate</a>
                 <button class="btn btn-secondary btn-newsletter hidden-md-down">Newsletter</button>
               </div>
             </div>

network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js

@@ -83,12 +83,16 @@
             <div class="social-icons">
               ${
                 profile.twitter
-                  ? `<a href="${profile.twitter}" class="twitter small"></a>`
+                  ? `<a href="${
+                      profile.twitter
+                    }" class="twitter twitter-glyph small"></a>`
                   : ``
               }
               ${
                 profile.linkedin
-                  ? `<a href="${profile.linkedin}" class="linkedIn small"></a>`
+                  ? `<a href="${
+                      profile.linkedin
+                    }" class="linkedIn linkedIn-glyph small"></a>`
                   : ``
               }
             </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html

@@ -16,8 +16,8 @@
             </a>
             {% if profile.location %}<p class="d-flex align-items-center meta-block-location body-small my-2">{{ profile.location }}</p>{% endif %}
             <div class="social-icons">
-              {% if profile.twitter %}<a href="{{ profile.twitter }}" class="twitter small"></a>{% endif %}
-              {% if profile.linkedin %}<a href="{{ profile.linkedin }}" class="linkedIn small"></a>{% endif %}
+              {% if profile.twitter %}<a href="{{ profile.twitter }}" class="twitter twitter-glyph small"></a>{% endif %}
+              {% if profile.linkedin %}<a href="{{ profile.linkedin }}" class="linkedIn linkedIn-glyph small"></a>{% endif %}
             </div>
           </div>
           <div class="bio-wrapper">

source/js/components/news/news.jsx

@@ -49,9 +49,6 @@ export default class News extends React.Component {
         <div key={newsItem.headline}>
           <div className="mb-3 news-item">
             <div className="d-flex align-items-center mb-2">
-              {newsItem.glyph && (
-                <img src={newsItem.glyph} className="mr-2 glyph" />
-              )}
               <p className="h6-heading mb-0">{newsItem.outlet}</p>
             </div>
             <h3 className="h3-heading mb-2">

source/sass/glyphs.scss

@@ -23,16 +23,6 @@
     @include glyph($id);
   }
 
-  &.gray {
-    &::before {
-      filter: opacity(40%);
-    }
-
-    &:hover::before {
-      filter: opacity(60%);
-    }
-  }
-
   &.small {
     &::before {
       width: 16px;
@@ -40,7 +30,7 @@
     }
   }
 
-  &.donate-header {
+  &.heart-glyph {
     &::before {
       width: 19px;
       height: 16px;
@@ -51,52 +41,52 @@
   }
 }
 
-.donate-header {
-  @include compositeGlyph("donate-header");
-  @include hoverGlyph("donate-header-hover");
+.heart-glyph {
+  @include compositeGlyph("heart");
+  @include hoverGlyph("heart-hover");
 }
 
 .donate {
   @include compositeGlyph("donate");
 }
 
-.twitter {
+.twitter-glyph {
   @include compositeGlyph("twitter");
   @include hoverGlyph("twitter-hover");
 }
 
-.linkedIn {
+.linkedIn-glyph {
   @include compositeGlyph("linkedin");
   @include hoverGlyph("linkedin-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");
   }
 
-  .medium {
+  .medium-glyph {
     @include compositeGlyph("medium-dark-theme");
     @include hoverGlyph("medium-dark-theme-hover");
   }
 
-  .youtube {
+  .youtube-glyph {
     @include compositeGlyph("youtube-dark-theme");
     @include hoverGlyph("youtube-dark-theme-hover");
   }
 
-  .email {
+  .email-glyph {
     @include compositeGlyph("email-dark-theme");
     @include hoverGlyph("email-dark-theme-hover");
   }
 
-  .github {
+  .github-glyph {
     @include compositeGlyph("github-dark-theme");
     @include hoverGlyph("github-dark-theme-hover");
   }

source/sass/main.scss

@@ -13,7 +13,7 @@ $bp-md: #{map-get($grid-breakpoints, md)}; // >= 768px
 $bp-lg: #{map-get($grid-breakpoints, lg)}; // >= 992px
 $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
 
-//Site-wide
+// Site-wide
 @import "./_variables";
 @import "./glyphs";
 @import "./mixins";