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

Chore: Upgraded some packages

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

@@ -1,14 +1,8 @@
 <h1 mat-dialog-title>Edit Issue Entry</h1>
 <div mat-dialog-content>
   <form [formGroup]="form">
-    <div
-      fxLayout="row"
-      fxLayoutAlign="space-around start"
-      fxLayout.lt-md="column"
-      fxLayoutGap="20px"
-      fxLayoutGap.lt-md="0px"
-    >
-      <mat-form-field fxFlex="65">
+    <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <mat-form-field class="flex-auto basis-2/3 mr-5">
         <input
           type="text"
           matInput
@@ -29,7 +23,7 @@
           }}</mat-option>
         </mat-autocomplete>
       </mat-form-field>
-      <mat-form-field fxFlex="35">
+      <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Quantity</mat-label>
         <input
           type="text"

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 -->

overlord/src/app/issue/issue.module.ts

@@ -2,7 +2,6 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -50,7 +49,6 @@ export const MY_FORMATS = {
     A11yModule,
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     HotkeyModule,
     MatAutocompleteModule,
     MatButtonModule,