Fixed styling issues. Fixed dialog themes after changing theme.

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

@@ -3,10 +3,10 @@
 
   <section>
     <article>
-      <mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Filter by type</mat-label>
-        <mat-select (selectionChange)="onFilterChange($event.value)"
-                    value="0">
+        <mat-select value="0"
+                    (selectionChange)="onFilterChange($event.value)">
           <mat-select-trigger>
             <mat-icon matPrefix>filter_list</mat-icon>&nbsp;{{filter.name}}
           </mat-select-trigger>
@@ -17,7 +17,7 @@
       </mat-form-field>
     </article>
     <article>
-      <mat-form-field>
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Search</mat-label>
         <input matInput
                type="text"
@@ -28,7 +28,7 @@
       </mat-form-field>
     </article>
   </section>
-  <action-list class="center"
+  <action-list class="list center"
                [actions]="actions"
                (actionsChange)="items.push($event)" />
 </content>

src/app/actions/actions/actions.component.scss

@@ -1,12 +1,12 @@
-body,
+content,
 h3 {
   padding: 0;
   margin: 0;
 }
 
-body {
-  height: 100vh;
-  overflow: auto;
+content {
+  display: flex;
+  flex-direction: column;
   margin-top: 3em;
 }
 
@@ -19,8 +19,7 @@ section {
   display: flex;
   justify-content: space-between;
   width: 70%;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
 
   @media (max-width:1250px) {
     display: block;
@@ -30,6 +29,7 @@ section {
   article {
     display: flex;
     justify-content: space-around;
+    margin: 1em 0;
   }
 }
 

src/app/app.component.html

@@ -1,6 +1,6 @@
 <main>
   <topbar class="top" />
-  <div [class.container]="isSidebarOpen"
+  <div [class.grid]="isSidebarOpen"
        [class.full]="!isSidebarOpen">
     @if (isSidebarOpen) {
     <sidebar class="navigation" />

src/app/app.component.scss

@@ -1,9 +1,8 @@
-.container {
+.grid {
   display: grid;
   grid-template-columns: 20em 0px 1fr;
 }
 
 .full {
-  width: 80%;
   margin: 0 auto;
 }

src/app/app.component.ts

@@ -107,14 +107,22 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.overlayContainer.getContainerElement().classList.add(this.themeService.theme + '-theme');
 
+    this.addSubscription(this.events.listen('theme_change', data => {
+      const classList = this.overlayContainer.getContainerElement().classList;
+      classList.remove(data.previous_theme + '-theme');
+      classList.add(data.current_theme + '-theme');
+    }));
+
     this.ngZone.runOutsideAngular(() => setInterval(() => this.client.heartbeat(), 15000));
   }
 
   ngOnDestroy() {
     for (let s of this.subscriptions) {
+      if (s) {
         s.unsubscribe();
       }
     }
+  }
 
   private addSubscription(s: Subscription) {
     this.subscriptions.push(s);

src/app/navigation/sidebar/sidebar.component.scss

@@ -1,5 +1,6 @@
 @use "@angular/material" as mat;
 
+
 ul {
   padding: 0;
 }
@@ -8,9 +9,9 @@ li {
   list-style: none;
   width: 100%;
   display: flex;
-  flex-grow: 1;
   justify-content: center;
   flex-direction: column;
+  margin: 0.5em 0;
 }
 
 a {

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

@@ -60,6 +60,7 @@
     </button>
     <button mat-button
             class="confirm"
+            [disabled]="formGroup.invalid || waitForResponse"
             (click)="save()">
       <mat-icon>{{(isNew ? 'add' : 'save')}}</mat-icon>{{(isNew ? 'Add' : 'Save')}}
     </button>

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

@@ -1,4 +1,9 @@
-
 .buttons {
   margin: -0.75em;
 }
+
+.mat-mdc-card-content {
+  display: grid;
+  row-gap: 1em;
+  align-self: center;
+}

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

@@ -1,4 +1,4 @@
-<div class="content">
+<content>
   <button mat-button
           class="add"
           (click)="add()"><mat-icon>add</mat-icon> Add Redemption</button>
@@ -64,4 +64,4 @@
           *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
-</div>
+</content>

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

@@ -1,9 +1,3 @@
-.content {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
 .add {
   width: 100%;
   margin-top: 3em;
@@ -21,10 +15,10 @@
 }
 
 .table-container {
-  min-width: 800px;
+  width: 800px;
   flex: 1;
   height: 60vh;
-  overflow: auto;
+  overflow: scroll;
   margin-bottom: 2em;
   border-radius: 15px;
 }

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

@@ -1,9 +1,11 @@
-import { Injectable, signal } from '@angular/core';
+import { inject, Injectable, signal } from '@angular/core';
+import EventService from './EventService';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ThemeService {
+  private events = inject(EventService);
   private _current = signal<'light' | 'dark'>('dark');
 
   get theme() {
@@ -11,7 +13,12 @@ export class ThemeService {
   }
 
   set theme(value: 'light' | 'dark') {
+    const previous = this._current();
     this._current.set(value);
+    this.events.emit('theme_change', {
+      previous_theme: previous,
+      current_theme: value,
+    });
   }
 
   isDarkTheme() {

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

@@ -9,12 +9,16 @@ ul {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-evenly;
+  padding-left: 0;
+  align-items: center;
+  vertical-align: middle;
 
   li {
     list-style-type: none;
     white-space: pre;
     text-align: start;
     text-wrap: wrap;
+    padding: 0;
 
     span {
       overflow: hidden;

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

@@ -2,8 +2,8 @@
   <ul class="data">
     <li>
       <ul class="header">
-        <li>Search</li>
-        <li>Replace</li>
+        <li>Search for...</li>
+        <li>Replace with...</li>
         <li></li>
       </ul>
     </li>

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

@@ -6,7 +6,7 @@ ul.data {
   >li {
     display: block;
     list-style-type: none;
-    padding: 0.75em 1em;
+    padding: 0.5em 1em;
     border-bottom: 1px solid #aaaaaa;
   }
 

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

@@ -1,7 +1,6 @@
 main {
   display: flex;
   flex-direction: column;
-  height: 100vh;
 }
 
 article {
@@ -11,6 +10,13 @@ article {
 }
 
 .grow {
-  flex-grow: 1;
+  width: 800px;
+  height: 60vh;
+  align-items: center;
+  align-self: center;
   overflow: auto;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  border: 1px solid grey;
+  border-radius: 15px;
 }

src/index.html

@@ -14,9 +14,11 @@
           rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
           rel="stylesheet">
-      <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>
+    <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

@@ -12,6 +12,7 @@ html {
     ));
 }
 
+:root,
 html,
 body,
 main {
@@ -22,7 +23,7 @@ html,
 body,
 main,
 content,
-nav {
+sidebar {
   background-color: var(--mat-sys-background);
   color: var(--mat-sys-on-background);
 }
@@ -99,7 +100,7 @@ body {
 .confirm {
   @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),
+      text-disabled-label-text-color: rgb(107, 107, 107),
     ));
 }
 
@@ -120,10 +121,13 @@ body {
 .danger {
   @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),
+      text-disabled-label-text-color: rgb(107, 107, 107),
       filled-label-text-color: rgb(255, 52, 52),
+      filled-disabled-label-text-color: rgb(107, 107, 107),
       outlined-label-text-color: rgb(255, 52, 52),
+      outlined-disabled-label-text-color: rgb(107, 107, 107),
       protected-label-text-color: rgb(255, 52, 52),
+      protected-disabled-label-text-color: rgb(107, 107, 107),
       protected-state-layer-color: rgb(255, 75, 75),
       protected-ripple-color: rgb(255, 154, 154),
     ));