Skip to content

Commit 03c8758

Browse files
shubhamkumar9199shubhamkumar9199
authored
Fix text alignment and background shadow on Transfer Funds page (#2641)
1 parent 0966d2c commit 03c8758

File tree

2 files changed

+343
-68
lines changed

2 files changed

+343
-68
lines changed

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

Lines changed: 82 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,51 @@
55
<div class="left triangle"></div>
66
<div class="right triangle"></div>
77
</div>
8-
<mat-card *ngIf="!isLoading">
8+
<mat-card *ngIf="!isLoading" class="transfer-card">
99
<mat-card-content>
10-
<div class="layout-row-wrap responsive-column">
11-
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
12-
13-
<mat-divider [inset]="true"></mat-divider>
14-
15-
<div class="flex-fill">
16-
<span class="flex-40">{{ 'labels.inputs.Applicant' | translate }}</span>
17-
<span class="flex-60">{{ accountTransferTemplateData.fromClient.displayName }}</span>
18-
</div>
19-
20-
<div class="flex-fill">
21-
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}</span>
22-
<span class="flex-60">{{ accountTransferTemplateData.fromOffice.name }}</span>
23-
</div>
24-
25-
<div class="flex-fill">
26-
<span class="flex-40">{{ 'labels.inputs.From Account' | translate }}</span>
27-
<span class="flex-60"
28-
>{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
29-
accountTransferTemplateData.fromAccount.accountNo
30-
}}</span
31-
>
32-
</div>
33-
34-
<div class="flex-fill">
35-
<span class="flex-40">{{ 'labels.inputs.From Account Type' | translate }}</span>
36-
<span class="flex-60">{{ accountTransferTemplateData.fromAccountType.value }}</span>
37-
</div>
38-
39-
<div class="flex-fill">
40-
<span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
41-
<span class="flex-60">{{ accountTransferTemplateData.currency.name }}</span>
10+
<!-- Source Account Details Section -->
11+
<div class="section-container">
12+
<h3 class="section-title transfer-heading">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
13+
14+
<mat-divider></mat-divider>
15+
16+
<div class="info-grid">
17+
<div class="info-row">
18+
<div class="info-label">{{ 'labels.inputs.Applicant' | translate }}</div>
19+
<div class="info-value">{{ accountTransferTemplateData.fromClient.displayName }}</div>
20+
</div>
21+
22+
<div class="info-row">
23+
<div class="info-label">{{ 'labels.inputs.Office' | translate }}</div>
24+
<div class="info-value">{{ accountTransferTemplateData.fromOffice.name }}</div>
25+
</div>
26+
27+
<div class="info-row">
28+
<div class="info-label">{{ 'labels.inputs.From Account' | translate }}</div>
29+
<div class="info-value">
30+
{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
31+
accountTransferTemplateData.fromAccount.accountNo
32+
}}
33+
</div>
34+
</div>
35+
36+
<div class="info-row">
37+
<div class="info-label">{{ 'labels.inputs.From Account Type' | translate }}</div>
38+
<div class="info-value">{{ accountTransferTemplateData.fromAccountType.value }}</div>
39+
</div>
40+
41+
<div class="info-row">
42+
<div class="info-label">{{ 'labels.inputs.Currency' | translate }}</div>
43+
<div class="info-value">{{ accountTransferTemplateData.currency.name }}</div>
44+
</div>
4245
</div>
4346
</div>
4447

45-
<div *ngIf="interbank">
46-
<div class="flex-fill">
47-
<h3 class="mat-h3 flex-40 align-start-center">
48-
{{ 'labels.heading.Transferred To' | translate }}
49-
</h3>
50-
<mat-form-field class="flex-40">
48+
<!-- Interbank Section -->
49+
<div *ngIf="interbank" class="section-container">
50+
<div class="interbank-section">
51+
<h3 class="section-title transfer-heading">{{ 'labels.heading.Transferred To' | translate }}</h3>
52+
<mat-form-field class="full-width">
5153
<mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
5254
<input
5355
matInput
@@ -57,13 +59,15 @@ <h3 class="mat-h3 flex-40 align-start-center">
5759
[(ngModel)]="phoneAccount"
5860
maxlength="10"
5961
required
60-
/><!-- formControlName="phoneNumber" -->
62+
placeholder="Enter phone number"
63+
title="Phone number"
64+
/>
6165
<mat-hint align="end">{{ phoneAccount.length || 0 }}/10</mat-hint>
6266
</mat-form-field>
6367
</div>
6468

65-
<mat-card-actions *ngIf="!interbankTransferForm" class="layout-row align-center gap-5px responsive-column">
66-
<button type="button" mat-raised-button [routerLink]="['../..']">
69+
<mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
70+
<button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
6771
{{ 'labels.buttons.Cancel' | translate }}
6872
</button>
6973
<button
@@ -73,17 +77,21 @@ <h3 class="mat-h3 flex-40 align-start-center">
7377
(click)="searchAccountByNumber()"
7478
*mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
7579
id="search-button"
80+
class="primary-button"
7681
>
7782
{{ 'labels.buttons.Search' | translate }}
7883
</button>
7984
</mat-card-actions>
8085
</div>
8186

