Michael/Menu
1
0 Fork 0
mirror of https://github.com/R0m1k3/Menu.git synced 2026-10-11 17:28:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement admin authentication pages and reusable UI components including GlassCard, IconPicker, and ThemeToggle

Browse Source
This commit is contained in:
Michael committed 2026-04-10 11:37:44 +02:00
1 parent 229b3525d3
commit d253eff0fa
9 files changed
+133 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/admin/login/page.tsx
+22 -7
View File
@@ -39,16 +39,18 @@ export default function AdminLoginPage() {
width: '60px', width: '60px',
height: '60px', height: '60px',
borderRadius: '18px', borderRadius: '18px',
background: 'var(--accent)', background: 'var(--card-bg)',
border: '1px solid var(--card-border)',
backdropFilter: 'blur(16px)',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
marginBottom: '1rem', marginBottom: '1rem',
boxShadow: '0 8px 24px var(--accent-glow)', boxShadow: 'var(--card-shadow)',
}}> }}>
<Lock size={26} color="white" /> <Lock size={26} color="var(--fg)" />
</div> </div>
<h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em' }}> <h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)' }}>
Administration Administration
</h1> </h1>
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}> <p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}>
@@ -62,16 +64,29 @@ export default function AdminLoginPage() {
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}> <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
Mot de passe Mot de passe
</label> </label>
<input name="password" type="password" required placeholder="••••••••" /> <input name="password" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
</div> </div>
{error && ( {error && (
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}> <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'var(--card-hover-bg)', padding: '0.6rem', borderRadius: '8px' }}>
{error} {error}
</p> </p>
)} )}
<button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}> <button type="submit" disabled={loading} className="btn-primary" style={{
marginTop: '0.4rem',
width: '100%',
background: 'var(--fg)',
color: 'var(--bg-color)',
padding: '0.85rem',
borderRadius: '12px',
fontWeight: 600,
fontSize: '0.95rem',
cursor: 'pointer',
border: 'none',
transition: 'opacity 200ms',
opacity: loading ? 0.6 : 1
}}>
{loading ? 'Connexion...' : 'Se connecter →'} {loading ? 'Connexion...' : 'Se connecter →'}
</button> </button>
</form> </form>
app/admin/page.tsx
+17 -10
View File
@@ -23,21 +23,26 @@ export default async function AdminPage() {
{/* Header */} {/* Header */}
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem' }}> <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<Link href="/" style={{ <Link href="/" className="back-btn" style={{
background: 'rgba(255,255,255,0.1)', background: 'var(--card-bg)',
backdropFilter: 'blur(16px)', backdropFilter: 'blur(16px)',
border: '1px solid rgba(255,255,255,0.15)', border: '1px solid var(--card-border)',
borderRadius: '50%', borderRadius: '50%',
width: '36px', height: '36px', width: '36px', height: '36px',
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
transition: 'all 200ms ease'
}}> }}>
<ArrowLeft size={15} color="rgba(255,255,255,0.8)" /> <ArrowLeft size={15} color="var(--fg-secondary)" />
</Link> </Link>
<style>{`
.back-btn:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; }
.logout-btn:hover { background: var(--card-hover-bg) !important; color: var(--fg) !important; }
`}</style>
<div> <div>
<h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#fff' }}> <h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--fg)' }}>
Administration Administration
</h1> </h1>
<p style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', marginTop: '0.1rem' }}> <p style={{ fontSize: '0.8rem', color: 'var(--fg-muted)', marginTop: '0.1rem' }}>
{buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''} {buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''}
</p> </p>
</div> </div>
@@ -46,16 +51,18 @@ export default async function AdminPage() {
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
<ThemeToggle /> <ThemeToggle />
<form action={logoutAdmin}> <form action={logoutAdmin}>
<button type="submit" style={{ <button type="submit" className="logout-btn" style={{
background: 'rgba(255,255,255,0.08)', background: 'var(--accent-btn-bg)',
backdropFilter: 'blur(12px)', backdropFilter: 'blur(12px)',
border: '1px solid rgba(255,255,255,0.12)', border: '1px solid var(--card-border)',
borderRadius: '50px', borderRadius: '50px',
padding: '0.45rem 0.9rem', padding: '0.45rem 0.9rem',
color: 'rgba(255,255,255,0.6)', color: 'var(--fg-secondary)',
fontSize: '0.82rem', fontSize: '0.82rem',
fontWeight: 500, fontWeight: 500,
display: 'flex', alignItems: 'center', gap: '0.4rem', display: 'flex', alignItems: 'center', gap: '0.4rem',
cursor: 'pointer',
transition: 'all 200ms ease',
}}> }}>
<LogOut size={13} /> Déconnexion <LogOut size={13} /> Déconnexion
</button> </button>
app/globals.css
+11 -10
View File
@@ -45,8 +45,8 @@
--error: #ff3b30; --error: #ff3b30;
--success: #34c759; --success: #34c759;
--glow-1: rgba(140, 50, 255, 0.05); --glow-1: rgba(140, 50, 255, 0.2);
--glow-2: rgba(50, 140, 255, 0.05); --glow-2: rgba(50, 140, 255, 0.2);
} }
*, *::before, *::after { *, *::before, *::after {
@@ -75,25 +75,26 @@ body {
body::before, body::after { body::before, body::after {
content: ''; content: '';
position: fixed; position: fixed;
width: 60vw; width: 80vw;
height: 60vw; height: 80vw;
border-radius: 50%; border-radius: 50%;
filter: blur(140px); filter: blur(180px);
-webkit-filter: blur(180px);
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
opacity: 0.8; opacity: 0.85;
transition: background 300ms ease; transition: background 300ms ease;
} }
body::before { body::before {
top: -20vw; top: -30vw;
left: -10vw; left: -20vw;
background: var(--glow-1); background: var(--glow-1);
} }
body::after { body::after {
bottom: -20vw; bottom: -30vw;
right: -10vw; right: -20vw;
background: var(--glow-2); background: var(--glow-2);
} }
app/setup/page.tsx
+23 -8
View File
@@ -39,16 +39,18 @@ export default function SetupPage() {
width: '64px', width: '64px',
height: '64px', height: '64px',
borderRadius: '18px', borderRadius: '18px',
background: 'var(--accent)', background: 'var(--card-bg)',
border: '1px solid var(--card-border)',
backdropFilter: 'blur(16px)',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
marginBottom: '1rem', marginBottom: '1rem',
boxShadow: '0 8px 24px var(--accent-glow)', boxShadow: 'var(--card-shadow)',
}}> }}>
<Lock size={28} color="white" /> <Lock size={28} color="var(--fg)" />
</div> </div>
<h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em' }}> <h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)' }}>
Configuration Configuration
</h1> </h1>
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.4rem' }}> <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.4rem' }}>
@@ -62,22 +64,35 @@ export default function SetupPage() {
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}> <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
Mot de passe Mot de passe
</label> </label>
<input name="password" type="password" required placeholder="••••••••" /> <input name="password" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
</div> </div>
<div> <div>
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}> <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
Confirmer Confirmer
</label> </label>
<input name="confirm" type="password" required placeholder="••••••••" /> <input name="confirm" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
</div> </div>
{error && ( {error && (
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}> <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'var(--card-hover-bg)', padding: '0.6rem', borderRadius: '8px' }}>
{error} {error}
</p> </p>
)} )}
<button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}> <button type="submit" disabled={loading} className="btn-primary" style={{
marginTop: '0.4rem',
width: '100%',
background: 'var(--fg)',
color: 'var(--bg-color)',
padding: '0.85rem',
borderRadius: '12px',
fontWeight: 600,
fontSize: '0.95rem',
cursor: 'pointer',
border: 'none',
transition: 'opacity 200ms',
opacity: loading ? 0.6 : 1
}}>
{loading ? 'Configuration...' : 'Créer le compte admin →'} {loading ? 'Configuration...' : 'Créer le compte admin →'}
</button> </button>
</form> </form>
components/AddButtonForm.tsx
+15 -9
View File
@@ -28,10 +28,12 @@ export function AddButtonForm() {
return ( return (
<div style={{ <div style={{
background: 'rgba(255,255,255,0.07)', position: 'relative',
zIndex: 50,
background: 'var(--card-bg)',
backdropFilter: 'blur(24px)', backdropFilter: 'blur(24px)',
WebkitBackdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
border: '1px solid rgba(255,255,255,0.12)', border: '1px solid var(--card-border)',
borderRadius: '20px', borderRadius: '20px',
padding: '1.75rem', padding: '1.75rem',
marginBottom: '2rem', marginBottom: '2rem',
@@ -39,7 +41,7 @@ export function AddButtonForm() {
<h2 style={{ <h2 style={{
fontSize: '0.78rem', fontSize: '0.78rem',
fontWeight: 700, fontWeight: 700,
color: 'rgba(255,255,255,0.4)', color: 'var(--fg-muted)',
marginBottom: '1.25rem', marginBottom: '1.25rem',
letterSpacing: '0.08em', letterSpacing: '0.08em',
display: 'flex', display: 'flex',
@@ -52,7 +54,7 @@ export function AddButtonForm() {
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}> <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
{/* Icon picker */} {/* Icon picker */}
<div> <div>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}> <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
ICÔNE ICÔNE
</label> </label>
<IconPicker <IconPicker
@@ -65,7 +67,7 @@ export function AddButtonForm() {
{/* Name */} {/* Name */}
<div style={{ flex: '1 1 140px' }}> <div style={{ flex: '1 1 140px' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}> <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
NOM NOM
</label> </label>
<input name="name" type="text" placeholder="Ex: Slack, Notion…" required /> <input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
@@ -73,19 +75,20 @@ export function AddButtonForm() {
{/* URL */} {/* URL */}
<div style={{ flex: '2 1 240px' }}> <div style={{ flex: '2 1 240px' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}> <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
URL URL
</label> </label>
<input name="url" type="url" placeholder="https://…" required /> <input name="url" type="url" placeholder="https://…" required />
</div> </div>
<button <button
className="add-btn"
type="submit" type="submit"
disabled={loading} disabled={loading}
style={{ style={{
background: 'rgba(255,255,255,0.14)', background: 'var(--accent-btn-hover)',
border: '1px solid rgba(255,255,255,0.2)', border: '1px solid var(--card-border)',
color: '#fff', color: 'var(--fg)',
padding: '0.78rem 1.25rem', padding: '0.78rem 1.25rem',
borderRadius: '12px', borderRadius: '12px',
fontWeight: 600, fontWeight: 600,
@@ -99,6 +102,9 @@ export function AddButtonForm() {
> >
{loading ? '…' : 'Ajouter →'} {loading ? '…' : 'Ajouter →'}
</button> </button>
<style>{`
.add-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
`}</style>
</form> </form>
</div> </div>
); );
components/AdminButtonRow.tsx
+2
View File
@@ -55,6 +55,8 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
if (isEditing) { if (isEditing) {
return ( return (
<div style={{ <div style={{
position: 'relative',
zIndex: 40,
background: 'var(--card-bg)', background: 'var(--card-bg)',
backdropFilter: 'blur(20px)', backdropFilter: 'blur(20px)',
border: '1px solid var(--card-hover-border)', border: '1px solid var(--card-hover-border)',
components/GlassCard.module.css
+8 -6
View File
@@ -1,15 +1,17 @@
.card { .card {
background: var(--glass-bg); background: var(--card-bg);
backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
-webkit-backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
border: 1px solid var(--glass-border); border: 1px solid var(--card-border);
box-shadow: var(--glass-shadow); box-shadow: var(--card-shadow);
border-radius: 20px; border-radius: 20px;
transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
} }
.hoverable:hover { .hoverable:hover {
box-shadow: var(--glass-hover-shadow); background: var(--card-hover-bg);
border-color: var(--card-hover-border);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
transform: translateY(-4px); transform: translateY(-4px);
} }
components/IconPicker.tsx
+28 -20
View File
@@ -26,24 +26,28 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{/* Trigger */} {/* Trigger */}
<button <button
className="icon-picker-trigger"
type="button" type="button"
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
title="Choisir une icône" title="Choisir une icône"
style={{ style={{
width: '56px', height: '56px', width: '56px', height: '56px',
borderRadius: '14px', borderRadius: '14px',
background: 'rgba(255,255,255,0.08)', background: 'var(--card-bg)',
border: '1px solid rgba(255,255,255,0.15)', border: '1px solid var(--card-border)',
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flexShrink: 0, flexShrink: 0,
transition: 'background 200ms ease', transition: 'all 200ms ease',
}} }}
> >
<SelectedIcon size={28} color={color} strokeWidth={1.8} /> <SelectedIcon size={28} color={color} strokeWidth={1.8} />
</button> </button>
<style>{`
.icon-picker-trigger:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; transform: scale(1.05); }
`}</style>
{/* Picker panel */} {/* Picker panel */}
{open && ( {open && (
@@ -59,17 +63,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
left: 0, left: 0,
zIndex: 100, zIndex: 100,
width: '320px', width: '320px',
background: 'rgba(25, 5, 35, 0.95)', background: 'var(--bg-color)',
backdropFilter: 'blur(30px)', backdropFilter: 'blur(30px)',
WebkitBackdropFilter: 'blur(30px)', WebkitBackdropFilter: 'blur(30px)',
border: '1px solid rgba(255,255,255,0.12)', border: '1px solid var(--card-border)',
borderRadius: '18px', borderRadius: '18px',
padding: '1.1rem', padding: '1.1rem',
boxShadow: '0 20px 60px rgba(0,0,0,0.6)', boxShadow: 'var(--card-shadow)',
}}> }}>
{/* Search */} {/* Search */}
<div style={{ position: 'relative', marginBottom: '0.85rem' }}> <div style={{ position: 'relative', marginBottom: '0.85rem' }}>
<Search size={14} color="rgba(255,255,255,0.4)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} /> <Search size={14} color="var(--fg-muted)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} />
<input <input
type="text" type="text"
placeholder="Rechercher…" placeholder="Rechercher…"
@@ -81,7 +85,7 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
</div> </div>
{/* Icon grid */} {/* Icon grid */}
<div style={{ <div className="icon-grid" style={{
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(7, 1fr)', gridTemplateColumns: 'repeat(7, 1fr)',
gap: '4px', gap: '4px',
@@ -95,38 +99,41 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
return ( return (
<button <button
key={name} key={name}
className={`icon-btn ${isSelected ? 'selected' : ''}`}
type="button" type="button"
title={name} title={name}
onClick={() => { onIconChange(name); }} onClick={() => { onIconChange(name); }}
style={{ style={{
background: isSelected ? 'rgba(255,255,255,0.18)' : 'transparent', background: isSelected ? 'var(--accent-btn-hover)' : 'transparent',
border: isSelected ? '1px solid rgba(255,255,255,0.3)' : '1px solid transparent', border: isSelected ? '1px solid var(--card-border)' : '1px solid transparent',
borderRadius: '8px', borderRadius: '8px',
padding: '6px', padding: '6px',
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
transition: 'background 120ms', transition: 'all 120ms',
}} }}
onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; }}
onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
> >
<Icon size={18} color={isSelected ? color : 'rgba(255,255,255,0.65)'} strokeWidth={1.7} /> <Icon size={18} color={isSelected ? color : 'var(--fg-secondary)'} strokeWidth={1.7} />
</button> </button>
); );
})} })}
<style>{`
.icon-btn:hover:not(.selected) { background: var(--accent-btn-bg) !important; }
`}</style>
</div> </div>
{/* Color palette */} {/* Color palette */}
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '0.85rem' }}> <div style={{ borderTop: '1px solid var(--card-border)', paddingTop: '0.85rem' }}>
<p style={{ fontSize: '0.7rem', color: 'rgba(255,255,255,0.35)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}> <p style={{ fontSize: '0.7rem', color: 'var(--fg-muted)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}>
COULEUR COULEUR
</p> </p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
{ICON_COLORS.map((c) => ( {ICON_COLORS.map((c) => (
<button <button
key={c.value} key={c.value}
className="color-btn"
type="button" type="button"
title={c.label} title={c.label}
onClick={() => onColorChange(c.value)} onClick={() => onColorChange(c.value)}
@@ -135,16 +142,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
borderRadius: '50%', borderRadius: '50%',
background: c.value, background: c.value,
border: color === c.value border: color === c.value
? '2px solid white' ? `2px solid var(--fg)`
: '2px solid transparent', : '2px solid transparent',
boxShadow: color === c.value ? '0 0 0 2px rgba(255,255,255,0.3)' : 'none', boxShadow: color === c.value ? `0 0 0 2px var(--card-border)` : 'none',
cursor: 'pointer', cursor: 'pointer',
transition: 'transform 150ms', transition: 'transform 150ms',
}} }}
onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.15)')}
onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
/> />
))} ))}
<style>{`
.color-btn:hover { transform: scale(1.15) !important; }
`}</style>
</div> </div>
</div> </div>
</div> </div>
components/ThemeToggle.tsx
+7 -5
View File
@@ -17,10 +17,10 @@ export function ThemeToggle() {
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
aria-label="Basculer le thème" aria-label="Basculer le thème"
style={{ style={{
background: 'rgba(255,255,255,0.12)', background: 'var(--card-bg)',
backdropFilter: 'blur(16px)', backdropFilter: 'blur(16px)',
WebkitBackdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
border: '1px solid rgba(255,255,255,0.18)', border: '1px solid var(--card-border)',
borderRadius: '50%', borderRadius: '50%',
width: '38px', width: '38px',
height: '38px', height: '38px',
@@ -28,12 +28,14 @@ export function ThemeToggle() {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
cursor: 'pointer', cursor: 'pointer',
transition: 'background 260ms ease', transition: 'all 260ms ease',
}} }}
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
> >
{theme === 'dark' {theme === 'dark'
? <Sun size={15} color="rgba(255,255,255,0.85)" /> ? <Sun size={15} color="var(--fg-secondary)" />
: <Moon size={15} color="rgba(255,255,255,0.85)" /> : <Moon size={15} color="var(--fg-secondary)" />
} }
</button> </button>
); );