Fix text alignment and background shadow on Transfer Funds page (#2641)

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -5,49 +5,51 @@
     <div class="left triangle"></div>
     <div class="right triangle"></div>
   </div>
-  <mat-card *ngIf="!isLoading">
+  <mat-card *ngIf="!isLoading" class="transfer-card">
     <mat-card-content>
-      <div class="layout-row-wrap responsive-column">
+      <!-- Source Account Details Section -->
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
+      <div class="section-container">
+        <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
 
-        <mat-divider [inset]="true"></mat-divider>
+        <mat-divider></mat-divider>
 
-        <div class="flex-fill">
+        <div class="info-grid">
-          <span class="flex-40">{{ 'labels.inputs.Applicant' | translate }}</span>
+          <div class="info-row">
-          <span class="flex-60">{{ accountTransferTemplateData.fromClient.displayName }}</span>
+            <div class="info-label">{{ 'labels.inputs.Applicant' | translate }}</div>
-        </div>
+            <div class="info-value">{{ accountTransferTemplateData.fromClient.displayName }}</div>
+          </div>
 
-        <div class="flex-fill">
+          <div class="info-row">
-          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}</span>
+            <div class="info-label">{{ 'labels.inputs.Office' | translate }}</div>
-          <span class="flex-60">{{ accountTransferTemplateData.fromOffice.name }}</span>
+            <div class="info-value">{{ accountTransferTemplateData.fromOffice.name }}</div>
-        </div>
+          </div>
 
-        <div class="flex-fill">
+          <div class="info-row">
-          <span class="flex-40">{{ 'labels.inputs.From Account' | translate }}</span>
+            <div class="info-label">{{ 'labels.inputs.From Account' | translate }}</div>
-          <span class="flex-60"
+            <div class="info-value">
-            >{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
+              {{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
-              accountTransferTemplateData.fromAccount.accountNo
+                accountTransferTemplateData.fromAccount.accountNo
-            }}</span
+              }}
-          >
+            </div>
-        </div>
+          </div>
 
-        <div class="flex-fill">
+          <div class="info-row">
-          <span class="flex-40">{{ 'labels.inputs.From Account Type' | translate }}</span>
+            <div class="info-label">{{ 'labels.inputs.From Account Type' | translate }}</div>
-          <span class="flex-60">{{ accountTransferTemplateData.fromAccountType.value }}</span>
+            <div class="info-value">{{ accountTransferTemplateData.fromAccountType.value }}</div>
-        </div>
+          </div>
 
-        <div class="flex-fill">
+          <div class="info-row">
-          <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
+            <div class="info-label">{{ 'labels.inputs.Currency' | translate }}</div>
-          <span class="flex-60">{{ accountTransferTemplateData.currency.name }}</span>
+            <div class="info-value">{{ accountTransferTemplateData.currency.name }}</div>
+          </div>
         </div>
       </div>
 
-      <div *ngIf="interbank">
+      <!-- Interbank Section -->
-        <div class="flex-fill">
+      <div *ngIf="interbank" class="section-container">
-          <h3 class="mat-h3 flex-40 align-start-center">
+        <div class="interbank-section">
-            {{ 'labels.heading.Transferred To' | translate }}
+          <h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' | translate }}</h3>
-          </h3>
+          <mat-form-field class="full-width">
-          <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
             <input
               matInput
@@ -57,13 +59,15 @@
               [(ngModel)]="phoneAccount"
               maxlength="10"
               required
-            /><!-- formControlName="phoneNumber" -->
+              placeholder="Enter phone number"
+              title="Phone number"
+            />
             <mat-hint align="end">{{ phoneAccount.length || 0 }}/10</mat-hint>
           </mat-form-field>
         </div>
 
-        <mat-card-actions *ngIf="!interbankTransferForm" class="layout-row align-center gap-5px responsive-column">
+        <mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
-          <button type="button" mat-raised-button [routerLink]="['../..']">
+          <button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>
           <button
@@ -73,17 +77,21 @@
             (click)="searchAccountByNumber()"
             *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
             id="search-button"
