diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx index 8a24c39..52487c4 100644 --- a/app/admin/login/page.tsx +++ b/app/admin/login/page.tsx @@ -39,16 +39,18 @@ export default function AdminLoginPage() { width: '60px', height: '60px', borderRadius: '18px', - background: 'var(--accent)', + background: 'var(--card-bg)', + border: '1px solid var(--card-border)', + backdropFilter: 'blur(16px)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: '1rem', - boxShadow: '0 8px 24px var(--accent-glow)', + boxShadow: 'var(--card-shadow)', }}> - + -

+

Administration

@@ -62,16 +64,29 @@ export default function AdminLoginPage() { - + {error && ( -

+

{error}

)} - diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 3d838c2..e05994c 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -23,21 +23,26 @@ export default async function AdminPage() { {/* Header */}
- - + +
-

+

Administration

-

+

{buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''}

@@ -46,16 +51,18 @@ export default async function AdminPage() {
- diff --git a/app/globals.css b/app/globals.css index f6bc708..a25e59d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -45,8 +45,8 @@ --error: #ff3b30; --success: #34c759; - --glow-1: rgba(140, 50, 255, 0.05); - --glow-2: rgba(50, 140, 255, 0.05); + --glow-1: rgba(140, 50, 255, 0.2); + --glow-2: rgba(50, 140, 255, 0.2); } *, *::before, *::after { @@ -75,25 +75,26 @@ body { body::before, body::after { content: ''; position: fixed; - width: 60vw; - height: 60vw; + width: 80vw; + height: 80vw; border-radius: 50%; - filter: blur(140px); + filter: blur(180px); + -webkit-filter: blur(180px); z-index: -1; pointer-events: none; - opacity: 0.8; + opacity: 0.85; transition: background 300ms ease; } body::before { - top: -20vw; - left: -10vw; + top: -30vw; + left: -20vw; background: var(--glow-1); } body::after { - bottom: -20vw; - right: -10vw; + bottom: -30vw; + right: -20vw; background: var(--glow-2); } diff --git a/app/setup/page.tsx b/app/setup/page.tsx index ca83aa7..b076285 100644 --- a/app/setup/page.tsx +++ b/app/setup/page.tsx @@ -39,16 +39,18 @@ export default function SetupPage() { width: '64px', height: '64px', borderRadius: '18px', - background: 'var(--accent)', + background: 'var(--card-bg)', + border: '1px solid var(--card-border)', + backdropFilter: 'blur(16px)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: '1rem', - boxShadow: '0 8px 24px var(--accent-glow)', + boxShadow: 'var(--card-shadow)', }}> - +
-

+

Configuration

@@ -62,22 +64,35 @@ export default function SetupPage() { - +

- +
{error && ( -

+

{error}

)} - diff --git a/components/AddButtonForm.tsx b/components/AddButtonForm.tsx index 67b4767..aa692a9 100644 --- a/components/AddButtonForm.tsx +++ b/components/AddButtonForm.tsx @@ -28,10 +28,12 @@ export function AddButtonForm() { return (
{/* Icon picker */}
-
); diff --git a/components/AdminButtonRow.tsx b/components/AdminButtonRow.tsx index 6f93a4f..b89256f 100644 --- a/components/AdminButtonRow.tsx +++ b/components/AdminButtonRow.tsx @@ -55,6 +55,8 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) { if (isEditing) { return (
{/* Trigger */} + {/* Picker panel */} {open && ( @@ -59,17 +63,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico left: 0, zIndex: 100, width: '320px', - background: 'rgba(25, 5, 35, 0.95)', + background: 'var(--bg-color)', backdropFilter: 'blur(30px)', WebkitBackdropFilter: 'blur(30px)', - border: '1px solid rgba(255,255,255,0.12)', + border: '1px solid var(--card-border)', borderRadius: '18px', padding: '1.1rem', - boxShadow: '0 20px 60px rgba(0,0,0,0.6)', + boxShadow: 'var(--card-shadow)', }}> {/* Search */}
- + {/* Icon grid */} -
{ onIconChange(name); }} style={{ - background: isSelected ? 'rgba(255,255,255,0.18)' : 'transparent', - border: isSelected ? '1px solid rgba(255,255,255,0.3)' : '1px solid transparent', + background: isSelected ? 'var(--accent-btn-hover)' : 'transparent', + border: isSelected ? '1px solid var(--card-border)' : '1px solid transparent', borderRadius: '8px', padding: '6px', cursor: 'pointer', display: 'flex', alignItems: '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'; }} > - + ); })} +
{/* Color palette */} -
-

+

+

COULEUR

{ICON_COLORS.map((c) => (
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx index b746709..2802cfe 100644 --- a/components/ThemeToggle.tsx +++ b/components/ThemeToggle.tsx @@ -17,10 +17,10 @@ export function ThemeToggle() { onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="Basculer le thème" style={{ - background: 'rgba(255,255,255,0.12)', + background: 'var(--card-bg)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', - border: '1px solid rgba(255,255,255,0.18)', + border: '1px solid var(--card-border)', borderRadius: '50%', width: '38px', height: '38px', @@ -28,12 +28,14 @@ export function ThemeToggle() { alignItems: 'center', justifyContent: 'center', 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' - ? - : + ? + : } );