From 3a2ba36addf304cf1b9bee92d3c42239cdf3b2ac Mon Sep 17 00:00:00 2001
From: Barnabas Nsoh <banasco@gmail.com>
Date: Fri, 26 Jan 2024 14:49:29 +0000
Subject: [PATCH 1/2] Use new typography

---
 .../document-instructions/src/DocumentInstruction.js         | 4 ++--
 packages/components/selfie-capture/SelfieCapture.js          | 2 +-
 packages/components/selfie-capture/SelfieInstruction.js      | 5 ++++-
 packages/components/selfie-capture/SelfieReview.js           | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/components/document-capture/document-instructions/src/DocumentInstruction.js b/packages/components/document-capture/document-instructions/src/DocumentInstruction.js
index 9a37af36..14537727 100644
--- a/packages/components/document-capture/document-instructions/src/DocumentInstruction.js
+++ b/packages/components/document-capture/document-instructions/src/DocumentInstruction.js
@@ -3,7 +3,6 @@ import styles from '../../../styles';
 
 function templateString() {
   return `
-    ${styles}
     <div id="document-instruction-screen" class="flow center">
         <section className="main">
         ${this.showNavigation
@@ -77,7 +76,7 @@ function templateString() {
           </clipPath>
         </defs>
       </svg>
-            <h1>${this.title}</h1>
+            <h1 class='text-2xl color-digital-blue font-bold'>${this.title}</h1>
         <p class="description text-sm font-normal">
             We'll use it to verify your identity.
           </p>
@@ -286,6 +285,7 @@ function templateString() {
 ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
     </section>
   </div>
+  ${styles}
   `;
 }
 
diff --git a/packages/components/selfie-capture/SelfieCapture.js b/packages/components/selfie-capture/SelfieCapture.js
index 5c7678f3..78f58da9 100644
--- a/packages/components/selfie-capture/SelfieCapture.js
+++ b/packages/components/selfie-capture/SelfieCapture.js
@@ -526,7 +526,7 @@ function templateString() {
         </button>
       </div>
     ` : ''}
-    <h1>Take a Selfie</h1>
+    <h1 class='text-2xl color-digital-blue font-bold'>Take a Selfie</h1>
 
     <div class='section | flow'>
       <div class='video-container'>
diff --git a/packages/components/selfie-capture/SelfieInstruction.js b/packages/components/selfie-capture/SelfieInstruction.js
index 6a45fef1..50265844 100644
--- a/packages/components/selfie-capture/SelfieInstruction.js
+++ b/packages/components/selfie-capture/SelfieInstruction.js
@@ -1,3 +1,5 @@
+import styles from "../styles";
+
 function templateString() {
   return `
     <link rel="preconnect" href="https://fonts.gstatic.com" />
@@ -305,6 +307,7 @@ function templateString() {
         font-weight: 700;
       }
     </style>
+    ${styles}
     <div id="id-entry-screen" class="flow center">
     ${this.showNavigation ? `
     <div class="nav">
@@ -401,7 +404,7 @@ function templateString() {
           </clipPath>
         </defs>
       </svg>
-      <h1>Next, we'll take a quick selfie</h1>
+      <h1 class='text-2xl color-digital-blue font-bold'>Next, we'll take a quick selfie</h1>
     </header>
     <div class="flow">
       <div class="instructions">
diff --git a/packages/components/selfie-capture/SelfieReview.js b/packages/components/selfie-capture/SelfieReview.js
index 72079c8d..8456bcb8 100644
--- a/packages/components/selfie-capture/SelfieReview.js
+++ b/packages/components/selfie-capture/SelfieReview.js
@@ -159,6 +159,7 @@ function templateString() {
         line-height: 1.5rem;
       }
     </style>
+    ${styles}
     <div id='id-review-screen' class='flow center'>
     ${this.showNavigation ? `
       <div class="nav justify-right">
@@ -171,7 +172,7 @@ function templateString() {
         </button>
       </div>
     ` : ''}
-    <h1 class="header-title">
+    <h1 class="header-title text-2xl color-digital-blue font-bold">
     Is you whole face visible 
     and clear in this photo?
     </h1>

From 260f4ec9c482ac77957aea1163c6efc44f553725 Mon Sep 17 00:00:00 2001
From: Barnabas Nsoh <banasco@gmail.com>
Date: Fri, 26 Jan 2024 15:41:16 +0000
Subject: [PATCH 2/2] Fix lint

---
 packages/components/selfie-capture/SelfieInstruction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/selfie-capture/SelfieInstruction.js b/packages/components/selfie-capture/SelfieInstruction.js
index 50265844..1c8d9ae7 100644
--- a/packages/components/selfie-capture/SelfieInstruction.js
+++ b/packages/components/selfie-capture/SelfieInstruction.js
@@ -1,4 +1,4 @@
-import styles from "../styles";
+import styles from '../styles';
 
 function templateString() {
   return `