Use new typography (#194)

* Use new typography * Fix lint
smileidentity · Jan 29, 2024 · 8eb2b7a · 8eb2b7a
1 parent 3771d7c
commit 8eb2b7a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>