[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,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"

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>

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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 {