feat: Nexora grouped action menu for Current Account, FD, and RD views
- Non-individual clients: hide Nomination Facility & Nominees in create flow, skip nominee validation on submit, hide Nominees tab in account view - Current Account view: replace flat kebab menu with Nexora grouped menu (Transact / Restrict / Interest / Admin / Danger zone), scrollable body, pinned header, colour-coded icons; add kindOf/iconOf/hasKind helpers - Fixed Deposit view: same grouped menu using shared cur-action-menu styles - Recurring Deposit view: same grouped menu with permission directives - main.scss: add cur-action-menu / cur-menu global styles with MDC flex fix for Material 20 (.mat-mdc-menu-item-text) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jaanu423
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
38c4a7d9e9
commit
547cfd581e
+200
@@ -1177,6 +1177,16 @@ mat-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sav-menu__item.mat-mdc-menu-item .mat-mdc-menu-item-text,
|
||||
.sav-menu__item.mat-mdc-menu-item .mdc-list-item__primary-text,
|
||||
.sav-menu__item.mat-mdc-menu-item .mdc-list-item__content {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Hover lift on the icon */
|
||||
.sav-menu__item:hover .sav-menu__ico {
|
||||
transform: scale(1.06);
|
||||
@@ -1216,6 +1226,196 @@ mat-card {
|
||||
background: #fef2f2 !important;
|
||||
}
|
||||
|
||||
/* ─── Current Account action menu (mirrors sav-action-menu styling) ─────── */
|
||||
.cur-action-menu.mat-mdc-menu-panel {
|
||||
min-width: 280px !important;
|
||||
max-width: 320px !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow:
|
||||
0 8px 30px -6px rgb(15 23 42 / 22%),
|
||||
0 0 0 1px rgb(15 23 42 / 6%) !important;
|
||||
border: none !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cur-action-menu .mat-mdc-menu-content {
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.cur-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Inter, 'DM Sans', Roboto, sans-serif;
|
||||
max-height: 440px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cur-menu__body {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e1 transparent;
|
||||
}
|
||||
|
||||
.cur-menu__body::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.cur-menu__body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cur-menu__body::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cur-menu__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #4338ca 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cur-menu__head-ico {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: rgb(255 255 255 / 18%);
|
||||
border: 1px solid rgb(255 255 255 / 28%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cur-menu__head-title {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.cur-menu__head-sub {
|
||||
margin-top: 1px;
|
||||
font-size: 10.5px;
|
||||
color: rgb(255 255 255 / 78%);
|
||||
}
|
||||
|
||||
.cur-menu__group {
|
||||
padding: 6px 0;
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: #fff8f8;
|
||||
|
||||
& + & {
|
||||
border-top-color: #fee2e2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cur-menu__group-title {
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
padding: 4px 14px 2px;
|
||||
}
|
||||
|
||||
.cur-menu__item.mat-mdc-menu-item {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 38px !important;
|
||||
padding: 5px 14px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
transition:
|
||||
background 0.12s ease,
|
||||
color 0.12s ease;
|
||||
}
|
||||
|
||||
.cur-menu__ico {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
transition:
|
||||
transform 0.12s ease,
|
||||
background 0.12s ease,
|
||||
color 0.12s ease;
|
||||
}
|
||||
|
||||
.cur-menu__label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Material 20 wraps projected content in .mat-mdc-menu-item-text — make it
|
||||
flex so the icon square and label sit side-by-side instead of stacking. */
|
||||
.cur-menu__item.mat-mdc-menu-item .mat-mdc-menu-item-text,
|
||||
.cur-menu__item.mat-mdc-menu-item .mdc-list-item__primary-text,
|
||||
.cur-menu__item.mat-mdc-menu-item .mdc-list-item__content {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cur-menu__item:hover .cur-menu__ico {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
/* Variant tints */
|
||||
.cur-menu__item--transact .cur-menu__ico {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.cur-menu__item--block .cur-menu__ico {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.cur-menu__item--interest .cur-menu__ico {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.cur-menu__item--admin .cur-menu__ico {
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.cur-menu__item--danger.mat-mdc-menu-item {
|
||||
color: #991b1b !important;
|
||||
}
|
||||
|
||||
.cur-menu__item--danger .cur-menu__ico {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.cur-menu__item--danger:hover {
|
||||
background: #fef2f2 !important;
|
||||
}
|
||||
|
||||
/* ─── Identity-Verify Dialog Panel ───
|
||||
Strip Material's default surface padding so the teal gradient header
|
||||
on the Withdraw "Verify Customer Identity" pop-up reaches edge-to-edge
|
||||
|
||||
Reference in New Issue
Block a user