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

Chore: Upgraded some packages

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

@@ -1,14 +1,8 @@
 <h1 mat-dialog-title>Edit Purchase 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="52">
+    <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <mat-form-field class="flex-auto basis-[52%] mr-5">
         <input
           type="text"
           matInput
@@ -29,7 +23,7 @@
           }}</mat-option>
         </mat-autocomplete>
       </mat-form-field>
-      <mat-form-field fxFlex="12">
+      <mat-form-field class="flex-auto basis-[12%] mr-5">
         <mat-label>Quantity</mat-label>
         <input
           type="text"
@@ -39,7 +33,7 @@
           autocomplete="off"
         />
       </mat-form-field>
-      <mat-form-field fxFlex="12">
+      <mat-form-field class="flex-auto basis-[12%] mr-5">
         <mat-label>Price</mat-label>
         <input
           type="text"
@@ -49,11 +43,11 @@
           autocomplete="off"
         />
       </mat-form-field>
-      <mat-form-field fxFlex="12">
+      <mat-form-field class="flex-auto basis-[12%] mr-5">
         <mat-label>Tax</mat-label>
         <input type="text" matInput placeholder="Tax" formControlName="tax" autocomplete="off" />
       </mat-form-field>
-      <mat-form-field fxFlex="12">
+      <mat-form-field class="flex-auto basis-[12%]">
         <mat-label>Discount</mat-label>
         <input
           type="text"

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

overlord/src/app/purchase/purchase.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,