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

Chore: Upgraded some packages

overlord/src/app/employee-attendance/employee-attendance.component.html

@@ -3,15 +3,9 @@
     <mat-card-title>Employee Attendance</mat-card-title>
   </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 sm:max-lg:flex-col">
+        <mat-form-field class="flex-auto mr-5">
           <input
             matInput
             [matDatepicker]="startDate"
@@ -23,7 +17,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-auto">
           <input
             matInput
             [matDatepicker]="finishDate"
@@ -36,14 +30,8 @@
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
       </div>
-      <div
-        fxLayout="row"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
-        fxLayoutAlign="space-around start"
-      >
-        <mat-form-field fxFlex="80">
+      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+        <mat-form-field class="flex-auto basis-4/5 mr-5">
           <input
             type="text"
             matInput
@@ -64,7 +52,9 @@
             }}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
-        <button fxFlex="20" mat-raised-button color="primary" (click)="show()">Show</button>
+        <button class="flex-auto basis-1/5" mat-raised-button color="primary" (click)="show()">
+          Show
+        </button>
       </div>
       <mat-table #table [dataSource]="dataSource" formArrayName="attendances">
         <!-- Date Column -->
@@ -76,7 +66,7 @@
         <!-- Status Column -->
         <ng-container matColumnDef="status">
           <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" fxFlex>
+          <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex flex-auto">
             <mat-select formControlName="attendanceType" name="attendanceType">
               <mat-option *ngFor="let at of attendanceTypes" [value]="at.id">
                 {{ at.name }}

overlord/src/app/employee-attendance/employee-attendance.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';
@@ -49,7 +48,6 @@ export const MY_FORMATS = {
     A11yModule,
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatAutocompleteModule,
     MatButtonModule,
     MatCardModule,