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

Chore: Upgraded some packages

overlord/src/app/issue/issue.component.html

@@ -3,15 +3,9 @@
     <mat-card-title>Issue</mat-card-title>
   </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-[28%] mr-5">
           <input
             matInput
             [matDatepicker]="date"
@@ -24,21 +18,21 @@
           <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-[28%] mr-5">
           <mat-select formControlName="source">
             <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
               {{ costCentre.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex="40">
+        <mat-form-field class="flex-auto basis-[28%] mr-5">
           <mat-select formControlName="destination">
             <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
               {{ costCentre.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex="20">
+        <mat-form-field class="flex-auto basis-[16%]">
           <mat-label>Amount</mat-label>
           <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="amount" />
@@ -47,13 +41,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="55">
+        <mat-form-field class="flex-auto basis-[55%] mr-5">
           <input
             type="text"
             matInput
@@ -74,7 +64,7 @@
             }}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
-        <mat-form-field fxFlex="25">
+        <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Quantity</mat-label>
           <input
             type="text"
@@ -85,7 +75,14 @@
           />
         </mat-form-field>
 
-        <button mat-raised-button color="primary" (click)="addRow()" fxFlex="20">Add</button>
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="addRow()"
+          class="flex-auto basis-2/5 mr-5"
+        >
+          Add
+        </button>
       </div>
       <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
         <!-- Product Column -->