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

overlord/src/app/purchase/purchase.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
@@ -29,10 +29,10 @@
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="autoA"
             formControlName="account"
@@ -55,8 +55,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="amount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -65,10 +65,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-1/2 mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #productElement
             [matAutocomplete]="autoP"
             formControlName="product"
@@ -87,37 +87,19 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Quantity</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Quantity"
-            formControlName="quantity"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="quantity" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Price</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Price"
-            formControlName="price"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="price" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Tax</mat-label>
-          <input type="text" matInput placeholder="Tax" formControlName="tax" autocomplete="off" />
+          <input type="text" matInput formControlName="tax" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Discount</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Discount"
-            formControlName="discount"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="discount" autocomplete="off" />
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">
@@ -185,12 +167,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 mr-5">
         <div