fix(content): Add header and subheader styling where missing

Because: * Some headings were not styled on backbone pages This commit: * Add card-header and card-subheader styles where missing in ready, supp_wait_for_auth, auth_wait_for_supp, completed mustache templates Closes #FXA-8585
mozilla · Nov 8, 2023 · e490811 · bcolsson · Nov 13, 2023 · e490811
1 parent 320c6c1
commit e490811
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/packages/fxa-content-server/app/scripts/templates/pair/auth_wait_for_supp.mustache b/packages/fxa-content-server/app/scripts/templates/pair/auth_wait_for_supp.mustache
@@ -1,7 +1,7 @@
 <div id="main-content" class="card pair-auth">
   <header>
-    <h1 id="fxa-pair-auth-wait-for-supp-header">
-      {{#unsafeTranslate}}Approval now required <small>from your other device</small>{{/unsafeTranslate}}
+    <h1 id="fxa-pair-auth-wait-for-supp-header" class="card-header">
+      {{#unsafeTranslate}}Approval now required <small class="card-subheader">from your other device</small>{{/unsafeTranslate}}
     </h1>
   </header>
 

diff --git a/packages/fxa-content-server/app/scripts/templates/pair/supp_wait_for_auth.mustache b/packages/fxa-content-server/app/scripts/templates/pair/supp_wait_for_auth.mustache
@@ -1,7 +1,7 @@
 <div id="main-content" class="card">
   <header>
-    <h1 id="fxa-pair-supp-wait-for-auth-header">
-      {{#unsafeTranslate}}Approval now required <small>from your other device</small>{{/unsafeTranslate}}
+    <h1 id="fxa-pair-supp-wait-for-auth-header" class="card-header">
+      {{#unsafeTranslate}}Approval now required <small class="card-subheader">from your other device</small>{{/unsafeTranslate}}
     </h1>
   </header>
 

diff --git a/packages/fxa-content-server/app/scripts/templates/push/completed.mustache b/packages/fxa-content-server/app/scripts/templates/push/completed.mustache
@@ -1,6 +1,6 @@
 <div id="main-content" class="card pair-auth push-auth-complete">
   <header>
-    <h1 id="push-auth-complete-header">{{#t}}Sign-in confirmed{{/t}}</h1>
+    <h1 id="push-auth-complete-header" class="card-header">{{#t}}Sign-in confirmed{{/t}}</h1>
   </header>
 
   <section>
@@ -11,4 +11,3 @@
       <p class="verification-message">{{#t}}Please close this page and continue on the other device.{{/t}}</p>
   </section>
 </div>
-
diff --git a/packages/fxa-content-server/app/scripts/templates/ready.mustache b/packages/fxa-content-server/app/scripts/templates/ready.mustache
@@ -1,6 +1,6 @@
 <div id="main-content" class="card">
   <header>
-    <h1 id="{{headerId}}">{{{escapedHeaderTitle}}}</h1>
+    <h1 id="{{headerId}}" class="card-header">{{{escapedHeaderTitle}}}</h1>
   </header>
 
   <section>