From 18f03982103dcf0a0ad3f1b997a13dd4a041a22a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaime=20Garc=C3=ADa=20M=C3=A9ndez?=
 <jaimegarciamendez@gmail.com>
Date: Tue, 24 Mar 2026 15:59:19 -0500
Subject: [PATCH] Premium UI refinements: depth, hierarchy and fintech polish

- Unified radial gradient background across all pages (login, app, error)
- Logo: +15% size, green glow, more spacing from nav
- Nav icons: +22% desktop, green default color, animated underline hover
- Cards: green glow on hover, brighter borders, highlight variant
- Deposits: green section titles, better copy button contrast
- Withdrawals: larger radio buttons, brighter submit with elevation
- Tables: alternating row tint, softer dividers, enhanced status badges
- Chart: line glow filter, stronger gradient fill, brighter hover point
- Button primary: brighter with hover elevation and glow
---
 src/App.jsx                                   |   2 +-
 src/components/ErrorBoundary.jsx              |   2 +-
 .../features/deposits/DepositOptionsList.jsx  |   6 +-
 .../features/requests/WithdrawalForm.jsx      |  10 +-
 src/components/layout/Header.jsx              |  16 ++-
 src/components/ui/Button.jsx                  |   2 +-
 src/index.css                                 | 122 ++++++++++++------
 src/pages/DashboardPage.jsx                   |  36 ++++--
 src/pages/HistoryPage.jsx                     |   7 +-
 src/pages/LoginPage.jsx                       |   2 +-
 src/pages/OperatingPage.jsx                   |   7 +-
 src/pages/RequestsPage.jsx                    |   9 +-
 src/pages/WalletsPage.jsx                     |   9 +-
 13 files changed, 157 insertions(+), 73 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1bb6e37..6a3a9e0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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 />} />
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
index 17a00ab..692687d 100644
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -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>
diff --git a/src/components/features/deposits/DepositOptionsList.jsx b/src/components/features/deposits/DepositOptionsList.jsx
index cf15e49..5ca6f7f 100644
--- a/src/components/features/deposits/DepositOptionsList.jsx
+++ b/src/components/features/deposits/DepositOptionsList.jsx
@@ -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} />
             ))}
diff --git a/src/components/features/requests/WithdrawalForm.jsx b/src/components/features/requests/WithdrawalForm.jsx
index f3aab28..b0f7a5b 100644
--- a/src/components/features/requests/WithdrawalForm.jsx
+++ b/src/components/features/requests/WithdrawalForm.jsx
@@ -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>
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 2f6e302..d9de7d5 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -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>
 
@@ -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>
@@ -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
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
index ac895b0..317e533 100644
--- a/src/components/ui/Button.jsx
+++ b/src/components/ui/Button.jsx
@@ -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:
diff --git a/src/index.css b/src/index.css
index 8538b2a..c1e00c4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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:
@@ -63,7 +61,7 @@
     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:
@@ -71,43 +69,50 @@
       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:
