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

overlord/src/app/settings/settings.component.html

@@ -1,6 +1,6 @@
 <mat-tab-group>
   <mat-tab label="Lock Dates">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form [formGroup]="lockInfoForm" class="flex flex-col">
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
@@ -15,10 +15,10 @@
               Is Rolling
             </mat-checkbox>
             <mat-form-field class="flex-auto basis-3/5" *ngIf="lockOlder && !olderRolling">
+              <mat-label>Date</mat-label>
               <input
                 matInput
                 [matDatepicker]="olderDate"
-                placeholder="Date"
                 formControlName="olderDate"
                 autocomplete="off"
               />
@@ -26,7 +26,8 @@
               <mat-datepicker #olderDate></mat-datepicker>
             </mat-form-field>
             <mat-form-field class="flex-auto basis-3/5" *ngIf="lockOlder && olderRolling">
-              <input matInput placeholder="Days" formControlName="olderDays" autocomplete="off" />
+              <mat-label>Days</mat-label>
+              <input matInput formControlName="olderDays" autocomplete="off" />
             </mat-form-field>
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
@@ -83,10 +84,10 @@
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-form-field class="flex-auto basis-3/10 mr-5">
+              <mat-label>Valid From</mat-label>
               <input
                 matInput
                 [matDatepicker]="validFrom"
-                placeholder="Valid From"
                 formControlName="validFrom"
                 autocomplete="off"
               />
@@ -94,10 +95,10 @@
               <mat-datepicker #validFrom></mat-datepicker>
             </mat-form-field>
             <mat-form-field class="flex-auto basis-3/10 mr-5">
+              <mat-label>Valid Till</mat-label>
               <input
                 matInput
                 [matDatepicker]="validTill"
-                placeholder="Valid Till"
                 formControlName="validTill"
                 autocomplete="off"
               />
@@ -106,13 +107,7 @@
             </mat-form-field>
             <mat-form-field class="flex-auto basis-1/5 mr-5">
               <mat-label>Index</mat-label>
-              <input
-                type="text"
-                matInput
-                placeholder="Index"
-                formControlName="index"
-                autocomplete="off"
-              />
+              <input type="text" matInput formControlName="index" autocomplete="off" />
             </mat-form-field>
             <button
               mat-raised-button
@@ -190,16 +185,16 @@
     </mat-card>
   </mat-tab>
   <mat-tab label="Rebase Data">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form [formGroup]="rebaseDataForm" class="flex flex-col">
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-form-field class="flex-auto basis-4/5 mr-5">
+              <mat-label>Date</mat-label>
               <input
                 matInput
                 [matDatepicker]="rebaseDataDate"
                 (focus)="rebaseDataDate.open()"
-                placeholder="Date"
                 formControlName="date"
                 autocomplete="off"
               />
@@ -221,7 +216,7 @@
     </mat-card>
   </mat-tab>
   <mat-tab label="Maintenance Mode">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <mat-card-subtitle *ngIf="maintenance.enabled">
           Maintenance mode is <strong>ENABLED</strong> by user