Upgrade to Angular 16

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

src/app/savings/common-resolvers/saving-documents.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { SavingsService } from '../savings.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class SavingDocumentsResolver implements Resolve<boolean> {
+export class SavingDocumentsResolver {
   /**
    * @param {SavingsService} savingsService Savings service.
    */

src/app/savings/common-resolvers/saving-notes.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { SavingsService } from '../savings.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class SavingNotesResolver implements Resolve<boolean> {
+export class SavingNotesResolver {
   /**
    * @param {SavingsService} savingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-actions.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, forkJoin } from 'rxjs';
@@ -12,7 +12,7 @@ import { SavingsService } from '../savings.service';
  * Savings Account Actions data resolver.
  */
 @Injectable()
-export class SavingsAccountActionsResolver implements Resolve<Object> {
+export class SavingsAccountActionsResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-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 { SavingsService } from '../savings.service';
  * Savings Account data and template resolver.
  */
 @Injectable()
-export class SavingsAccountAndTemplateResolver implements Resolve<Object> {
+export class SavingsAccountAndTemplateResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-charge.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 { SavingsService } from '../savings.service';
  * Savings Account Charge data resolver.
  */
 @Injectable()
-export class SavingsAccountChargeResolver implements Resolve<Object> {
+export class SavingsAccountChargeResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-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 { SavingsService } from '../savings.service';
  * Savings Account Template resolver.
  */
 @Injectable()
-export class SavingsAccountTemplateResolver implements Resolve<Object> {
+export class SavingsAccountTemplateResolver {
   /**
    * @param {savingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-transaction-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 { SavingsService } from '../savings.service';
  * Savings Account Transaction Template data resolver.
  */
 @Injectable()
-export class SavingsAccountTransactionTemplateResolver implements Resolve<Object> {
+export class SavingsAccountTransactionTemplateResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-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 { SavingsService } from '../savings.service';
  * Savings Account Transaction data resolver.
  */
 @Injectable()
-export class SavingsAccountTransactionResolver implements Resolve<Object> {
+export class SavingsAccountTransactionResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-account-view.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 { SavingsService } from '../savings.service';
  * Savings Account data resolver.
  */
 @Injectable()
-export class SavingsAccountViewResolver implements Resolve<Object> {
+export class SavingsAccountViewResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-datatable.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 { SavingsService } from '../savings.service';
  * Savings Datatable data resolver.
  */
 @Injectable()
-export class SavingsDatatableResolver implements Resolve<Object> {
+export class SavingsDatatableResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-datatables.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 { SavingsService } from '../savings.service';
  * Saving Accounts Datatables data resolver.
  */
 @Injectable()
-export class SavingsDatatablesResolver implements Resolve<Object> {
+export class SavingsDatatablesResolver {
   /**
    * @param {SavingsService} SavingsService Savings service.
    */

src/app/savings/common-resolvers/savings-transaction-reciept.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 { SettingsService } from 'app/settings/settings.service';
  * Savings Transaction Reciept resolver.
  */
 @Injectable()
-export class SavingsTransactionRecieptResolver implements Resolve<Object> {
+export class SavingsTransactionRecieptResolver {
   /**
    * @param {ReportsService} reportsService Reports service.
    * @param {SettingsService} settingsService Settings Service.

src/app/savings/common-resolvers/transaction-datatable.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';
@@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
 import { SavingsService } from '../savings.service';
 
 @Injectable()
-export class TransactionDatatableResolver implements Resolve<Object> {
+export class TransactionDatatableResolver {
   /**
    *
    * @param {SavingsService} savingsService

src/app/savings/common-resolvers/transaction-datatables.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';
@@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
 import { SavingsService } from '../savings.service';
 
 @Injectable()
-export class TransactionDatatablesResolver implements Resolve<Object> {
+export class TransactionDatatablesResolver {
   /**
    *
    * @param savingsService Savings Service

src/app/savings/gsim-account/gsim-account.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 { SavingsService } from '../savings.service';
  * GSIM Account data resolver.
  */
 @Injectable()
-export class GSIMViewResolver implements Resolve<Object> {
+export class GSIMViewResolver {
   /**
    * @param {SavingsService} savingsService Savings service.
    */

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -2,26 +2,28 @@
   <mat-card>
     <form [formGroup]="activateSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="activatedOnDatePicker"
-            required
-            formControlName="activatedOnDate"
-          />
-          <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+        <div class="layout-column">
+          <mat-form-field class="flex-fill" (click)="activatedOnDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="activatedOnDatePicker"
+              required
+              formControlName="activatedOnDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #activatedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
+              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </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]="['../../transactions']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="savingsChargeForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <div *ngIf="chargeDetails" fxLayout="column">
+          <div *ngIf="chargeDetails" class="layout-column">
             <mat-form-field>
               <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
@@ -90,7 +90,7 @@
           </div>
         </div>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
           <button type="button" mat-raised-button [routerLink]="['../../transactions']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="applyAnnualFeesForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="dueDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Annual Fees Transaction Date' | translate }}</mat-label>
             <input
@@ -32,7 +32,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/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="approveSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="approvedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,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/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
             <input
@@ -29,7 +29,7 @@
             {{ 'labels.inputs.Is Interest Posting required on closure date' | translate }}?
           </mat-checkbox>
 
-          <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" fxLayout="column">
+          <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" class="layout-column">
             <mat-form-field class="m-t-20" *ngIf="closeSavingsAccountForm.controls['amount']">
               <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
@@ -44,8 +44,8 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlexFill>
-              <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+            <div class="flex-fill">
+              <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
                 <mat-slide-toggle>
                   <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                     <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -87,7 +87,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/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html

@@ -4,7 +4,7 @@
     <h2 mat-title *ngIf="transactionType.blockaccount">{{ 'labels.heading.Block Savings Account' | translate }}</h2>
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
+      <mat-card-content class="layout-column">
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
           <mat-select required formControlName="reasonForBlock">
@@ -18,7 +18,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field fxFlex (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
+        <mat-form-field class="flex-fill" (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
             matInput
@@ -46,7 +46,7 @@
         </mifosx-input-amount>
       </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]="['../../transactions']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="postInterestSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="transactionDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="transactionDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </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/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rejectSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rejectedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,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/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="savingsAssignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Savings Officer' | translate }}</mat-label>
             <mat-select formControlName="toSavingsOfficerId">
               <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
@@ -32,7 +32,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/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -1,97 +1,99 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal">
+    <h2 mat-title *ngIf="transactionType.withdrawal" class="m-l-10">
       {{ 'labels.heading.Withdraw Money From Saving Account' | translate }}
     </h2>
-    <h2 mat-title *ngIf="transactionType.deposit">
+    <h2 mat-title *ngIf="transactionType.deposit" class="m-l-10">
       {{ 'labels.heading.Deposit Money To Saving Account' | translate }}
     </h2>
 
     <form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
-        <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate"
-            required
-          />
-          <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #dueDatePicker></mat-datepicker>
-          <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+      <mat-card-content>
+        <div class="layout-column">
+          <mat-form-field (click)="dueDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="dueDatePicker"
+              formControlName="transactionDate"
+              required
+            />
+            <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #dueDatePicker></mat-datepicker>
+            <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mifosx-input-amount
-          [currency]="currency"
-          [isRequired]="true"
-          [inputFormControl]="savingAccountTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'"
-        >
-        </mifosx-input-amount>
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
+            [inputFormControl]="savingAccountTransactionForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'"
+          >
+          </mifosx-input-amount>
 
-        <mat-form-field>
-          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
-          <mat-select required formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
+            <mat-select required formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
-            <mat-slide-toggle>
-              <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
-              </div>
-            </mat-slide-toggle>
-          </span>
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
+              <mat-slide-toggle>
+                <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
+                </div>
+              </mat-slide-toggle>
+            </span>
+          </div>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+            <input type="number" formControlName="accountNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+            <input type="number" formControlName="checkNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input formControlName="routingCode" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input formControlName="receiptNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+            <input formControlName="bankNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
+            <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          </mat-form-field>
+
+          <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
+            <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+              {{ 'labels.buttons.Cancel' | translate }}
+            </button>
+            <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">
+              {{ 'labels.buttons.Submit' | translate }}
+            </button>
+          </mat-card-actions>
         </div>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-          <input type="number" formControlName="accountNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
-          <input type="number" formControlName="checkNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-          <input formControlName="routingCode" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-          <input formControlName="receiptNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-          <input formControlName="bankNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field>
-          <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
-          <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-        </mat-form-field>
-
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../transactions']">
-            {{ 'labels.buttons.Cancel' | translate }}
-          </button>
-          <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">
-            {{ 'labels.buttons.Submit' | translate }}
-          </button>
-        </mat-card-actions>
       </mat-card-content>
     </form>
   </mat-card>

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="savingsUnassignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="unassignedDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="unassignedDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Unassignment Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </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/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html

@@ -2,13 +2,13 @@
   <mat-card>
     <form [formGroup]="undoApprovalSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
       </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/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="withdrawSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Withdrawn On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,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/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

@@ -1,5 +1,5 @@
-<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.Charge' | translate }}</mat-label>
     <mat-select #charge>
       <mat-option
@@ -11,7 +11,7 @@
     </mat-select>
   </mat-form-field>
 
-  <div fxFlex="48%" fxFlexAlign="center">
+  <div class="flex-48 align-center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Add' | translate }}
@@ -19,8 +19,7 @@
   </div>
 
   <table
-    fxFlex="98%"
-    class="mat-elevation-z1"
+    class="flex-98 mat-elevation-z1"
     mat-table
     [dataSource]="chargesDataSource"
     *ngIf="chargesDataSource.length > 0"
@@ -124,7 +123,7 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="flex-98 layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="savingsAccountDetailsForm">
-  <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.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
@@ -13,7 +13,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
+    <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
       <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
       <input
         matInput
@@ -31,7 +31,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
+    <mat-form-field class="flex-48" *ngIf="savingsProductSelected">
       <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
@@ -40,13 +40,13 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
+    <mat-form-field class="flex-48" *ngIf="savingsProductSelected">
       <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
       <input matInput formControlName="externalId" />
     </mat-form-field>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -1,41 +1,40 @@
-<div fxLayout="row wrap" fxLayout.lt-md="column">
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
+<div class="responsive-column">
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
-    <span fxFlex="60%">{{
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
+    <span class="flex-60">{{
       savingsAccount.productId | find: savingsAccountTemplate.productOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
-    <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
+    <span class="flex-60">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
-    <span fxFlex="60%" *ngIf="savingsAccount.externalId">
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
+    <span class="flex-60" *ngIf="savingsAccount.externalId">
       <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
     </span>
-    <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
+    <span class="flex-60" *ngIf="!savingsAccount.externalId">
       {{ 'labels.inputs.Unassigned' | translate }}
     </span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
+    <span class="flex-60">{{
       savingsAccount.fieldOfficerId | find: savingsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
     }}</span>
   </div>
 
   <ng-container *ngIf="activeClientMembers">
-    <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Client Members' | translate }}</h3>
-    <mat-divider fxFlexFill></mat-divider>
-    <div fxFlex="60%">
+    <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Client Members' | translate }}</h3>
+    <mat-divider class="flex-fill"></mat-divider>
+    <div class="flex-60">
       <table mat-table #membersTable [dataSource]="dataSource">
         <!-- ID Column -->
         <ng-container matColumnDef="id">
@@ -55,28 +54,27 @@
     </div>
   </ng-container>
 
-  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
+    <span class="flex-60">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+    <span class="flex-60">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestCompoundingPeriodType
           | find: savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
@@ -84,9 +82,9 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestPostingPeriodType
           | find: savingsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
@@ -94,9 +92,9 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestCalculationType
           | find: savingsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
@@ -104,9 +102,9 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestCalculationDaysInYearType
           | find: savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
@@ -114,19 +112,19 @@
     }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.minRequiredOpeningBalance">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.lockinPeriodFrequency">
+    <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.lockinPeriodFrequency +
           ' ' +
@@ -136,42 +134,41 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.minOverdraftForInterestCalculation">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
+    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
-    <span fxFlex="40%">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.overdraftLimit">
+    <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.minRequiredBalance">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.minRequiredBalance }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Charges' | translate }}</h3>
+  <div *ngIf="savingsAccount.charges.length" class="layout-row-wrap responsive-column flex-fill">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
 
-    <mat-divider fxFlexFill></mat-divider>
-
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
+    <mat-divider class="flex-fill"></mat-divider>
+    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -239,7 +236,7 @@
   </div>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html

@@ -1,16 +1,16 @@
 <form [formGroup]="savingsAccountTermsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
       <input matInput formControlName="currencyCode" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
       <input type="number" matInput formControlName="decimal" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Nominal Annual Interest' | translate }}</mat-label>
       <input type="number" matInput formControlName="nominalAnnualInterestRate" required />
       <mat-error>
@@ -19,7 +19,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
         <mat-option
@@ -35,7 +35,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
         <mat-option
@@ -51,7 +51,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
         <mat-option
@@ -67,7 +67,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
         <mat-option
@@ -83,23 +83,23 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
       <input type="number" matInput formControlName="minRequiredOpeningBalance" />
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
+    <mat-checkbox labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v flex-48">
       {{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
+    <h4 class="mat-h4 flex-98">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
       <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option
@@ -111,55 +111,52 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Overdraft' | translate }}</h3>
+    <h3 class="mat-h3 flex-23">{{ 'labels.inputs.Overdraft' | translate }}</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
+    <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="allowOverdraft">
       {{ 'labels.inputs.Is Overdraft Allowed' | translate }}
     </mat-checkbox>
 
     <div
       *ngIf="savingsAccountTermsForm.value.allowOverdraft"
-      fxFlexFill
-      fxLayout="row wrap"
-      fxLayoutGap="2%"
-      fxLayout.lt-md="column"
+      class="flex-fill layout-row-wrap gap-2percent responsive-column"
     >
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
         <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
         <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
         <input type="number" matInput formControlName="overdraftLimit" />
       </mat-form-field>
     </div>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
+    <mat-checkbox labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v flex-48">
       {{ 'labels.inputs.Enforce Minimum Balance' | translate }}
     </mat-checkbox>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Minimum Balance' | translate }}</mat-label>
       <input type="number" matInput formControlName="minRequiredBalance" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
+    <mat-form-field class="flex-48" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
       <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
       <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
     </mat-form-field>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="activeClientMembers">
-  <table fxFlex="98%" mat-table [dataSource]="dataSource">
+  <table class="flex-98" mat-table [dataSource]="dataSource">
     <!-- Check Column -->
 
     <ng-container matColumnDef="check">
@@ -28,7 +28,7 @@
   </table>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <div fxLayout="row" fxLayoutAlign="start">
+  <div class="layout-row align-start">
     <div class="m-b-10">
       <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
     </div>

src/app/savings/savings-account-view/general-tab/general-tab.component.html

@@ -2,8 +2,8 @@
   <div class="loading"></div>
 </div>
 
-<div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%" *ngIf="!isLoading">
-  <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
+<div class="savings-account-tables layout-row gap-2percent" *ngIf="!isLoading">
+  <div class="flex-49 layout-column gap-4percent">
     <div
       *ngIf="
         !savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval;
@@ -92,7 +92,7 @@
     </div>
   </div>
 
-  <div fxFlex="49%" *ngIf="isActive; else alternateSummary">
+  <div class="flex-49" *ngIf="isActive; else alternateSummary">
     <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
     <table>
       <tbody>
@@ -247,7 +247,7 @@
   </div>
 
   <ng-template #alternateSummary>
-    <div fxFlex="49%">
+    <div class="flex-49">
       <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
       <table>
         <tbody>

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="account-card">
-  <mat-card-header fxLayout="column" class="header">
+  <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
@@ -13,8 +13,8 @@
       </div>
 
       <div class="mat-typography account-card-title">
-        <mat-card-title fxLayout="row" fxLayout.lt-md="column">
-          <div fxFlex="60%">
+        <mat-card-title class="layout-row layout-lt-md-column">
+          <div class="flex-60">
             <h3>
               <i
                 class="fa fa-stop"
@@ -46,7 +46,10 @@
             </span>
           </div>
 
-          <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
+          <div
+            class="flex-30"
+            *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval"
+          >
             <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
             <table class="account-overview">
               <tbody>
@@ -70,9 +73,7 @@
             </table>
           </div>
 
-          <span fxFlex="auto"></span>
-
-          <div fxFlex="5%">
+          <div class="flex-5">
             <button
               mat-icon-button
               [matMenuTriggerFor]="accountMenu"
@@ -112,7 +113,7 @@
   </mat-card-header>
 
   <mat-card-content class="content">
-    <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
+    <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive" [tabPanel]="tabPanel">
       <a
         mat-tab-link
         [routerLink]="['./general']"
@@ -185,6 +186,8 @@
       </ng-container>
     </nav>
 
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>

src/app/savings/savings-account-view/savings-account-view.component.scss

@@ -0,0 +1,3 @@
+mat-card-title {
+  display: flex;
+}

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html

@@ -1,6 +1,6 @@
-<form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
-  <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-    <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
+<form class="m-t-20 layout-column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
+  <div class="layout-row layout-align-center gap-3percent">
+    <mat-form-field class="flex-30" (click)="fromDatePicker.open()">
       <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
       <input
         matInput
@@ -18,7 +18,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
+    <mat-form-field class="flex-30" (click)="toDatePicker.open()">
       <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
       <input
         matInput
@@ -37,7 +37,7 @@
     </mat-form-field>
   </div>
 
-  <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
+  <div class="generate-button layout-row layout-xs-column layout-align-center gap-5percent">
     <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
       <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -1,10 +1,7 @@
-<div class="tab-container mat-typography">
+<div class="container">
   <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
-    <div fxLayout="row" fxLayoutAlign="start">
-      <div class="m-b-10">
-        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
-      </div>
-      <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
+    <div class="layout-row align-end">
+      <div class="action-button m-b-20 layout-row gap-20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
           {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
         >
@@ -121,10 +118,16 @@
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
               <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
-            <button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
-              <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
-            </button>
+            <span *ngIf="!transaction.reversed">
+              <button
+                mat-menu-item
+                *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'"
+                (click)="undoTransaction(transaction, $event)"
+              >
+                <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+                <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
+              </button>
+            </span>
             <button
               mat-menu-item
               class="account-action-button"

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -147,11 +147,11 @@ export class TransactionsTabComponent implements OnInit {
   }
 
   hideAccruals() {
-    this.filterTransactions(this.hideReversedParam.value, !this.hideAccrualsParam.value);
+    this.filterTransactions(this.hideReversedParam.value, this.hideAccrualsParam.value);
   }
 
   hideReversed() {
-    this.filterTransactions(!this.hideReversedParam.value, this.hideAccrualsParam.value);
+    this.filterTransactions(this.hideReversedParam.value, this.hideAccrualsParam.value);
   }
 
   filterTransactions(hideReversed: boolean, hideAccrual: boolean): void {

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <mat-card>
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
+      <mat-card-content class="layout-column">
         <mat-form-field (click)="dueDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
@@ -37,8 +37,9 @@
           </mat-select>
         </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+        <div class="flex-fill">
+          <span class="expandcollapsebutton m-l-10 m-t-40 flex-75">
+            (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                 <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -72,7 +73,7 @@
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
           <button type="button" mat-raised-button [routerLink]="['../']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -1,4 +1,4 @@
-<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
+<div class="container transaction-buttons m-b-20 align-end-center gap-2percent" align="end">
   <span
     *ngIf="
       !(
@@ -48,54 +48,54 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
+      <div class="layout-row-wrap card-content">
+        <div class="flex-100" [ngClass]="transactionColor()"></div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Id' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.id }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Transaction Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.transactionType.value | translateKey: 'catalogs' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.date | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Currency' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.currency.displayLabel }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Amount' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.note">
+        <div class="flex-50 mat-body-strong" *ngIf="transactionData.note">
           {{ 'labels.inputs.Note' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.note">
+        <div class="flex-50" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 
@@ -106,7 +106,7 @@
         </mifosx-transaction-payment-detail>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" mat-raised-button color="primary" [routerLink]="['../../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.scss

@@ -4,7 +4,7 @@
 .container {
   max-width: 37rem;
 
-  .content {
+  .card-content {
     div {
       margin: 1rem 0;
       word-wrap: break-word;
@@ -17,6 +17,10 @@
   }
 }
 
+.transaction-buttons {
+  margin-top: 3%;
+}
+
 .active {
   background-color: $status-active;
   height: 4px;

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <nav mat-tab-nav-bar class="navigation-tabs">
+  <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
     <a
       mat-tab-link
       [routerLink]="['./general']"
@@ -23,5 +23,7 @@
     </ng-container>
   </nav>
 
-  <router-outlet></router-outlet>
+  <mat-tab-nav-panel #tabPanel>
+    <router-outlet></router-outlet>
+  </mat-tab-nav-panel>
 </div>

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -1,10 +1,6 @@
 <div
   *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
-  fxLayout="row"
-  fxLayoutAlign="end"
-  fxLayoutGap="2%"
-  fxLayout.lt-md="column"
-  class="container m-b-20"
+  class="layout-row align-end gap-2percent layout-xs-column container m-b-20"
 >
   <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
     <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
@@ -29,11 +25,7 @@
 
 <div
   *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
-  fxLayout="row"
-  fxLayoutAlign="end"
-  fxLayoutGap="2%"
-  fxLayout.lt-md="column"
-  class="container m-b-20"
+  class="layout-row align-end gap-2percent layout-xs-column container m-b-20"
 >
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
@@ -48,89 +40,89 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="mat-body-strong">
+      <div class="layout-row-wrap">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.name }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Charge Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.penalty ? 'Penalty' : ('Fee' | translateKey: 'catalogs') }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Currency' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.currency.displayLabel }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Payment due at' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.chargeTimeType.value | translateKey: 'catalogs' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Payment due as of' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.dueDate | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Calculation Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.chargeCalculationType.value | translateKey: 'catalogs' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Due' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amount | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Paid' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amountPaid | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Waived' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amountWaived | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Outstanding' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amountOutstanding | formatNumber }}
         </div>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>