Skip to content

Premium visual overhaul: glassmorphism, radial bg, unified components #69

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 visual overhaul: glassmorphism, radial bg, unified components #69

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
108 changes: 100 additions & 8 deletions src/components/layout/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,101 @@ export const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

const navItems = [
{ path: '/dashboard', label: t('nav.dashboard') },
{ path: '/wallets', label: t('nav.deposits') },
{ path: '/requests', label: t('nav.withdrawals') },
{ path: '/history', label: t('nav.history') },
{ path: '/operational', label: t('nav.operating') },
{
path: '/dashboard',
label: t('nav.dashboard'),
icon: (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
/>
</svg>
),
},
{
path: '/wallets',
label: t('nav.deposits'),
icon: (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
/>
</svg>
),
},
{
path: '/requests',
label: t('nav.withdrawals'),
icon: (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
/>
</svg>
),
},
{
path: '/history',
label: t('nav.history'),
icon: (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
),
},
{
path: '/operational',
label: t('nav.operating'),
icon: (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"
/>
</svg>
),
},
];

const handleLanguageChange = (lng) => {
Expand All @@ -32,7 +122,7 @@ export const Header = () => {
<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">
<span className="text-2xl font-bold text-primary">Winbit</span>
<img src="/logo-winbit.png" alt="Winbit" className="h-8" />
</Link>

{user && (
Expand All @@ -41,12 +131,13 @@ export const Header = () => {
<Link
key={item.path}
to={item.path}
className={`font-medium transition-colors ${
className={`flex items-center gap-1.5 font-medium transition-colors ${
location.pathname === item.path
? 'text-primary'
: 'text-text-muted hover:text-primary'
}`}
>
<span className="opacity-50">{item.icon}</span>
{item.label}
</Link>
))}
Expand Down Expand Up @@ -165,13 +256,14 @@ export const Header = () => {
<Link
key={item.path}
to={item.path}
className={`rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
location.pathname === item.path
? 'bg-primary/10 text-primary'
: 'text-text-primary hover:bg-accent-dim hover:text-primary'
}`}
onClick={() => setIsMobileMenuOpen(false)}
>
<span className="opacity-50">{item.icon}</span>
{item.label}
</Link>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/Header.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('Header', () => {
it('renders logo', () => {
useAuth.mockReturnValue({ user: null, logout: vi.fn() });
renderWithRouter(<Header />);
expect(screen.getByText('Winbit')).toBeInTheDocument();
expect(screen.getByAltText('Winbit')).toBeInTheDocument();
});

it('renders navigation when user is logged in', () => {
Expand Down
6 changes: 3 additions & 3 deletions src/components/ui/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ export const Button = ({

const variants = {
primary:
'bg-[rgba(101,167,165,0.15)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.25)] hover:border-[rgba(101,167,165,0.55)] focus:ring-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',
secondary:
'bg-[rgba(101,167,165,0.10)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.18)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
'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:
'bg-[rgba(196,107,107,0.14)] text-[#c46b6b] border border-[rgba(196,107,107,0.18)] hover:bg-[rgba(196,107,107,0.22)] focus:ring-error',
outline:
'bg-[rgba(101,167,165,0.10)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.18)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
'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',
copy: 'btn-copy text-xs focus:ring-primary',
};

Expand Down
13 changes: 8 additions & 5 deletions src/components/ui/ConfirmModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,13 @@ export const ConfirmModal = ({

return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black transition-opacity" onClick={onCancel} />
<div
className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
onClick={onCancel}
/>

<div
className="relative w-full max-w-sm rounded-lg border-2 border-[rgba(255,152,0,0.3)] bg-[rgba(255,152,0,0.15)] p-8 backdrop-blur-md"
className="relative w-full max-w-sm rounded-lg border border-[rgba(101,167,165,0.25)] bg-[rgba(20,20,20,0.6)] backdrop-blur-xl p-8 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),0_10px_30px_rgba(0,0,0,0.35)]"
role="dialog"
aria-modal="true"
aria-labelledby="confirm-modal-title"
Expand Down Expand Up @@ -63,7 +66,7 @@ export const ConfirmModal = ({
</div>

{title && (
<h3 id="confirm-modal-title" className="text-xl font-bold text-text-primary">
<h3 id="confirm-modal-title" className="text-xl font-bold text-white">
{title}
</h3>
)}
Expand All @@ -74,14 +77,14 @@ export const ConfirmModal = ({
<button
onClick={onConfirm}
disabled={loading}
className="w-full px-6 py-3 bg-primary text-white font-semibold rounded-lg transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
className="w-full px-6 py-3 bg-[rgba(101,167,165,0.2)] text-white font-semibold rounded-lg border border-[rgba(101,167,165,0.35)] transition-all duration-200 hover:bg-[rgba(101,167,165,0.3)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
>
{loading ? 'Enviando...' : confirmLabel}
</button>
<button
onClick={onCancel}
disabled={loading}
className="w-full px-6 py-3 bg-dark-section border border-border-dark text-text-primary font-semibold rounded-lg transition-colors hover:bg-accent-dim focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
className="w-full px-6 py-3 bg-dark-section border border-border-dark text-text-primary font-semibold rounded-lg transition-all duration-200 hover:bg-accent-dim focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
>
{cancelLabel}
</button>
Expand Down
26 changes: 7 additions & 19 deletions src/components/ui/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,18 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {

if (!isOpen) return null;

const bgColorClass =
type === 'success'
? 'bg-[rgba(76,175,80,0.15)] border-[rgba(76,175,80,0.3)]'
: type === 'error'
? 'bg-[rgba(239,83,80,0.15)] border-[rgba(239,83,80,0.3)]'
: 'bg-[rgba(101,167,165,0.15)] border-[rgba(101,167,165,0.3)]';

const iconColorClass =
type === 'success' ? 'text-success' : type === 'error' ? 'text-error' : 'text-primary';

const buttonColorClass =
type === 'success'
? 'bg-success hover:bg-success/80 focus:ring-success'
: type === 'error'
? 'bg-error hover:bg-error/80 focus:ring-error'
: 'bg-primary hover:bg-primary/80 focus:ring-primary';

return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
{/* Backdrop */}
<div className="absolute inset-0 bg-black transition-opacity" onClick={onClose} />
<div
className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
onClick={onClose}
/>

<div
className={`relative w-full max-w-sm rounded-lg border-2 p-8 backdrop-blur-md ${bgColorClass}`}
className="relative w-full max-w-sm rounded-lg border border-[rgba(101,167,165,0.25)] bg-[rgba(20,20,20,0.6)] backdrop-blur-xl p-8 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),0_10px_30px_rgba(0,0,0,0.35)]"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
Expand Down Expand Up @@ -92,7 +80,7 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {

<div className="space-y-2">
{title && (
<h3 id="modal-title" className="text-xl font-bold text-text-primary">
<h3 id="modal-title" className="text-xl font-bold text-white">
{title}
</h3>
)}
Expand All @@ -101,7 +89,7 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {

<button
onClick={onClose}
className={`w-full mt-2 px-6 py-3 text-white font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg ${buttonColorClass}`}
className="w-full mt-2 px-6 py-3 bg-[rgba(101,167,165,0.2)] text-white font-semibold rounded-lg border border-[rgba(101,167,165,0.35)] transition-all duration-200 hover:bg-[rgba(101,167,165,0.3)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary"
>
Aceptar
</button>
Expand Down
Loading
Loading