/* * The wallet: a balance, the sentences around it, and top-ups still in flight. * * Plain CSS for the same reason as order-cards.css and service-page.css: the * panels have no Vite build and serve Filament's pre-compiled app.css, so * `class="flex gap-4"` written in a Blade view here is inert markup. Anything * bespoke brings its own rules. * * Registered on the client panel only, in ClientPanelProvider: * * Css::make('wallet', resource_path('css/wallet.css')) * * which `php artisan filament:assets` copies to public/css/app/wallet.css. * Editing this file therefore needs that command re-run — composer's * post-autoload-dump does it too, by way of `filament:upgrade`. * * Every colour is a variable FilamentColor writes into :root at runtime * (--gray-*, --primary-*, --success-*, --warning-*, --danger-*, --info-*) and * every size comes from the theme block in app.css (--radius-xl, --text-sm), so * the page tracks the panel's palette and its dark mode instead of defining a * second one. Dark mode is the `.dark` class on . * * The namespace is `wl-`, kept apart from order-cards' `oc-` and the service * page's `sv-` because all three files load on every client page and a shared * prefix would let a rule written for the wallet silently restyle a server. */ .wl-summary { display: grid; gap: 1rem; } /* The figure and the sentences about it sit side by side where there is room and stack where there is not. A fixed first column rather than auto-fit: the balance panel has one job and should not grow to half a wide screen. */ .wl-top { display: grid; gap: 1rem; } @media (min-width: 64rem) { .wl-top { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; } } /* ------------------------------------------------------------------ * * The balance — the one thing the customer came for * ------------------------------------------------------------------ */ .wl-balance { display: flex; flex-direction: column; gap: 0.125rem; padding: 1.25rem 1.25rem 1.375rem; border-radius: var(--radius-xl, 0.75rem); background-color: var(--color-white, #fff); box-shadow: 0 0 0 1px var(--gray-200), 0 1px 2px 0 rgb(0 0 0 / 4%); } .dark .wl-balance { background-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-700); } /* Arrears are a state of the account rather than an error in the page, so the panel is tinted and the figure reddens — no icon, no alarm. */ .wl-balance.wl-is-short { background-color: color-mix(in oklab, var(--danger-500) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-500) 25%, transparent); } .dark .wl-balance.wl-is-short { background-color: color-mix(in oklab, var(--danger-400) 10%, var(--gray-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-400) 30%, transparent); } .wl-balance-label { font-size: var(--text-xs, 0.75rem); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); } /* tabular-nums so a balance that changes under a poll does not shuffle its own digits sideways as it goes. */ .wl-balance-figure { font-size: 2.125rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--gray-950); } .wl-is-short .wl-balance-figure { color: var(--danger-600); } .wl-balance-note { margin-top: 0.375rem; font-size: var(--text-sm, 0.875rem); line-height: 1.35rem; color: var(--gray-600); } .dark .wl-balance-label { color: var(--gray-400); } .dark .wl-balance-figure { color: var(--gray-50); } .dark .wl-is-short .wl-balance-figure { color: var(--danger-400); } .dark .wl-balance-note { color: var(--gray-400); } /* ------------------------------------------------------------------ * * Notes — the sentences that decide whether the button is trustworthy * ------------------------------------------------------------------ */ .wl-notes { display: grid; gap: 0.5rem; align-content: start; } .wl-note { padding: 0.75rem 0.875rem; border-radius: var(--radius-xl, 0.75rem); font-size: var(--text-sm, 0.875rem); line-height: 1.35rem; color: var(--gray-600); background-color: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); } .dark .wl-note { color: var(--gray-400); background-color: color-mix(in oklab, var(--gray-800) 55%, transparent); box-shadow: inset 0 0 0 1px var(--gray-800); } /* "simulated payment provider" and "test mode" are the two phrases that must survive a skim, so they are the only bold text on the page. */ .wl-note strong { font-weight: 600; color: var(--gray-800); } .dark .wl-note strong { color: var(--gray-200); } .wl-note--info { color: var(--gray-700); background-color: color-mix(in oklab, var(--info-500) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--info-500) 25%, transparent); } .wl-note--warning { color: var(--gray-700); background-color: color-mix(in oklab, var(--warning-500) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 28%, transparent); } .dark .wl-note--info, .dark .wl-note--warning { color: var(--gray-300); } .dark .wl-note--info { background-color: color-mix(in oklab, var(--info-400) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--info-400) 28%, transparent); } .dark .wl-note--warning { background-color: color-mix(in oklab, var(--warning-400) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-400) 30%, transparent); } /* ------------------------------------------------------------------ * * Recent attempts — money that was tried for, which the statement cannot show * ------------------------------------------------------------------ */ .wl-attempts { display: grid; gap: 0.625rem; padding: 0.875rem 1rem 1rem; border-radius: var(--radius-xl, 0.75rem); background-color: var(--color-white, #fff); box-shadow: 0 0 0 1px var(--gray-200), 0 1px 2px 0 rgb(0 0 0 / 4%); } .dark .wl-attempts { background-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-700); } .wl-attempts-title { font-size: var(--text-xs, 0.75rem); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); } .dark .wl-attempts-title { color: var(--gray-400); } .wl-attempt { display: grid; gap: 0.1875rem; } /* A rule between rows rather than around each one: three of these are a short list, not three cards. */ .wl-attempt + .wl-attempt { padding-top: 0.625rem; border-top: 1px solid var(--gray-100); } .dark .wl-attempt + .wl-attempt { border-top-color: var(--gray-800); } .wl-attempt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .wl-attempt-amount { font-size: var(--text-sm, 0.875rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-950); } .dark .wl-attempt-amount { color: var(--gray-50); } /* Pushed to the far end, so the eye reads amount and state together and finds the time only when it wants it. */ .wl-attempt-when { margin-left: auto; font-size: var(--text-xs, 0.75rem); color: var(--gray-500); } .wl-attempt-hint { font-size: var(--text-xs, 0.75rem); line-height: 1.15rem; color: var(--gray-600); } /* The reference a customer quotes at support. Monospaced and selectable, and allowed to break: `order_Pq9…` is longer than a phone is wide. */ .wl-attempt-ref { font-family: ui-monospace, "SF Mono", "Cascadia Mono", monospace; font-size: 0.6875rem; line-height: 1.1rem; word-break: break-all; user-select: all; color: var(--gray-400); } .dark .wl-attempt-hint { color: var(--gray-400); } .dark .wl-attempt-ref { color: var(--gray-500); } /* ------------------------------------------------------------------ * * State chips * * The tone is TopupStatus::getColor(), so these four exist because that enum has * four cases. Only warning and danger are reachable from this page today — * recentAttempts() asks for Created and Failed — and the other two are here so a * widened filter cannot render an unstyled chip. * ------------------------------------------------------------------ */ .wl-chip { flex: none; padding: 0.0625rem 0.4375rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; color: var(--gray-700); background-color: var(--gray-100); } .dark .wl-chip { color: var(--gray-300); background-color: var(--gray-800); } .wl-chip--success { color: var(--success-700); background-color: color-mix(in oklab, var(--success-500) 14%, transparent); } .wl-chip--warning { color: var(--warning-700); background-color: color-mix(in oklab, var(--warning-500) 15%, transparent); } .wl-chip--danger { color: var(--danger-700); background-color: color-mix(in oklab, var(--danger-500) 14%, transparent); } .dark .wl-chip--success { color: var(--success-300); background-color: color-mix(in oklab, var(--success-400) 18%, transparent); } .dark .wl-chip--warning { color: var(--warning-300); background-color: color-mix(in oklab, var(--warning-400) 18%, transparent); } .dark .wl-chip--danger { color: var(--danger-300); background-color: color-mix(in oklab, var(--danger-400) 18%, transparent); } /* ------------------------------------------------------------------ * * The checkout island * * Silent almost always: the whole block — root included — is hidden until the * Alpine component in razorpay-checkout.blade.php has something to say, and it * only ever has something to say about the overlay, never about the money. The * root hides too because the island is a child of .wl-summary's grid, and grid * charges a gap for a visible-but-empty item while dropping a `display: none` * one outright. * ------------------------------------------------------------------ */ .wl-checkout { display: grid; gap: 0.5rem; } .wl-checkout-busy { font-size: var(--text-sm, 0.875rem); color: var(--gray-500); } .dark .wl-checkout-busy { color: var(--gray-400); } /* Warning rather than danger, deliberately. Every sentence this can hold is about a window that did not open or a card that was declined, and in both cases the top-up is still open and nothing has been charged. */ .wl-checkout-error { padding: 0.75rem 0.875rem; border-radius: var(--radius-xl, 0.75rem); font-size: var(--text-sm, 0.875rem); line-height: 1.35rem; color: var(--gray-700); background-color: color-mix(in oklab, var(--warning-500) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 28%, transparent); } .dark .wl-checkout-error { color: var(--gray-300); background-color: color-mix(in oklab, var(--warning-400) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-400) 30%, transparent); }