Fix text alignment and background shadow on Transfer Funds page (#2641)
This commit is contained in:
Shubham Kumar
+76
-50
@@ -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">
|
||||
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
|
||||
<!-- Source Account Details Section -->
|
||||
<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">
|
||||
<span class="flex-40">{{ 'labels.inputs.Applicant' | translate }}</span>
|
||||
<span class="flex-60">{{ accountTransferTemplateData.fromClient.displayName }}</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ 'labels.inputs.Applicant' | translate }}</div>
|
||||
<div class="info-value">{{ accountTransferTemplateData.fromClient.displayName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}</span>
|
||||
<span class="flex-60">{{ accountTransferTemplateData.fromOffice.name }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ 'labels.inputs.Office' | translate }}</div>
|
||||
<div class="info-value">{{ accountTransferTemplateData.fromOffice.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.From Account' | translate }}</span>
|
||||
<span class="flex-60"
|
||||
>{{ accountTransferTemplateData.fromAccount.productName }} - #{{
|
||||
accountTransferTemplateData.fromAccount.accountNo
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ 'labels.inputs.From Account' | translate }}</div>
|
||||
<div class="info-value">
|
||||
{{ accountTransferTemplateData.fromAccount.productName }} - #{{
|
||||
accountTransferTemplateData.fromAccount.accountNo
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.From Account Type' | translate }}</span>
|
||||
<span class="flex-60">{{ accountTransferTemplateData.fromAccountType.value }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ 'labels.inputs.From Account Type' | translate }}</div>
|
||||
<div class="info-value">{{ accountTransferTemplateData.fromAccountType.value }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
|
||||
<span class="flex-60">{{ accountTransferTemplateData.currency.name }}</span>
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ 'labels.inputs.Currency' | translate }}</div>
|
||||
<div class="info-value">{{ accountTransferTemplateData.currency.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="interbank">
|
||||
<div class="flex-fill">
|
||||
<h3 class="mat-h3 flex-40 align-start-center">
|
||||
{{ 'labels.heading.Transferred To' | translate }}
|
||||
</h3>
|
||||
<mat-form-field class="flex-40">
|
||||
<!-- Interbank Section -->
|
||||
<div *ngIf="interbank" class="section-container">
|
||||
<div class="interbank-section">
|
||||
<h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' | translate }}</h3>
|
||||
<mat-form-field class="full-width">
|
||||
<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">
|
||||
<button type="button" mat-raised-button [routerLink]="['../..']">
|
||||
<mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
|
||||
<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">
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-98" (click)="transferDatePicker.open()">
|
||||
<!-- Transfer Form Section -->
|
||||
<form *ngIf="!interbank" [formGroup]="makeAccountTransferForm" class="transfer-form">
|
||||
<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">
|
||||
<button type="button" mat-raised-button [routerLink]="['../..']">
|
||||
<mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
|
||||
<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>
|
||||
|
||||
+262
-13
@@ -1,26 +1,275 @@
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
.container {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.margin-t {
|
||||
margin-top: 1em;
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: rgb(0 0 0 / 87%);
|
||||
}
|
||||
|
||||
// Divider styling
|
||||
mat-divider {
|
||||
margin: 0 0 0.5em;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
// Interbank section
|
||||
.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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user