+            class="primary-button"
           >
             {{ 'labels.buttons.Search' | translate }}
           </button>
         </mat-card-actions>
       </div>
 
-      <mat-divider [inset]="true"></mat-divider>
+      <mat-divider *ngIf="!interbank"></mat-divider>
 
-      <form *ngIf="!interbank" [formGroup]="makeAccountTransferForm">
+      <!-- Transfer Form Section -->
-        <div class="layout-row-wrap gap-2px responsive-column">
+      <form *ngIf="!interbank" [formGroup]="makeAccountTransferForm" class="transfer-form">
-          <mat-form-field class="flex-98" (click)="transferDatePicker.open()">
+        <h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
+
+        <div class="form-grid">
+          <mat-form-field class="form-field" (click)="transferDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
               matInput
@@ -92,6 +100,8 @@
               [matDatepicker]="transferDatePicker"
               required
               formControlName="transferDate"
+              placeholder="Select date"
+              title="Transaction Date"
             />
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
@@ -101,7 +111,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field class="flex-98">
+          <mat-form-field class="form-field">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
@@ -114,9 +124,15 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field class="flex-98">
+          <mat-form-field class="form-field">
             <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
-            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete" />
+            <input
+              matInput
+              formControlName="toClientId"
+              [matAutocomplete]="clientsAutocomplete"
+              placeholder="Select or type client name"
+              title="Client name"
+            />
             <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
               {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
               <strong>{{ 'labels.commons.required' | translate }}</strong>
@@ -129,7 +145,7 @@
             </mat-option>
           </mat-autocomplete>
 
-          <mat-form-field class="flex-98">
+          <mat-form-field class="form-field">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
@@ -142,7 +158,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field class="flex-98">
+          <mat-form-field class="form-field">
             <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
@@ -155,9 +171,16 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field class="flex-98">
+          <mat-form-field class="form-field">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="transferAmount" />
+            <input
+              type="number"
+              matInput
+              required
+              formControlName="transferAmount"
+              placeholder="Enter amount"
+              title="Transfer amount"
+            />
             <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
               {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
               <strong>{{ 'labels.commons.required' | translate }}</strong>
@@ -168,13 +191,15 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field class="flex-98">
+          <mat-form-field class="form-field description-field">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea
               matInput
               formControlName="transferDescription"
               cdkTextareaAutosize
               cdkAutosizeMinRows="2"
+              placeholder="Enter transfer description"
+              title="Transfer description"
             ></textarea>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
               {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
@@ -190,8 +215,8 @@
       ></mifosx-make-account-interbank-transfers>
     </mat-card-content>
 
-    <mat-card-actions *ngIf="!interbankTransferForm" class="layout-row align-center gap-5px responsive-column">
+    <mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
-      <button type="button" mat-raised-button [routerLink]="['../..']">
+      <button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
         {{ 'labels.buttons.Cancel' | translate }}
       </button>
       <button
@@ -200,6 +225,7 @@
         [disabled]="!makeAccountTransferForm.valid"
         *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
         (click)="submit()"
+        class="primary-button"
       >
         {{ 'labels.buttons.Submit' | translate }}
       </button>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss

@@ -1,26 +1,275 @@
-h2,
+.container {
-h3,
+  max-width: 42rem;
-h4 {
+  margin: 0 auto;
-  margin: 0;
+  padding: 1rem;
+}
+
+// Card styling
+.transfer-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+// Section styling
+.section-container {
+  margin-bottom: 2rem;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgb(0 0 0 / 12%);
+
+  &.transfer-heading {
+    font-weight: 700;
+  }
+}
+
+// Source account info grid
+.info-grid {
+  display: grid;
+  grid-template-columns: 100%;
+  gap: 0.75rem;
+
+  @media (width >= 768px) {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: rgb(0 0 0 / 2%);
+  border-radius: 4px;
+
+  &:hover {
+    background-color: rgb(0 0 0 / 4%);
+  }
+}
+
+.info-label {
+  flex: 0 0 40%;
+  color: rgb(0 0 0 / 70%);
   font-weight: 500;
 }
 
-span {
+.info-value {
-  margin: 0.5em 0;
+  flex: 1;
-}
+  color: rgb(0 0 0 / 87%);
-
-.margin-t {
-  margin-top: 1em;
 }
 
+// Divider styling
 mat-divider {
-  margin: 0 0 0.5em;
+  margin: 1rem 0;
 }
 
-.container {
+// Interbank section
-  max-width: 37rem;
+.interbank-section {
+  margin-bottom: 1rem;
 }
 
+// Form styling
+.transfer-form {
+  margin-top: 1rem;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 100%;
+  gap: 1rem;
+
+  @media (width >= 768px) {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+.form-field {
+  width: 100%;
+
+  &.description-field {
+    grid-column: 1 / -1;
+  }
+}
+
+// Button styling
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  margin-top: 1rem;
+
+  @media (width <= 576px) {
+    flex-direction: column;
+  }
+
+  button {
+    min-width: 120px;
+
+    @media (width <= 576px) {
+      width: 100%;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .cancel-button {
+    background-color: #f5f5f5;
+    color: rgb(0 0 0 / 87%);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+
+    &:hover {
+      background-color: #e0e0e0;
+      box-shadow: 0 2px 5px rgb(0 0 0 / 18%);
+    }
+  }
+
+  .primary-button {
+    background-color: #f5f5f5;
+    color: rgb(0 0 0 / 87%);
+    font-weight: normal;
+    border: none;
+    box-shadow: none;
+
+    &:hover {
+      background-color: #e0e0e0;
+      box-shadow: 0 2px 5px rgb(0 0 0 / 18%);
+    }
+  }
+}
+
+// Loader styling
+.loader-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+  position: relative;
+}
+
+@keyframes rotate-triangle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.triangle {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  border-bottom: 34px solid rgb(0 0 0 / 5%);
+  animation: rotate-triangle 1.5s infinite linear;
+
+  &:hover {
+    border-bottom-color: rgb(0 0 0 / 8%);
+  }
+}
+
+// Dark theme
+// Lower specificity selectors first
+.dark-theme {
+  .info-label {
+    color: rgb(255 255 255 / 70%);
+  }
+
+  .info-value {
+    color: rgb(255 255 255 / 87%);
+  }
+
+  .section-title {
+    color: #fff;
+    border-bottom-color: rgb(255 255 255 / 12%);
+  }
+
+  .transfer-heading {
+    color: #fff;
+    font-weight: 700;
+  }
+
+  .action-buttons {
+    .cancel-button {
+      background-color: #424242;
+      color: rgb(255 255 255 / 87%);
+
+      &:hover {
+        background-color: #505050;
+      }
+    }
+
+    .primary-button {
+      background-color: #424242;
+      color: rgb(255 255 255 / 87%);
+      font-weight: normal;
+      border: none;
+      box-shadow: none;
+
+      &:hover {
+        background-color: #505050;
+      }
+    }
+  }
+}
+
+// Higher specificity selectors
+:host-context(.dark-theme) .transfer-heading {
+  color: #fff;
+  font-weight: 700;
+}
+
+:host-context(.dark-theme) .action-buttons .cancel-button {
+  background-color: #424242;
+  color: rgb(255 255 255 / 87%);
+}
+
+:host-context(.dark-theme) .action-buttons .primary-button {
+  background-color: #424242;
+  color: rgb(255 255 255 / 87%);
+  font-weight: normal;
+  border: none;
+  box-shadow: none;
+}
+
+// Medium specificity selectors
+body.dark-theme {
+  .container {
+    .section-title {
+      color: #fff;
+    }
+
+    .transfer-heading {
+      color: #fff;
+      font-weight: 700;
+    }
+
+    .action-buttons {
+      .cancel-button {
+        background-color: #424242;
+        color: rgb(255 255 255 / 87%);
+      }
+
+      .primary-button {
+        background-color: #424242;
+        color: rgb(255 255 255 / 87%);
+        font-weight: normal;
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+// Form field errors
 ::ng-deep mat-form-field.error-warn.mat-form-field-invalid .mat-form-field-ripple {
   background-color: #000000de !important;
 }