Update UI for new subscription

fixed the scaling issues
this was due to updated styling attritbutes I believe

Author: NeoScript

webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.html

@@ -1,41 +1,42 @@
-<h3>Create a new subscription</h3>
+<mat-dialog-content>
+  <h3>Create a new subscription</h3>
 
-<mat-horizontal-stepper>
-  <mat-step color="accent">
-    <ng-template matStepLabel>Subscription Type</ng-template>
-    <p>Which type of subscription would you like to create?</p>
-    <mat-action-list>
-      <button mat-list-item matStepperNext (click)="setConfigType('pull')">
-        <mat-icon mat-list-icon>move_to_inbox</mat-icon>
-        <div mat-line>Pull Subscription</div>
-        <div mat-line class="caption">Subscribers must pull messages manually.</div>
-      </button>
+  <mat-horizontal-stepper>
+    <mat-step color="accent">
+      <ng-template matStepLabel>Subscription Type</ng-template>
+      <p>Which type of subscription would you like to create?</p>
+      <mat-action-list>
+        <button mat-list-item matStepperNext (click)="setConfigType('pull')">
+          <mat-icon matListItemIcon>move_to_inbox</mat-icon>
+          <div matListItemTitle>Pull Subscription</div>
+          <div matListItemLine>Subscribers must pull messages manually.</div>
+        </button>
 
-      <button mat-list-item matStepperNext (click)="setConfigType('push')">
-        <mat-icon mat-list-icon>send</mat-icon>
-        <div mat-line>Push Subscription</div>
-        <div mat-line class="caption">Messages will be forwarded to an endpoint.</div>
-      </button>
-    </mat-action-list>
-  </mat-step>
+        <button mat-list-item matStepperNext (click)="setConfigType('push')">
+          <mat-icon matListItemIcon>send</mat-icon>
+          <div matListItemTitle>Push Subscription</div>
+          <div matListItemLine>Messages will be forwarded to an endpoint.</div>
+        </button>
+      </mat-action-list>
+    </mat-step>
 
-  <mat-step color="accent">
-    <ng-template matStepLabel>Configuration</ng-template>
+    <mat-step color="accent">
+      <ng-template matStepLabel>Configuration</ng-template>
 
-    <div class="final-config">
-      <mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
-        <mat-label>Enter subscription name</mat-label>
-        <mat-hint>becomes '/projects/project-name/subscriptions/{{this.subscriptionForm.value}}'</mat-hint>
-        <input matInput type="text" autocomplete="off" [formControl]="this.subscriptionForm">
-      </mat-form-field>
+      <div class="final-config">
+        <mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
+          <mat-label>Enter subscription name</mat-label>
+          <mat-hint>becomes '/projects/project-name/subscriptions/{{this.subscriptionForm.value}}'</mat-hint>
+          <input matInput type="text" autocomplete="off" [formControl]="this.subscriptionForm">
+        </mat-form-field>
 
-      @if (this.configType === 'pull') {
+        @if (this.configType === 'pull') {
         <button mat-raised-button color="accent" (click)="createPullSubscription()"
           [disabled]="this.subscriptionForm.invalid">
           Create Pull Subscription
           <mat-icon>add</mat-icon>
         </button>
-      } @else {
+        } @else {
         <mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
           <mat-label>Enter endpoint url</mat-label>
           <mat-hint>new messages will trigger this endpoint.</mat-hint>
@@ -46,9 +47,9 @@ <h3>Create a new subscription</h3>
           Create Push Subscription
           <mat-icon>add</mat-icon>
         </button>
-      }
-    </div>
-  </mat-step>
-</mat-horizontal-stepper>
-
+        }
+      </div>
+    </mat-step>
+  </mat-horizontal-stepper>
 
+</mat-dialog-content>

webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.scss

@@ -1,12 +1,12 @@
-.caption{
+.caption {
     color: darkgray;
 }
 
-.final-config{
+.final-config {
     display: flex;
     flex-direction: column;
 }
 
-.nameInput{
+.nameInput {
     padding-bottom: 2em;
 }

webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.ts

@@ -1,21 +1,23 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogContainer, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
 import { PushConfig, Topic } from 'src/app/services/pubsub.service';
 import { MatStepper, MatStep, MatStepLabel, MatStepperNext } from '@angular/material/stepper';
-import { MatActionList, MatListItem } from '@angular/material/list';
+import { MatActionList, MatListItem, MatListItemIcon, MatListItemLine, MatListItemTitle } from '@angular/material/list';
 import { MatIcon } from '@angular/material/icon';
 import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 
 import { MatButton } from '@angular/material/button';
 
 @Component({
-    selector: 'app-new-subscription-dialog',
-    templateUrl: './new-subscription-dialog.component.html',
-    styleUrls: ['./new-subscription-dialog.component.scss'],
-    standalone: true,
-    imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, MatButton]
+  selector: 'app-new-subscription-dialog',
+  templateUrl: './new-subscription-dialog.component.html',
+  styleUrls: ['./new-subscription-dialog.component.scss'],
+  standalone: true,
+  imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, MatButton, MatDialogContent,
+    MatListItemIcon, MatListItemLine, MatListItemTitle
+  ]
 })
 export class NewSubscriptionDialogComponent implements OnInit {
   private ref = inject<MatDialogRef<NewSubscriptionDialogComponent, NewSubscriptionRequest>>(MatDialogRef);