From 0eb3f369dcef5b9f1560039beff5c290371fe79b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 20 Sep 2022 12:14:04 +0100
Subject: [PATCH] [SM-223] Web: change `<h2>` modal title to `<h1>`, tweak
 styles to keep same look (#3328)

Co-authored-by: Hinton <hinton@users.noreply.github.com>
---
 apps/web/src/app/accounts/two-factor-options.component.html   | 2 +-
 apps/web/src/app/components/password-reprompt.component.html  | 4 ++--
 .../app/organizations/manage/bulk/bulk-confirm.component.html | 4 ++--
 .../app/organizations/manage/bulk/bulk-remove.component.html  | 4 ++--
 .../manage/bulk/bulk-restore-revoke.component.html            | 4 ++--
 .../app/organizations/manage/bulk/bulk-status.component.html  | 4 ++--
 .../organizations/manage/collection-add-edit.component.html   | 2 +-
 .../src/app/organizations/manage/entity-events.component.html | 4 ++--
 .../src/app/organizations/manage/entity-users.component.html  | 4 ++--
 .../app/organizations/manage/group-add-edit.component.html    | 2 +-
 .../src/app/organizations/manage/policy-edit.component.html   | 4 ++--
 .../app/organizations/manage/reset-password.component.html    | 4 ++--
 .../src/app/organizations/manage/user-add-edit.component.html | 4 ++--
 .../src/app/organizations/manage/user-confirm.component.html  | 4 ++--
 .../src/app/organizations/manage/user-groups.component.html   | 4 ++--
 .../settings/billing-sync-api-key.component.html              | 4 ++--
 .../organizations/settings/delete-organization.component.html | 2 +-
 .../users/enroll-master-password-reset.component.html         | 4 ++--
 apps/web/src/app/send/add-edit.component.html                 | 2 +-
 apps/web/src/app/settings/api-key.component.html              | 2 +-
 apps/web/src/app/settings/billing-sync-key.component.html     | 2 +-
 apps/web/src/app/settings/deauthorize-sessions.component.html | 2 +-
 apps/web/src/app/settings/delete-account.component.html       | 2 +-
 .../src/app/settings/emergency-access-add-edit.component.html | 4 ++--
 .../src/app/settings/emergency-access-confirm.component.html  | 4 ++--
 .../src/app/settings/emergency-access-takeover.component.html | 4 ++--
 apps/web/src/app/settings/purge-vault.component.html          | 2 +-
 .../src/app/settings/two-factor-authenticator.component.html  | 4 ++--
 apps/web/src/app/settings/two-factor-duo.component.html       | 4 ++--
 apps/web/src/app/settings/two-factor-email.component.html     | 4 ++--
 apps/web/src/app/settings/two-factor-recovery.component.html  | 4 ++--
 apps/web/src/app/settings/two-factor-webauthn.component.html  | 4 ++--
 apps/web/src/app/settings/two-factor-yubikey.component.html   | 4 ++--
 apps/web/src/app/settings/update-key.component.html           | 2 +-
 .../src/app/tools/password-generator-history.component.html   | 2 +-
 apps/web/src/app/vault/add-edit.component.html                | 2 +-
 apps/web/src/app/vault/attachments.component.html             | 4 ++--
 apps/web/src/app/vault/bulk-delete.component.html             | 4 ++--
 apps/web/src/app/vault/bulk-move.component.html               | 4 ++--
 apps/web/src/app/vault/bulk-restore.component.html            | 4 ++--
 apps/web/src/app/vault/bulk-share.component.html              | 4 ++--
 apps/web/src/app/vault/collections.component.html             | 4 ++--
 apps/web/src/app/vault/folder-add-edit.component.html         | 2 +-
 apps/web/src/app/vault/share.component.html                   | 4 ++--
 apps/web/src/scss/modals.scss                                 | 4 ++++
 45 files changed, 78 insertions(+), 74 deletions(-)

diff --git a/apps/web/src/app/accounts/two-factor-options.component.html b/apps/web/src/app/accounts/two-factor-options.component.html
index 690d0a1d995..5c5eccb8831 100644
--- a/apps/web/src/app/accounts/two-factor-options.component.html
+++ b/apps/web/src/app/accounts/two-factor-options.component.html
@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="twoStepOptionsTitle">{{ "twoStepOptions" | i18n }}</h2>
+        <h1 class="modal-title" id="twoStepOptionsTitle">{{ "twoStepOptions" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/components/password-reprompt.component.html b/apps/web/src/app/components/password-reprompt.component.html
index c61fcc394db..ebd81976566 100644
--- a/apps/web/src/app/components/password-reprompt.component.html
+++ b/apps/web/src/app/components/password-reprompt.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()">
       <div class="modal-header">
-        <h2 class="modal-title" id="confirmUserTitle">
+        <h1 class="modal-title" id="confirmUserTitle">
           {{ "passwordConfirmation" | i18n }}
-        </h2>
+        </h1>
         <button type="button" class="close" data-dismiss="modal">
           <span aria-hidden="true">&times;</span>
         </button>
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
index 84f660823ff..595f9d767eb 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ "confirmUsers" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
index 25b91fbf13a..d17b52e89a6 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ "removeUsers" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
index e02ee93e885..87b7af791ee 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ bulkTitle }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html b/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
index 8d9676781ad..86bacda38c7 100644
--- a/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
+++ b/apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="bulkTitle">
+        <h1 class="modal-title" id="bulkTitle">
           {{ "bulkConfirmStatus" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/collection-add-edit.component.html b/apps/web/src/app/organizations/manage/collection-add-edit.component.html
index f699e802b5b..97c973a4195 100644
--- a/apps/web/src/app/organizations/manage/collection-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/collection-add-edit.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="collectionAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="collectionAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/entity-events.component.html b/apps/web/src/app/organizations/manage/entity-events.component.html
index 29f266cf04f..122d0b81888 100644
--- a/apps/web/src/app/organizations/manage/entity-events.component.html
+++ b/apps/web/src/app/organizations/manage/entity-events.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="eventLogsTitle">
+        <h1 class="modal-title" id="eventLogsTitle">
           {{ "eventLogs" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/entity-users.component.html b/apps/web/src/app/organizations/manage/entity-users.component.html
index 92f95bae3b3..0f95fafc41f 100644
--- a/apps/web/src/app/organizations/manage/entity-users.component.html
+++ b/apps/web/src/app/organizations/manage/entity-users.component.html
@@ -8,10 +8,10 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAccessTitle">
+        <h1 class="modal-title" id="userAccessTitle">
           {{ "userAccess" | i18n }}
           <small>{{ entityName }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/group-add-edit.component.html b/apps/web/src/app/organizations/manage/group-add-edit.component.html
index 8bb58656b1b..d1055d86e85 100644
--- a/apps/web/src/app/organizations/manage/group-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/group-add-edit.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="groupAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="groupAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/policy-edit.component.html b/apps/web/src/app/organizations/manage/policy-edit.component.html
index 90f1de81900..5f5dc1d85ef 100644
--- a/apps/web/src/app/organizations/manage/policy-edit.component.html
+++ b/apps/web/src/app/organizations/manage/policy-edit.component.html
@@ -8,9 +8,9 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="policiesEditTitle">
+        <h1 class="modal-title" id="policiesEditTitle">
           {{ "editPolicy" | i18n }} - {{ policy.name | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/reset-password.component.html b/apps/web/src/app/organizations/manage/reset-password.component.html
index 675a17e4b08..7b3ccdcc9a4 100644
--- a/apps/web/src/app/organizations/manage/reset-password.component.html
+++ b/apps/web/src/app/organizations/manage/reset-password.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="resetPasswordTitle">
+        <h1 class="modal-title" id="resetPasswordTitle">
           {{ "resetPassword" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/user-add-edit.component.html b/apps/web/src/app/organizations/manage/user-add-edit.component.html
index 11b2b4cf19d..fa4e896d208 100644
--- a/apps/web/src/app/organizations/manage/user-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/user-add-edit.component.html
@@ -8,11 +8,11 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAddEditTitle">
+        <h1 class="modal-title" id="userAddEditTitle">
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
           <span bitBadge badgeType="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/user-confirm.component.html b/apps/web/src/app/organizations/manage/user-confirm.component.html
index 87cc0d970a8..1ee616f8bd5 100644
--- a/apps/web/src/app/organizations/manage/user-confirm.component.html
+++ b/apps/web/src/app/organizations/manage/user-confirm.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="confirmUserTitle">
+        <h1 class="modal-title" id="confirmUserTitle">
           {{ "confirmUser" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/manage/user-groups.component.html b/apps/web/src/app/organizations/manage/user-groups.component.html
index 4853125b783..347125e9825 100644
--- a/apps/web/src/app/organizations/manage/user-groups.component.html
+++ b/apps/web/src/app/organizations/manage/user-groups.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="groupAccessTitle">
+        <h1 class="modal-title" id="groupAccessTitle">
           {{ "groupAccess" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html b/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html
index 2319fe63029..43733928730 100644
--- a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html
+++ b/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html
@@ -8,9 +8,9 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="billingSyncApiKeyTitle">
+        <h1 class="modal-title" id="billingSyncApiKeyTitle">
           {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/settings/delete-organization.component.html b/apps/web/src/app/organizations/settings/delete-organization.component.html
index 80d8ae0f790..9f6fbbfb6d1 100644
--- a/apps/web/src/app/organizations/settings/delete-organization.component.html
+++ b/apps/web/src/app/organizations/settings/delete-organization.component.html
@@ -9,7 +9,7 @@
       *ngIf="loaded"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="deleteOrganizationTitle">{{ "deleteOrganization" | i18n }}</h2>
+        <h1 class="modal-title" id="deleteOrganizationTitle">{{ "deleteOrganization" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html b/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
index f72602ac911..72f1bbdbda7 100644
--- a/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
+++ b/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
@@ -13,9 +13,9 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="enrollMasterPasswordResetTitle">
+        <h1 class="modal-title" id="enrollMasterPasswordResetTitle">
           {{ "enrollPasswordReset" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/send/add-edit.component.html b/apps/web/src/app/send/add-edit.component.html
index 8d6c066bab9..dcc60a3c7af 100644
--- a/apps/web/src/app/send/add-edit.component.html
+++ b/apps/web/src/app/send/add-edit.component.html
@@ -9,7 +9,7 @@
       autocomplete="off"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="sendAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="sendAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/api-key.component.html b/apps/web/src/app/settings/api-key.component.html
index 8e042aa6e45..1402a993881 100644
--- a/apps/web/src/app/settings/api-key.component.html
+++ b/apps/web/src/app/settings/api-key.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="apiKeyTitle">{{ apiKeyTitle | i18n }}</h2>
+        <h1 class="modal-title" id="apiKeyTitle">{{ apiKeyTitle | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/billing-sync-key.component.html b/apps/web/src/app/settings/billing-sync-key.component.html
index e7e46e637c9..b2a0c0c60dc 100644
--- a/apps/web/src/app/settings/billing-sync-key.component.html
+++ b/apps/web/src/app/settings/billing-sync-key.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h2>
+        <h1 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/deauthorize-sessions.component.html b/apps/web/src/app/settings/deauthorize-sessions.component.html
index ac7dc7ba02e..56e2cda578d 100644
--- a/apps/web/src/app/settings/deauthorize-sessions.component.html
+++ b/apps/web/src/app/settings/deauthorize-sessions.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="deAuthTitle">{{ "deauthorizeSessions" | i18n }}</h2>
+        <h1 class="modal-title" id="deAuthTitle">{{ "deauthorizeSessions" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/delete-account.component.html b/apps/web/src/app/settings/delete-account.component.html
index 77b9df007bc..c2fbbe9e2cb 100644
--- a/apps/web/src/app/settings/delete-account.component.html
+++ b/apps/web/src/app/settings/delete-account.component.html
@@ -9,7 +9,7 @@
       [formGroup]="deleteForm"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="deleteAccountTitle">{{ "deleteAccount" | i18n }}</h2>
+        <h1 class="modal-title" id="deleteAccountTitle">{{ "deleteAccount" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/emergency-access-add-edit.component.html b/apps/web/src/app/settings/emergency-access-add-edit.component.html
index e7198e19030..410489321a1 100644
--- a/apps/web/src/app/settings/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/settings/emergency-access-add-edit.component.html
@@ -8,11 +8,11 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAddEditTitle">
+        <h1 class="modal-title" id="userAddEditTitle">
           <app-premium-badge *ngIf="readOnly"></app-premium-badge>
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/emergency-access-confirm.component.html b/apps/web/src/app/settings/emergency-access-confirm.component.html
index 87cc0d970a8..1ee616f8bd5 100644
--- a/apps/web/src/app/settings/emergency-access-confirm.component.html
+++ b/apps/web/src/app/settings/emergency-access-confirm.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="confirmUserTitle">
+        <h1 class="modal-title" id="confirmUserTitle">
           {{ "confirmUser" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/emergency-access-takeover.component.html b/apps/web/src/app/settings/emergency-access-takeover.component.html
index 468e80d005e..dbcce914e9f 100644
--- a/apps/web/src/app/settings/emergency-access-takeover.component.html
+++ b/apps/web/src/app/settings/emergency-access-takeover.component.html
@@ -8,10 +8,10 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="userAddEditTitle">
+        <h1 class="modal-title" id="userAddEditTitle">
           {{ "takeover" | i18n }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/purge-vault.component.html b/apps/web/src/app/settings/purge-vault.component.html
index 2c6a9f50fcb..485e64617e2 100644
--- a/apps/web/src/app/settings/purge-vault.component.html
+++ b/apps/web/src/app/settings/purge-vault.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="purgeVaultTitle">{{ "purgeVault" | i18n }}</h2>
+        <h1 class="modal-title" id="purgeVaultTitle">{{ "purgeVault" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-authenticator.component.html b/apps/web/src/app/settings/two-factor-authenticator.component.html
index e46c7b0703c..3ed1b2e573e 100644
--- a/apps/web/src/app/settings/two-factor-authenticator.component.html
+++ b/apps/web/src/app/settings/two-factor-authenticator.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faAuthenticatorTitle">
+        <h1 class="modal-title" id="2faAuthenticatorTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "authenticatorAppTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-duo.component.html b/apps/web/src/app/settings/two-factor-duo.component.html
index e3d057ff51d..02e3e9c5950 100644
--- a/apps/web/src/app/settings/two-factor-duo.component.html
+++ b/apps/web/src/app/settings/two-factor-duo.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faDuoTitle">
+        <h1 class="modal-title" id="2faDuoTitle">
           {{ "twoStepLogin" | i18n }}
           <small>Duo</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-email.component.html b/apps/web/src/app/settings/two-factor-email.component.html
index f189a275040..5f98fb0d93d 100644
--- a/apps/web/src/app/settings/two-factor-email.component.html
+++ b/apps/web/src/app/settings/two-factor-email.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faEmailTitle">
+        <h1 class="modal-title" id="2faEmailTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "emailTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-recovery.component.html b/apps/web/src/app/settings/two-factor-recovery.component.html
index ba9129da17a..d3bb8c28b6d 100644
--- a/apps/web/src/app/settings/two-factor-recovery.component.html
+++ b/apps/web/src/app/settings/two-factor-recovery.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faRecoveryTitle">
+        <h1 class="modal-title" id="2faRecoveryTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "recoveryCodeTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-webauthn.component.html b/apps/web/src/app/settings/two-factor-webauthn.component.html
index 2c91dbc5ae0..1a5676afd85 100644
--- a/apps/web/src/app/settings/two-factor-webauthn.component.html
+++ b/apps/web/src/app/settings/two-factor-webauthn.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faU2fTitle">
+        <h1 class="modal-title" id="2faU2fTitle">
           {{ "twoStepLogin" | i18n }}
           <small>{{ "webAuthnTitle" | i18n }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/two-factor-yubikey.component.html b/apps/web/src/app/settings/two-factor-yubikey.component.html
index 96eff9b3a43..ad26df871d0 100644
--- a/apps/web/src/app/settings/two-factor-yubikey.component.html
+++ b/apps/web/src/app/settings/two-factor-yubikey.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="2faYubiKeyTitle">
+        <h1 class="modal-title" id="2faYubiKeyTitle">
           {{ "twoStepLogin" | i18n }}
           <small>YubiKey</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/settings/update-key.component.html b/apps/web/src/app/settings/update-key.component.html
index e82fc77267a..b39a5eb7e1a 100644
--- a/apps/web/src/app/settings/update-key.component.html
+++ b/apps/web/src/app/settings/update-key.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="updateEncKeyTitle">{{ "updateEncryptionKey" | i18n }}</h2>
+        <h1 class="modal-title" id="updateEncKeyTitle">{{ "updateEncryptionKey" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/tools/password-generator-history.component.html b/apps/web/src/app/tools/password-generator-history.component.html
index 5b9e32378a3..dd26f0a92b8 100644
--- a/apps/web/src/app/tools/password-generator-history.component.html
+++ b/apps/web/src/app/tools/password-generator-history.component.html
@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2 class="modal-title" id="passHistoryTitle">{{ "passwordHistory" | i18n }}</h2>
+        <h1 class="modal-title" id="passHistoryTitle">{{ "passwordHistory" | i18n }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/add-edit.component.html b/apps/web/src/app/vault/add-edit.component.html
index 50c88c51dd2..bec9064b817 100644
--- a/apps/web/src/app/vault/add-edit.component.html
+++ b/apps/web/src/app/vault/add-edit.component.html
@@ -9,7 +9,7 @@
       autocomplete="off"
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="cipherAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="cipherAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/attachments.component.html b/apps/web/src/app/vault/attachments.component.html
index a358acc5533..0940f0fa89f 100644
--- a/apps/web/src/app/vault/attachments.component.html
+++ b/apps/web/src/app/vault/attachments.component.html
@@ -8,10 +8,10 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="attachmentsTitle">
+        <h1 class="modal-title" id="attachmentsTitle">
           {{ "attachments" | i18n }}
           <small *ngIf="cipher">{{ cipher.name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-delete.component.html b/apps/web/src/app/vault/bulk-delete.component.html
index 154786960ad..43ae9829008 100644
--- a/apps/web/src/app/vault/bulk-delete.component.html
+++ b/apps/web/src/app/vault/bulk-delete.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="deleteSelectedTitle">
+        <h1 class="modal-title" id="deleteSelectedTitle">
           {{ (permanent ? "permanentlyDeleteSelected" : "deleteSelected") | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-move.component.html b/apps/web/src/app/vault/bulk-move.component.html
index 552b2efa512..c82ad83f61b 100644
--- a/apps/web/src/app/vault/bulk-move.component.html
+++ b/apps/web/src/app/vault/bulk-move.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="moveSelectedTitle">
+        <h1 class="modal-title" id="moveSelectedTitle">
           {{ "moveSelected" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-restore.component.html b/apps/web/src/app/vault/bulk-restore.component.html
index 5331b25fcc6..577c189fe4c 100644
--- a/apps/web/src/app/vault/bulk-restore.component.html
+++ b/apps/web/src/app/vault/bulk-restore.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="restoreSelectedTitle">
+        <h1 class="modal-title" id="restoreSelectedTitle">
           {{ "restoreSelected" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/bulk-share.component.html b/apps/web/src/app/vault/bulk-share.component.html
index 5a7a38e8f58..7b4ffe7a0aa 100644
--- a/apps/web/src/app/vault/bulk-share.component.html
+++ b/apps/web/src/app/vault/bulk-share.component.html
@@ -2,9 +2,9 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="moveSelectedToOrgTitle">
+        <h1 class="modal-title" id="moveSelectedToOrgTitle">
           {{ "moveSelectedToOrg" | i18n }}
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/collections.component.html b/apps/web/src/app/vault/collections.component.html
index 486ed03e326..f7c8dd7b899 100644
--- a/apps/web/src/app/vault/collections.component.html
+++ b/apps/web/src/app/vault/collections.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="collectionsTitle">
+        <h1 class="modal-title" id="collectionsTitle">
           {{ "collections" | i18n }}
           <small *ngIf="cipher">{{ cipher.name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/folder-add-edit.component.html b/apps/web/src/app/vault/folder-add-edit.component.html
index fe59530f683..ea660594fdf 100644
--- a/apps/web/src/app/vault/folder-add-edit.component.html
+++ b/apps/web/src/app/vault/folder-add-edit.component.html
@@ -8,7 +8,7 @@
       ngNativeValidate
     >
       <div class="modal-header">
-        <h2 class="modal-title" id="folderAddEditTitle">{{ title }}</h2>
+        <h1 class="modal-title" id="folderAddEditTitle">{{ title }}</h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/app/vault/share.component.html b/apps/web/src/app/vault/share.component.html
index 1f56c8c3950..8d533e12004 100644
--- a/apps/web/src/app/vault/share.component.html
+++ b/apps/web/src/app/vault/share.component.html
@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
       <div class="modal-header">
-        <h2 class="modal-title" id="shareTitle">
+        <h1 class="modal-title" id="shareTitle">
           {{ "moveToOrganization" | i18n }}
           <small *ngIf="cipher">{{ cipher.name }}</small>
-        </h2>
+        </h1>
         <button
           type="button"
           class="close"
diff --git a/apps/web/src/scss/modals.scss b/apps/web/src/scss/modals.scss
index f28dab845dd..29e7191cd72 100644
--- a/apps/web/src/scss/modals.scss
+++ b/apps/web/src/scss/modals.scss
@@ -41,6 +41,10 @@
     border-bottom: 1px solid themed("separator");
     color: themed("textColor");
   }
+
+  .modal-title {
+    font-size: 1.3rem;
+  }
 }
 
 .modal-body {