Type cleanup & standardization work (#2810)

Type cleanup & standardization work
MozillaFoundation · Mar 25, 2019 · 7deb038 · 7deb038
1 parent 2539e9b
commit 7deb038
Show file tree

Hide file tree

Showing 44 changed files with 362 additions and 237 deletions.
diff --git a/network-api/networkapi/buyersguide/templates/about/contact.html b/network-api/networkapi/buyersguide/templates/about/contact.html
@@ -12,7 +12,7 @@
 
   <div class="col-12 col-md-12 col-lg-8 mt-5 mb-5 justify-content-center short-content">
 
-    <h1 class="h3-heading">
+    <h1 class="h2-heading">
       Contact Us
     </h1>
 

diff --git a/network-api/networkapi/buyersguide/templates/about/how-to-use.html b/network-api/networkapi/buyersguide/templates/about/how-to-use.html
@@ -9,15 +9,15 @@
 
     <div class="col-12 col-md-12 col-lg-8 mt-5 justify-content-center">
 
-      <h1 class="h3-heading">
+      <h1 class="h2-heading">
         How to Use This Guide
       </h1>
 
       <p>
         Need help understanding how to use this guide? Here you go:
       </p>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Creep-O-Meter
       </h2>
       <p>
@@ -26,14 +26,14 @@ <h2 class="h4-heading">
         up to others.
       </p>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Our Minimum Security Standards
       </h2>
       <p>
         We developed a set of minimum security standards we think all connected products should meet at the very least. Think of it as a “you must be this tall to ride” set of standards. These include five basic things: The product must use encryption, the company must provide automatic security updates, if a product uses a password, it must require a strong password, the company must have a way to manage security vulnerabilities found in their products, and the company must have an accessible privacy policy. In the guide, we've ticked the products that from our research appear to meet the guidelines. This tick is not an endorsement of the product on behalf of Mozilla, Consumers International or the Internet Society. If you would like to learn more about our minimum security standards go <a href="https://medium.com/read-write-participate/minimum-standards-for-tackling-iot-security-70f90b37f2d5">here</a>.
       </p>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Criteria
       </h2>
 
@@ -181,15 +181,15 @@ <h2 class="h5-heading">
         </label>
       </div>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Updates
       </h2>
       <p>
         When news breaks or we come across a relevant article about a product in this guide, we will share it in the
         updates section on each product page.
       </p>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Comments
       </h2>
       <p>
@@ -198,7 +198,7 @@ <h2 class="h4-heading">
         in the comment section at the bottom of each product page.
       </p>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Methodology
       </h2>
       <p>

diff --git a/network-api/networkapi/buyersguide/templates/about/why-we-made.html b/network-api/networkapi/buyersguide/templates/about/why-we-made.html
@@ -10,7 +10,7 @@
 
     <div class="col-12 col-md-12 col-lg-8 mt-5 justify-content-center">
 
-      <h1 class="h3-heading">
+      <h1 class="h2-heading">
         Why We Made This Guide
       </h1>
 
@@ -31,7 +31,7 @@ <h1 class="h3-heading">
         look like?
       </p>
 
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         This guide is more opinionated.
       </h2>
       <p>
@@ -44,7 +44,7 @@ <h2 class="h4-heading">
         guide.
 
       </p>
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         There is a Creep-O-Meter.
       </h2>
       <p>
@@ -53,7 +53,7 @@ <h2 class="h4-heading">
         created our Creep-O-Meter—a users rating on each product—to let folks give their opinion too. Try it out, it’s
         fun.
       </p>
-      <h2 class="h4-heading">
+      <h2 class="h3-heading">
         Bigger and better.
       </h2>
       <p>

diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
@@ -73,7 +73,7 @@ <h1 class="h1-heading text-center mt-4">Be Smart. Shop Safe.</h1>
           <img class="product-thumbnail" src="{{mediaUrl}}{{"AWS_LOCATION"|env}}/{{product.image }}" alt="link to {{product.name}}">
           {% endif %}
           <figcaption class="hidden-sm-down mt-md-2 text-left">
-            <div class="h6-heading">{{product.company}}</div>
+            <div class="body-small">{{product.company}}</div>
             <div class="body">{{product.name}}</div>
           </figcaption>
         </a>

diff --git a/network-api/networkapi/buyersguide/templates/category_page.html b/network-api/networkapi/buyersguide/templates/category_page.html
@@ -10,7 +10,7 @@
     <div class="row justify-content-center">
       <div class="col-12 col-md-8">
         <div class="mb-5">
-          <h1 class="h3-heading">{{ category.name }}</h1>
+          <h1 class="h2-heading">{{ category.name }}</h1>
           {% if category.description != None %}
           <p class="body-large mt-4">{{ category.description }}</p>
           {% endif %}
@@ -35,7 +35,7 @@ <h1 class="h3-heading">{{ category.name }}</h1>
                 <img class="product-thumbnail" src="{{ mediaUrl }}{{ "AWS_LOCATION" | env }}/{{ product.image }}">
                 {% endif %}
               </div>
-              <h3 class="mb-1 h6-heading">{{ product.company }}</h3>
+              <h3 class="mb-1 body-small">{{ product.company }}</h3>
               <h3 class="mb-5 h5-heading">{{ product.name }}</h3>
             </a>
           </div>

diff --git a/network-api/networkapi/buyersguide/templates/primary_nav.html b/network-api/networkapi/buyersguide/templates/primary_nav.html
@@ -10,7 +10,7 @@
               <div class="container text-center">
                 <div class="row">
                   <div class="col">
-                    <h3 class="h3-heading">Help us keep the Internet healthy</h3>
+                    <h3 class="h2-heading">Help us keep the Internet healthy</h3>
                     <p>Mozilla is a nonprofit organization fighting for a healthy interent.</p>
                     <a class="btn btn-donate m-0 w-100" id="donate-button" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=buyersguide&utm_campaign=buyersguide2018&utm_content=headerbutton">Donate</a>
                   </div>
@@ -29,7 +29,7 @@ <h3 class="h3-heading">Help us keep the Internet healthy</h3>
                 <div class="d-flex align-items-center justify-content-between">
                   <div class="d-flex align-items-center py-3 logo-section">
                     <a href="/" class="moz-logo mb-0 mr-3"><span class="sr-only">Mozilla</span></a>
-                    <p class="mb-0 h4-heading flex-wrap">
+                    <p class="mb-0 h3-heading flex-wrap">
                       <a class="link-back" href="/en/privacynotincluded">*privacy not included</a>
                     </p>
                   </div>

diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html
@@ -62,7 +62,7 @@ <h3 class="h5-heading d-inline-block mb-2 mb-sm-0 mr-3">Our Research</h3>
           <a href="/en/privacynotincluded/about" class="info-help">How to use this guide</a>
         </div>
 
-        <h3 class="h3-heading h3-heading-small">Can it spy on me</h3>
+        <h3 class="h3-heading">Can it spy on me</h3>
 
         <div class="row mb-5">
           <div class="col-12 col-md-4">
@@ -94,15 +94,15 @@ <h3 class="h3-heading h3-heading-small">Can it spy on me</h3>
           </div>
         </div>
 
-        <h3 class="h3-heading h3-heading-small">What does it know about me</h3>
+        <h3 class="h3-heading">What does it know about me</h3>
 
         <div class="mb-5">
           {% include "fragments/product-criterion.html"  with  value=product.uses_encryption  bad=False  help=product.uses_encryption_helptext  label="Product uses encryption" criterion_name="uses-encryption" %}
           {% include "fragments/product-policy.html" with product=product help=product.privacy_policy_helptext %}
           {% include "fragments/product-criterion.html"  with  value=product.share_data  bad=True  help=product.share_data_helptext  label="Shares your information with 3rd parties for unexpected reasons" %}
         </div>
 
-        <h3 class="h3-heading h3-heading-small">Can I control it</h3>
+        <h3 class="h3-heading">Can I control it</h3>
 
         <div class="mb-5">
           {% include "fragments/product-criterion.html"  with  value=product.must_change_default_password  bad=False  help=product.must_change_default_password_helptext   label="If a password is required, you must change the default password"  unknown_label="Not required" %}
@@ -111,14 +111,14 @@ <h3 class="h3-heading h3-heading-small">Can I control it</h3>
           {% include "fragments/product-criterion.html"  with  value=product.child_rules                   bad=False  help=product.child_rules_helptext                    label="Has parental controls "%}
         </div>
 
-        <h3 class="h3-heading h3-heading-small">Company shows it cares about its customers</h3>
+        <h3 class="h3-heading">Company shows it cares about its customers</h3>
 
         <div class="mb-5">
             {% include "fragments/product-criterion.html"  with  value=product.manage_security  bad=False  help=product.manage_security_helptext label="Company manages security vulnerabilities"%}
             {% include "fragments/product-contact.html" with product=product %}
         </div>
 
-        <h3 class="h3-heading h3-heading-small"><span class="creep-face-emoji">😮</span>What could happen if something went wrong</h3>
+        <h3 class="h3-heading"><span class="creep-face-emoji">😮</span>What could happen if something went wrong</h3>
 
         <p>{{product.worst_case}}</p>
 
@@ -136,7 +136,7 @@ <h3 class="h3-heading h3-heading-small"><span class="creep-face-emoji">😮</spa
       <div class="row">
         <div class="{{section_class}} mt-5 pt-3 bg-white">
           {% if product.updates|length > 0 or coralTalkServerUrl %}
-          <h3 class="h3-heading mb-4 mb-md-5">Updates</h3>
+          <h3 class="h2-heading mb-4 mb-md-5">Updates</h3>
           {% endif %}
           {% if product.updates|length > 0 %}
           <div class="mb-5">
@@ -154,7 +154,7 @@ <h3 class="h3-heading mb-4 mb-md-5">Updates</h3>
           <div id="coral-talk-stream"></div>
           {% endif %}
 
-          <h3 class="h3-heading mb-4">Compare products</h3>
+          <h3 class="h2-heading mb-4">Compare products</h3>
           <div class="row">
             {% for product in product.related_products %}
             <div class="related-product col-6 col-md-3 mb-3 mb-md-0">

diff --git a/network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js b/network-api/networkapi/wagtailpages/static/js/directory-listing-filters.js
@@ -78,7 +78,7 @@
                   </span>
                 </div>
               </a>
-              <p class="d-flex align-items-center meta-block-location h6-heading my-2">${
+              <p class="d-flex align-items-center meta-block-location body-small my-2">${
                 profile.location
               }</p>
             </div>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html
@@ -4,7 +4,7 @@
 <div class="my-default">
   <img src="{{ img.url }}" alt="{{ value.altText }}" class="w-100" />
   {% if value.caption %}
-  <p class="h6-heading">
+  <p class="body-small">
     {% if value.captionURL %}<a href="{{ value.captionURL }}">{% endif %}
     {{ value.caption }}
     {% if value.captionURL %}</a>{% endif %}

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html
@@ -5,7 +5,7 @@
     <iframe src="{{ value.url }}" class="embed-responsive-item"></iframe>
   </div>
   {% if value.caption %}
-  <p class="h6-heading">
+  <p class="body-small">
     {% if value.captionURL %}<a href="{{ value.captionURL }}">{% endif %}
     {{ value.caption }}
     {% if value.captionURL %}</a>{% endif %}

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html
@@ -21,7 +21,7 @@
                   </span>
                 </div>
               </a>
-              <p class="d-flex align-items-center meta-block-location h6-heading my-2">{{ profile.location }}</p>
+              <p class="d-flex align-items-center meta-block-location body-small my-2">{{ profile.location }}</p>
             </div>
             <div class="social-icons">
               {%if profile.twitter %} <a href="{{ profile.twitter }}" class="twitter small"></a> {% endif %}

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/quote_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/quote_block.html
@@ -7,7 +7,7 @@
     {% if forloop.counter is 1 %}
     <div class="feature-quote">
       <h3>{{quote.quote}}</h3>
-      <p class="h6-heading-uppercase">{{quote.attribution}}</p>
+      <p class="h6-heading">{{quote.attribution}}</p>
     </div>
     {% endif %}
     {% endfor %}

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/video_block.html
@@ -11,7 +11,7 @@
     </iframe>
   </div>
   {% if value.caption %}
-  <p class="h6-heading">
+  <p class="body-small">
     {% if value.captionURL %}<a href="{{ value.captionURL }}">{% endif %}
     {{ value.caption }}
     {% if value.captionURL %}</a>{% endif %}

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/homepage.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/homepage.html
@@ -24,7 +24,7 @@ <h1 class="h1-heading">{{ page.hero_headline }}</h1>
   <div class="row">
     <div class="col mb-4">
       <hr class="mb-4 hr-emphasis mt-0">
-      <h4 class="h2-heading">Latest news</h4>
+      <h4 class="h4-heading">Latest news</h4>
     </div>
   </div>
   <div id="home-news-wagtail">
@@ -44,12 +44,12 @@ <h4 class="h2-heading">Latest news</h4>
                   {% if article.news.glyph %}
                     {% homepage_image_with_class article.news.glyph "mr-2 glyph" %}
                   {% endif %}
-                  <p class="h6-heading-uppercase mb-0">{{article.news.outlet}}</p>
+                  <p class="h6-heading mb-0">{{article.news.outlet}}</p>
                 </div>
-                <h5 class="mb-2 h4-heading">
+                <h5 class="mb-2 h3-heading">
                   <a href="{{article.news.link}}">{{article.news.headline}}</a>
                 </h5>
-                <p class="h6-heading mb-2">{% if article.news.author %}by {{article.news.author}} on {% endif %} {{article.news.date}}</p>
+                <p class="body-small mb-2">{% if article.news.author %}by {{article.news.author}} on {% endif %} {{article.news.date}}</p>
                 <p>{{article.news.excerpt}}</p>
               </div>
             </div>
@@ -68,12 +68,12 @@ <h5 class="mb-2 h4-heading">
             {% if article.news.glyph %}
             {% homepage_image_with_class article.news.glyph "mr-2 glyph" %}
             {% endif %}
-            <p class="h6-heading-uppercase mb-0">{{article.news.outlet}}</p>
+            <p class="h6-heading mb-0">{{article.news.outlet}}</p>
           </div>
           <h5 class="mb-2">
             <a href="{{article.news.link}}">{{article.news.headline}}</a>
           </h5>
-          <p class="h6-heading mb-2">{% if article.news.author %}by {{article.news.author}} on {% endif %} {{article.news.date}}</p>
+          <p class="body-small mb-2">{% if article.news.author %}by {{article.news.author}} on {% endif %} {{article.news.date}}</p>
           <p>{{article.news.excerpt}}</p>
           <hr>
         </div>
@@ -91,7 +91,7 @@ <h5 class="mb-2">
   <div class="row">
     <div class="col mb-4">
       <hr class="hr-emphasis mb-4">
-      <h4 class="h2-heading">Happening now</h4>
+      <h4 class="h4-heading">Happening now</h4>
     </div>
   </div>
   <div id="home-highlights-wagtail">
@@ -127,7 +127,7 @@ <h5 class="h5-heading mb-3">
 </div>
 <div class="row">
   <div class="col-md-6">
-    <h4 class="h2-heading">Trending projects</h4>
+    <h4 class="h4-heading">Trending projects</h4>
   </div>
   <div class="col-md-6 d-none d-md-flex justify-content-end">
     <a class="cta-link" href="https://www.mozillapulse.org/add">Add your project</a>
@@ -151,7 +151,7 @@ <h4 class="h2-heading">Trending projects</h4>
       <div class="col">
         <div class="feature-quote">
           <h3>We want to give users the knowledge and the power to make informed decisions by themselves to prevent abusive practices.</h3>
-          <p class="h6-heading-uppercase">Rishab Nithyanand, Mozilla Fellow</p>
+          <p class="h6-heading">Rishab Nithyanand, Mozilla Fellow</p>
         </div>
       </div>
     </div>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html
@@ -51,7 +51,7 @@ <h1 class="h1-heading">{{ page.header }}</h1>
     </div>
     <div class="col-12 col-md-5 col-lg-4 px-3 py-3 px-md-0 ml-lg-4 align-self-center">
       <div class="container">
-        <h2 class="h3-heading">{{ section.sectionHeader }}</h2>
+        <h2 class="h2-heading">{{ section.sectionHeader }}</h2>
         <p class="body-large mb-4">{{ section.sectionCopy }}</p>
         <a href="{{ section.sectionButtonURL }}" class="btn btn-ghost {% if section.sectionButtonURL2 and section.sectionButtonTitle2 %}mr-2 mb-2{% endif %}">{{ section.sectionButtonTitle }}</a>
         {% if section.sectionButtonURL2 and section.sectionButtonTitle2 %}
@@ -66,7 +66,7 @@ <h2 class="h3-heading">{{ section.sectionHeader }}</h2>
 <div class="container">
   <div class="hr-emphasis"></div>
 
-  <h3 class="h2-heading">{{ page.h3 }}</h3>
+  <h3 class="h4-heading">{{ page.h3 }}</h3>
   <p class="body-large my-4">{{ page.sub_h3 }}</p>
 
   <div class="highlights mb-5">

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page.html
@@ -7,21 +7,21 @@
       <div class="col-sm-4">
         <img class="mb-3 mb-md-0" src="/_images/upcoming/mozfest-banner.jpg"></div>
       <div class="col-sm-8">
-        <h4 class="h4-heading">Mozfest 2018 is open for proposals!</h4>
+        <h4 class="h3-heading">Mozfest 2018 is open for proposals!</h4>
         <p>This years theme "Data and You" takes the large concepts of data: collection, surveillance, policy, it’s currency and its future and center it around the most important of all its parts: people. How does and will data affect people’s lives? How can we share best practices, innovative tools and grow connections that allow data to serve people instead of people serving data. The deadline for proposals is August 1st.</p><a class="cta-link" href="https://mozillafestival.org/proposals">Apply now</a>
       </div>
     </div>
     <div class="row my-5">
       <div class="col-sm-4"><img class="mb-3 mb-md-0" src="/_images/upcoming/images-upcoming-fellowships@2x.jpg"></div>
       <div class="col-sm-8">
-        <h4 class="h4-heading">Fellowships that Empower Leaders</h4>
+        <h4 class="h3-heading">Fellowships that Empower Leaders</h4>
         <p>Mozilla Fellowships provide resources, tools, community and amplification to those building a more humane digital world. Mozilla Fellowships are a transformative experience for emerging leaders concerned with making the internet a safer, more accessible resource for everyone.</p><a class="cta-link" href="https://foundation.mozilla.org/fellowships">Learn more and apply</a>
       </div>
     </div>
     <div class="row my-5">
       <div class="col-sm-4"><img class="mb-3 mb-md-0" src="/_images/upcoming/images-upcoming-internet-health-report@2x.jpg"></div>
       <div class="col-sm-8">
-        <h4 class="h4-heading">Internet Health Report</h4>
+        <h4 class="h3-heading">Internet Health Report</h4>
         <p>Is the Internet getting healthier? Is it under threat? Do we all have a voice on the web? Mozilla’s Internet Health Report is an open source initiative that combines research from multiple sources to document what’s healthy and unhealthy.</p><a class="cta-link" href="https://internethealthreport.org/">Read the report</a>
       </div>
     </div>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html
@@ -13,7 +13,7 @@
       <div class="col-12 col-md-10 col-xl-5 mb-2">
         <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
         <div class="body-large">{{ page.ctaHeroSubhead | richtext }}</div>
-        <p class="commitment">{{ page.ctaCommitment }}</p>
+        <p class="h6-heading commitment">{{ page.ctaCommitment }}</p>
         <a class="btn btn-normal" href={{ page.ctaButtonURL }}>{{ page.ctaButtonTitle }}</a>
       </div>
     </div>
@@ -23,7 +23,7 @@ <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
 <div class="container">
   <div class="row">
     <div class="col-12 col-lg-8 mb-1">
-      <h2 class="h3-heading">{{ page.h2 }}</h2>
+      <h2 class="h2-heading">{{ page.h2 }}</h2>
       <p class="body-large">{{ page.h2Subheader }}</p>
     </div>
   </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,7 +78,7 @@ @@
                       </span>
                     </div>
                   </a>
-                  <p class="d-flex align-items-center meta-block-location h6-heading my-2">${
+                  <p class="d-flex align-items-center meta-block-location body-small my-2">${
                     profile.location
                   }</p>
                 </div>
@@ Expand Down @@