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

Chore: Upgraded some packages

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

@@ -1,15 +1,8 @@
 <h1 mat-dialog-title>Edit Receipt Entry</h1>
 <div mat-dialog-content>
   <form [formGroup]="form">
-    <div
-      fxLayout="row"
-      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
@@ -34,7 +27,7 @@
           account.name
         }}</mat-option>
       </mat-autocomplete>
-      <mat-form-field fxFlex="35">
+      <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Amount</mat-label>
         <span matPrefix>₹ </span>
         <input

overlord/src/app/receipt/receipt.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,14 +26,14 @@
           <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">
           <mat-select formControlName="receiptAccount">
             <mat-option *ngFor="let account of receiptAccounts" [value]="account.id">
               {{ account.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex="20">
+        <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Receipt Amount</mat-label>
           <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="receiptAmount" />
@@ -48,13 +42,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
@@ -79,7 +69,7 @@
             account.name
           }}</mat-option>
         </mat-autocomplete>
-        <mat-form-field fxFlex="25">
+        <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Amount</mat-label>
           <span matPrefix>₹ </span>
           <input
@@ -91,7 +81,9 @@
           />
         </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-1/5">
+          Add
+        </button>
       </div>
       <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
         <!-- Account Column -->
@@ -124,7 +116,7 @@
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>
-      <mat-form-field>
+      <mat-form-field class="flex-auto">
         <mat-label>Narration</mat-label>
         <textarea
           matInput
@@ -133,14 +125,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">
+        <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/receipt/receipt.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,