From cfaa969401e24180593a8a272956de912eb74c52 Mon Sep 17 00:00:00 2001
From: Reviflow Bot <bot@reviflow.ai>
Date: Thu, 5 Feb 2026 21:36:11 +0100
Subject: [PATCH] fix(ui): refine dark mode styles for cards and modals

---
 frontend/src/pages/DashboardPage.tsx | 30 ++++++++++++++--------------
 frontend/src/pages/ParentHubPage.tsx | 30 ++++++++++++++--------------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index f849da7..e98c70c 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -140,12 +140,12 @@ function BadgeGalleryModal({ isOpen, onClose, unlockedBadges }: { isOpen: boolea
                         initial={{ opacity: 0, scale: 0.95, y: 30 }}
                         animate={{ opacity: 1, scale: 1, y: 0 }}
                         exit={{ opacity: 0, scale: 0.95, y: 30 }}
-                        className="relative z-10 bg-white/95 rounded-[2.5rem] shadow-2xl w-full max-w-4xl max-h-[85vh] overflow-hidden flex flex-col border border-white/20"
+                        className="relative z-10 bg-white/95 dark:bg-slate-900/95 rounded-[2.5rem] shadow-2xl w-full max-w-4xl max-h-[85vh] overflow-hidden flex flex-col border border-white/20 dark:border-slate-700/50"
                     >
                         {/* Header */}
-                        <div className="p-8 border-b border-gray-100 flex justify-between items-center bg-white/80 sticky top-0 z-20 backdrop-blur-sm">
+                        <div className="p-8 border-b border-gray-100 dark:border-slate-800 flex justify-between items-center bg-white/80 dark:bg-slate-900/80 sticky top-0 z-20 backdrop-blur-sm">
                             <div>
-                                <h3 className="text-3xl font-black text-gray-900 tracking-tight">Ma Collection 🏆</h3>
+                                <h3 className="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Ma Collection 🏆</h3>
                                 <div className="mt-2 flex items-center gap-3">
                                     <div className="h-2 w-48 bg-gray-100 rounded-full overflow-hidden border border-gray-200">
                                         <div
@@ -158,7 +158,7 @@ function BadgeGalleryModal({ isOpen, onClose, unlockedBadges }: { isOpen: boolea
                                     </span>
                                 </div>
                             </div>
-                            <button onClick={onClose} className="p-3 bg-gray-50 hover:bg-gray-100 rounded-2xl transition-all active:scale-95 text-gray-400">
+                            <button onClick={onClose} className="p-3 bg-gray-50 dark:bg-slate-800 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-2xl transition-all active:scale-95 text-gray-400">
                                 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M6 18L18 6M6 6l12 12" />
                                 </svg>
@@ -256,11 +256,11 @@ function AvatarSelector({ isOpen, onClose }: { isOpen: boolean, onClose: () => v
                         initial={{ opacity: 0, scale: 0.9, y: 20 }}
                         animate={{ opacity: 1, scale: 1, y: 0 }}
                         exit={{ opacity: 0, scale: 0.9, y: 20 }}
-                        className="relative z-10 bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-gray-100"
+                        className="relative z-10 bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-gray-100 dark:border-slate-700"
                     >
                         <div className="p-6">
                             <div className="flex justify-between items-center mb-6">
-                                <h3 className="text-xl font-bold text-gray-900">Choisis ton Avatar</h3>
+                                <h3 className="text-xl font-bold text-gray-900 dark:text-white">Choisis ton Avatar</h3>
                                 <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
                                     <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
@@ -274,7 +274,7 @@ function AvatarSelector({ isOpen, onClose }: { isOpen: boolean, onClose: () => v
                                         key={seed}
                                         onClick={() => handleSelect(seed)}
                                         disabled={sending}
-                                        className="aspect-square flex items-center justify-center p-2 bg-gray-50 rounded-full hover:bg-indigo-50 hover:scale-110 active:scale-95 transition-all outline-none border-2 border-transparent hover:border-indigo-200"
+                                        className="aspect-square flex items-center justify-center p-2 bg-gray-50 dark:bg-slate-700 rounded-full hover:bg-indigo-50 dark:hover:bg-slate-600 hover:scale-110 active:scale-95 transition-all outline-none border-2 border-transparent hover:border-indigo-200"
                                     >
                                         <img src={getAvatarUrl(seed)} alt={seed} className="w-full h-full object-contain" />
                                     </button>
@@ -296,9 +296,9 @@ function AvatarDisplay({ url, size = "w-9 h-9", fontSize = "text-xl" }: { url: s
     const isEmoji = !url.startsWith('http') && !url.startsWith('data:') && !url.includes('/');
 
     return (
-        <div className={`${size} rounded-full bg-white border border-gray-200 overflow-hidden flex items-center justify-center shadow-sm`}>
+        <div className={`${size} rounded-full bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 overflow-hidden flex items-center justify-center shadow-sm`}>
             {isEmoji ? (
-                <span className={fontSize}>{url}</span>
+                <span className={`${fontSize} dark:text-white`}>{url}</span>
             ) : (
                 <img src={url} alt="Avatar" className="w-full h-full object-cover" />
             )}
@@ -361,7 +361,7 @@ export default function DashboardPage() {
                     <div className="flex justify-between h-16">
                         <div className="flex items-center gap-6">
                             <Link to="/dashboard" className="flex items-center gap-3">
-                                <img src="/logo.png" alt="Reviflow" className="w-8 h-8 rounded-lg shadow-sm object-cover bg-white" />
+                                <img src="/logo.png" alt="Reviflow" className="w-8 h-8 rounded-lg shadow-sm object-cover bg-white dark:bg-slate-200" />
                                 <span className="text-lg font-bold tracking-tight text-gray-900 dark:text-white">Reviflow</span>
                             </Link>
 
@@ -492,14 +492,14 @@ export default function DashboardPage() {
                         <div className="lg:col-span-8 space-y-6">
 
                             {/* Badges - Compact */}
-                            <div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm relative overflow-hidden">
+                            <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-gray-200 dark:border-slate-700 shadow-sm relative overflow-hidden">
                                 {/* Background Decorations */}
                                 <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
                                 <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
 
                                 <div className="relative z-10">
                                     <div className="flex items-center justify-between mb-4">
-                                        <h3 className="font-bold text-gray-900">Succès Récents</h3>
+                                        <h3 className="font-bold text-gray-900 dark:text-white">Succès Récents</h3>
                                         <button
                                             onClick={() => setIsBadgeGalleryOpen(true)}
                                             className="text-[10px] font-black text-indigo-500 hover:text-indigo-700 uppercase tracking-widest bg-indigo-50 px-2 py-1 rounded-md transition-colors"
@@ -512,7 +512,7 @@ export default function DashboardPage() {
                                             recentBadges.map((badge) => {
                                                 const badgeDef = ALL_BADGES.find(b => b.code === badge.badge_code);
                                                 return (
-                                                    <div key={badge.badge_code} className="flex-shrink-0 flex items-center gap-3 px-4 py-2 rounded-full border border-indigo-100 bg-white text-indigo-900 shadow-md hover:scale-105 transition-all cursor-pointer ring-1 ring-indigo-50">
+                                                    <div key={badge.badge_code} className="flex-shrink-0 flex items-center gap-3 px-4 py-2 rounded-full border border-indigo-100 dark:border-slate-600 bg-white dark:bg-slate-700 text-indigo-900 dark:text-indigo-100 shadow-md hover:scale-105 transition-all cursor-pointer ring-1 ring-indigo-50 dark:ring-slate-600">
                                                         <span className="text-xl drop-shadow-sm">{badgeDef?.icon || '🏆'}</span>
                                                         <div className="flex flex-col">
                                                             <span className="text-[10px] font-black leading-tight uppercase tracking-tight">{badgeDef?.label || badge.badge_code}</span>
@@ -531,14 +531,14 @@ export default function DashboardPage() {
 
                             <MasteryWidget />
 
-                            <div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm min-h-[300px] relative overflow-hidden">
+                            <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-gray-200 dark:border-slate-700 shadow-sm min-h-[300px] relative overflow-hidden">
                                 {/* Background Decorations */}
                                 <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
                                 <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
 
                                 <div className="relative z-10">
                                     <div className="flex items-center justify-between mb-6">
-                                        <h3 className="font-bold text-gray-900">Activités Récentes</h3>
+                                        <h3 className="font-bold text-gray-900 dark:text-white">Activités Récentes</h3>
                                     </div>
                                     <ActivityTimeline learnerId={activeLearner?.id} />
                                 </div>
diff --git a/frontend/src/pages/ParentHubPage.tsx b/frontend/src/pages/ParentHubPage.tsx
index c8c1290..3479077 100644
--- a/frontend/src/pages/ParentHubPage.tsx
+++ b/frontend/src/pages/ParentHubPage.tsx
@@ -212,8 +212,8 @@ export const ParentHubPage = () => {
                     ))}
 
                     {learnerProfiles.length === 0 && (
-                        <div className="col-span-full py-20 text-center bg-slate-50/50 rounded-[3rem] border-4 border-dashed border-slate-100">
-                            <div className="p-6 bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-lg">
+                        <div className="col-span-full py-20 text-center bg-slate-50/50 dark:bg-slate-800/50 rounded-[3rem] border-4 border-dashed border-slate-100 dark:border-slate-700">
+                            <div className="p-6 bg-white dark:bg-slate-800 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-lg">
                                 <Users className="h-12 w-12 text-slate-200" />
                             </div>
                             <p className="text-slate-400 text-lg font-bold">Aucun compte apprenti créé pour le moment.</p>
@@ -230,7 +230,7 @@ export const ParentHubPage = () => {
                 {/* Create Profile Modal */}
                 {isCreating && (
                     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-300">
-                        <div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-md p-8 relative animate-in zoom-in-95 duration-300">
+                        <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl w-full max-w-md p-8 relative animate-in zoom-in-95 duration-300 border border-transparent dark:border-slate-800">
                             <button
                                 onClick={() => setIsCreating(false)}
                                 className="absolute top-6 right-6 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
@@ -238,45 +238,45 @@ export const ParentHubPage = () => {
                                 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                             </button>
 
-                            <h2 className="text-3xl font-black text-slate-900 mb-8 flex items-center gap-3">
-                                <div className="p-2 bg-indigo-50 rounded-xl">
-                                    <Plus className="w-6 h-6 text-indigo-600" />
+                            <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-8 flex items-center gap-3">
+                                <div className="p-2 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
+                                    <Plus className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
                                 </div>
                                 Nouvel Apprenti
                             </h2>
 
                             <div className="space-y-6">
                                 <div>
-                                    <label className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Prénom de l'enfant</label>
+                                    <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2 ml-1 uppercase tracking-wider">Prénom de l'enfant</label>
                                     <input
                                         type="text"
                                         value={newProfileName}
                                         onChange={(e) => setNewProfileName(e.target.value)}
-                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 placeholder:text-slate-300"
+                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 border-2 border-transparent focus:border-indigo-500 focus:bg-white dark:focus:bg-slate-700 transition-all font-bold outline-none text-slate-900 dark:text-white placeholder:text-slate-300 dark:placeholder:text-slate-600"
                                         placeholder="Ex: Léo"
                                         autoFocus
                                     />
                                 </div>
 
                                 <div>
-                                    <label className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Identifiant (Login)</label>
+                                    <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2 ml-1 uppercase tracking-wider">Identifiant (Login)</label>
                                     <input
                                         type="text"
                                         value={newProfileUsername}
                                         onChange={(e) => setNewProfileUsername(e.target.value.toLowerCase().replace(/\s/g, ''))}
-                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 placeholder:text-slate-300"
+                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 border-2 border-transparent focus:border-indigo-500 focus:bg-white dark:focus:bg-slate-700 transition-all font-bold outline-none text-slate-900 dark:text-white placeholder:text-slate-300 dark:placeholder:text-slate-600"
                                         placeholder="leo2026"
                                     />
                                     <p className="text-[10px] text-slate-400 mt-2 ml-1 font-bold uppercase tracking-widest">Utilisé pour se connecter sans email</p>
                                 </div>
 
                                 <div>
-                                    <label className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Code PIN ou Mot de passe (4+ car.)</label>
+                                    <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2 ml-1 uppercase tracking-wider">Code PIN ou Mot de passe (4+ car.)</label>
                                     <input
                                         type="text"
                                         value={newProfilePin}
                                         onChange={(e) => setNewProfilePin(e.target.value)}
-                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold text-center text-3xl tracking-widest outline-none text-indigo-600"
+                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 border-2 border-transparent focus:border-indigo-500 focus:bg-white dark:focus:bg-slate-700 transition-all font-bold text-center text-3xl tracking-widest outline-none text-indigo-600 dark:text-indigo-400"
                                         placeholder="1234"
                                     />
                                 </div>
@@ -296,7 +296,7 @@ export const ParentHubPage = () => {
                 {/* Stats Modal */}
                 {selectedChildId && (
                     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-300">
-                        <div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-2xl p-8 relative animate-in zoom-in-95 duration-300 max-h-[90vh] overflow-y-auto">
+                        <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl w-full max-w-2xl p-8 relative animate-in zoom-in-95 duration-300 max-h-[90vh] overflow-y-auto border border-transparent dark:border-slate-800">
                             <button
                                 onClick={() => setSelectedChildId(null)}
                                 className="absolute top-6 right-6 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
@@ -304,7 +304,7 @@ export const ParentHubPage = () => {
                                 <X className="w-6 h-6" />
                             </button>
 
-                            <h2 className="text-3xl font-black text-slate-900 mb-8 flex items-center gap-3">
+                            <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-8 flex items-center gap-3">
                                 📊 Progression
                             </h2>
 
@@ -317,7 +317,7 @@ export const ParentHubPage = () => {
                             <div className="mt-8 text-center">
                                 <button
                                     onClick={() => setSelectedChildId(null)}
-                                    className="text-slate-500 font-bold hover:text-slate-800"
+                                    className="text-slate-500 font-bold hover:text-slate-800 dark:hover:text-slate-300"
                                 >
                                     Fermer
                                 </button>