SF-3027 Fix inconsistent styles of page titles

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.html

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; read: 'checking_overview'">
   <div [ngClass]="{ 'reviewer-panels': !canCreateQuestion }" class="header">
-    <mat-icon class="mirror-rtl">list</mat-icon>
-    <h2>{{ t(canCreateQuestion ? "manage_questions" : "my_progress") }}</h2>
+    <mat-icon class="mirror-rtl title-icon">list</mat-icon>
+    <div class="title">{{ t(canCreateQuestion ? "manage_questions" : "my_progress") }}</div>
     @if (canCreateQuestion) {
       <ng-container class="primary-actions">
         @if (showImportButton) {
@@ -238,8 +238,8 @@ <h2>{{ t(canCreateQuestion ? "manage_questions" : "my_progress") }}</h2>
   }
 
   <div class="header">
-    <mat-icon class="mirror-rtl">bar_chart</mat-icon>
-    <h2>{{ t(canCreateQuestion ? "project_stats" : "my_contributions") }}</h2>
+    <mat-icon class="mirror-rtl title-icon">bar_chart</mat-icon>
+    <div class="title">{{ t(canCreateQuestion ? "project_stats" : "my_contributions") }}</div>
   </div>
 
   <div class="reviewer-panels stat-panels">
@@ -287,8 +287,8 @@ <h2>{{ t(canCreateQuestion ? "project_stats" : "my_contributions") }}</h2>
 
   @if (canEditQuestion) {
     <div class="header">
-      <mat-icon>archive</mat-icon>
-      <h2>{{ t("archived_questions") }}</h2>
+      <mat-icon class="title-icon">archive</mat-icon>
+      <div class="title">{{ t("archived_questions") }}</div>
     </div>
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.scss

@@ -6,9 +6,15 @@
   justify-content: flex-end;
   align-items: center;
   column-gap: 8px;
-  h2 {
+  .title {
     flex-grow: 1;
   }
+
+  .title-icon {
+    font-size: 36px;
+    height: 36px;
+    width: 36px;
+  }
 }
 
 .flex {

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html

@@ -6,8 +6,11 @@
       }
       <header [ngClass]="{ 'filter-applied': isQuestionFilterApplied }">
         <div class="header-main">
+          <div class="title">
+            {{ t("questions") }}
+          </div>
           <h2>
-            {{ t("questions") }} <span>({{ totalVisibleQuestionsString }})</span>
+            <span>({{ totalVisibleQuestionsString }})</span>
           </h2>
           <mat-menu #questionFilterMenu>
             <mat-selection-list [multiple]="true" class="menu-list">

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.scss

@@ -61,7 +61,7 @@ header {
 
   h2 {
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
     align-items: center;
     margin: 0;
     flex: 1;

src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'my_projects'">
   <div class="content">
-    <h1>{{ t("my_projects") }}</h1>
+    <div class="title">{{ t("my_projects") }}</div>
     @if (!userHasProjects && !initialLoadingSFProjects && !loadingPTProjects) {
       <app-notice id="message-no-pt-or-sf-projects" icon="warning" type="warning">
         {{ t("no_projects") }} {{ t("access_another_project") }}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.html

@@ -1,3 +1,3 @@
-<h1>Serval Administration</h1>
+<div class="title">Serval Administration</div>
 
 <app-serval-projects></app-serval-projects>

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.scss

@@ -0,0 +1,3 @@
+.title {
+  margin-bottom: 20px;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'settings'">
   <div class="container">
-    <div class="mat-headline-4">{{ t("settings") }}</div>
+    <div class="title">{{ t("settings") }}</div>
     @if (!isAppOnline) {
       <span class="offline-text"> {{ t("connect_network_to_change_settings") }} </span>
     }

src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss

@@ -7,7 +7,7 @@
   max-width: 800px;
   padding-block-end: 10px;
 
-  .mat-headline-4 {
+  .title {
     margin-bottom: 32px;
   }
 }

src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.html

@@ -1,5 +1,5 @@
 <ng-container *transloco="let t; read: 'share_control'">
-  <h2>{{ t("invite_people") }}</h2>
+  <div class="title">{{ t("invite_people") }}</div>
   <p class="mat-hint">{{ t("invite_people_intro") }}</p>
   <p class="mat-hint">{{ t("email_sharing") }}</p>
   @if (!isAppOnline) {

src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.scss

@@ -48,6 +48,11 @@ form {
   }
 }
 
+.title {
+  margin-block-start: 0.67em;
+  margin-block-end: 0.67em;
+}
+
 ::ng-deep .invitation-role-panel .mat-mdc-option {
   height: 4em !important;
 

src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'sync'">
   <div class="base-container">
-    <h2 id="title">{{ t("synchronize_project", { projectName: projectName }) }}</h2>
+    <div class="title">{{ t("synchronize_project", { projectName: projectName }) }}</div>
     @if (!isAppOnline) {
       <span class="offline-text"> {{ t("connect_network_to_synchronize") }} </span>
     }

src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.spec.ts

@@ -319,7 +319,7 @@ class TestEnvironment {
   }
 
   get title(): HTMLElement {
-    return this.fixture.nativeElement.querySelector('#title');
+    return this.fixture.nativeElement.querySelector('.title');
   }
 
   get lastSyncDate(): HTMLElement {

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.html

@@ -1,12 +1,12 @@
 <ng-container *transloco="let t; read: 'draft_generation'">
   @if (currentPage == "initial") {
-    @if (isBackTranslationMode) {
-      <h1 class="mat-headline-4">{{ t("generate_back_translation_drafts_header") }}</h1>
-    } @else {
-      <h1 class="mat-headline-4">
+    <div class="title">
+      @if (isBackTranslationMode) {
+        {{ t("generate_back_translation_drafts_header") }}
+      } @else {
         {{ t("generate_forward_translation_drafts_header") }}
-      </h1>
-    }
+      }
+    </div>
 
     <section>
       @if (isDraftJobFetched && !isDraftInProgress(draftJob) && !hasAnyCompletedBuild) {

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.scss

@@ -12,10 +12,6 @@
   padding-block-end: 10px;
 }
 
-.mat-headline-4 {
-  margin: 0;
-}
-
 // Manually center over cancel button
 app-working-animated-indicator {
   margin-inline-start: 24px;

src/SIL.XForge.Scripture/ClientApp/src/app/translate/translate-overview/translate-overview.component.html

@@ -1,5 +1,5 @@
 <ng-container *transloco="let t; read: 'translate_overview'">
-  <div class="title mat-headline-4">{{ t("translate_overview") }}</div>
+  <div class="title">{{ t("translate_overview") }}</div>
 
   @if (isPTUser) {
     <app-font-unsupported-message></app-font-unsupported-message>

src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.html

@@ -1,4 +1,4 @@
 <ng-container *transloco="let t; read: 'users'">
-  <h1>{{ t("users") }}</h1>
+  <div class="title">{{ t("users") }}</div>
   <app-collaborators></app-collaborators>
 </ng-container>

src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.scss

@@ -0,0 +1,3 @@
+.title {
+  margin-bottom: 32px;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-users',
+  styleUrls: ['./users.component.scss'],
   templateUrl: './users.component.html'
 })
 export class UsersComponent {}

src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss

@@ -217,3 +217,10 @@ mat-card-title {
     }
   }
 }
+
+div {
+  .title {
+    @extend .mat-headline-4;
+    margin-bottom: 0;
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.html

@@ -1,5 +1,5 @@
 <div class="body-content">
-  <h1>System Administration</h1>
+  <div class="title">System Administration</div>
 
   <mat-tab-group>
     <mat-tab label="Users">

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.scss

@@ -10,3 +10,7 @@ mat-tab-group {
 app-sa-users {
   width: 100%;
 }
+
+.title {
+  margin-bottom: 20px;
+}