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

overlord/src/app/payment/payment.component.html

@@ -16,10 +16,10 @@
     <form [formGroup]="form" 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-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -37,8 +37,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Payment Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="paymentAmount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -47,10 +47,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-[55%] mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="auto"
             formControlName="account"
@@ -73,14 +73,8 @@
         </mat-autocomplete>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Amount"
-            formControlName="amount"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="amount" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">
@@ -120,12 +114,7 @@
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
         <div