Chore: Removed @angular/flex-layout and replaced it with tailwind.

Chore: Upgraded some packages

overlord/src/app/purchase/purchase.component.html

@@ -11,15 +11,9 @@
     </mat-icon>
   </mat-card-title-group>
   <mat-card-content>
-    <form [formGroup]="form" fxLayout="column">
-      <div
-        fxLayout="row"
-        fxLayoutAlign="space-around start"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
-      >
-        <mat-form-field fxFlex="40">
+    <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">
           <input
             matInput
             [matDatepicker]="date"
@@ -32,7 +26,7 @@
           <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
-        <mat-form-field fxFlex="40">
+        <mat-form-field class="flex-auto basis-2/5 mr-5">
           <input
             type="text"
             matInput
@@ -57,7 +51,7 @@
             }}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
-        <mat-form-field fxFlex="20">
+        <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Amount</mat-label>
           <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="amount" />
@@ -66,13 +60,9 @@
 
       <div
         formGroupName="addRow"
-        fxLayout="row"
-        fxLayoutAlign="space-around start"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
+        class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
-        <mat-form-field fxFlex="50">
+        <mat-form-field class="flex-auto basis-1/2 mr-5">
           <input
             type="text"
             matInput
@@ -93,7 +83,7 @@
             }}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Quantity</mat-label>
           <input
             type="text"
@@ -103,7 +93,7 @@
             autocomplete="off"
           />
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Price</mat-label>
           <input
             type="text"
@@ -113,11 +103,11 @@
             autocomplete="off"
           />
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <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" />
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Discount</mat-label>
           <input
             type="text"
@@ -128,7 +118,9 @@
           />
         </mat-form-field>
 
-        <button mat-raised-button color="primary" (click)="addRow()" fxFlex="10">Add</button>
+        <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">
+          Add
+        </button>
       </div>
       <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
         <!-- Product Column -->
@@ -198,14 +190,18 @@
           formControlName="narration"
         ></textarea>
       </mat-form-field>
-      <div fxLayout="row" fxLayoutGap="0.5%" fxLayoutAlign="center">
-        <div class="img-container" fxFlex="20%" *ngFor="let item of voucher.files">
+      <div class="flex flex-row justify-center items-stretch mr-5">
+        <div
+          class="img-container"
+          class="flex-auto mr-5 basis-1/5"
+          *ngFor="let item of voucher.files"
+        >
           <img [src]="item.thumbnail" (click)="zoomImage(item)" />
           <button mat-icon-button class="overlay" (click)="deleteImage(item)">
             <mat-icon>delete</mat-icon>
           </button>
         </div>
-        <div class="img-container" fxFlex="20%">
+        <div class="img-container" class="flex flex-auto basis-1/5">
           <label ng-href for="fileUp">
             <img
               src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="