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

Chore: Upgraded some packages

overlord/src/app/account/account-detail/account-detail.component.html

@@ -1,5 +1,5 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
+<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
+  <mat-card class="flex-auto">
     <mat-card-title-group>
       <mat-card-title>Account</mat-card-title>
       <mat-icon
@@ -12,39 +12,21 @@
       </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>
+      <form [formGroup]="form" class="flex flex-col">
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Code</mat-label>
             <input matInput placeholder="Code" formControlName="code" />
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
             <input matInput #nameElement placeholder="Name" formControlName="name" />
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Account Type</mat-label>
             <mat-select placeholder="Account Type" formControlName="type">
               <mat-option *ngFor="let at of accountTypes" [value]="at.id">
@@ -53,24 +35,14 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-          <mat-checkbox formControlName="isReconcilable">Is Reconcilable?</mat-checkbox>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-checkbox formControlName="isActive" class="flex-auto mr-5">Is Active?</mat-checkbox>
+          <mat-checkbox formControlName="isReconcilable" class="flex-auto"
+            >Is Reconcilable?</mat-checkbox
+          >
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Cost Centre</mat-label>
             <mat-select placeholder="Cost Centre" formControlName="costCentre">
               <mat-option *ngFor="let cs of costCentres" [value]="cs.id">

overlord/src/app/account/account-list/account-list.component.html

@@ -7,15 +7,9 @@
     </a>
   </mat-card-title-group>
   <mat-card-content>
-    <form [formGroup]="form" fxLayout="column">
-      <div
-        fxLayout="row"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
-        fxLayoutAlign="space-around start"
-      >
-        <mat-form-field fxFlex>
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
           <input
             type="text"
             matInput

overlord/src/app/account/account.module.ts

@@ -1,7 +1,6 @@
 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 { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -23,7 +22,6 @@ import { AccountRoutingModule } from './account-routing.module';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatTableModule,
     MatPaginatorModule,
     MatSortModule,