Skip to content

Premium UI refinements: depth, hierarchy and fintech polish #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
quequeo merged 1 commit into from
Mar 24, 2026
Merged

Premium UI refinements: depth, hierarchy and fintech polish #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const App = () => {
return (
<ErrorBoundary>
<AuthProvider>
<div className="min-h-screen flex flex-col bg-dark-bg">
<div className="min-h-screen flex flex-col">
<Suspense fallback={<PageFallback />}>
<Routes>
<Route path="/login" element={<LoginPage />} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ErrorBoundary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export class ErrorBoundary extends Component {
render() {
if (this.state.hasError) {
return (
<div className="min-h-screen flex items-center justify-center bg-dark-bg px-4">
<div className="min-h-screen flex items-center justify-center px-4">
<div className="max-w-md w-full bg-dark-card rounded-lg border border-border-dark p-8 text-center backdrop-blur-sm">
<div className="text-error text-6xl mb-4">⚠️</div>
<h1 className="text-2xl font-bold text-text-primary mb-2">Something went wrong</h1>
Expand Down
6 changes: 3 additions & 3 deletions src/components/features/deposits/DepositOptionsList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@ export const DepositOptionsList = ({ options }) => {
const sortedCategories = CATEGORY_ORDER.filter((cat) => grouped[cat]);

return (
<div className="space-y-6">
<div className="space-y-8">
{sortedCategories.map((category) => (
<div key={category}>
<h3 className="text-lg font-semibold text-text-primary mb-3">
<h3 className="text-lg font-semibold text-primary mb-3">
{t(`deposits.categories.${category}`)}
</h3>
<div className="grid gap-4 md:grid-cols-2">
<div className="grid gap-5 md:grid-cols-2">
{grouped[category].map((opt) => (
<DepositOptionCard key={opt.id} option={opt} />
))}
Expand Down
10 changes: 5 additions & 5 deletions src/components/features/requests/WithdrawalForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,26 +151,26 @@ export const WithdrawalForm = ({ userEmail, currentBalance }) => {
<label className="block text-sm font-medium text-text-primary mb-3">
{t('withdrawals.form.type.label')} <span className="text-error">*</span>
</label>
<div className="flex gap-4">
<label className="flex items-center gap-2 cursor-pointer">
<div className="flex gap-5">
<label className="flex items-center gap-2.5 cursor-pointer">
<input
type="radio"
name="type"
value="partial"
checked={type === 'partial'}
onChange={(e) => setType(e.target.value)}
className="w-4 h-4 text-primary"
className="w-5 h-5 text-primary accent-[#65a7a5]"
/>
<span>{t('withdrawals.form.type.partial')}</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<label className="flex items-center gap-2.5 cursor-pointer">
<input
type="radio"
name="type"
value="full"
checked={type === 'full'}
onChange={(e) => setType(e.target.value)}
className="w-4 h-4 text-primary"
className="w-5 h-5 text-primary accent-[#65a7a5]"
/>
<span>{t('withdrawals.form.type.full')}</span>
</label>
Expand Down
16 changes: 10 additions & 6 deletions src/components/layout/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,14 @@ export const Header = () => {
<header className="bg-dark-card border-b border-border-dark">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16">
<Link to="/dashboard" className="flex items-center gap-2 pl-2 md:pl-0">
<Link to="/dashboard" className="flex items-center gap-2 pl-2 md:pl-0 mr-4 md:mr-6">
<img
src="/logo-winbit.png"
alt="Winbit"
className="h-12 md:h-14"
style={{ filter: 'brightness(1.15)' }}
className="h-14 md:h-16"
style={{
filter: 'brightness(1.15) drop-shadow(0 0 6px rgba(101,167,165,0.25))',
}}
/>
</Link>

Expand All @@ -49,13 +51,15 @@ export const Header = () => {
key={item.path}
to={item.path}
className={`nav-link flex items-center gap-2 font-medium transition-colors ${
isActive ? 'text-primary' : 'text-text-muted hover:text-primary'
isActive
? 'nav-link-active text-primary'
: 'text-text-muted hover:text-primary'
}`}
>
<img
src={item.icon}
alt=""
className={`w-[18px] h-[18px] nav-icon ${isActive ? 'nav-icon-active' : ''}`}
className={`w-[22px] h-[22px] nav-icon ${isActive ? 'nav-icon-active' : ''}`}
/>
{item.label}
</Link>
Expand Down Expand Up @@ -140,7 +144,7 @@ export const Header = () => {
<img
src="/icons/cambiar-contrasena.png"
alt=""
className="w-[18px] h-[18px] nav-icon"
className="w-[22px] h-[22px] nav-icon"
/>
</button>
<Button
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const Button = ({

const variants = {
primary:
'bg-[rgba(101,167,165,0.2)] text-white border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.3)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
'bg-[rgba(101,167,165,0.25)] text-white border border-[rgba(101,167,165,0.45)] hover:bg-[rgba(101,167,165,0.35)] hover:border-[rgba(101,167,165,0.65)] hover:-translate-y-0.5 hover:shadow-[0_0_14px_rgba(101,167,165,0.15)] focus:ring-primary',
secondary:
'bg-[rgba(101,167,165,0.1)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.2)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
danger:
Expand Down
122 changes: 86 additions & 36 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@

@layer base {
body {
background: radial-gradient(
circle at 30% 20%,
rgba(31, 122, 99, 0.25),
rgba(11, 15, 14, 1) 60%
);
background:
radial-gradient(ellipse at 20% 0%, rgba(31, 122, 99, 0.12), transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(31, 122, 99, 0.06), transparent 50%);
background-color: #0b0f0e;
color: #e8e8e8;
font-family:
Expand Down Expand Up @@ -63,66 +61,76 @@
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(101, 167, 165, 0.25);
border: 1px solid rgba(101, 167, 165, 0.3);
border-radius: 8px;
padding: 32px 30px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.02),
0 10px 30px rgba(0, 0, 0, 0.35);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.winbit-card:hover {
transform: translateY(-2px);
border-color: rgba(101, 167, 165, 0.4);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 14px 36px rgba(0, 0, 0, 0.4);
0 14px 36px rgba(0, 0, 0, 0.4),
0 0 18px rgba(101, 167, 165, 0.08);
}

.winbit-card--highlight {
background: rgba(20, 20, 20, 0.6);
background: rgba(20, 20, 20, 0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(101, 167, 165, 0.35);
border: 1px solid rgba(101, 167, 165, 0.4);
border-radius: 8px;
padding: 32px 30px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 12px 32px rgba(0, 0, 0, 0.38);
0 12px 32px rgba(0, 0, 0, 0.38),
0 0 12px rgba(101, 167, 165, 0.06);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.winbit-card--highlight:hover {
transform: translateY(-2px);
border-color: rgba(101, 167, 165, 0.5);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 16px 40px rgba(0, 0, 0, 0.42);
0 16px 40px rgba(0, 0, 0, 0.42),
0 0 22px rgba(101, 167, 165, 0.1);
}

.winbit-card--compact {
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(101, 167, 165, 0.25);
border: 1px solid rgba(101, 167, 165, 0.3);
border-radius: 8px;
padding: 24px 26px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.02),
0 10px 30px rgba(0, 0, 0, 0.35);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.winbit-card--compact:hover {
transform: translateY(-2px);
border-color: rgba(101, 167, 165, 0.4);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 14px 36px rgba(0, 0, 0, 0.4);
0 14px 36px rgba(0, 0, 0, 0.4),
0 0 18px rgba(101, 167, 165, 0.08);
}

.card-inner {
Expand All @@ -139,21 +147,21 @@
}

.badge-completed {
background: rgba(101, 167, 165, 0.14);
color: #8dc8bf;
border: 1px solid rgba(101, 167, 165, 0.2);
background: rgba(101, 167, 165, 0.18);
color: #9dd4cb;
border: 1px solid rgba(101, 167, 165, 0.28);
}

.badge-pending {
background: rgba(194, 170, 114, 0.14);
color: #c2aa72;
border: 1px solid rgba(194, 170, 114, 0.18);
background: rgba(194, 170, 114, 0.18);
color: #d4bf82;
border: 1px solid rgba(194, 170, 114, 0.25);
}

.badge-rejected {
background: rgba(196, 107, 107, 0.14);
color: #c46b6b;
border: 1px solid rgba(196, 107, 107, 0.18);
background: rgba(196, 107, 107, 0.18);
color: #d48080;
border: 1px solid rgba(196, 107, 107, 0.25);
}

.badge-cancelled {
Expand All @@ -170,42 +178,48 @@
}

.row-positive {
background: rgba(101, 167, 165, 0.1);
background: rgba(101, 167, 165, 0.08);
transition: background 0.15s ease;
}

.row-positive:hover {
background: rgba(101, 167, 165, 0.16);
background: rgba(101, 167, 165, 0.14);
}

.row-negative {
color: #d16b6b;
background: rgba(209, 107, 107, 0.08);
color: #d48080;
background: rgba(209, 107, 107, 0.06);
transition: background 0.15s ease;
}

.row-negative:hover {
background: rgba(209, 107, 107, 0.14);
background: rgba(209, 107, 107, 0.12);
}

.row-fee {
background: rgba(101, 167, 165, 0.1);
background: rgba(101, 167, 165, 0.08);
transition: background 0.15s ease;
}

.row-fee:hover {
background: rgba(101, 167, 165, 0.16);
background: rgba(101, 167, 165, 0.14);
}

.btn-copy {
background: rgba(101, 167, 165, 0.1);
border: 1px solid rgba(101, 167, 165, 0.4);
background: rgba(101, 167, 165, 0.14);
border: 1px solid rgba(101, 167, 165, 0.45);
color: #8dc8bf;
border-radius: 6px;
padding: 8px 16px;
font-weight: 500;
transition: all 0.2s ease;
}

.btn-copy:hover {
background: rgba(101, 167, 165, 0.18);
border-color: rgba(101, 167, 165, 0.55);
background: rgba(101, 167, 165, 0.24);
border-color: rgba(101, 167, 165, 0.65);
box-shadow: 0 0 10px rgba(101, 167, 165, 0.12);
transform: translateY(-1px);
}

.nav-icon {
Expand All @@ -216,6 +230,14 @@
opacity 0.2s ease;
}

@media (min-width: 768px) {
.nav-icon {
filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(950%) hue-rotate(127deg)
brightness(95%) contrast(87%);
opacity: 0.55;
}
}

.nav-icon-active {
filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(950%) hue-rotate(127deg)
brightness(95%) contrast(87%);
Expand All @@ -227,4 +249,32 @@
brightness(95%) contrast(87%);
opacity: 1;
}

.nav-link {
position: relative;
}

.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
background: rgba(101, 167, 165, 0.6);
box-shadow: 0 0 6px rgba(101, 167, 165, 0.3);
transition:
width 0.25s ease,
left 0.25s ease;
}

.nav-link:hover::after {
width: 100%;
left: 0;
}

.nav-link-active::after {
width: 100%;
left: 0;
}
}
Loading
Loading