feat: complete UI redesign — client creation tabs, footer, home page, CIF & occupation fields
- Client creation: replaced vertical stepper with 3-tab layout (General, KYC & Nominee, Preview) - All form fields redesigned with appearance="outline" and section grouping - Preview tab with profile card, info tables, KYC details, family members - Footer redesigned: security bar, LincShield certifications, regulatory & legal, quick navigation, support & contact, LincPay branding - Home page redesigned: welcome banner, quick action cards, info row - Client view header redesigned: ID chips row (Account No, CIF Number, External Id), 4-column details grid - Added CIF Number column to clients list table - Added CIF Number display to client view sidebar and personal data tab - Added occupationCategoryId and occupationId dropdowns to client creation form - Added occupation fields to client view sidebar, personal data tab, and preview - Added 51+ missing translation keys to en-US.json - Toolbar: added Last login chip - Registered faUserPlus icon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
b3a4cce0cf
commit
7b1f2e8ad7
@@ -1,4 +1,4 @@
|
||||
/**
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
@@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
/**
|
||||
* Modern Material Design 3 Login Form Styles
|
||||
* Glassmorphism Login Form Styles
|
||||
*/
|
||||
|
||||
// ===== Main Form Container =====
|
||||
@@ -38,41 +38,40 @@
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Apply same styling as login fields
|
||||
.mat-mdc-text-field-wrapper {
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-radius: 14px 14px 0 0;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
border-radius: 12px 12px 0 0;
|
||||
background-color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
opacity: 0.04;
|
||||
border-radius: 14px 14px 0 0;
|
||||
background-color: rgb(255 255 255 / 5%);
|
||||
}
|
||||
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
opacity: 0.12;
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-line-ripple::after {
|
||||
border-bottom-color: var(--md-sys-color-primary, #1074b9);
|
||||
border-bottom-color: #0ea5e9;
|
||||
}
|
||||
|
||||
.mat-mdc-select {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mat-mdc-floating-label {
|
||||
font-size: 1rem;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
color: rgb(255 255 255 / 60%);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
padding: 0 0.75rem 0 0.5rem;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
color: rgb(255 255 255 / 50%);
|
||||
|
||||
fa-icon {
|
||||
font-size: 1.25rem;
|
||||
@@ -95,53 +94,54 @@
|
||||
::ng-deep {
|
||||
// Field container
|
||||
.mat-mdc-text-field-wrapper {
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-radius: 14px 14px 0 0;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
// Focus overlay
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
border-radius: 12px 12px 0 0;
|
||||
background-color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
opacity: 0.04;
|
||||
border-radius: 14px 14px 0 0;
|
||||
background-color: rgb(255 255 255 / 5%);
|
||||
}
|
||||
|
||||
// Focus state
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
opacity: 0.12;
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom indicator line
|
||||
.mdc-line-ripple::after {
|
||||
border-bottom-color: var(--md-sys-color-primary, #1074b9);
|
||||
border-bottom-color: #0ea5e9;
|
||||
}
|
||||
|
||||
// Input field
|
||||
.mat-mdc-input-element {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
color: #fff;
|
||||
padding: 0.875rem 0;
|
||||
margin-left: 0;
|
||||
caret-color: #0ea5e9;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
opacity: 0.6;
|
||||
color: rgb(255 255 255 / 40%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.mat-mdc-floating-label {
|
||||
font-size: 1rem;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
color: rgb(255 255 255 / 60%);
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
// Prefix icon
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
padding: 0 0.75rem 0 0.5rem;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
color: rgb(255 255 255 / 50%);
|
||||
|
||||
fa-icon {
|
||||
font-size: 1.25rem;
|
||||
@@ -149,7 +149,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Form field infix - align label with input
|
||||
// Form field infix
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-left: 0;
|
||||
}
|
||||
@@ -159,19 +159,23 @@
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
color: rgb(255 255 255 / 50%);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error state
|
||||
&.mat-form-field-invalid {
|
||||
.mdc-line-ripple::after {
|
||||
border-bottom-color: var(--md-sys-color-error, #ba1a1a);
|
||||
border-bottom-color: #f87171;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-prefix fa-icon {
|
||||
color: var(--md-sys-color-error, #ba1a1a);
|
||||
color: #f87171;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,7 +183,39 @@
|
||||
.mat-mdc-form-field-error {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
color: var(--md-sys-color-error, #ba1a1a);
|
||||
color: #f87171;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Remember Me & Options Row =====
|
||||
.login-options-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.25rem 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.remember-me-checkbox {
|
||||
::ng-deep {
|
||||
.mdc-checkbox {
|
||||
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true'])
|
||||
~ .mdc-checkbox__background {
|
||||
border-color: rgb(255 255 255 / 40%);
|
||||
}
|
||||
|
||||
.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
|
||||
.mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
|
||||
background-color: #0ea5e9;
|
||||
border-color: #0ea5e9;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-label {
|
||||
color: rgb(255 255 255 / 70%);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -192,7 +228,11 @@
|
||||
|
||||
::ng-deep {
|
||||
.mdc-linear-progress__bar-inner {
|
||||
border-color: var(--md-sys-color-primary, #1074b9);
|
||||
border-color: #0ea5e9;
|
||||
}
|
||||
|
||||
.mdc-linear-progress__buffer-bar {
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -200,13 +240,16 @@
|
||||
// ===== Submit Button =====
|
||||
.login-submit-button {
|
||||
min-height: 48px;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
|
||||
::ng-deep md-filled-button {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
::ng-deep {
|
||||
md-filled-button,
|
||||
.mdc-button {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-spinner {
|
||||
@@ -233,7 +276,7 @@
|
||||
|
||||
.oidc-description {
|
||||
font-size: 0.95rem;
|
||||
color: var(--md-sys-color-on-surface-variant, #44474e);
|
||||
color: rgb(255 255 255 / 60%);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -250,19 +293,20 @@
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
background: var(--md-sys-color-primary-container, #d1e4ff);
|
||||
background: rgb(14 165 233 / 15%);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgb(14 165 233 / 20%);
|
||||
|
||||
.success-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
color: #0ea5e9;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--md-sys-color-on-primary-container, #001d36);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -279,9 +323,9 @@
|
||||
|
||||
.protected-data {
|
||||
padding: 1rem;
|
||||
background: var(--md-sys-color-surface-container, #f3f3f3);
|
||||
background: rgb(255 255 255 / 6%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--md-sys-color-outline-variant, #c4c6d0);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
||||
@@ -289,83 +333,12 @@
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--md-sys-color-on-surface, #1a1c1e);
|
||||
color: rgb(255 255 255 / 80%);
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Dark Theme Support =====
|
||||
:host-context(.dark-theme) {
|
||||
// Tenant selector dark theme
|
||||
::ng-deep .tenant-section {
|
||||
mifosx-tenant-selector {
|
||||
#tenant-selector {
|
||||
.mat-mdc-select {
|
||||
color: var(--md-sys-color-on-surface, #e2e2e5);
|
||||
}
|
||||
|
||||
.mat-mdc-floating-label {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-field {
|
||||
::ng-deep {
|
||||
.mat-mdc-input-element {
|
||||
color: var(--md-sys-color-on-surface, #e2e2e5);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-floating-label {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-suffix button {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oidc-description {
|
||||
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
background: var(--md-sys-color-primary-container, #003a6b);
|
||||
|
||||
.success-icon {
|
||||
color: var(--md-sys-color-primary, #5ba2ec);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--md-sys-color-on-primary-container, #d1e4ff);
|
||||
}
|
||||
}
|
||||
|
||||
.protected-data {
|
||||
background: var(--md-sys-color-surface-container, #2c2f36);
|
||||
border-color: var(--md-sys-color-outline-variant, #44474e);
|
||||
|
||||
pre {
|
||||
color: var(--md-sys-color-on-surface, #e2e2e5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Responsive Design =====
|
||||
/* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
|
||||
@media (max-width: 768px) {
|
||||
@@ -381,8 +354,8 @@
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
margin-top: 0.5rem;
|
||||
.login-options-row {
|
||||
padding: 0.15rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -416,6 +389,12 @@
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.remember-me-checkbox {
|
||||
::ng-deep .mdc-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.oidc-actions {
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user