Chore: Updated mat inputs to better match the style guide. Removed placeholders in favour of labels.

overlord/src/app/role/role-detail/role-detail.component.html

@@ -1,14 +1,14 @@
 <div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
-  <mat-card appearance="outlined" class="flex-auto">
-    <mat-card-title-group>
+  <mat-card class="flex-auto">
+    <mat-card-header>
       <mat-card-title>Role</mat-card-title>
-    </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       <form [formGroup]="form" class="flex flex-col">
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
+            <input matInput #nameElement formControlName="name" />
           </mat-form-field>
         </div>
         <mat-divider></mat-divider>

overlord/src/app/role/role-list/role-list.component.html

@@ -1,11 +1,13 @@
-<mat-card appearance="outlined">
-  <mat-card-title-group>
-    <mat-card-title>Roles</mat-card-title>
-    <a mat-button [routerLink]="['/roles', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+<mat-card>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Roles</mat-card-title>
+      <a mat-button [routerLink]="['/roles', 'new']">
+        <mat-icon>add_box</mat-icon>
+        Add
+      </a>
+    </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
       <!-- Name Column -->