Added light & dark theme. Basic theme applied on dialogs/modals. Attempt to apply uniformity to the website.

angular.json

@@ -91,7 +91,10 @@
                             "buildTarget": "hermes-web-angular:build:development"
                         }
                     },
-                    "defaultConfiguration": "development"
+                    "defaultConfiguration": "development",
+                    "options": {
+                        "allowedHosts": ["*"]
+                    }
                 },
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n"

package.json

@@ -1,50 +1,50 @@
 {
-    "name": "hermes-web-angular",
-    "version": "0.0.0",
-    "scripts": {
-        "ng": "ng",
-        "start": "ng serve -c production --host 0.0.0.0 --watch false",
-        "build": "ng build",
-        "watch": "ng serve -c development --host 0.0.0.0",
-        "test": "ng test",
-        "serve:ssr:hermes-web-angular": "node dist/hermes-web-angular/server/server.mjs"
-    },
-    "private": true,
-    "dependencies": {
-        "@angular/animations": "^19.0.5",
-        "@angular/cdk": "^19.0.4",
-        "@angular/common": "^19.0.5",
-        "@angular/compiler": "^19.0.5",
-        "@angular/core": "^19.0.5",
-        "@angular/forms": "^19.0.5",
-        "@angular/material": "^19.0.4",
-        "@angular/platform-browser": "^19.0.5",
-        "@angular/platform-browser-dynamic": "^19.0.5",
-        "@angular/platform-server": "^19.0.5",
-        "@angular/router": "^19.0.5",
-        "@angular/ssr": "^19.0.6",
-        "angular-oauth2-oidc": "^17.0.2",
-        "express": "^4.18.2",
-        "ngx-socket-io": "^4.7.0",
-        "rxjs": "~7.8.0",
-        "rxjs-websockets": "^9.0.0",
-        "tslib": "^2.3.0",
-        "uuidv4": "^6.2.13",
-        "zone.js": "~0.15.0"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "^19.0.6",
-        "@angular/cli": "^19.0.6",
-        "@angular/compiler-cli": "^19.0.5",
-        "@types/express": "^4.17.17",
-        "@types/jasmine": "~5.1.0",
-        "@types/node": "^18.18.0",
-        "jasmine-core": "~5.1.0",
-        "karma": "~6.4.0",
-        "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.0",
-        "karma-jasmine": "~5.1.0",
-        "karma-jasmine-html-reporter": "~2.1.0",
-        "typescript": "~5.6.3"
-    }
-}
+  "name": "hermes-web-angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve -c production --host 0.0.0.0 --watch false",
+    "build": "ng build",
+    "watch": "ng serve -c development --host 0.0.0.0 --disable-host-check",
+    "test": "ng test",
+    "serve:ssr:hermes-web-angular": "node dist/hermes-web-angular/server/server.mjs"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.2.4",
+    "@angular/cdk": "^19.2.7",
+    "@angular/common": "^19.2.4",
+    "@angular/compiler": "^19.2.4",
+    "@angular/core": "^19.2.4",
+    "@angular/forms": "^19.2.4",
+    "@angular/material": "^19.2.7",
+    "@angular/platform-browser": "^19.2.4",
+    "@angular/platform-browser-dynamic": "^19.2.4",
+    "@angular/platform-server": "^19.2.4",
+    "@angular/router": "^19.2.4",
+    "@angular/ssr": "^19.2.5",
+    "angular-oauth2-oidc": "^17.0.2",
+    "express": "^4.18.2",
+    "ngx-socket-io": "^4.7.0",
+    "rxjs": "~7.8.0",
+    "rxjs-websockets": "^9.0.0",
+    "tslib": "^2.3.0",
+    "uuidv4": "^6.2.13",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.5",
+    "@angular/cli": "^19.2.5",
+    "@angular/compiler-cli": "^19.2.4",
+    "@types/express": "^4.17.17",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.6.3"
+  }
+}

src/app/actions/action-item-edit/action-item-edit.component.html

@@ -1,4 +1,4 @@
-<body>
+<content>
   <mat-card>
     <mat-card-header>
       <mat-card-title-group>
@@ -108,18 +108,26 @@
       }
     </mat-card-content>
 
-    <mat-card-actions class="actions"
-                      align="end">
+    <mat-card-actions class="actions">
       @if (!isNew) {
-      <button mat-raised-button
-              class="delete"
-              (click)="deleteAction(action)">Delete</button>
+      <button mat-button
+              class="danger"
+              (click)="deleteAction(action)">
+        <mat-icon>delete</mat-icon>Delete
+      </button>
       }
-      <button mat-raised-button
-              (click)="dialogRef.close()">Cancel</button>
-      <button mat-raised-button
+      <button mat-button
+              class="neutral"
+              disabled="{{waitForResponse}}"
+              (click)="dialogRef.close()">
+        <mat-icon>cancel</mat-icon>Cancel
+      </button>
+      <button mat-button
+              class="confirm"
               disabled="{{!formsDirty || !formsValidity || waitForResponse}}"
-              (click)="save()">Save</button>
+              (click)="save()">
+        <mat-icon>save</mat-icon>Save
+      </button>
     </mat-card-actions>
 
     @if (responseError) {
@@ -128,4 +136,4 @@
     </mat-card-footer>
     }
   </mat-card>
-</body>
+</content>

src/app/actions/action-item-edit/action-item-edit.component.scss

@@ -9,12 +9,6 @@
   margin: 0;
 }
 