82-
<mat-divider [inset]="true"></mat-divider>
87+
<mat-divider *ngIf="!interbank"></mat-divider>
88+
89+
<!-- Transfer Form Section -->
90+
<form *ngIf="!interbank" [formGroup]="makeAccountTransferForm" class="transfer-form">
91+
<h3 class="section-title transfer-heading">{{ 'labels.heading.Transfer Details' | translate }}</h3>
8392

84-
<form *ngIf="!interbank" [formGroup]="makeAccountTransferForm">
85-
<div class="layout-row-wrap gap-2px responsive-column">
86-
<mat-form-field class="flex-98" (click)="transferDatePicker.open()">
93+
<div class="form-grid">
94+
<mat-form-field class="form-field" (click)="transferDatePicker.open()">
8795
<mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
8896
<input
8997
matInput
@@ -92,6 +100,8 @@ <h3 class="mat-h3 flex-40 align-start-center">
92100
[matDatepicker]="transferDatePicker"
93101
required
94102
formControlName="transferDate"
103+
placeholder="Select date"
104+
title="Transaction Date"
95105
/>
96106
<mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
97107
<mat-datepicker #transferDatePicker></mat-datepicker>
@@ -101,7 +111,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
101111
</mat-error>
102112
</mat-form-field>
103113

104-
<mat-form-field class="flex-98">
114+
<mat-form-field class="form-field">
105115
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
106116
<mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
107117
<mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
@@ -114,9 +124,15 @@ <h3 class="mat-h3 flex-40 align-start-center">
114124
</mat-error>
115125
</mat-form-field>
116126

117-
<mat-form-field class="flex-98">
127+
<mat-form-field class="form-field">
118128
<mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
119-
<input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete" />
129+
<input
130+
matInput
131+
formControlName="toClientId"
132+
[matAutocomplete]="clientsAutocomplete"
133+
placeholder="Select or type client name"
134+
title="Client name"
135+
/>
120136
<mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
121137
{{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
122138
<strong>{{ 'labels.commons.required' | translate }}</strong>
@@ -129,7 +145,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
129145
</mat-option>
130146
</mat-autocomplete>
131147

132-
<mat-form-field class="flex-98">
148+
<mat-form-field class="form-field">
133149
<mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
134150
<mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
135151
<mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
@@ -142,7 +158,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
142158
</mat-error>
143159
</mat-form-field>
144160

145-
<mat-form-field class="flex-98">
161+
<mat-form-field class="form-field">
146162
<mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
147163
<mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
148164
<mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
@@ -155,9 +171,16 @@ <h3 class="mat-h3 flex-40 align-start-center">
155171
</mat-error>
156172
</mat-form-field>
157173

158-
<mat-form-field class="flex-98">
174+
<mat-form-field class="form-field">
159175
<mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
160-
<input type="number" matInput required formControlName="transferAmount" />
176+
<input
177+
type="number"
178+
matInput
179+
required
180+
formControlName="transferAmount"
181+
placeholder="Enter amount"
182+
title="Transfer amount"
183+
/>
161184
<mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
162185
{{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
163186
<strong>{{ 'labels.commons.required' | translate }}</strong>
@@ -168,13 +191,15 @@ <h3 class="mat-h3 flex-40 align-start-center">
168191
</mat-error>
169192
</mat-form-field>
170193

171-
<mat-form-field class="flex-98">
194+
<mat-form-field class="form-field description-field">
172195
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
173196
<textarea
174197
matInput
175198
formControlName="transferDescription"
176199
cdkTextareaAutosize
177200
cdkAutosizeMinRows="2"
201+
placeholder="Enter transfer description"
202+
title="Transfer description"
178203
></textarea>
179204
<mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
180205
{{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
@@ -190,8 +215,8 @@ <h3 class="mat-h3 flex-40 align-start-center">
190215
></mifosx-make-account-interbank-transfers>
191216
</mat-card-content>
192217

193-
<mat-card-actions *ngIf="!interbankTransferForm" class="layout-row align-center gap-5px responsive-column">
194-
<button type="button" mat-raised-button [routerLink]="['../..']">
218+
<mat-card-actions *ngIf="!interbankTransferForm" class="action-buttons">
219+
<button type="button" mat-raised-button [routerLink]="['../..']" class="cancel-button">
195220
{{ 'labels.buttons.Cancel' | translate }}
196221
</button>
197222
<button
@@ -200,6 +225,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
200225
[disabled]="!makeAccountTransferForm.valid"
201226
*mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
202227
(click)="submit()"
228+
class="primary-button"
203229
>
204230
{{ 'labels.buttons.Submit' | translate }}
205231
</button>

0 commit comments

Comments
 (0)