Fix dark mode on synthesis panel and static pages
- Synthesis column: bg-[#F9F7F1] → dark:bg-card; noise overlay mix-blend-multiply → dark:mix-blend-overlay (avoids darkening an already dark background) - Mobile tab button active synthesis state: same bg fix - Submission alert (error): add dark:bg-amber-950/40 dark:text-amber-200 dark:border-amber-800/50 - not-found.tsx: bg-gray-50 → dark:bg-background; text colors use semantic tokens (text-foreground, text-muted-foreground) - flyer.tsx: control bar bg-white → dark:bg-card; printable flyer stays white intentionally Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -15,7 +15,7 @@ export default function Flyer() {
|
|||||||
<div className="min-h-screen bg-muted/20 flex flex-col items-center py-8 px-4 gap-6">
|
<div className="min-h-screen bg-muted/20 flex flex-col items-center py-8 px-4 gap-6">
|
||||||
|
|
||||||
{/* Barre de contrôle — masquée à l'impression */}
|
{/* Barre de contrôle — masquée à l'impression */}
|
||||||
<div className="no-print w-full max-w-xl bg-white border border-border/50 p-4 rounded-sm flex gap-2">
|
<div className="no-print w-full max-w-xl bg-white dark:bg-card border border-border/50 p-4 rounded-sm flex gap-2">
|
||||||
<Button onClick={() => window.print()} size="sm" className="gap-2">
|
<Button onClick={() => window.print()} size="sm" className="gap-2">
|
||||||
<Printer className="h-3.5 w-3.5" /> Imprimer / Exporter PDF
|
<Printer className="h-3.5 w-3.5" /> Imprimer / Exporter PDF
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -331,7 +331,7 @@ export default function Home() {
|
|||||||
Proposer
|
Proposer
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`flex-1 py-3 transition-colors flex items-center justify-center gap-1.5 ${mobileTab === "synthese" ? "border-b-2 border-primary text-primary bg-[#F9F7F1] font-bold" : "text-muted-foreground bg-background"}`}
|
className={`flex-1 py-3 transition-colors flex items-center justify-center gap-1.5 ${mobileTab === "synthese" ? "border-b-2 border-primary text-primary bg-[#F9F7F1] dark:bg-card font-bold" : "text-muted-foreground bg-background"}`}
|
||||||
onClick={() => setMobileTab("synthese")}
|
onClick={() => setMobileTab("synthese")}
|
||||||
>
|
>
|
||||||
Synthèse <span className="font-mono opacity-60">{countdown}s</span>
|
Synthèse <span className="font-mono opacity-60">{countdown}s</span>
|
||||||
@@ -436,7 +436,7 @@ export default function Home() {
|
|||||||
{submitResult && (
|
{submitResult && (
|
||||||
<Alert
|
<Alert
|
||||||
variant={submitResult.success ? "default" : "default"}
|
variant={submitResult.success ? "default" : "default"}
|
||||||
className={`mt-2 ${submitResult.success ? "" : "border-amber-300 bg-amber-50 text-amber-900"}`}
|
className={`mt-2 ${submitResult.success ? "" : "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-800/50 dark:bg-amber-950/40 dark:text-amber-200"}`}
|
||||||
data-testid={`alert-submit-${submitResult.success ? "success" : "info"}`}
|
data-testid={`alert-submit-${submitResult.success ? "success" : "info"}`}
|
||||||
>
|
>
|
||||||
{submitResult.success
|
{submitResult.success
|
||||||
@@ -555,9 +555,9 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Colonne droite : synthèse vivante */}
|
{/* Colonne droite : synthèse vivante */}
|
||||||
<div className={`flex flex-col bg-[#F9F7F1] relative overflow-hidden md:flex ${mobileTab === "synthese" ? "" : "hidden"}`}>
|
<div className={`flex flex-col bg-[#F9F7F1] dark:bg-card relative overflow-hidden md:flex ${mobileTab === "synthese" ? "" : "hidden"}`}>
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-multiply"
|
className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-multiply dark:mix-blend-overlay"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -3,14 +3,14 @@ import { AlertCircle } from "lucide-react";
|
|||||||
|
|
||||||
export default function NotFound() {
|
export default function NotFound() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
|
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50 dark:bg-background">
|
||||||
<Card className="w-full max-w-md mx-4">
|
<Card className="w-full max-w-md mx-4">
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
<div className="flex mb-4 gap-2">
|
<div className="flex mb-4 gap-2">
|
||||||
<AlertCircle className="h-8 w-8 text-red-500" />
|
<AlertCircle className="h-8 w-8 text-red-500" />
|
||||||
<h1 className="text-2xl font-bold text-gray-900">404 — Page introuvable</h1>
|
<h1 className="text-2xl font-bold text-foreground">404 — Page introuvable</h1>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-4 text-sm text-gray-600">
|
<p className="mt-4 text-sm text-muted-foreground">
|
||||||
Cette page n'existe pas.
|
Cette page n'existe pas.
|
||||||
</p>
|
</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user