Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/accounting/accounting-rules/accounting-rule.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rule data resolver.
  */
 @Injectable()
-export class AccountingRuleResolver implements Resolve<Object> {
+export class AccountingRuleResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/accounting-rules/accounting-rules-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rules template data resolver.
  */
 @Injectable()
-export class AccountingRulesTemplateResolver implements Resolve<Object> {
+export class AccountingRulesTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/accounting-rules/accounting-rules.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Add Rule' | translate }}
@@ -6,8 +6,8 @@
 </div>
 
 <div class="container">
-  <div fxLayout="row">
-    <mat-form-field fxFlex>
+  <div class="layout-row">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/accounting/accounting-rules/accounting-rules.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rules data resolver.
  */
 @Injectable()
-export class AccountingRulesResolver implements Resolve<Object> {
+export class AccountingRulesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/accounting-rules/create-rule/create-rule.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -25,9 +25,14 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
+            <mat-label class="flex-50"
+              >{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5percent radio-group-spacing"
+              formControlName="debitRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -35,7 +40,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -45,13 +50,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
+            class="flex-48 layout-row gap-2percent responsive-column"
             *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
@@ -60,16 +62,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                 {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
+            <mat-label class="flex-50"
+              >{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5-percent radio-group-spacing"
+              formControlName="creditRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -77,7 +84,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -87,13 +94,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
+            class="flex-48 layout-row gap-2percent responsive-column"
             *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
@@ -102,21 +106,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                 {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/accounting-rules/create-rule/create-rule.component.scss

@@ -12,3 +12,15 @@
     right: 0;
   }
 }
+
+.radio-group-spacing {
+  display: flex;
+  gap: 2rem;
+  flex-direction: row;
+}
+
+@media (width <= 768px) {
+  .radio-group-spacing {
+    flex-direction: column;
+  }
+}

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -25,9 +25,14 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
+            <mat-label class="flex-50"
+              >{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5percent radio-group-spacing"
+              formControlName="debitRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -35,7 +40,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -45,13 +50,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
+            class="flex-48 layout-row gap-2percent responsive-column"
             *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
@@ -60,16 +62,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50 entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                 {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
+            <mat-label class="flex-50"
+              >{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5-percent radio-group-spacing"
+              formControlName="creditRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -77,7 +84,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -87,13 +94,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
+            class="flex-48 layout-row gap-2percent responsive-column"
             *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
@@ -102,21 +106,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50 entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                 {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.scss

@@ -12,3 +12,15 @@
     right: 0;
   }
 }
+
+.radio-group-spacing {
+  display: flex;
+  gap: 2rem;
+  flex-direction: row;
+}
+
+@media (width <= 768px) {
+  .radio-group-spacing {
+    flex-direction: column;
+  }
+}

src/app/accounting/accounting-rules/view-rule/view-rule.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -14,40 +14,40 @@
   </button>
 </div>
 
-<div class="container" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <div fxFlex="48%">
+<div class="container layout-row gap-2-percent responsive-column">
+  <div class="flex-48">
     <mat-card>
       <mat-card-content>
-        <div fxLayout="row wrap" class="content">
-          <div fxFlex="50%" class="header">
+        <div class="layout-row-wrap">
+          <div class="flex-50 header">
             {{ 'labels.inputs.Office' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ accountingRule.officeName }}
           </div>
 
-          <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
+          <div class="flex-50 header" *ngIf="accountingRule.description">
             {{ 'labels.inputs.Description' | translate }}
           </div>
 
-          <div fxFlex="50%" *ngIf="accountingRule.description">
+          <div class="flex-50" *ngIf="accountingRule.description">
             {{ accountingRule.description }}
           </div>
 
-          <div fxFlex="50%" class="header">
+          <div class="flex-50 header">
             {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ accountingRule.allowMultipleDebitEntries }}
           </div>
 
-          <div fxFlex="50%" class="header">
+          <div class="flex-50 header">
             {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ accountingRule.allowMultipleCreditEntries }}
           </div>
         </div>
@@ -55,11 +55,11 @@
     </mat-card>
   </div>
 
-  <div fxFlex>
+  <div class="flex-fill">
     <mat-card>
       <mat-card-content>
-        <div fxLayout="row" class="content">
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
+        <div class="layout-row content">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.debitTags">
             <div class="header">
               {{ 'labels.inputs.Debit Tags' | translate }}
             </div>
@@ -68,7 +68,7 @@
             </div>
           </div>
 
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.debitAccounts">
             <div class="header">
               {{ 'labels.inputs.Debit Account Name' | translate }}
             </div>
@@ -77,7 +77,7 @@
             </div>
           </div>
 
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.creditTags">
             <div class="header">
               {{ 'labels.inputs.Credit Tags' | translate }}
             </div>
@@ -86,7 +86,7 @@
             </div>
           </div>
 
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.creditAccounts">
             <div class="header">
               {{ 'labels.inputs.Credit Account Name' | translate }}
             </div>

src/app/accounting/accounting.component.html

@@ -1,152 +1,315 @@
 <div class="container">
   <mat-card>
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-      <div fxFlex="50%">
+    <div class="layout-row responsive-column gap-20px">
+      <div class="flex-50">
         <mat-nav-list>
           <mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
-            <mat-icon matListIcon [routerLink]="['journal-entries/frequent-postings']">
-              <fa-icon icon="sync" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['journal-entries/frequent-postings']">
-              {{ 'labels.heading.Frequent Postings' | translate }}
-            </h4>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">
-              {{ 'labels.text.These are predefined postings' | translate }}
-            </p>
+            <div class="menu-list-item-content">
+              <div class="menu-left-section" [routerLink]="['journal-entries/frequent-postings']">
+                <mat-icon matListIcon>
+                  <fa-icon icon="sync" size="sm"></fa-icon>
+                </mat-icon>
+                <div matLine>
+                  {{ 'labels.heading.Frequent Postings' | translate }}
+                  <p
+                    matLine
+                    *ngIf="arrowBooleans[0]"
+                    [routerLink]="['journal-entries/frequent-postings']"
+                    class="menu-explanation"
+                  >
+                    {{ 'labels.text.These are predefined postings' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(0)"
+                  *ngIf="!arrowBooleans[0]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <div #createJournalEntries>
             <mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
-              <mat-icon matListIcon [routerLink]="['journal-entries/create']">
-                <fa-icon icon="plus" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine [routerLink]="['journal-entries/create']">
-                {{ 'labels.heading.Create Journal Entries' | translate }}
-              </h4>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">
-                {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
-              </p>
+              <div class="menu-list-item-content">
+                <div class="menu-left-section" [routerLink]="['journal-entries/create']">
+                  <mat-icon matListIcon>
+                    <fa-icon icon="plus" size="sm"></fa-icon>
+                  </mat-icon>
+                  <div matLine>
+                    {{ 'labels.heading.Create Journal Entries' | translate }}
+                    <p
+                      matLine
+                      *ngIf="arrowBooleans[1]"
+                      [routerLink]="['journal-entries/create']"
+                      class="menu-explanation"
+                    >
+                      {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(1)"
+                    *ngIf="!arrowBooleans[1]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(1)"
+                    *ngIf="arrowBooleans[1]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
-            <mat-icon matListIcon [routerLink]="['journal-entries']">
-              <fa-icon icon="search" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['journal-entries']">
-              {{ 'labels.heading.Search Journal Entries' | translate }}
-            </h4>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">
-              {{ 'labels.text.Advanced search option for journal entries' | translate }}
-            </p>
+            <div class="menu-list-item-content">
+              <div class="menu-left-section" [routerLink]="['journal-entries']">
+                <mat-icon matListIcon>
+                  <fa-icon icon="search" size="sm"></fa-icon>
+                </mat-icon>
+                <div matLine>
+                  {{ 'labels.heading.Search Journal Entries' | translate }}
+                  <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']" class="menu-explanation">
+                    {{ 'labels.text.Advanced search option for journal entries' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(2)"
+                  *ngIf="!arrowBooleans[2]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <div #accountsLinked>
             <mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'">
-              <mat-icon matListIcon [routerLink]="['financial-activity-mappings']">
-                <fa-icon icon="link" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine [routerLink]="['financial-activity-mappings']">
-                {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
-              </h4>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['financial-activity-mappings']">
-                {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
-              </p>
+              <div class="menu-list-item-content">
+                <div class="menu-left-section" [routerLink]="['financial-activity-mappings']">
+                  <mat-icon matListIcon>
+                    <fa-icon icon="link" size="sm"></fa-icon>
+                  </mat-icon>
+                  <div matLine>
+                    {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
+                    <p
+                      matLine
+                      *ngIf="arrowBooleans[3]"
+                      [routerLink]="['financial-activity-mappings']"
+                      class="menu-explanation"
+                    >
+                      {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(3)"
+                    *ngIf="!arrowBooleans[3]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(3)"
+                    *ngIf="arrowBooleans[3]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <div #migrateOpeningBalances>
             <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
-              <mat-icon matListIcon [routerLink]="['migrate-opening-balances']">
-                <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine [routerLink]="['migrate-opening-balances']">
-                {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
-              </h4>
-              <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['migrate-opening-balances']">
-                {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
-              </p>
+              <div class="menu-list-item-content">
+                <div class="menu-left-section" [routerLink]="['migrate-opening-balances']">
+                  <mat-icon matListIcon>
+                    <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
+                  </mat-icon>
+                  <div matLine>
+                    {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
+                    <p
+                      matLine
+                      *ngIf="arrowBooleans[4]"
+                      [routerLink]="['migrate-opening-balances']"
+                      class="menu-explanation"
+                    >
+                      {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(4)"
+                    *ngIf="!arrowBooleans[4]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(4)"
+                    *ngIf="arrowBooleans[4]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
         </mat-nav-list>
       </div>
 
-      <div fxFlex="50%">
+      <div class="flex-50">
         <mat-nav-list>
           <div #chartofAccounts>
             <mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'">
-              <mat-icon matListIcon [routerLink]="['chart-of-accounts']">
-                <fa-icon icon="sitemap" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine [routerLink]="['chart-of-accounts']">{{ 'labels.heading.Chart of Accounts' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">
-                {{ 'labels.text.List of accounts used by the organization' | translate }}
-              </p>
+              <div class="menu-list-item-content">
+                <div class="menu-left-section" [routerLink]="['chart-of-accounts']">
+                  <mat-icon matListIcon>
+                    <fa-icon icon="sitemap" size="sm"></fa-icon>
+                  </mat-icon>
+                  <div matLine>
+                    {{ 'labels.heading.Chart of Accounts' | translate }}
+                    <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']" class="menu-explanation">
+                      {{ 'labels.text.List of accounts used by the organization' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(5)"
+                    *ngIf="!arrowBooleans[5]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(5)"
+                    *ngIf="arrowBooleans[5]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <div #closingEntries>
             <mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'">
-              <mat-icon matListIcon [routerLink]="['closing-entries']">
-                <fa-icon icon="archive" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine [routerLink]="['closing-entries']">{{ 'labels.heading.Closing Entries' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']">
-                {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
-              </p>
+              <div class="menu-list-item-content">
+                <div class="menu-left-section" [routerLink]="['closing-entries']">
+                  <mat-icon matListIcon>
+                    <fa-icon icon="archive" size="sm"></fa-icon>
+                  </mat-icon>
+                  <div matLine>
+                    {{ 'labels.heading.Closing Entries' | translate }}
+                    <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']" class="menu-explanation">
+                      {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(6)"
+                    *ngIf="!arrowBooleans[6]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(6)"
+                    *ngIf="arrowBooleans[6]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <mat-list-item *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
-            <mat-icon matListIcon [routerLink]="['accounting-rules']">
-              <fa-icon icon="list" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['accounting-rules']">{{ 'labels.heading.Accounting Rules' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']">
-              {{ 'labels.text.List of all accounting rules' | translate }}
-            </p>
+            <div class="menu-list-item-content">
+              <div class="menu-left-section" [routerLink]="['accounting-rules']">
+                <mat-icon matListIcon>
+                  <fa-icon icon="list" size="sm"></fa-icon>
+                </mat-icon>
+                <div matLine>
+                  {{ 'labels.heading.Accounting Rules' | translate }}
+                  <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']" class="menu-explanation">
+                    {{ 'labels.text.List of all accounting rules' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(7)"
+                  *ngIf="!arrowBooleans[7]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
-            <mat-icon matListIcon [routerLink]="['periodic-accruals']">
-              <fa-icon icon="calendar" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['periodic-accruals']">{{ 'labels.heading.Accruals' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']">
-              {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
-            </p>
+            <div class="menu-list-item-content">
+              <div class="menu-left-section" [routerLink]="['periodic-accruals']">
+                <mat-icon matListIcon>
+                  <fa-icon icon="calendar" size="sm"></fa-icon>
+                </mat-icon>
+                <div matLine>
+                  {{ 'labels.heading.Accruals' | translate }}
+                  <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']" class="menu-explanation">
+                    {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(8)"
+                  *ngIf="!arrowBooleans[8]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
-            <mat-icon matListIcon [routerLink]="['provisioning-entries']">
-              <fa-icon icon="cogs" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['provisioning-entries']">
-              {{ 'labels.heading.Provisioning Entries' | translate }}
-            </h4>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']">
-              {{ 'labels.text.Create provisioning entries' | translate }}
-            </p>
+            <div class="menu-list-item-content">
+              <div class="menu-left-section" [routerLink]="['provisioning-entries']">
+                <mat-icon matListIcon>
+                  <fa-icon icon="cogs" size="sm"></fa-icon>
+                </mat-icon>
+                <div matLine>
+                  {{ 'labels.heading.Provisioning Entries' | translate }}
+                  <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']" class="menu-explanation">
+                    {{ 'labels.text.Create provisioning entries' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(9)"
+                  *ngIf="!arrowBooleans[9]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
         </mat-nav-list>
       </div>
@@ -157,7 +320,7 @@
 <ng-template #templateChartofAccounts let-popover="popover">
   <h2>{{ 'labels.heading.Chart of Accounts' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.The Chart of Accounts - General Ledger Setup' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -173,7 +336,7 @@
 <ng-template #templateAccountsLinked let-popover="popover">
   <h2>{{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}</h2>
   <p class="mw400">{{ 'labels.text.Accounts linked to Financial Activities' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -189,7 +352,7 @@
 <ng-template #templateMigrateOpeningBalances let-popover="popover">
   <h2>{{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}</h2>
   <p class="mw400">{{ 'labels.text.GLAccount Balances Application' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -205,7 +368,7 @@
 <ng-template #templateClosingEntries let-popover="popover">
   <h2>{{ 'labels.heading.Closing Entries' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Accounting to journal entries' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -221,7 +384,7 @@
 <ng-template #templateCreateJournalEntries let-popover="popover">
   <h2>{{ 'labels.heading.Create Journal Entries' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Journal Entries Transactions' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <div #buttonTreeView>
     <mat-button-toggle-group [formControl]="viewGroup">
       <mat-button-toggle value="listView">
@@ -25,8 +25,8 @@
 <!-- List View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'listView'">
-  <div #filter fxLayout="row" fxLayoutGap="20px">
-    <mat-form-field fxFlex>
+  <div #filter class="layout-row gap-20px">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
@@ -110,14 +110,14 @@
 <!-- Tree View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
-  <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
+  <div class="m-b-20 layout-row align-start gap-20px">
     <button mat-raised-button (click)="toggleExpandCollapse()">
       {{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
     </button>
   </div>
 
-  <div fxLayout="row" fxLayoutGap="4%" fxLayout.lt-md="column">
-    <div class="mat-elevation-z8" fxFlex>
+  <div class="layout-row gap-4percent responsive-column">
+    <div class="mat-elevation-z8 flex">
       <mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="gl-account-tree">
         <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
           <li class="mat-tree-node">
@@ -151,55 +151,55 @@
       </mat-tree>
     </div>
 
-    <div fxFlex="48%" *ngIf="glAccount">
+    <div class="flex-48" *ngIf="glAccount">
       <mat-card>
         <mat-card-content>
-          <div fxLayout="row wrap" class="content">
-            <div fxFlex="50%" class="header">
+          <div class="layout-row-wrap">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Account Name' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.name }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.glCode }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Account Type' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Account Usage' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.usage }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.manualEntriesAllowed }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Description' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.description }}
             </div>
           </div>
@@ -212,7 +212,7 @@
 <ng-template #templateButtonTreeView let-popover="popover">
   <h2>{{ 'labels.heading.Tree View' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Alternative way-Tree view' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -232,7 +232,7 @@
 <ng-template #templateButtonAddAccount let-popover="popover">
   <h2>{{ 'labels.heading.Add Account' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create New GL Account' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -255,7 +255,7 @@
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter GL accounts.' | translate }}</h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -280,7 +280,7 @@
   <h4 class="mw300">
     {{ 'labels.heading.List of chart of all the accounts being used by your organization.' | translate }}
   </h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/chart-of-accounts/chart-of-accounts.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Chart of acocunts data resolver.
  */
 @Injectable()
-export class ChartOfAccountsResolver implements Resolve<Object> {
+export class ChartOfAccountsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/chart-of-accounts/create-gl-account/chart-of-accounts-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../../accounting.service';
  * Chart of accounts template data resolver.
  */
 @Injectable()
-export class ChartOfAccountsTemplateResolver implements Resolve<Object> {
+export class ChartOfAccountsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
@@ -25,7 +25,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
@@ -38,7 +38,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
             <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
@@ -48,7 +48,7 @@
           </mat-form-field>
 
           <mifosx-gl-account-selector
-            fxFlex="48%"
+            class="flex-48"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -56,7 +56,7 @@
           >
           </mifosx-gl-account-selector>
 
-          <mat-form-field fxFlex="28%">
+          <mat-form-field class="flex-28">
             <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
@@ -65,20 +65,20 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="18%" class="manual-entries-allowed-wrapper">
+          <div class="manual-entries-allowed-wrapper flex-18">
             <mat-checkbox labelPosition="before" formControlName="manualEntriesAllowed" class="manual-entries-allowed">
               {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </mat-checkbox>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="[cancelRoute]">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -105,7 +105,7 @@
       >{{ 'labels.inputs.Chart of Accounts' | translate }}</a
     >
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="glAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
@@ -25,7 +25,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
@@ -38,7 +38,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
             <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
@@ -48,7 +48,7 @@
           </mat-form-field>
 
           <mifosx-gl-account-selector
-            fxFlex="48%"
+            class="flex-48"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -56,7 +56,7 @@
           >
           </mifosx-gl-account-selector>
 
-          <mat-form-field fxFlex="28%">
+          <mat-form-field class="flex-28">
             <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
@@ -65,7 +65,7 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="18%" class="manual-entries-allowed-wrapper">
+          <div class="manual-entries-allowed-wrapper flex-18">
             <mat-checkbox
               labelPosition="before"
               required
@@ -76,14 +76,14 @@
             </mat-checkbox>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/chart-of-accounts/gl-account-and-chart-of-accounts-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -13,7 +13,7 @@ import { AccountingService } from '../accounting.service';
  * GL Account and chart of accounts template data resolver.
  */
 @Injectable()
-export class GlAccountAndChartOfAccountsTemplateResolver implements Resolve<Object> {
+export class GlAccountAndChartOfAccountsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
     <button
       mat-raised-button
@@ -38,68 +38,68 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ 'labels.inputs.accounting.' + glAccount.type?.value | translate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.GL Code' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccount.glCode }}
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="glAccount.parent">
+        <div class="flex-50 header" *ngIf="glAccount.parent">
           {{ 'labels.inputs.Parent Account Name' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="glAccount.parent">
+        <div class="flex-50" *ngIf="glAccount.parent">
           <a class="tab-link" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]">
             <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
           </a>
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
+        <div class="flex-50 header" *ngIf="glAccount.tagId.id">
           {{ 'labels.inputs.Tag' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="glAccount.tagId.id">
+        <div class="flex-50" *ngIf="glAccount.tagId.id">
           {{ glAccount.tagId.name }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Usage' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccount.usage?.value }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Manual Entries Allowed' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccount.manualEntriesAllowed | yesNo }}
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="glAccount.description">
+        <div class="flex-50 header" *ngIf="glAccount.description">
           {{ 'labels.inputs.Description' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="glAccount.description">
+        <div class="flex-50" *ngIf="glAccount.description">
           {{ glAccount.description }}
         </div>
       </div>
     </mat-card-content>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
       <button type="button" color="primary" mat-raised-button (click)="goBack()">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/accounting/closing-entries/closing-entries.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
@@ -7,8 +7,8 @@
   </div>
 </div>
 
-<div #filter class="container" fxLayout="row">
-  <mat-form-field fxFlex>
+<div #filter class="container layout-row">
+  <mat-form-field class="flex-fill">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
@@ -60,7 +60,7 @@
 <ng-template #templateButtonCreateClosure let-popover="popover">
   <h2>{{ 'labels.heading.Create Closure' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create new closure' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -79,7 +79,7 @@
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter closures by office.' | translate }}</h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -107,7 +107,7 @@
       'labels.inputs.Closing Entries' | translate
     }}</a>
   </h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/closing-entries/closing-entries.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Closing entries data resolver.
  */
 @Injectable()
-export class ClosingEntriesResolver implements Resolve<Object> {
+export class ClosingEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/closing-entries/closing-entry.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../accounting.service';
  * Closing entry data resolver.
  */
 @Injectable()
-export class ClosingEntryResolver implements Resolve<Object> {
+export class ClosingEntryResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
@@ -41,7 +41,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
@@ -26,7 +26,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/closing-entries/view-closure/view-closure.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -12,60 +12,60 @@
 <div class="container" *ngIf="glAccountClosure">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Office' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.officeName }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Closure Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.closingDate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Closed By' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.createdByUsername }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Updated By' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.lastUpdatedByUsername }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Updated On' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.lastUpdatedDate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Closure Creation Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.createdDate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Comments' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.comments }}
         </div>
       </div>

src/app/accounting/common-resolvers/accounting-rules-associations.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rules associations data resolver.
  */
 @Injectable()
-export class AccountingRulesAssociationsResolver implements Resolve<Object> {
+export class AccountingRulesAssociationsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/currencies.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Currencies data resolver.
  */
 @Injectable()
-export class CurrenciesResolver implements Resolve<Object> {
+export class CurrenciesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/gl-accounts.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * GL accounts data resolver.
  */
 @Injectable()
-export class GlAccountsResolver implements Resolve<Object> {
+export class GlAccountsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/journal-entry-transaction.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../accounting.service';
  * Transaction data resolver.
  */
 @Injectable()
-export class JournalEntryTransactionResolver implements Resolve<Object> {
+export class JournalEntryTransactionResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/loan-products.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Loan products data resolver.
  */
 @Injectable()
-export class LoanProductsResolver implements Resolve<Object> {
+export class LoanProductsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/offices.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Offices data resolver.
  */
 @Injectable()
-export class OfficesResolver implements Resolve<Object> {
+export class OfficesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/payment-types.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Payment types data resolver.
  */
 @Injectable()
-export class PaymentTypesResolver implements Resolve<Object> {
+export class PaymentTypesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/provisioning-categories.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Provisioning categories data resolver.
  */
 @Injectable()
-export class ProvisioningCategoriesResolver implements Resolve<Object> {
+export class ProvisioningCategoriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="journalEntryForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div #createJournalFormRef class="layout-row-wrap responsive-column gap-2percent">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
@@ -30,15 +30,13 @@
           </mat-form-field>
 
           <div
-            fxFlexFill
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
+            class="flex-fill layout-row-wrap responsive-column"
             formArrayName="debits"
             *ngFor="let debit of debits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
               <mifosx-gl-account-selector
-                fxFlex="48%"
+                class="flex-48"
                 [inputFormControl]="debits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -46,7 +44,7 @@
               >
               </mifosx-gl-account-selector>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
@@ -55,7 +53,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -73,15 +71,13 @@
           </div>
 
           <div
-            fxFlexFill
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
+            class="flex-fill layout-row-wrap responsive-column"
             formArrayName="credits"
             *ngFor="let credit of credits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
               <mifosx-gl-account-selector
-                fxFlex="48%"
+                class="flex-48"
                 [inputFormControl]="credits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -89,7 +85,7 @@
               >
               </mifosx-gl-account-selector>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
@@ -98,7 +94,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -115,12 +111,12 @@
             </div>
           </div>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
             <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
               matInput
@@ -138,7 +134,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
@@ -147,39 +143,39 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
             <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
             <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
             <input matInput formControlName="routingCode" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
             <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
             <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -204,7 +200,7 @@
       'labels.inputs.Add Journal Entries' | translate
     }}</a>
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
@@ -27,7 +27,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/financial-activity-mappings-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../../accounting.service';
  * Financial activity mappings template data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingsTemplateResolver implements Resolve<Object> {
+export class FinancialActivityMappingsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
@@ -23,7 +23,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/financial-activity-mapping-and-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../../accounting.service';
  * Financial activity mapping and template data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingAndTemplateResolver implements Resolve<Object> {
+export class FinancialActivityMappingAndTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
+<div class="layout-row align-end container m-b-20">
   <div #buttonDefineMapping>
     <button
       mat-raised-button
@@ -51,7 +51,7 @@
 <ng-template #templateButtonDefineMapping let-popover="popover">
   <h2>{{ 'labels.heading.Define New Mapping' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.To define new mapping.' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -77,7 +77,7 @@
       >{{ 'labels.heading.Accounts linked to Financial Activities' | translate }}</a
     >
   </h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/financial-activity-mappings/financial-activity-mappings.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Financial activity mappings data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingsResolver implements Resolve<Object> {
+export class FinancialActivityMappingsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/financial-activity-mapping.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../../accounting.service';
  * Financial activity mapping data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingResolver implements Resolve<Object> {
+export class FinancialActivityMappingResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
+<div class="layout-row align-end gap-2percent container m-b-20">
   <button
     mat-raised-button
     color="primary"
@@ -22,23 +22,23 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Financial Activity' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           ({{ financialActivityAccount?.financialActivityData.id }})
           {{
             'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate
           }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{
             'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType
               | translate
@@ -46,7 +46,7 @@
         </div>
 
         <mifosx-gl-account-display
-          fxFlex="100%"
+          class="flex-100"
           [glAccount]="financialActivityAccount?.glAccountData"
           [accountTitle]="'Account Name'"
         >
@@ -54,7 +54,7 @@
       </div>
     </mat-card-content>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
       <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="frequentPostingsForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule' | translate }}</mat-label>
             <mat-select required formControlName="accountingRule">
               <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
@@ -29,7 +29,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
@@ -42,17 +42,15 @@
             </mat-error>
           </mat-form-field>
 
-          <span fxFlex="48%" fxHide.lt-md></span>
+          <span class="flex-48 hide-lt-md"></span>
 
           <div
-            fxFlexFill
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
+            class="flex-fill layout-row-wrap responsive-column"
             formArrayName="debits"
             *ngFor="let debit of debits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-              <mat-form-field fxFlex="48%">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+              <mat-form-field class="flex-48">
                 <mat-label>{{ 'labels.inputs.Affected GL Entry (Debit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
@@ -65,7 +63,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
@@ -74,7 +72,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -92,14 +90,12 @@
           </div>
 
           <div
-            fxFlexFill
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
+            class="flex-fill layout-row-wrap responsive-column"
             formArrayName="credits"
             *ngFor="let credit of credits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-              <mat-form-field fxFlex="48%">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+              <mat-form-field class="flex-48">
                 <mat-label>{{ 'labels.inputs.Affected GL Entry (Credit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option
@@ -115,7 +111,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
@@ -124,7 +120,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -141,12 +137,12 @@
             </div>
           </div>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
             <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
               matInput
@@ -164,7 +160,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
@@ -173,39 +169,39 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
             <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
             <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
             <input matInput formControlName="routingCode" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
             <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
             <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -3,9 +3,9 @@
   <mat-card>
     <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <div class="m-r-30" fxFlex="83%">
-            <mat-form-field fxFlex="96%">
+        <div #searchFormRef class="layout-row-wrap responsive-column gap-2px">
+          <div class="m-r-30 flex-83">
+            <mat-form-field class="flex-96">
               <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -19,23 +19,23 @@
             </mat-form-field>
           </div>
 
-          <div fxFlex="15%">
+          <div class="flex-15">
             <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">
               {{ 'labels.buttons.Retrieve' | translate }}
             </button>
           </div>
         </div>
 
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="openingBalancesData">
+        <div class="layout-row-wrap gap-2percent responsive-column" *ngIf="openingBalancesData">
           <mifosx-gl-account-display
-            fxFlex="100%"
+            class="flex-100"
             [accountTitle]="'Opening Balances Contra Account'"
             [glAccount]="openingBalancesData.contraAccount"
             [withTitle]="'50%'"
           >
           </mifosx-gl-account-display>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
@@ -48,7 +48,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="openingBalancesDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
             <input
               matInput
@@ -66,40 +66,38 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="content" fxFlex="100%">
-            <div class="header" fxFlex="8%">
+          <div class="layout-row-wrap gap-2percent responsive-column flex-100 content">
+            <div class="header flex-8">
               {{ 'labels.inputs.Type' | translate }}
             </div>
 
-            <div class="header" fxFlex="18%">
+            <div class="header flex-18">
               {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
-            <div class="header" fxFlex="18%">
+            <div class="header flex-18">
+              {{ 'labels.inputs.GL Name' | translate }}
               {{ 'labels.inputs.Account' | translate }}
             </div>
 
-            <div class="header r-amount" fxFlex="23%">
+            <div class="header r-amount flex-18">
               {{ 'labels.inputs.Total Debit' | translate }}:
               {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
 
-            <div class="header r-amount" fxFlex="23%">
+            <div class="header r-amount flex-23">
               {{ 'labels.inputs.Total Credit' | translate }}:
               {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
           </div>
 
           <div
-            fxFlexFill
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
-            class="content"
+            class="flex-fill layout-row-wrap responsive-column content"
             formArrayName="glAccountEntries"
             *ngFor="let credit of glAccountEntries.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-              <div fxFlex="8%">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+              <div class="flex-8">
                 {{
                   openingBalancesData.glAccounts[i].glAccountType.value !==
                   openingBalancesData.glAccounts[i - 1]?.glAccountType.value
@@ -108,22 +106,22 @@
                 }}
               </div>
 
-              <div fxFlex="13%">
+              <div class="flex-13">
                 {{ openingBalancesData.glAccounts[i].glAccountCode }}
               </div>
 
-              <div fxFlex="29%">
+              <div class="flex-29">
                 {{ openingBalancesData.glAccounts[i].glAccountName }}
               </div>
 
-              <div fxFlex="20%">
+              <div class="flex-20">
                 <mat-form-field>
                   <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
                   <input matInput type="number" formControlName="debit" />
                 </mat-form-field>
               </div>
 
-              <div fxFlex="20%">
+              <div class="flex-20">
                 <mat-form-field>
                   <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
                   <input matInput type="number" formControlName="credit" />
@@ -134,13 +132,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutAlign="center"
-        fxLayoutGap="5px"
-        *ngIf="openingBalancesData"
-      >
+      <mat-card-actions class="layout-row gap-5px align-center responsive-column" *ngIf="openingBalancesData">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -167,7 +159,7 @@
       >{{ 'labels.inputs.Migrate opening balances (Office-wise)' | translate }}</a
     >
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="periodicAccrualsForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row">
-          <mat-form-field fxFlex (click)="tillDatePicker.open()">
+        <div class="layout-row">
+          <mat-form-field class="flex-fill" (click)="tillDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Accrue Till Date' | translate }}</mat-label>
             <input
               matInput
@@ -23,7 +23,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="provisioningEntryForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
-          <mat-form-field fxFlex (click)="datePicker.open()">
+        <div class="layout-column">
+          <mat-form-field class="flex-fill" (click)="datePicker.open()">
             <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
             <input
               matInput
@@ -21,7 +21,7 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex>
+          <div class="flex-fill">
             <mat-checkbox labelPosition="before" formControlName="createjournalentries">
               {{ 'labels.inputs.Create Journal Entries' | translate }}
             </mat-checkbox>
@@ -29,7 +29,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/accounting/provisioning-entries/provisioning-entries.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <button
     mat-raised-button
     color="primary"
@@ -11,8 +11,8 @@
 </div>
 
 <div class="container">
-  <div fxLayout="row">
-    <mat-form-field fxFlex>
+  <div class="layout-row">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/accounting/provisioning-entries/provisioning-entries.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Provisioning entries data resolver.
  */
 @Injectable()
-export class ProvisioningEntriesResolver implements Resolve<Object> {
+export class ProvisioningEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry-entries.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../../accounting.service';
  * Provisioning entry entries data resolver.
  */
 @Injectable()
-export class ProvisioningEntryEntriesResolver implements Resolve<Object> {
+export class ProvisioningEntryEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../../accounting.service';
  * Provisioning entry data resolver.
  */
 @Injectable()
-export class ProvisioningEntryResolver implements Resolve<Object> {
+export class ProvisioningEntryResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -1,5 +1,5 @@
 <div class="container" *ngIf="provisioningEntry">
-  <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+  <div class="m-b-20 layout-row align-end gap-20px">
     <button
       mat-raised-button
       color="primary"
@@ -14,28 +14,27 @@
 
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
-        <div fxFlex="16%" class="header">
+      <div class="layout-row-wrap responsive-column content">
+        <div class="flex-16 header">
           {{ 'labels.inputs.Created By' | translate }}
         </div>
-
-        <div fxFlex="16%">
+        <div class="flex-16">
           {{ provisioningEntry.createdUser }}
         </div>
 
-        <div fxFlex="16%" class="header">
+        <div class="flex-16 header">
           {{ 'labels.inputs.Created On' | translate }}
         </div>
 
-        <div fxFlex="16%">
+        <div class="flex-16">
           {{ provisioningEntry.createdDate }}
         </div>
 
-        <div fxFlex="18%" class="header">
+        <div class="flex-18 header">
           {{ 'labels.inputs.Amount to be Reserved' | translate }}
         </div>
 
-        <div fxFlex="18%">
+        <div class="flex-18">
           {{ provisioningEntry.reservedAmount }}
         </div>
       </div>
@@ -44,18 +43,18 @@
 </div>
 
 <!-- Search -->
-<div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <mat-form-field fxFlex="31%">
+<div class="container m-t-20 layout-row-wrap responsive-column gap-2percent">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Loan Product' | translate }}</mat-label>
     <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Provisioning Category' | translate }}</mat-label>
     <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete" />
   </mat-form-field>

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/provisioning-journal-entries.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { AccountingService } from '../../accounting.service';
  * Provisioning journal entries data resolver.
  */
 @Injectable()
-export class ProvisioningJournalEntriesResolver implements Resolve<Object> {
+export class ProvisioningJournalEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div fxLayout="row" fxLayoutGap="20px">
-    <mat-form-field fxFlex>
+  <div class="layout-row gap-20px">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/accounting/revert-transaction/revert-transaction.component.html

@@ -2,7 +2,7 @@
   <h1 mat-dialog-title>{{ 'labels.heading.Revert Transaction' | translate }}</h1>
   <div mat-dialog-content>
     <p>{{ 'labels.text.Revert this transaction?' | translate }}</p>
-    <mat-form-field fxFlexFill>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
       <textarea matInput [formControl]="comments"></textarea>
     </mat-form-field>

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -1,11 +1,11 @@
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <mat-form-field fxFlex="31%">
+<div class="container layout-row-wrap gap-2px responsive-column">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
   <mifosx-gl-account-selector
-    fxFlex="31%"
+    class="flex-31"
     [inputFormControl]="glAccount"
     [glAccountList]="glAccountData"
     [required]="true"
@@ -13,7 +13,7 @@
   >
   </mifosx-gl-account-selector>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
     <mat-select [formControl]="entryTypeFilter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
       <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
@@ -22,7 +22,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
+  <mat-form-field class="flex-31" (click)="transactionDateFromPicker.open()">
     <mat-label>{{ 'labels.inputs.Transaction Date From' | translate }}</mat-label>
     <input
       matInput
@@ -35,7 +35,7 @@
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
+  <mat-form-field class="flex-31" (click)="transactionDateToPicker.open()">
     <mat-label>{{ 'labels.inputs.Transaction Date To' | translate }}</mat-label>
     <input
       matInput
@@ -48,12 +48,12 @@
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Transaction ID' | translate }}</mat-label>
     <input matInput [formControl]="transactionId" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="submittedOnDateFromPicker.open()">
+  <mat-form-field class="flex-31" (click)="submittedOnDateFromPicker.open()">
     <mat-label>{{ 'labels.inputs.Submitted on Date From' | translate }}</mat-label>
     <input
       matInput
@@ -65,7 +65,7 @@
     <mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="submittedOnDateToPicker.open()">
+  <mat-form-field class="flex-31" (click)="submittedOnDateToPicker.open()">
     <mat-label>{{ 'labels.inputs.Submitted on Date To' | translate }} </mat-label>
     <input
       matInput