From bb51d7a410ad48f96ceb774472139bbaa324e66e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaime=20Garc=C3=ADa=20M=C3=A9ndez?= Date: Sat, 14 Mar 2026 19:02:39 -0500 Subject: [PATCH] Polish dark theme: fix light remnants, KPI cards, backdrop blur, button CTA styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix App.jsx bg-gray-50 → bg-dark-bg - Convert ChangePasswordPage to full dark theme - Fix WalletCard and ErrorBoundary light theme classes - Fix KpiCard neutral tone (sky/slate → accent/dark tokens) - Fix KpiCard highlight gradient to use #65a7a5 accent - Add backdrop-filter blur to Card, Modal, ConfirmModal, login card - Refine Button outline/secondary to ghost CTA style per spec - Fix Toast colors (bg-green-500 → bg-success, etc.) - Fix DepositOptionCard hover (shadow → border accent) - Fix index.html theme-color #58b098 → #65a7a5 - Fix index.css input padding 10px → 12px vertical, add body font-size/line-height - Normalize card border-radius to rounded-lg (8px) per spec - Update Button and Toast tests for new classes --- index.html | 2 +- src/App.jsx | 2 +- src/components/ErrorBoundary.jsx | 12 +++---- src/components/features/dashboard/KpiCard.jsx | 10 +++--- .../features/deposits/DepositOptionCard.jsx | 2 +- .../features/wallets/WalletCard.jsx | 8 +++-- src/components/ui/Button.jsx | 6 ++-- src/components/ui/Button.test.jsx | 4 +-- src/components/ui/Card.jsx | 4 ++- src/components/ui/ConfirmModal.jsx | 2 +- src/components/ui/Modal.jsx | 2 +- src/components/ui/Toast.jsx | 10 +++--- src/components/ui/Toast.test.jsx | 6 ++-- src/index.css | 4 ++- src/pages/ChangePasswordPage.jsx | 33 ++++++++++++------- src/pages/HistoryPage.jsx | 4 +-- src/pages/LoginPage.jsx | 2 +- src/pages/OperatingPage.jsx | 4 +-- src/pages/RequestsPage.jsx | 6 ++-- src/pages/WalletsPage.jsx | 8 ++--- 20 files changed, 73 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 3788493..e59fcdc 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + diff --git a/src/App.jsx b/src/App.jsx index 5725707..1bb6e37 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -37,7 +37,7 @@ export const App = () => { return ( -
+
}> } /> diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx index a0f2109..17a00ab 100644 --- a/src/components/ErrorBoundary.jsx +++ b/src/components/ErrorBoundary.jsx @@ -17,17 +17,17 @@ export class ErrorBoundary extends Component { render() { if (this.state.hasError) { return ( -
-
-
⚠️
-

Something went wrong

-

+

+
+
⚠️
+

Something went wrong

+

We're sorry, but something unexpected happened. Please refresh the page to try again.

diff --git a/src/components/features/dashboard/KpiCard.jsx b/src/components/features/dashboard/KpiCard.jsx index 7ea6ac3..c05eda7 100644 --- a/src/components/features/dashboard/KpiCard.jsx +++ b/src/components/features/dashboard/KpiCard.jsx @@ -21,28 +21,28 @@ export const KpiCard = ({ const cardClassName = resolvedTone === 'highlight' - ? 'bg-gradient-to-r from-[#58b098] to-[#4a9d84] text-white shadow-lg' + ? 'bg-gradient-to-r from-primary to-[#4a9d8e] text-white' : resolvedTone === 'neutral' - ? 'bg-gradient-to-r from-sky-50 to-sky-100 border border-sky-200 text-slate-900' + ? 'bg-[rgba(101,167,165,0.06)] border border-border-accent' : 'bg-dark-card'; const titleClassName = resolvedTone === 'highlight' ? 'text-sm text-white/90' : resolvedTone === 'neutral' - ? 'text-sm text-sky-700' + ? 'text-sm text-text-muted' : 'text-sm text-text-muted'; const valueClassName = resolvedTone === 'highlight' ? 'text-3xl font-bold text-white' : resolvedTone === 'neutral' - ? 'text-2xl font-semibold text-slate-900' + ? 'text-2xl font-semibold text-text-primary' : 'text-2xl font-semibold text-text-primary'; return (

{title}

diff --git a/src/components/features/deposits/DepositOptionCard.jsx b/src/components/features/deposits/DepositOptionCard.jsx index 0e0b9bf..c292478 100644 --- a/src/components/features/deposits/DepositOptionCard.jsx +++ b/src/components/features/deposits/DepositOptionCard.jsx @@ -31,7 +31,7 @@ export const DepositOptionCard = ({ option }) => { const detailEntries = Object.entries(details).filter(([, v]) => v); return ( - +

{option.label}

diff --git a/src/components/features/wallets/WalletCard.jsx b/src/components/features/wallets/WalletCard.jsx index fc3befc..0d0b1d7 100644 --- a/src/components/features/wallets/WalletCard.jsx +++ b/src/components/features/wallets/WalletCard.jsx @@ -19,13 +19,15 @@ export const WalletCard = ({ network, address, icon }) => { }; return ( - +
{icon && {icon}}
-

{network}

-

{truncateAddress(address, 8, 6)}

+

{network}

+

+ {truncateAddress(address, 8, 6)} +

diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx index 48e2747..f8e419b 100644 --- a/src/components/ui/Button.jsx +++ b/src/components/ui/Button.jsx @@ -7,15 +7,15 @@ export const Button = ({ className = '', }) => { const baseStyles = - 'px-6 py-3 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg disabled:opacity-50 disabled:cursor-not-allowed'; + 'px-6 py-3 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg disabled:opacity-50 disabled:cursor-not-allowed'; const variants = { primary: 'bg-primary text-white hover:bg-primary/80 focus:ring-primary', secondary: - 'bg-dark-section text-text-primary border border-border-dark hover:bg-accent-dim focus:ring-primary', + 'bg-accent-dim text-white border border-[rgba(101,167,165,0.45)] hover:bg-accent-glow hover:border-primary focus:ring-primary', danger: 'bg-error text-white hover:bg-error/80 focus:ring-error', outline: - 'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary', + 'border border-[rgba(101,167,165,0.45)] text-primary bg-accent-dim hover:bg-accent-glow hover:border-primary focus:ring-primary', }; return ( diff --git a/src/components/ui/Button.test.jsx b/src/components/ui/Button.test.jsx index 60bd5c3..f73e303 100644 --- a/src/components/ui/Button.test.jsx +++ b/src/components/ui/Button.test.jsx @@ -24,7 +24,7 @@ describe('Button', () => { it('applies secondary variant styles', () => { render(); const button = screen.getByText('Secondary'); - expect(button).toHaveClass('bg-dark-section'); + expect(button).toHaveClass('bg-accent-dim'); }); it('applies danger variant styles', () => { @@ -36,7 +36,7 @@ describe('Button', () => { it('applies outline variant styles', () => { render(); const button = screen.getByText('Outline'); - expect(button).toHaveClass('border-2'); + expect(button).toHaveClass('bg-accent-dim'); }); it('disables button when disabled prop is true', () => { diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx index 25737d2..90f196c 100644 --- a/src/components/ui/Card.jsx +++ b/src/components/ui/Card.jsx @@ -1,6 +1,8 @@ export const Card = ({ children, className = '', title }) => { return ( -
+
{title &&

{title}

} {children}
diff --git a/src/components/ui/ConfirmModal.jsx b/src/components/ui/ConfirmModal.jsx index c68d45d..47082c8 100644 --- a/src/components/ui/ConfirmModal.jsx +++ b/src/components/ui/ConfirmModal.jsx @@ -29,7 +29,7 @@ export const ConfirmModal = ({
{
{title &&
{title}
}
{message}
-
diff --git a/src/components/ui/Toast.test.jsx b/src/components/ui/Toast.test.jsx index d817c7d..bca74db 100644 --- a/src/components/ui/Toast.test.jsx +++ b/src/components/ui/Toast.test.jsx @@ -18,13 +18,13 @@ describe('Toast', () => { const { rerender, container } = render( {}} />, ); - expect(container.querySelector('.bg-green-500')).toBeInTheDocument(); + expect(container.querySelector('.bg-success')).toBeInTheDocument(); rerender( {}} />); - expect(container.querySelector('.bg-red-500')).toBeInTheDocument(); + expect(container.querySelector('.bg-error')).toBeInTheDocument(); rerender( {}} />); - expect(container.querySelector('.bg-blue-500')).toBeInTheDocument(); + expect(container.querySelector('.bg-primary')).toBeInTheDocument(); }); it('calls onClose when close button is clicked', () => { diff --git a/src/index.css b/src/index.css index 88d1d54..76bdca2 100644 --- a/src/index.css +++ b/src/index.css @@ -11,6 +11,8 @@ -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; } input, @@ -19,7 +21,7 @@ background: rgba(20, 20, 20, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.5rem; - padding: 0.625rem 1rem; + padding: 0.75rem 1rem; color: #e8e8e8; font-family: 'Montserrat', diff --git a/src/pages/ChangePasswordPage.jsx b/src/pages/ChangePasswordPage.jsx index 75d1af4..68b7882 100644 --- a/src/pages/ChangePasswordPage.jsx +++ b/src/pages/ChangePasswordPage.jsx @@ -49,21 +49,23 @@ export const ChangePasswordPage = () => { return (
-

{t('auth.changePassword.title')}

-

{t('auth.changePassword.subtitle')}

+

+ {t('auth.changePassword.title')} +

+

{t('auth.changePassword.subtitle')}

{!isEmailUser && ( -
+
{t('auth.changePassword.googleInfo')}
)} -
+
@@ -73,13 +75,16 @@ export const ChangePasswordPage = () => { required value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" + className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none" autoComplete="current-password" />
-