h3 typography on small screens, h2 on medium-large screens (#10939)

bitwarden · Sep 9, 2024 · 12967b0 · 12967b0
1 parent 4e7399e
commit 12967b0
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -13,9 +13,16 @@
       <bit-icon [icon]="icon"></bit-icon>
     </div>
 
-    <h1 *ngIf="title" bitTypography="h3" class="tw-mt-2 sm:tw-text-2xl">
-      {{ title }}
-    </h1>
+    <ng-container *ngIf="title">
+      <!-- Small screens -->
+      <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
+        {{ title }}
+      </h1>
+      <!-- Medium to Larger screens -->
+      <h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
+        {{ title }}
+      </h1>
+    </ng-container>
     <div *ngIf="subtitle" class="tw-text-sm sm:tw-text-base">{{ subtitle }}</div>
   </div>