From 35030863a20489863907894026daa7a8a1681f6e Mon Sep 17 00:00:00 2001
From: Kyle Buss <kyle_buss@sil.org>
Date: Thu, 10 Oct 2024 14:57:59 -0500
Subject: [PATCH] SF-3027 Fix inconsistent styles of page titles

---
 .../checking-overview.component.html                 | 12 ++++++------
 .../checking-overview.component.scss                 |  8 +++++++-
 .../app/checking/checking/checking.component.html    |  5 ++++-
 .../app/checking/checking/checking.component.scss    |  2 +-
 .../src/app/my-projects/my-projects.component.html   |  2 +-
 .../serval-administration.component.html             |  2 +-
 .../serval-administration.component.scss             |  3 +++
 .../src/app/settings/settings.component.html         |  2 +-
 .../src/app/settings/settings.component.scss         |  2 +-
 .../app/shared/share/share-control.component.html    |  2 +-
 .../app/shared/share/share-control.component.scss    |  5 +++++
 .../ClientApp/src/app/sync/sync.component.html       |  2 +-
 .../ClientApp/src/app/sync/sync.component.spec.ts    |  2 +-
 .../draft-generation/draft-generation.component.html | 12 ++++++------
 .../draft-generation/draft-generation.component.scss |  4 ----
 .../translate-overview.component.html                |  2 +-
 .../ClientApp/src/app/users/users.component.html     |  2 +-
 .../ClientApp/src/app/users/users.component.scss     |  3 +++
 .../ClientApp/src/app/users/users.component.ts       |  1 +
 .../ClientApp/src/material-styles.scss               |  7 +++++++
 .../system-administration.component.html             |  2 +-
 .../system-administration.component.scss             |  4 ++++
 22 files changed, 57 insertions(+), 29 deletions(-)
 create mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.scss

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.html
index aa72b2c96f..9348be0f82 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.html
+++ b/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>
   }
 
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.scss
index 807b6add40..69767d7567 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.scss
+++ b/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 {
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html
index b6c8c78176..d907c4826d 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html
+++ b/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">
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.scss
index fe09443807..b9bb6f2d8e 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.scss
+++ b/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;
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.component.html
index 45075664e3..5bd83716a5 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.component.html
+++ b/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") }}
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.html
index 75e4fb87a7..4587165498 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.html
+++ b/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>
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.scss
index e69de29bb2..687de6304e 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.scss
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.scss
@@ -0,0 +1,3 @@
+.title {
+  margin-bottom: 20px;
+}
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.html
index fd2a43fd1b..936f7fb12c 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.html
+++ b/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>
     }
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss
index 5421c3a41d..c7355d6b97 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss
+++ b/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;
   }
 }
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.html
index 3dc6baa599..66afbdab42 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.html
+++ b/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) {
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.scss
index fa6b57d72c..dd6cb4cedd 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/share/share-control.component.scss
+++ b/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;
 
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.html
index 7ecb3c74fa..0590699c23 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.html
+++ b/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>
     }
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.spec.ts
index d413e6a5f8..df12c8cc37 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.spec.ts
+++ b/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 {
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.html
index 897a3b58ba..66e63d313e 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.html
+++ b/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) {
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.scss
index c3e22c360a..b0a8235f62 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.scss
+++ b/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;
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/translate-overview/translate-overview.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/translate-overview/translate-overview.component.html
index df9c332626..8137abbe4a 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/translate-overview/translate-overview.component.html
+++ b/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>
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.html
index ee4531263b..561c466be0 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.html
+++ b/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>
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.scss
new file mode 100644
index 0000000000..a71c81c27a
--- /dev/null
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.scss
@@ -0,0 +1,3 @@
+.title {
+  margin-bottom: 32px;
+}
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.ts
index 30038026a4..18e0580a39 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/users/users.component.ts
+++ b/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 {}
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss b/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss
index c4eb2f7ef6..3ca3c47cb1 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss
+++ b/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;
+  }
+}
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.html b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.html
index 7cfec0cb87..1587c60c44 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.html
+++ b/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">
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.scss
index 9a355538fc..2247ac85b3 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.scss
+++ b/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;
+}