UI: General layout

Author: vbakke

src/app/component/teams-groups-editor/teams-groups-editor.component.html

@@ -1,7 +1,4 @@
 <!-- Main layout for teams/groups editor -->
-<div class="editor-header">
-  <h2>Teams &amp; Groups</h2>
-</div>
 <div class="editor-container">
   <div class="editor-list-panel">
     <app-selectable-list

src/app/component/top-header/top-header.component.css

@@ -1,3 +1,4 @@
 .mat-display-1 {
-    padding: 20px 30px;
+    padding: 20px;
+    margin: 0;
 }

src/app/pages/mapping/mapping.component.css

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   gap: 16px;
-  margin: 24px 20px 0 20px;
+  margin: 0 20px;
   flex-wrap: wrap;
 }
 
@@ -37,6 +37,10 @@
   font-weight: 500;
 }
 
+.content ::ng-deep .mat-form-field-wrapper {
+  padding-bottom: 0;
+}
+
 .hide{
   display: none;
 }

src/app/pages/mapping/mapping.component.html

@@ -25,7 +25,7 @@
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-    <button mat-raised-button color="primary" class="export-btn" (click)="exportToExcel()">
+    <button mat-raised-button class="export-btn" (click)="exportToExcel()">
       <mat-icon>file_download</mat-icon>
       Download
     </button>

src/app/pages/matrix/matrix.component.css

@@ -1,7 +1,7 @@
 .content {
   width: 100%;
-  /*background-color: gainsboro;*/
 }
+
 .mat-form-field {
   margin: 20px;
   margin-bottom: 0;

src/app/pages/settings/settings.component.css

@@ -31,7 +31,6 @@
 
 .settings-container {
   margin-top: 1em;
-  /* Ensure consistent left/right padding so elements align with other pages */
   padding: 0 1rem;
 }
 
@@ -117,7 +116,6 @@ input.progress-score {
 }
 
 .selectable-list {
-  /* remove extra inner padding so content lines up with the page padding */
   padding: 0;
 }
 

src/app/pages/settings/settings.component.ts

@@ -61,6 +61,14 @@ export class SettingsComponent implements OnInit {
   ];
   selectedDateFormat: string = this.BROWSER_LOCALE;
 
+  // GitHub release check state
+  checkingLatest: boolean = false;
+  latestReleaseInfo: GithubReleaseInfo | null = null;
+  latestCheckError: string | null = null;
+  isNewerAvailable: boolean | null = null;
+  latestDownloadUrl: string | null = null;
+  latestReleasePublishedDate: Date | null = null;
+
   constructor(
     private loader: LoaderService,
     private settings: SettingsService,

src/app/pages/teams/teams.component.html

@@ -1,3 +1,4 @@
+<app-top-header section="Teams &amp; Groups"></app-top-header>
 <div class="team-section">
   <app-teams-groups-editor
     [teams]="teams"

src/app/service/yaml-loader/yaml-loader.service.ts

@@ -1,11 +1,9 @@
-import { K, Y } from '@angular/cdk/keycodes';
 import { Injectable } from '@angular/core';
 import {
   parse as parseSingle,
   parseAllDocuments as parseMultiple,
   stringify as yamlStringify,
 } from 'yaml';
-// import YAML from 'yaml';
 import { perfNow } from 'src/app/util/util';
 
 @Injectable({ providedIn: 'root' })

src/styles.css

@@ -9,6 +9,10 @@
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
+h1, h2, h3 {
+  font-weight: 400;
+}
+
 .mat-typography h1.mat-display-1 {
   margin: 0;
 }