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

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

@@ -15,10 +15,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/5 mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #productElement
             [matAutocomplete]="autoP"
             formControlName="product"
@@ -37,45 +37,21 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Yield</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Yield"
-            formControlName="recipeYield"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="recipeYield" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Sale Price</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Sale Price"
-            formControlName="salePrice"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="salePrice" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Cost Price</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Cost Price"
-            formControlName="costPrice"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="costPrice" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10">
           <mat-label>Cost Percentage</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Cost Percentage"
-            formControlName="costPercentage"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="costPercentage" autocomplete="off" />
           <span matSuffix>%</span>
         </mat-form-field>
       </div>
@@ -84,10 +60,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>Ingredient</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Ingredient"
             #ingredientElement
             [matAutocomplete]="autoI"
             formControlName="ingredient"
@@ -106,24 +82,12 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 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/5 mr-5">
           <mat-label>Rate</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Rate"
-            formControlName="rate"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="rate" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">