@@ -115,14 +120,17 @@
       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 {
@@ -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 {
@@ -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 {
@@ -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%);
@@ -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;
+  }
 }
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
index fc49077..732962e 100644
--- a/src/pages/DashboardPage.jsx
+++ b/src/pages/DashboardPage.jsx
@@ -238,9 +238,16 @@ const PortfolioLineChart = ({ series, title, endAxisLabel }) => {
       >
         <defs>
           <linearGradient id="portfolioArea" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor="#65a7a5" stopOpacity="0.18" />
-            <stop offset="100%" stopColor="#65a7a5" stopOpacity="0.02" />
+            <stop offset="0%" stopColor="#65a7a5" stopOpacity="0.28" />
+            <stop offset="100%" stopColor="#65a7a5" stopOpacity="0.03" />
           </linearGradient>
+          <filter id="lineGlow">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
         </defs>
 
         {tickValues.map((v) => {
@@ -281,6 +288,7 @@ const PortfolioLineChart = ({ series, title, endAxisLabel }) => {
           strokeWidth="2"
           strokeLinejoin="round"
           strokeLinecap="round"
+          filter="url(#lineGlow)"
         />
 
         {points.map((point, idx) => (
@@ -296,13 +304,23 @@ const PortfolioLineChart = ({ series, title, endAxisLabel }) => {
         ))}
 
         {hoveredPoint && (
-          <circle
-            cx={hoveredPoint.x}
-            cy={hoveredPoint.y}
-            r="5"
-            fill="#65a7a5"
-            style={{ transition: 'r 0.2s, fill 0.2s' }}
-          />
+          <>
+            <circle
+              cx={hoveredPoint.x}
+              cy={hoveredPoint.y}
+              r="10"
+              fill="rgba(101,167,165,0.15)"
+              stroke="none"
+            />
+            <circle
+              cx={hoveredPoint.x}
+              cy={hoveredPoint.y}
+              r="5"
+              fill="#8dc8bf"
+              stroke="#65a7a5"
+              strokeWidth="1.5"
+            />
+          </>
         )}
 
         {hoveredPoint && (
diff --git a/src/pages/HistoryPage.jsx b/src/pages/HistoryPage.jsx
index 466b0d0..74404e7 100644
--- a/src/pages/HistoryPage.jsx
+++ b/src/pages/HistoryPage.jsx
@@ -561,9 +561,12 @@ export const HistoryPage = () => {
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
+                <tbody className="divide-y divide-[rgba(255,255,255,0.05)]">
                   {desktopVisibleRows.map((row, idx) => (
-                    <tr key={`${row.code}-${row.date}-${idx}`} className={desktopRowClass(row)}>
+                    <tr
+                      key={`${row.code}-${row.date}-${idx}`}
+                      className={`${desktopRowClass(row)} transition-colors duration-150 ${idx % 2 === 1 ? 'bg-[rgba(101,167,165,0.03)]' : ''}`}
+                    >
                       <td className="px-4 py-3 text-sm text-text-primary whitespace-nowrap">
                         {formatDate(row.date)}
                       </td>
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index 3d499ac..12f2b2b 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -77,7 +77,7 @@ export const LoginPage = () => {
   };
 
   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 backdrop-blur-sm">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-primary mb-2">Winbit</h1>
diff --git a/src/pages/OperatingPage.jsx b/src/pages/OperatingPage.jsx
index bf96957..e562a25 100644
--- a/src/pages/OperatingPage.jsx
+++ b/src/pages/OperatingPage.jsx
@@ -232,9 +232,12 @@ export const OperatingPage = () => {
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
+                <tbody className="divide-y divide-[rgba(255,255,255,0.05)]">
                   {desktopVisibleRows.map((row, idx) => (
-                    <tr key={`${row.code}-${row.date}-${idx}`} className={rowBgClass(row)}>
+                    <tr
+                      key={`${row.code}-${row.date}-${idx}`}
+                      className={`${rowBgClass(row)} transition-colors duration-150 ${idx % 2 === 1 ? 'bg-[rgba(101,167,165,0.03)]' : ''}`}
+                    >
                       <td className="px-4 py-3 text-sm text-text-primary whitespace-nowrap">
                         {formatDate(row.date)}
                       </td>
diff --git a/src/pages/RequestsPage.jsx b/src/pages/RequestsPage.jsx
index 5c9fe92..bec3f4b 100644
--- a/src/pages/RequestsPage.jsx
+++ b/src/pages/RequestsPage.jsx
@@ -153,11 +153,14 @@ export const RequestsPage = () => {
                       ))}
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
-                    {withdrawals.map((r) => {
+                  <tbody className="divide-y divide-[rgba(255,255,255,0.05)]">
+                    {withdrawals.map((r, idx) => {
                       const sc = statusConfig(r.status);
                       return (
-                        <tr key={r.id} className="hover:bg-[rgba(101,167,165,0.08)]">
+                        <tr
+                          key={r.id}
+                          className={`hover:bg-[rgba(101,167,165,0.08)] transition-colors duration-150 ${idx % 2 === 1 ? 'bg-[rgba(101,167,165,0.03)]' : ''}`}
+                        >
                           <td className="px-5 py-3 text-text-primary">{formatDate(r.date)}</td>
                           <td className="px-5 py-3 text-right font-mono font-semibold text-text-primary">
                             {formatCurrency(Number(r.amount))}
diff --git a/src/pages/WalletsPage.jsx b/src/pages/WalletsPage.jsx
index 207ec40..64e8318 100644
--- a/src/pages/WalletsPage.jsx
+++ b/src/pages/WalletsPage.jsx
@@ -217,11 +217,14 @@ export const WalletsPage = () => {
                       ))}
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
-                    {deposits.map((r) => {
+                  <tbody className="divide-y divide-[rgba(255,255,255,0.05)]">
+                    {deposits.map((r, idx) => {
                       const sc = statusConfig(r.status);
                       return (
-                        <tr key={r.id} className="hover:bg-[rgba(101,167,165,0.08)]">
+                        <tr
+                          key={r.id}
+                          className={`hover:bg-[rgba(101,167,165,0.08)] transition-colors duration-150 ${idx % 2 === 1 ? 'bg-[rgba(101,167,165,0.03)]' : ''}`}
+                        >
                           <td className="px-5 py-3 text-text-primary">{formatDate(r.date)}</td>
                           <td className="px-5 py-3 text-right font-mono font-semibold text-text-primary">
                             {formatCurrency(Number(r.amount))}