Fix the styling around new topic dialog

Author: NeoScript

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

@@ -1,13 +1,16 @@
-<mat-card-header>
-    <div class="column-layout">
-        <mat-card-title>Create Topic</mat-card-title>
-        <mat-card-subtitle>Topic will be created for: </mat-card-subtitle>
-    </div>
-</mat-card-header>
+<mat-dialog-content>
+    <mat-card-header>
+        <div class="column-layout">
+            <mat-card-title>Create Topic</mat-card-title>
+            <mat-card-subtitle>Topic will be created for: </mat-card-subtitle>
+        </div>
+    </mat-card-header>
 
-<mat-card-content class="column-layout">
-    <mat-form-field appearance="outline">
-        <input matInput type="text" autocomplete="off" autofocus placeholder="New Topic ID" [formControl]="this.topicName">
-    </mat-form-field>
-    <button mat-raised-button color="accent" (click)="this.submit()">Create Topic</button>
-</mat-card-content>
+    <mat-card-content class="column-layout">
+        <mat-form-field appearance="outline">
+            <input matInput type="text" autocomplete="off" autofocus placeholder="New Topic ID"
+                [formControl]="this.topicName">
+        </mat-form-field>
+        <button mat-raised-button color="accent" (click)="this.submit()">Create Topic</button>
+    </mat-card-content>
+</mat-dialog-content>

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

@@ -1,17 +1,17 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
 import { MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent } from '@angular/material/card';
 import { MatFormField } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatButton } from '@angular/material/button';
 
 @Component({
-    selector: 'app-new-topic-dialog',
-    templateUrl: './new-topic-dialog.component.html',
-    styleUrls: ['./new-topic-dialog.component.scss'],
-    standalone: true,
-    imports: [MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatFormField, MatInput, ReactiveFormsModule, MatButton]
+  selector: 'app-new-topic-dialog',
+  templateUrl: './new-topic-dialog.component.html',
+  styleUrls: ['./new-topic-dialog.component.scss'],
+  standalone: true,
+  imports: [MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatFormField, MatInput, ReactiveFormsModule, MatButton, MatDialogContent]
 })
 export class NewTopicDialogComponent implements OnInit {
   private ref = inject<MatDialogRef<NewTopicDialogComponent>>(MatDialogRef);
@@ -22,9 +22,9 @@ export class NewTopicDialogComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  submit(): void{
-    if(this.topicName.valid){
-      this.ref.close({newTopic: this.topicName.value})
+  submit(): void {
+    if (this.topicName.valid) {
+      this.ref.close({ newTopic: this.topicName.value })
     }
   }