-.actions {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
 .delete {
   background-color: #ea5151;
   color: #ba1a1a;

src/app/actions/action-item-edit/action-item-edit.component.ts

@@ -9,17 +9,19 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { createItemExistsInArrayValidator } from '../../shared/validators/item-exists-in-array';
 import { HermesClientService } from '../../hermes-client.service';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'action-item-edit',
   imports: [
-    ReactiveFormsModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
     MatFormFieldModule,
+    MatIconModule,
     MatInputModule,
-    MatSelectModule
+    MatSelectModule,
+    ReactiveFormsModule,
   ],
   templateUrl: './action-item-edit.component.html',
   styleUrl: './action-item-edit.component.scss'

src/app/actions/action-list/action-list.component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 main {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
@@ -15,7 +17,7 @@ main {
     border: 1px solid grey;
     padding: 1em;
     cursor: pointer;
-    background-color: white;
+    background-color: transparent;
 
     & span {
       display: block;
@@ -27,7 +29,6 @@ main {
 
     & .subtitle {
       font-size: smaller;
-      color: lightgrey;
     }
   }
 }

src/app/actions/action-list/action-list.component.ts

@@ -7,19 +7,28 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatDialog } from '@angular/material/dialog';
 import { ActionItemEditComponent } from '../action-item-edit/action-item-edit.component';
 import { HermesClientService } from '../../hermes-client.service';
+import { MatSelectModule } from '@angular/material/select';
 
 @Component({
   selector: 'action-list',
   standalone: true,
-  imports: [MatButtonModule, MatFormFieldModule, MatIconModule, MatListModule],
+  imports: [
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatListModule,
+    MatSelectModule,
+  ],
   templateUrl: './action-list.component.html',
   styleUrl: './action-list.component.scss'
 })
 export class ActionListComponent {
   @Input() actions: RedeemableAction[] = []
   @Output() actionsChange = new EventEmitter<RedeemableAction>();
+
   readonly dialog = inject(MatDialog);
   readonly client = inject(HermesClientService);
+
   opened = false;
 
   create(): void {

src/app/actions/actions/actions.component.html

@@ -1,4 +1,4 @@
-<body>
+<content>
   <h3>Redeemable Actions</h3>
 
   <section>
@@ -31,4 +31,4 @@
   <action-list class="center"
                [actions]="actions"
                (actionsChange)="items.push($event)" />
-</body>
+</content>

src/app/actions/actions/actions.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, Inject, inject, OnInit } from '@angular/core';
 import { ActionListComponent } from "../action-list/action-list.component";
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -9,6 +9,8 @@ import RedeemableAction from '../../shared/models/redeemable-action';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import RedeemableActionService from '../../shared/services/redeemable-action.service';
+import { MatButtonModule } from '@angular/material/button';
+import { DOCUMENT } from '@angular/common';
 
 interface IActionFilter {
   name: string
@@ -17,14 +19,15 @@ interface IActionFilter {
 
 @Component({
   selector: 'actions',
-  standalone: true,
   imports: [
     ActionListComponent,
-    ReactiveFormsModule,
+    MatButtonModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatSelectModule
+    MatSelectModule,
+    ReactiveFormsModule,
+    ReactiveFormsModule,
   ],
   templateUrl: './actions.component.html',
   styleUrl: './actions.component.scss'
@@ -43,11 +46,15 @@ export class ActionsComponent implements OnInit {
   private readonly client = inject(HermesClientService);
   private readonly redeemableActionService = inject(RedeemableActionService);
   private readonly route = inject(ActivatedRoute);
+
   filter = this.filters[0];
   searchControl = new FormControl('');
   search = '';
   items: RedeemableAction[] = [];
 
+  constructor(@Inject(DOCUMENT) private document: Document) { }
+
+
   ngOnInit(): void {
     this.route.data.subscribe(data => {
       if (!data['redeemableActions'])

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, OnInit, Inject, PLATFORM_ID, NgZone, OnDestroy, inject } from '@angular/core';
+import { Component, OnInit, Inject, PLATFORM_ID, NgZone, OnDestroy, inject, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { HermesClientService } from './hermes-client.service';
 import { AuthUserGuard } from './shared/auth/auth.user.guard'
@@ -10,23 +10,42 @@ import { ApiAuthenticationService } from './shared/services/api/api-authenticati
 import { AuthModule } from './auth/auth.module';
 import { ApiKeyService } from './shared/services/api/api-key.service';
 import ApiKey from './shared/models/api-key';
+import { ThemeService } from './shared/services/theme.service';
+import { OverlayContainer } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, AuthModule, NavigationComponent],
+  imports: [
+    RouterOutlet,
+    AuthModule,
+    NavigationComponent
+  ],
   providers: [AuthUserGuard],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent implements OnInit, OnDestroy {
   private readonly keyService = inject(ApiKeyService);
+  private readonly overlayContainer = inject(OverlayContainer);
+  private readonly themeService = inject(ThemeService);
 
   private isBrowser: boolean;
   private ngZone: NgZone;
   private subscriptions: Subscription[];
 
 
+  @HostBinding('class.dark-theme')
+  get isDarkTheme() {
+    return this.themeService.isDarkTheme();
+  }
+
+  @HostBinding('class.light-theme')
+  get isLightTheme() {
+    return this.themeService.isLightTheme();
+  }
+
+
   constructor(private auth: ApiAuthenticationService, private client: HermesClientService, private events: EventService, private router: Router, ngZone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) {
     this.ngZone = ngZone;
     this.isBrowser = isPlatformBrowser(this.platformId);
@@ -70,7 +89,7 @@ export class AppComponent implements OnInit, OnDestroy {
     }));
 
     this.addSubscription(this.events.listen('login', () => {
-      this.keyService.fetch(true)
+      this.keyService.fetch()
         .pipe(timeout(3000), first())
         .subscribe(async (d: ApiKey[]) => {
           if (d.length > 0)
@@ -80,6 +99,8 @@ export class AppComponent implements OnInit, OnDestroy {
         });
     }));
 
+    this.overlayContainer.getContainerElement().classList.add(this.themeService.theme + '-theme');
+
     this.ngZone.runOutsideAngular(() => setInterval(() => this.client.heartbeat(), 15000));
   }
 

src/app/app.config.ts

@@ -17,6 +17,6 @@ export const appConfig: ApplicationConfig = {
       }])
     ),
     provideOAuthClient(),
-    provideClientHydration(), provideAnimationsAsync()
+    provideClientHydration(), provideAnimationsAsync(), provideAnimationsAsync()
   ]
 };

src/app/app.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TtsFiltersModule } from './tts-filters/tts-filters.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+  ]
+})
+export class AppModule { }

src/app/app.routes.ts

@@ -23,6 +23,7 @@ import PermissionResolver from './shared/resolvers/permission-resolver';
 import { ConnectionsComponent } from './connections/connections/connections.component';
 import ConnectionResolver from './shared/resolvers/connection-resolver';
 import { ConnectionCallbackComponent } from './connections/callback/callback.component';
+import { KeysComponent } from './keys/keys/keys.component';
 
 export const routes: Routes = [
   {
@@ -80,6 +81,14 @@ export const routes: Routes = [
       permissions: PermissionResolver,
     }
   },
+  {
+    path: 'keys',
+    component: KeysComponent,
+    canActivate: [AuthUserGuard],
+    resolve: {
+      keys: ApiKeyResolver,
+    }
+  },
   {
     path: 'login',
     component: LoginComponent,

src/app/auth/impersonation/impersonation.component.ts

@@ -52,7 +52,7 @@ export class ImpersonationComponent implements OnInit {
         .subscribe(async _ => 
           await setTimeout(async () => 
             await this.router.navigate([url.substring(1)]), 500));
-      this.keyService.fetch(true)
+      this.keyService.fetch()
         .pipe(timeout(3000), first())
         .subscribe(async (d: ApiKey[]) => {
           if (d.length > 0)

src/app/auth/login/login.component.scss

@@ -18,6 +18,7 @@
 
 .mat-mdc-card-content {
   align-self: center;
+  justify-content: space-between;
 }
 
 a {

src/app/auth/tts-login/tts-login.component.html

@@ -16,7 +16,7 @@
         </mat-select>
       </mat-form-field>
     </mat-card-content>
-    <mat-card-actions align="end">
+    <mat-card-actions>
       <button mat-raised-button
               (click)="login()">Log In</button>
     </mat-card-actions>

src/app/auth/tts-login/tts-login.component.ts

@@ -39,7 +39,7 @@ export class TtsLoginComponent implements OnInit, OnDestroy {
     this.subscriptions.push(this.events.listen('impersonation', _ => {
       this.selected_api_key = undefined;
 
-      this.keyService.fetch(true)
+      this.keyService.fetch()
         .pipe(timeout(3000), first())
         .subscribe(d => this.api_keys = d);
     }));

src/app/auth/user-card/user-card.component.html

@@ -8,8 +8,7 @@
     <mat-card-content>
       <impersonation />
     </mat-card-content>
-    <mat-card-actions class="actions"
-                      align="end">
+    <mat-card-actions class="actions">
       <div>
         @if (isTTSLoggedIn) {
         <button mat-raised-button

src/app/connections/callback/callback.component.ts

@@ -2,6 +2,7 @@ import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { HermesClientService } from '../../hermes-client.service';
 import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'connection-callback',
@@ -34,7 +35,7 @@ export class ConnectionCallbackComponent implements OnInit {
       return;
     }
 
-    this.http.get(`https://beta.tomtospeech.com/api/auth/connections?token=${params['access_token']}&state=${params['state']}&expires_in=${params['expires_in']}`).subscribe(async (d: any) => {
+    this.http.get(`${environment.API_HOST}/auth/connections?token=${params['access_token']}&state=${params['state']}&expires_in=${params['expires_in']}`).subscribe(async (d: any) => {
       const data = d.data;
       this.success = true;
 

src/app/connections/connection-item-edit/connection-item-edit.component.html

@@ -41,14 +41,14 @@
     </mat-form-field>
   </mat-card-content>
 
-  <mat-card-actions class="actions"
-                    align="end">
-    <button mat-raised-button
-            class="warning"
+  <mat-card-actions class="actions">
+    <button mat-button
+            class="neutral"
+            disabled="{{waitForResponse}}"
             (click)="dialogRef.close()">Cancel</button>
-    <button mat-raised-button
+    <button mat-button
             class="confirm"
-            disabled="{{form.invalid || waitForResponse}}"
+            disabled="{{!form.dirty || form.invalid || waitForResponse}}"
             (click)="submit()">Add</button>
   </mat-card-actions>
 

src/app/connections/connection-item-edit/connection-item-edit.component.ts

@@ -7,8 +7,6 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { ActionItemEditComponent } from '../../actions/action-item-edit/action-item-edit.component';
-import { HermesClientService } from '../../hermes-client.service';
 import { MatSelectModule } from '@angular/material/select';
 import { DOCUMENT } from '@angular/common';
 
@@ -27,10 +25,10 @@ import { DOCUMENT } from '@angular/common';
   styleUrl: './connection-item-edit.component.scss'
 })
 export class ConnectionItemEditComponent {
-  private readonly client = inject(HermesClientService);
   private readonly http = inject(HttpClient);
+  private readonly data = inject<{ name: string }>(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<ConnectionItemEditComponent>);
 
-  readonly data = inject<{ name: string }>(MAT_DIALOG_DATA);
   readonly nameControl = new FormControl<string>('', [Validators.required]);
   readonly clientIdControl = new FormControl<string>('', [Validators.required]);
   readonly typeControl = new FormControl<string>('', [Validators.required]);
@@ -40,7 +38,6 @@ export class ConnectionItemEditComponent {
     type: this.typeControl,
   });
 
-  readonly dialogRef = inject(MatDialogRef<ActionItemEditComponent>);
 
   responseError: string | undefined;
   waitForResponse = false;

src/app/connections/connection-item/connection-item.component.html

@@ -5,13 +5,13 @@
   <article class="right">
     <button mat-button
             class="neutral"
-            (click)="renew(connection())">
+            (click)="renew()">
       <mat-icon>refresh</mat-icon>
       Renew
     </button>
     <button mat-button
             class="danger"
-            (click)="delete(connection())">
+            (click)="delete()">
       <mat-icon>delete</mat-icon>
       Delete
     </button>

src/app/connections/connection-item/connection-item.component.ts

@@ -5,7 +5,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
-import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { HermesClientService } from '../../hermes-client.service';
 
@@ -21,19 +20,19 @@ import { HermesClientService } from '../../hermes-client.service';
   styleUrl: './connection-item.component.scss'
 })
 export class ConnectionItemComponent {
-  router = inject(Router);
-  http = inject(HttpClient);
-  client = inject(HermesClientService);
+  private readonly http = inject(HttpClient);
+  private readonly client = inject(HermesClientService);
 
   connection = input.required<Connection>();
 
   constructor(@Inject(DOCUMENT) private document: Document) { }
 
-  delete(conn: Connection) {
-    this.client.deleteConnection(conn.name);
+  delete() {
+    this.client.deleteConnection(this.connection().name);
   }
 
-  renew(conn: Connection) {
+  renew() {
+    const conn = this.connection();
     this.http.post('/api/auth/connections', {
       name: conn.name,
       type: conn.type,

src/app/connections/connections/connections.component.html

@@ -1,3 +1,5 @@
-<h3>Connections</h3>
+<content>
+  <h3>Connections</h3>
 
-<connection-list [connections]="connections"/>
+  <connection-list [connections]="connections" />
+</content>

src/app/groups/group-item-edit/group-item-edit.component.html

@@ -38,13 +38,15 @@
       }
     </mat-form-field>
   </mat-card-content>
-  <mat-card-actions align="end">
+  <mat-card-actions>
     <button mat-button
+            class="neutral"
             [disabled]="waitForResponse"
             (click)="cancel()">
       <mat-icon>cancel</mat-icon>Cancel
     </button>
     <button mat-button
+            class="confirm"
             [disabled]="waitForResponse || formGroup.invalid"
             (click)="add()">
       <mat-icon>add</mat-icon>Add

src/app/groups/group-item/group-item.component.scss

@@ -1,8 +1,8 @@
 article {
-  background-color: #f0f0f0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  border: grey solid 1px;
   border-radius: 15px;
   padding: 0.5em 1em;
 

src/app/keys/key-item-edit/key-item-edit.component.html

@@ -0,0 +1,38 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Add API Key</mat-card-title>
+      <mat-card-subtitle></mat-card-subtitle>
+    </mat-card-title-group>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-form-field>
+      <mat-label>Key Label</mat-label>
+      <input matInput
+             [formControl]="labelControl" />
+      @if (labelControl.invalid && (labelControl.dirty || labelControl.touched)) {
+      @if (labelControl.hasError('required')) {
+      <small class="error">This field is required.</small>
+      }
+      }
+    </mat-form-field>
+  </mat-card-content>
+
+  <mat-card-actions class="actions">
+    <button mat-button
+            class="neutral"
+            disabled="{{waitForResponse}}"
+            (click)="dialogRef.close()">Cancel</button>
+    <button mat-button
+            class="confirm"
+            disabled="{{!form.dirty || form.invalid || waitForResponse}}"
+            (click)="submit()">Add</button>
+  </mat-card-actions>
+
+  @if (responseError) {
+  <mat-card-footer>
+    <small class="error below">{{responseError}}</small>
+  </mat-card-footer>
+  }
+</mat-card>

src/app/keys/key-item-edit/key-item-edit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyItemEditComponent } from './key-item-edit.component';
+
+describe('KeyItemEditComponent', () => {
+  let component: KeyItemEditComponent;
+  let fixture: ComponentFixture<KeyItemEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KeyItemEditComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KeyItemEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/keys/key-item-edit/key-item-edit.component.ts

@@ -0,0 +1,67 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import EventService from '../../shared/services/EventService';
+
+@Component({
+  selector: 'key-item-edit',
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './key-item-edit.component.html',
+  styleUrl: './key-item-edit.component.scss'
+})
+export class KeyItemEditComponent {
+  private readonly http = inject(HttpClient);
+  private readonly events = inject(EventService);
+  readonly data = inject<{ name: string }>(MAT_DIALOG_DATA);
+
+  readonly labelControl = new FormControl<string>('', [Validators.required]);
+  readonly form = new FormGroup({
+    name: this.labelControl,
+  });
+
+  readonly dialogRef = inject(MatDialogRef<KeyItemEditComponent>);
+
+  responseError: string | undefined;
+  waitForResponse = false;
+
+
+  ngOnInit(): void {
+    this.labelControl.setValue(this.data.name);
+  }
+
+  submit(): void {
+    if (this.form.invalid || this.waitForResponse) {
+      return;
+    }
+
+    const label = this.labelControl.value;
+    this.http.post('/api/keys', { label },
+      {
+        headers: {
+          'Authorization': 'Bearer ' + localStorage.getItem('jwt')
+        }
+      }).subscribe(async (d: any) => {
+        this.events.emit('add_api_key', {
+          id: d.key,
+          label: d.label,
+        });
+
+        this.dialogRef.close();
+      });
+  }
+}

src/app/keys/key-item/key-item.component.html

@@ -0,0 +1,20 @@
+<section>
+  {{(isVisible ? key().id : key().label)}}
+
+  <article class="right">
+    <button mat-button
+            class="neutral"
+            [disabled]="waitForResponse"
+            (click)="isVisible = !isVisible">
+      <mat-icon>{{(isVisible ? "visibility_off" : "visibility")}}</mat-icon>
+      {{(isVisible ? "Hide" : "View")}} Key
+    </button>
+    <button mat-button
+            class="danger"
+            [disabled]="waitForResponse"
+            (click)="delete()">
+      <mat-icon>delete</mat-icon>
+      Delete
+    </button>
+  </article>
+</section>

src/app/keys/key-item/key-item.component.scss

@@ -0,0 +1,11 @@
+section {
+  padding: 1em;
+}
+
+.right {
+  float: right;
+}
+
+button {
+  margin: 0 0.5em;
+}

src/app/keys/key-item/key-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyItemComponent } from './key-item.component';
+
+describe('KeyItemComponent', () => {
+  let component: KeyItemComponent;
+  let fixture: ComponentFixture<KeyItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KeyItemComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KeyItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/keys/key-item/key-item.component.ts

@@ -0,0 +1,48 @@
+import { Component, inject, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import ApiKey from '../../shared/models/api-key';
+import EventService from '../../shared/services/EventService';
+
+@Component({
+  selector: 'key-item',
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './key-item.component.html',
+  styleUrl: './key-item.component.scss'
+})
+export class KeyItemComponent {
+  private readonly http = inject(HttpClient);
+  private readonly events = inject(EventService);
+
+  key = input.required<ApiKey>();
+  isVisible: boolean = false;
+  waitForResponse = false;
+
+  delete() {
+    if (this.waitForResponse) {
+      return;
+    }
+
+    const key_id = this.key().id;
+    this.http.delete('/api/keys',
+      {
+        body: {
+          key: key_id,
+        },
+        headers: {
+          'Authorization': 'Bearer ' + localStorage.getItem('jwt')
+        }
+      }).subscribe(async (d: any) => {
+        this.events.emit('delete_api_key', key_id);
+        this.waitForResponse = false;
+      });
+  }
+}

src/app/keys/key-list/key-list.component.html

@@ -0,0 +1,28 @@
+<ul>
+  <li class="header">
+    <mat-form-field appearance="outline"
+                    subscriptSizing="dynamic">
+      <mat-label>Label Filter</mat-label>
+      <input matInput
+             placeholder="Filter keys by label"
+             [formControl]="searchControl" />
+    </mat-form-field>
+
+    <button mat-icon-button
+            (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>
+  </li>
+  @for (key of keys; track key.id) {
+  <li>
+    <key-item [key]="key" />
+  </li>
+  }
+  @if (!keys.length) {
+  @if (searchControl.value) {
+  <p class="notice">No API keys match the filter.</p>
+  } @else {
+  <p class="notice">No API keys available.</p>
+  }
+  }
+</ul>

src/app/keys/key-list/key-list.component.scss

@@ -0,0 +1,38 @@
+@use '@angular/material' as mat;
+
+ul {
+  @include mat.all-component-densities(-5);
+
+  @include mat.form-field-overrides((
+    outlined-outline-color: rgb(167, 88, 199),
+    outlined-focus-label-text-color: rgb(155, 57, 194),
+    outlined-focus-outline-color: rgb(155, 57, 194),
+  ));
+
+  background-color: rgb(202, 68, 255);
+  border-radius: 15px;
+  margin: 0 0;
+  padding: 0;
+  max-width: 600px;
+  overflow: hidden;
+}
+
+ul li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: rgb(240, 165, 255);
+}
+
+ul li.header {
+  background-color: rgb(215, 115, 255);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: row;
+  padding: 8px;
+}
+
+ul .notice {
+  text-align: center;
+}

src/app/keys/key-list/key-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyListComponent } from './key-list.component';
+
+describe('KeyListComponent', () => {
+  let component: KeyListComponent;
+  let fixture: ComponentFixture<KeyListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KeyListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KeyListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/keys/key-list/key-list.component.ts

@@ -0,0 +1,61 @@
+import { Component, inject, Input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
+import { containsLettersInOrder } from '../../shared/utils/string-compare';
+import { KeyItemComponent } from '../key-item/key-item.component';
+import { KeyItemEditComponent } from '../key-item-edit/key-item-edit.component';
+import ApiKey from '../../shared/models/api-key';
+
+@Component({
+  selector: 'key-list',
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    KeyItemComponent,
+  ],
+  templateUrl: './key-list.component.html',
+  styleUrl: './key-list.component.scss'
+})
+export class KeyListComponent {
+  private readonly _dialog = inject(MatDialog);
+
+  private _keys: ApiKey[] = [];
+
+  readonly searchControl = new FormControl<string>('');
+
+  opened = false;
+
+
+  get keys() {
+    return this._keys.filter(c => containsLettersInOrder(c.label, this.searchControl.value));
+  }
+
+  @Input({ required: true })
+  set keys(value: ApiKey[]) {
+    this._keys = value;
+  }
+
+  add() {
+    if (this.opened)
+      return;
+
+    this.opened = true;
+
+    const dialogRef = this._dialog.open(KeyItemEditComponent, {
+      data: { name: this.searchControl.value },
+    });
+
+    dialogRef.afterClosed().subscribe((_: any) => this.opened = false);
+  }
+}

src/app/keys/keys.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class KeysModule { }

src/app/keys/keys/keys.component.html

@@ -0,0 +1,2 @@
+<h3>API Keys</h3>
+<key-list [keys]="keys" />

src/app/keys/keys/keys.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeysComponent } from './keys.component';
+
+describe('KeysComponent', () => {
+  let component: KeysComponent;
+  let fixture: ComponentFixture<KeysComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KeysComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KeysComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/keys/keys/keys.component.ts

@@ -0,0 +1,39 @@
+import { Component, inject, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { KeyListComponent } from '../key-list/key-list.component';
+import ApiKey from '../../shared/models/api-key';
+import EventService from '../../shared/services/EventService';
+import { ApiKeyService } from '../../shared/services/api/api-key.service';
+
+@Component({
+  selector: 'keys',
+  imports: [KeyListComponent],
+  templateUrl: './keys.component.html',
+  styleUrl: './keys.component.scss'
+})
+export class KeysComponent implements OnDestroy {
+  private readonly route = inject(ActivatedRoute);
+  private readonly events = inject(EventService);
+  private readonly keyService = inject(ApiKeyService);
+
+  subscriptions: (Subscription | undefined)[] = [];
+  keys: ApiKey[] = [];
+
+
+  constructor() {
+    this.route.data.subscribe(payload => {
+      this.keys = payload['keys'] ?? [];
+    });
+
+    this.subscriptions.push(this.events.listen('add_api_key', _ => this.keyService.fetch().subscribe(keys => this.keys = keys)));
+    this.subscriptions.push(this.events.listen('delete_api_key', _ => this.keyService.fetch().subscribe(keys => this.keys = keys)));
+  }
+
+  ngOnDestroy(): void {
+    for (let subscription of this.subscriptions) {
+      if (subscription)
+        subscription.unsubscribe();
+    }
+  }
+}

src/app/navigation/navigation.component.html

@@ -1,6 +1,6 @@
 <nav>
   <user-card class="card" />
-  <ul>
+  <ul class="">
     @if (!isLoggedIn()) {
     <li>
       <a routerLink="/login"
@@ -11,7 +11,8 @@
     }
     @if (isLoggedIn() && !isTTSLoggedIn()) {
     <li>
-      <a routerLink="/tts-login"
+      <a mat-raised-button
+         routerLink="/tts-login"
          routerLinkActive="active">
         TTS Login
       </a>
@@ -19,42 +20,56 @@
     }
     @if (isLoggedIn() && isTTSLoggedIn()) {
     <li>
-      <a routerLink="/policies"
+      <a mat-raised-button
+         routerLink="/policies"
          routerLinkActive="active">
         Policies
       </a>
     </li>
     <li>
-      <a routerLink="/filters"
+      <a mat-raised-button
+         routerLink="/filters"
          routerLinkActive="active">
         Filters
       </a>
     </li>
     <li>
-      <a routerLink="/actions"
+      <a mat-raised-button
+         routerLink="/actions"
          routerLinkActive="active">
         Actions
       </a>
     </li>
     <li>
-      <a routerLink="/redemptions"
+      <a mat-raised-button
+         routerLink="/redemptions"
          routerLinkActive="active">
         Redemptions
       </a>
     </li>
     <li>
-      <a routerLink="/groups"
+      <a mat-raised-button
+         routerLink="/groups"
          routerLinkActive="active">
         Groups
       </a>
     </li>
     <li>
-      <a routerLink="/connections"
+      <a mat-raised-button
+         routerLink="/connections"
          routerLinkActive="active">
         Connections
       </a>
     </li>
     }
-    
+    @if (isLoggedIn()) {
+    <li>
+      <a mat-raised-button
+         routerLink="/keys"
+         routerLinkActive="active">
+        API Keys
+      </a>
+    </li>
+    }
   </ul>
 </nav>

src/app/navigation/navigation.component.scss

@@ -1,8 +1,4 @@
-$primary_background_color: #EEEEEE;
-$primary_font_color: #111111;
-
-$secondary_background_color: #DDDDDD;
-$secondary_font_color: #333333;
+@use "@angular/material" as mat;
 
 ul {
   padding: 0;
@@ -18,20 +14,17 @@ li {
 }
 
 a {
-  background-color: transparent;
   padding: 1em;
   border: 0;
   margin: 0;
   font-size: large;
   text-decoration: none;
-  color: $primary_font_color;
+  
   border-radius: 10px;
-}
 
-a:hover {
-  background-color: #FAFAFA;
-}
-
-a.active {
-  background-color: #F5F5F5;
+  @include mat.button-overrides(
+    (
+      protected-container-height: 1
+    )
+  );
 }

src/app/navigation/navigation.component.ts

@@ -5,11 +5,18 @@ import { ApiAuthenticationService } from '../shared/services/api/api-authenticat
 import { MatCardModule } from '@angular/material/card';
 import { AuthModule } from '../auth/auth.module';
 import { UserCardComponent } from "../auth/user-card/user-card.component";
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'navigation',
   standalone: true,
-  imports: [RouterModule, MatCardModule, AuthModule, UserCardComponent],
+  imports: [
+    AuthModule,
+    MatButtonModule,
+    MatCardModule,
+    RouterModule,
+    UserCardComponent,
+  ],
   templateUrl: './navigation.component.html',
   styleUrl: './navigation.component.scss'
 })

src/app/permissions/permission-item-edit/permission-item-edit.component.html

@@ -23,12 +23,19 @@
   </mat-card-content>
 
   <mat-card-actions class="actions">
-    <button mat-raised-button
-            (click)="dialogRef.close()">Cancel</button>
+    <button mat-button
+            class="neutral"
+            disabled="{{waitForResponse}}"
+            (click)="dialogRef.close()">
+      <mat-icon>cancel</mat-icon>Cancel
+    </button>
 
-    <button mat-raised-button
-            disabled="{{pathControl.invalid || waitForResponse}}"
-            (click)="submit()">{{data.isNew ? "Add" : "Save"}}</button>
+    <button mat-button
+            class="confirm"
+            disabled="{{!pathControl.dirty || pathControl.invalid || waitForResponse}}"
+            (click)="submit()">
+      <mat-icon>{{data.isNew ? "add" : "save"}}</mat-icon>{{data.isNew ? "Add" : "Save"}}
+    </button>
   </mat-card-actions>
 
   @if (responseError) {

src/app/policies/policy-item-edit/policy-item-edit.component.html

@@ -52,22 +52,17 @@
       }
     </mat-form-field>
   </mat-card-content>
-  <mat-card-actions align="end">
+  <mat-card-actions>
     <button mat-button
+            class="neutral"
             (click)="dialogRef.close()">
       <mat-icon>cancel</mat-icon>Cancel
     </button>
-    @if (isNew) {
     <button mat-button
+            class="confirm"
             (click)="save()">
-      <mat-icon>add</mat-icon>Add
+      <mat-icon>{{(isNew ? 'add' : 'save')}}</mat-icon>{{(isNew ? 'Add' : 'Save')}}
     </button>
-    } @else {
-    <button mat-button
-            (click)="save()">
-      <mat-icon>save</mat-icon>Save
-    </button>
-    }
   </mat-card-actions>
 
   @if (responseError) {

src/app/policies/policy-item-edit/policy-item-edit.component.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, Component, inject, OnInit, ViewChild } from '@angular/co
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -18,6 +18,7 @@ import { PolicyDropdownComponent } from '../policy-dropdown/policy-dropdown.comp
     GroupDropdownComponent,
     MatButtonModule,
     MatCardModule,
+    MatDialogModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,

src/app/redemptions/redemption-item-edit/redemption-item-edit.component.html

@@ -31,23 +31,25 @@
       }
       }
     </mat-form-field>
-    <div class="buttons">
-      <button mat-icon-button
-              class="save"
-              [disabled]="waitForResponse || formGroups.invalid"
-              (click)="save()">
-        <mat-icon>save</mat-icon>
-      </button>
-      @if (redemption.id) {
-      <button mat-icon-button
-              class="delete"
-              [disabled]="waitForResponse"
-              (click)="delete()">
-        <mat-icon>delete</mat-icon>
-      </button>
-      }
-    </div>
   </mat-card-content>
+
+  <mat-card-actions>
+    @if (redemption.id) {
+    <button mat-button
+            class="danger"
+            [disabled]="waitForResponse"
+            (click)="delete()">
+      <mat-icon>delete</mat-icon>Delete
+    </button>
+    }
+    <button mat-button
+            class="confirm"
+            [disabled]="waitForResponse || formGroups.invalid"
+            (click)="save()">
+      <mat-icon>save</mat-icon>Save
+    </button>
+  </mat-card-actions>
+
   @if (responseError) {
   <mat-card-footer>
     <small class="error below">{{responseError}}</small>

src/app/redemptions/redemption-item-edit/redemption-item-edit.component.scss

@@ -1,46 +1,4 @@
-.mat-mdc-card {
-  margin: 0.5em;
-}
-
-.mat-mdc-card-content {
-  display: flex;
-  flex-direction: row;
-  column-gap: 1em;
-  padding-bottom: 0;
-}
 
 .buttons {
   margin: -0.75em;
-}
-
-button,
-.mdc-button {
-  display: block;
-}
-
-@media (max-width:1000px) {
-  .mat-mdc-card-content {
-    flex-direction: column;
-    margin-bottom: 0.5em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 1em;
-  }
-
-  .buttons {
-    margin: 0;
-  }
-
-  button~button {
-    margin-left: 2em;
-  }
-
-  button {
-    display: inline;
-  }
-
-  .delete {
-    background-color: rgb(255, 152, 152);
-  }
 }

src/app/redemptions/redemption-list/redemption-list.component.html

@@ -29,8 +29,7 @@
         <th mat-header-cell
             *matHeaderCellDef>Twitch Redemption Name</th>
         <td mat-cell
-            *matCellDef="let redemption">{{getTwitchRedemptionNameById(redemption.redemption_id) || 'Unknown
-          Twitch Redemption'}}</td>
+            *matCellDef="let redemption">{{getTwitchRedemptionNameById(redemption.redemption_id) || 'Unknown Twitch Redemption'}}</td>
       </ng-container>
 
       <ng-container matColumnDef="action-name">

src/app/shared/services/api/api-key.service.ts

@@ -20,10 +20,13 @@ export class ApiKeyService {
       this.keys = [];
       this.loaded = false;
     });
+
+    this.events.listen('delete_api_key', payload => this.keys = this.keys.filter(k => k.id != payload));
+    this.events.listen('add_api_key', payload => this.keys.push(payload));
   }
 
-  fetch(force: boolean = false) {
-    if (!force && this.loaded)
+  fetch() {
+    if (this.loaded)
       return of(this.keys);
 
     const $ = this.http.get<ApiKey[]>(environment.API_HOST + '/keys', {

src/app/shared/services/theme.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/services/theme.service.ts

@@ -0,0 +1,32 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private _current = signal<'light' | 'dark'>('dark');
+
+  get theme() {
+    return this._current();
+  }
+
+  set theme(value: 'light' | 'dark') {
+    this._current.set(value);
+  }
+
+  isDarkTheme() {
+    return this.theme == 'dark';
+  }
+
+  isLightTheme() {
+    return this.theme == 'light';
+  }
+
+  toggle() {
+    if (this.theme == 'light') {
+      this.theme = 'dark';
+    } else {
+      this.theme = 'light';
+    }
+  }
+}

src/app/shared/services/twitch-redemption.service.ts

@@ -22,8 +22,8 @@ export default class TwitchRedemptionService {
     });
   }
 
-  fetch(force: boolean = false) {
-    if (!force && this.loaded)
+  fetch() {
+    if (this.loaded)
       return of(this.twitchRedemptions);
 
     const $ = this.http.get<TwitchRedemption[]>(environment.API_HOST + '/twitch/redemptions', {

src/app/theme/theme.component.html

@@ -0,0 +1,6 @@
+<button mat-icon-button
+        class="refresh"
+        aria-label="Change theme"
+        (click)="toggle()">
+  <mat-icon>refresh</mat-icon>
+</button>

src/app/theme/theme.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThemeComponent } from './theme.component';
+
+describe('ThemeComponent', () => {
+  let component: ThemeComponent;
+  let fixture: ComponentFixture<ThemeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ThemeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ThemeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/theme/theme.component.ts

@@ -0,0 +1,35 @@
+import { Component, HostBinding, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ThemeService } from '../shared/services/theme.service';
+
+@Component({
+  selector: 'theme',
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+  ],
+  templateUrl: './theme.component.html',
+  styleUrl: './theme.component.scss'
+})
+export class ThemeComponent {
+  private readonly _themeService = inject(ThemeService);
+
+  @HostBinding('class.dark-theme')
+  get isDarkMode() {
+    return this._themeService.isDarkTheme();
+  }
+
+  @HostBinding('class.light-theme')
+  get isLightMode() {
+    return this._themeService.isLightTheme();
+  }
+
+  set(theme: 'light' | 'dark') {
+    this._themeService.theme = theme;
+  }
+
+  toggle() {
+    this._themeService.toggle();
+  }
+}

src/app/tts-filters/filter-item-edit/filter-item-edit.component.html

@@ -1,59 +1,66 @@
 <mat-card>
+  <mat-card-header>
+    <mat-card-title>TTS Filter</mat-card-title>
+  </mat-card-header>
+
   <mat-card-content>
-    <h3 mat-dialog-title>TTS Filter</h3>
-    <mat-dialog-content>
-      <form [formGroup]="forms">
-        <div>
-          <mat-form-field>
-            <mat-label>Search</mat-label>
-            <input matInput
-                   cdkFocusInitial
-                   type="text"
-                   formControlName="search" />
-            @if (forms.get('search')?.invalid && (forms.get('search')?.dirty || forms.get('search')?.touched)) {
-            <small class="error">Search is required.</small>
-            }
-          </mat-form-field>
-        </div>
-        <div>
-          <mat-form-field>
-            <mat-label>Replace</mat-label>
-            <input matInput
-                   formControlName="replace" />
-          </mat-form-field>
-        </div>
-        <div>
-          <mat-form-field>
-            <mat-label>Regex Options</mat-label>
-            <mat-select multiple
-                        [formControl]="flagControl"
-                        [compareWith]="compare"
-                        (selectionChange)="onSelectionChange($event)">
-              <mat-select-trigger>
-                {{optionsSelected[0] || ''}}
-                @if ((flagControl.value?.length || 0) > 1) {
-                <small class="additional-selection">
-                  (+{{flagControl.value!.length - 1}})
-                </small>
-                }
-              </mat-select-trigger>
-              @for (option of regexOptions; track option) {
-              <mat-option [value]="option">{{option.name}}</mat-option>
+    <form [formGroup]="forms">
+      <div>
+        <mat-form-field>
+          <mat-label>Search</mat-label>
+          <input matInput
+                 cdkFocusInitial
+                 type="text"
+                 formControlName="search" />
+          @if (forms.get('search')?.invalid && (forms.get('search')?.dirty || forms.get('search')?.touched)) {
+          <small class="error">Search is required.</small>
+          }
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field>
+          <mat-label>Replace</mat-label>
+          <input matInput
+                 formControlName="replace" />
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field>
+          <mat-label>Regex Options</mat-label>
+          <mat-select multiple
+                      [formControl]="flagControl"
+                      [compareWith]="compare"
+                      (selectionChange)="onSelectionChange($event)">
+            <mat-select-trigger>
+              {{optionsSelected[0] || ''}}
+              @if ((flagControl.value?.length || 0) > 1) {
+              <small class="additional-selection">
+                (+{{flagControl.value!.length - 1}})
+              </small>
               }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        @if (responseError) {
-        <small class="error">{{responseError}}</small>
-        }
-      </form>
-    </mat-dialog-content>
-    <mat-dialog-actions>
-      <button mat-button
-              (click)="onCancelClick()">Cancel</button>
-      <button mat-button
-              (click)="onSaveClick()"
-              [disabled]="!forms.dirty || forms.invalid || waitForResponse">Save</button>
-    </mat-dialog-actions>
+            </mat-select-trigger>
+            @for (option of regexOptions; track option) {
+            <mat-option [value]="option">{{option.name}}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      @if (responseError) {
+      <small class="error">{{responseError}}</small>
+      }
+    </form>
   </mat-card-content>
+
+  <mat-card-actions>
+    <button mat-button
+            class="neutral"
+            (click)="onCancelClick()"
+            [disabled]="waitForResponse">
+      <mat-icon>cancel</mat-icon> Cancel</button>
+    <button mat-button
+            class="confirm"
+            (click)="onSaveClick()"
+            [disabled]="!forms.dirty || forms.invalid || waitForResponse">
+      <mat-icon>save</mat-icon>Save</button>
+  </mat-card-actions>
 </mat-card>

src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogActions, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { Filter } from '../../shared/models/filter';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,6 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { HermesClientService } from '../../hermes-client.service';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'tts-filter-item-edit',
@@ -16,10 +17,9 @@ import { HermesClientService } from '../../hermes-client.service';
     FormsModule,
     MatButtonModule,
     MatCardModule,
-    MatDialogActions,
-    MatDialogContent,
-    MatDialogTitle,
+    MatDialogModule,
     MatFormFieldModule,
+    MatIconModule,
     MatInputModule,
     MatSelectModule,
     ReactiveFormsModule,

src/app/tts-filters/filter-item/filter-item.component.scss

@@ -22,7 +22,6 @@ ul {
     }
 
     >button {
-      background: #dddddd;
       border-radius: 50%;
 
       :hover {

src/app/tts-filters/filter-list/filter-list.component.scss

@@ -1,7 +1,3 @@
-div {
-  background-color: #fafafa;
-}
-
 ul.data {
   margin: 0;
   padding: 0;
@@ -22,10 +18,6 @@ ul.data {
   >li:last-child {
     border-bottom: 0 solid #aaaaaa;
   }
-
-  >li:nth-child(2n) {
-    background-color: #f5f5f5;
-  }
 }
 
 ul.header {
@@ -33,7 +25,6 @@ ul.header {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  background-color: #fafafa;
 
   li {
     border-bottom: 0 solid #aaaaaa;
@@ -41,7 +32,6 @@ ul.header {
     list-style-type: none;
     white-space: pre;
     text-align: justify;
-    background-color: #fafafa;
   }
 
   li:nth-child(1),

src/app/tts-filters/filters/filters.component.scss

@@ -1,5 +1,4 @@
 main {
-  background-color: #fafafa;
   display: flex;
   flex-direction: column;
   height: 100vh;

src/app/tts-filters/tts-filters.module.ts

@@ -1,12 +1,17 @@
 import { NgModule } from '@angular/core';
 import { FiltersComponent } from './filters/filters.component';
 import { FilterListComponent } from './filter-list/filter-list.component';
+import { FilterItemEditComponent } from './filter-item-edit/filter-item-edit.component';
+import { FilterItemComponent } from './filter-item/filter-item.component';
 
 
 @NgModule({
   declarations: [],
   imports: [
-    FiltersComponent, FilterListComponent
+    FiltersComponent,
+    FilterItemComponent,
+    FilterItemEditComponent,
+    FilterListComponent,
   ]
 })
 export class TtsFiltersModule { }

src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html

@@ -15,11 +15,18 @@
   </mat-card-content>
 
   <mat-card-actions class="actions">
-    <button mat-raised-button
-            (click)="dialogRef.close()">Cancel</button>
-    <button mat-raised-button
-            disabled="{{usernameControl.invalid || waitForResponse}}"
-            (click)="submit()">Add</button>
+    <button mat-button
+            class="neutral"
+            disabled="{{waitForResponse}}"
+            (click)="dialogRef.close()">
+      <mat-icon>cancel</mat-icon>Cancel
+    </button>
+    <button mat-button
+            class="confirm"
+            disabled="{{!usernameControl.dirty || usernameControl.invalid || waitForResponse}}"
+            (click)="submit()">
+      <mat-icon>add</mat-icon>Add
+    </button>
   </mat-card-actions>
 
   @if (responseError) {

src/index.html

@@ -14,7 +14,9 @@
           rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
           rel="stylesheet">
-  </head>
+      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
 
   <body class="mat-typography">
     <app-root></app-root>

src/styles.scss

@@ -1,21 +1,71 @@
-/* You can add global styles to this file, and also import other style files */
+@use "@angular/material" as mat;
+@include mat.core();
 
-@use '@angular/material' as mat;
+html {
+  @include mat.theme((theme-type: light dark,
+      color: (primary: mat.$violet-palette,
+        tertiary: mat.$orange-palette,
+        use-system-variables: true,
+      ),
+      typography: Roboto,
+      density: 0,
+    ));
+}
 
 html,
-body {
+body,
+main {
   height: 100%;
 }
 
+html,
+body,
+main,
+content,
+nav {
+  background-color: var(--mat-sys-background);
+  color: var(--mat-sys-on-background);
+}
+
+.mat-mdc-card-header,
+.mat-mdc-card-actions {
+  color: var(--mat-sys-on-background);
+  margin: 1em;
+}
+
+.mat-mdc-card-actions {
+  padding: 0;
+  margin: 0;
+}
+
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
+.light-theme {
+  color-scheme: light;
+}
+
+.dark-theme {
+  color-scheme: dark;
+}
+
 .mat-mdc-dialog-surface {
   background-color: transparent !important;
 }
 
+.mat-mdc-card-actions {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.mat-mdc-button {
+  color: var(--mat-sys-on-background);
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -47,28 +97,28 @@ body {
 }
 
 .confirm {
-  @include mat.button-overrides((text-state-layer-color: rgb(52, 255, 62),
+  @include mat.button-overrides(( //text-state-layer-color: rgb(52, 255, 62),
       text-label-text-color: rgb(71, 218, 78),
       text-disabled-label-text-color: rgb(71, 218, 78),
     ));
 }
 
 .neutral {
-  @include mat.button-overrides((text-state-layer-color: rgb(64, 141, 255),
+  @include mat.button-overrides(( //text-state-layer-color: rgb(64, 141, 255),
       text-label-text-color: rgb(52, 106, 255),
       text-disabled-label-text-color: rgb(52, 106, 255),
     ));
 }
 
 .warning {
-  @include mat.button-overrides((text-state-layer-color: rgb(255, 172, 63),
+  @include mat.button-overrides(( //text-state-layer-color: rgb(255, 172, 63),
       text-label-text-color: rgb(255, 145, 19),
       text-disabled-label-text-color: rgb(255, 145, 19),
     ));
 }
 
 .danger {
-  @include mat.button-overrides((text-state-layer-color: rgb(255, 48, 48),
+  @include mat.button-overrides(( //text-state-layer-color: rgb(255, 48, 48),
       text-label-text-color: rgb(255, 52, 52),
       text-disabled-label-text-color: rgb(255, 52, 52),
       filled-label-text-color: rgb(255, 52, 52),
@@ -90,4 +140,19 @@ body {
   align-items: center;
   align-self: center;
   text-align: center;
+}
+
+@include mat.button-overrides((text-label-text-color: --mat-sys-on-primary,
+    protected-label-text-color: --mat-sys-on-primary,
+    //state-layer-color: --mat-sys-on-primary,
+  ));
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 }