mirror of
https://github.com/R0m1k3/Reviflow.git
synced 2026-10-14 10:47:57 +02:00
feat(quiz): implement dark mode for quiz interface
- Apply dark mode styling to QuizPage and RevisionViewPage - Add dark mode support to QuestionCard and ResultCard components - Style HistoryPage (Mes Cours) for dark theme - Update loading skeletons, buttons, and text colors for dark mode visibility
This commit is contained in:
Reviflow Bot committed
1 parent
e5d3e3a24e
commit
6c43282d6f
5 files changed
+69
-69
No files matched your search
@@ -70,21 +70,21 @@ export const HistoryPage: React.FC = () => {
|
||||
const getSubjectStyle = (subject: string) => SUBJECT_STYLES[subject] || SUBJECT_STYLES['default'];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f8fafc] font-sans text-gray-900 pb-20">
|
||||
<div className="min-h-screen bg-[#f8fafc] dark:bg-slate-900 font-sans text-gray-900 dark:text-gray-100 pb-20 transition-colors duration-300">
|
||||
{/* Nav */}
|
||||
<nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-40">
|
||||
<nav className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-gray-200 dark:border-slate-800 sticky top-0 z-40 transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 font-bold rounded-xl hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-100 dark:hover:border-indigo-900 transition-all shadow-sm"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
<span>Retour</span>
|
||||
</motion.button>
|
||||
<h1 className="text-xl font-black tracking-tight text-gray-900">Mes Cours</h1>
|
||||
<h1 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">Mes Cours</h1>
|
||||
<div className="w-20"></div> {/* spacer */}
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,7 +97,7 @@ export const HistoryPage: React.FC = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher un cours ou une matière..."
|
||||
className="w-full pl-12 pr-6 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-4 focus:ring-indigo-50 focus:border-indigo-200 transition-all outline-none font-medium"
|
||||
className="w-full pl-12 pr-6 py-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm focus:ring-4 focus:ring-indigo-50 dark:focus:ring-indigo-900/30 focus:border-indigo-200 dark:focus:border-indigo-700 text-gray-900 dark:text-white placeholder-slate-400 transition-all outline-none font-medium"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
@@ -118,9 +118,9 @@ export const HistoryPage: React.FC = () => {
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onClick={() => navigate(`/play/${rev.id}`)}
|
||||
className="group bg-white border border-slate-200 p-5 rounded-2xl hover:border-indigo-200 hover:shadow-xl hover:shadow-indigo-50/50 transition-all cursor-pointer flex items-center gap-6"
|
||||
className="group bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-5 rounded-2xl hover:border-indigo-200 dark:hover:border-indigo-900 hover:shadow-xl hover:shadow-indigo-50/50 dark:hover:shadow-none transition-all cursor-pointer flex items-center gap-6"
|
||||
>
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${style.bg} ${style.color}`}>
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${style.bg} ${style.color} dark:bg-opacity-20`}>
|
||||
{style.icon}
|
||||
</div>
|
||||
|
||||
@@ -128,15 +128,15 @@ export const HistoryPage: React.FC = () => {
|
||||
<div className={`text-[11px] font-black uppercase tracking-widest mb-1 ${style.color}`}>
|
||||
{rev.subject || 'Général'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-800 group-hover:text-indigo-600 transition-colors truncate">
|
||||
<h3 className="text-lg font-bold text-slate-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors truncate">
|
||||
{rev.topic}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-1.5">
|
||||
<div className="flex items-center gap-1 text-xs font-bold text-slate-400 bg-slate-50 px-2 py-0.5 rounded-md">
|
||||
<div className="flex items-center gap-1 text-xs font-bold text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700/50 px-2 py-0.5 rounded-md">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(rev.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
|
||||
</div>
|
||||
<span className="text-slate-300">•</span>
|
||||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||||
<div className="text-xs font-black text-indigo-400 uppercase tracking-tight">
|
||||
Quizz {rev.current_series}/{rev.total_series}
|
||||
</div>
|
||||
@@ -145,11 +145,11 @@ export const HistoryPage: React.FC = () => {
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{rev.status === 'COMPLETED' && (
|
||||
<span className="hidden sm:flex px-3 py-1.5 bg-green-50 text-green-600 text-[10px] font-black uppercase tracking-widest rounded-lg border border-green-100 items-center gap-2">
|
||||
<span className="hidden sm:flex px-3 py-1.5 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-[10px] font-black uppercase tracking-widest rounded-lg border border-green-100 dark:border-green-900/30 items-center gap-2">
|
||||
<span>✅</span> Terminé
|
||||
</span>
|
||||
)}
|
||||
<div className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-300 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-700 flex items-center justify-center text-slate-300 dark:text-slate-500 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -158,11 +158,11 @@ export const HistoryPage: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20 bg-white rounded-[2rem] border border-dashed border-slate-200">
|
||||
<div className="text-center py-20 bg-white dark:bg-slate-800 rounded-[2rem] border border-dashed border-slate-200 dark:border-slate-700">
|
||||
<div className="text-4xl mb-4">🔍</div>
|
||||
<h3 className="text-xl font-bold text-slate-800">Aucun cours trouvé</h3>
|
||||
<p className="text-slate-500 mt-2">Essaie une autre recherche ou crée un nouveau cours !</p>
|
||||
<Link to="/new" className="mt-6 inline-flex px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all active:scale-95 shadow-lg shadow-indigo-100">
|
||||
<h3 className="text-xl font-bold text-slate-800 dark:text-white">Aucun cours trouvé</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400 mt-2">Essaie une autre recherche ou crée un nouveau cours !</p>
|
||||
<Link to="/new" className="mt-6 inline-flex px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all active:scale-95 shadow-lg shadow-indigo-100 dark:shadow-none">
|
||||
Créer un cours
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -42,14 +42,14 @@ export function QuestionCard({
|
||||
const isCorrect = selectedOption === correctAnswer;
|
||||
|
||||
return (
|
||||
<div className={`bg-white rounded-xl border border-slate-200 shadow-soft-indigo overflow-hidden max-w-2xl mx-auto mt-8 p-8 transition-transform duration-300 ${animation === 'pop' ? 'scale-105' : animation === 'shake' ? 'animate-shake' : ''
|
||||
<div className={`bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-soft-indigo dark:shadow-none overflow-hidden max-w-2xl mx-auto mt-8 p-8 transition-transform duration-300 ${animation === 'pop' ? 'scale-105' : animation === 'shake' ? 'animate-shake' : ''
|
||||
}`}>
|
||||
<div className="mb-10">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-xs font-black text-indigo-400 uppercase tracking-[0.2em]">Question {currentStep} / {totalSteps}</span>
|
||||
<span className="text-xs font-black text-slate-400">{Math.round((currentStep / totalSteps) * 100)}%</span>
|
||||
<span className="text-xs font-black text-slate-400 dark:text-slate-500">{Math.round((currentStep / totalSteps) * 100)}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-slate-100 rounded-full h-2.5 p-0.5">
|
||||
<div className="w-full bg-slate-100 dark:bg-slate-700/50 rounded-full h-2.5 p-0.5">
|
||||
<div
|
||||
className="bg-gradient-to-r from-indigo-500 to-purple-500 h-1.5 rounded-full transition-all duration-700 ease-out shadow-sm"
|
||||
style={{ width: `${(currentStep / totalSteps) * 100}%` }}
|
||||
@@ -57,7 +57,7 @@ export function QuestionCard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-black text-slate-900 mb-10 leading-tight tracking-tight">{question}</h2>
|
||||
<h2 className="text-3xl font-black text-slate-900 dark:text-white mb-10 leading-tight tracking-tight">{question}</h2>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 mb-4">
|
||||
{options.map((option, index) => (
|
||||
@@ -66,46 +66,46 @@ export function QuestionCard({
|
||||
disabled={selectedOption !== null}
|
||||
onClick={() => onSelectOption(index)}
|
||||
className={`w-full text-left p-5 border-2 rounded-xl transition-all duration-200 group relative ${selectedOption === null
|
||||
? 'border-slate-100 hover:border-soft-indigo hover:bg-indigo-50/30'
|
||||
? 'border-slate-100 dark:border-slate-700 hover:border-soft-indigo dark:hover:border-indigo-500 hover:bg-indigo-50/30 dark:hover:bg-indigo-900/20'
|
||||
: selectedOption === index
|
||||
? index === correctAnswer
|
||||
? 'border-green-500 bg-green-50 text-green-700'
|
||||
: 'border-orange-400 bg-orange-50 text-orange-700'
|
||||
? 'border-green-500 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400'
|
||||
: 'border-orange-400 bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-400'
|
||||
: index === correctAnswer
|
||||
? 'border-green-500 bg-green-50/50'
|
||||
: 'border-slate-100 opacity-50'
|
||||
? 'border-green-500 bg-green-50/50 dark:bg-green-900/10'
|
||||
: 'border-slate-100 dark:border-slate-700 opacity-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className={`flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-full border-2 text-sm font-bold transition-colors ${selectedOption === null
|
||||
? 'border-slate-200 text-slate-400 group-hover:border-soft-indigo group-hover:text-soft-indigo'
|
||||
? 'border-slate-200 dark:border-slate-600 text-slate-400 dark:text-slate-500 group-hover:border-soft-indigo dark:group-hover:border-indigo-400 group-hover:text-soft-indigo dark:group-hover:text-indigo-400'
|
||||
: selectedOption === index
|
||||
? index === correctAnswer
|
||||
? 'border-green-500 bg-green-500 text-white'
|
||||
: 'border-orange-400 bg-orange-400 text-white'
|
||||
: index === correctAnswer
|
||||
? 'border-green-500 text-green-500'
|
||||
: 'border-slate-200 text-slate-300'
|
||||
: 'border-slate-200 dark:border-slate-600 text-slate-300 dark:text-slate-600'
|
||||
}`}>
|
||||
{String.fromCharCode(65 + index)}
|
||||
</span>
|
||||
<span className="ml-4 text-lg font-medium">{option}</span>
|
||||
<span className="ml-4 text-lg font-medium text-slate-700 dark:text-slate-200">{option}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedOption !== null && (
|
||||
<div className={`mt-6 p-6 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-300 ${isCorrect ? 'bg-green-50 border border-green-100' : 'bg-orange-50 border border-orange-100'}`}>
|
||||
<div className={`mt-6 p-6 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-300 ${isCorrect ? 'bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30' : 'bg-orange-50 dark:bg-orange-900/20 border border-orange-100 dark:border-orange-900/30'}`}>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`text-2xl ${isCorrect ? 'grayscale-0' : 'grayscale-0'}`}>
|
||||
{isCorrect ? '🎉' : '💡'}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className={`font-black uppercase tracking-wider text-xs mb-1 ${isCorrect ? 'text-green-600' : 'text-orange-600'}`}>
|
||||
<h4 className={`font-black uppercase tracking-wider text-xs mb-1 ${isCorrect ? 'text-green-600 dark:text-green-400' : 'text-orange-600 dark:text-orange-400'}`}>
|
||||
{isCorrect ? 'Bonne réponse !' : 'Oups, pas tout à fait...'}
|
||||
</h4>
|
||||
<p className="text-slate-800 font-medium leading-relaxed">
|
||||
<p className="text-slate-800 dark:text-slate-200 font-medium leading-relaxed">
|
||||
{explanation || "Pas d'explication disponible."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -246,7 +246,7 @@ export function QuizPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-cream py-8 px-4 sm:px-6 lg:px-8 ${isDyslexic ? 'font-dyslexic' : 'font-sans'}`}>
|
||||
<div className={`min-h-screen bg-cream dark:bg-slate-900 py-8 px-4 sm:px-6 lg:px-8 ${isDyslexic ? 'font-dyslexic' : 'font-sans'} transition-colors duration-300`}>
|
||||
<div className="max-w-screen-sm mx-auto relative content-center">
|
||||
|
||||
{/* Pause Button */}
|
||||
@@ -255,44 +255,44 @@ export function QuizPage() {
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handlePause}
|
||||
className="absolute -top-2 right-0 text-slate-400 hover:text-indigo-600 font-bold text-sm bg-white px-4 py-2 rounded-full shadow-sm hover:shadow-md transition-all border border-slate-100 flex items-center gap-2"
|
||||
className="absolute -top-2 right-0 text-slate-400 dark:text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 font-bold text-sm bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-sm hover:shadow-md transition-all border border-slate-100 dark:border-slate-700 flex items-center gap-2"
|
||||
>
|
||||
<span>⏸ Pause & Quitter</span>
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="w-full max-w-2xl mx-auto bg-white rounded-3xl shadow-xl p-8 animate-pulse">
|
||||
<div className="w-full max-w-2xl mx-auto bg-white dark:bg-slate-800 rounded-3xl shadow-xl p-8 animate-pulse">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<Skeleton className="h-4 w-24 bg-indigo-50" />
|
||||
<Skeleton className="h-4 w-32 bg-indigo-50" />
|
||||
<Skeleton className="h-4 w-24 bg-indigo-50 dark:bg-indigo-900/30" />
|
||||
<Skeleton className="h-4 w-32 bg-indigo-50 dark:bg-indigo-900/30" />
|
||||
</div>
|
||||
|
||||
<Skeleton className="h-8 w-3/4 mb-4 bg-gray-200" />
|
||||
<Skeleton className="h-8 w-1/2 mb-12 bg-gray-200" />
|
||||
<Skeleton className="h-8 w-3/4 mb-4 bg-gray-200 dark:bg-slate-700" />
|
||||
<Skeleton className="h-8 w-1/2 mb-12 bg-gray-200 dark:bg-slate-700" />
|
||||
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<Skeleton key={i} className="h-16 w-full rounded-xl bg-gray-100" />
|
||||
<Skeleton key={i} className="h-16 w-full rounded-xl bg-gray-100 dark:bg-slate-700" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-indigo-600 font-medium animate-pulse">Génération de votre quiz en cours...</p>
|
||||
<p className="text-indigo-600 dark:text-indigo-400 font-medium animate-pulse">Génération de votre quiz en cours...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="text-center text-red-600 bg-red-50 p-8 rounded-[2.5rem] mt-10 border-2 border-red-100 shadow-xl shadow-red-50 animate-in zoom-in duration-300">
|
||||
<div className="text-center text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-8 rounded-[2.5rem] mt-10 border-2 border-red-100 dark:border-red-900/30 shadow-xl shadow-red-50 dark:shadow-none animate-in zoom-in duration-300">
|
||||
<div className="text-5xl mb-4">⚠️</div>
|
||||
<h3 className="text-2xl font-black mb-2">Une erreur est survenue</h3>
|
||||
<p className="font-medium text-red-500 opacity-80">{error}</p>
|
||||
<p className="font-medium text-red-500 dark:text-red-300 opacity-80">{error}</p>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="mt-8 px-8 py-4 bg-white border-2 border-red-100 text-red-600 font-black rounded-2xl hover:bg-red-50 transition-all shadow-lg shadow-red-50 flex items-center justify-center gap-3"
|
||||
className="mt-8 px-8 py-4 bg-white dark:bg-slate-800 border-2 border-red-100 dark:border-red-900/30 text-red-600 dark:text-red-400 font-black rounded-2xl hover:bg-red-50 dark:hover:bg-red-900/20 transition-all shadow-lg shadow-red-50 dark:shadow-none flex items-center justify-center gap-3"
|
||||
>
|
||||
Retour au tableau de bord
|
||||
</motion.button>
|
||||
|
||||
@@ -47,34 +47,34 @@ export function ResultCard({ score, totalQuestions, topic, onRetry, onNextSeries
|
||||
|
||||
if (isResumingSeries) {
|
||||
message = "Prêt pour la suite ?";
|
||||
bgColor = "bg-blue-50";
|
||||
color = "text-blue-600";
|
||||
bgColor = "bg-blue-50 dark:bg-blue-900/20";
|
||||
color = "text-blue-600 dark:text-blue-400";
|
||||
}
|
||||
else if (percentage >= 80) {
|
||||
message = "Excellent travail !";
|
||||
color = "text-green-600";
|
||||
bgColor = "bg-green-50";
|
||||
color = "text-green-600 dark:text-green-400";
|
||||
bgColor = "bg-green-50 dark:bg-green-900/20";
|
||||
} else if (percentage >= 50) {
|
||||
message = "Bravo, bel effort !";
|
||||
color = "text-soft-indigo";
|
||||
bgColor = "bg-indigo-50";
|
||||
color = "text-soft-indigo dark:text-indigo-400";
|
||||
bgColor = "bg-indigo-50 dark:bg-indigo-900/20";
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-[3rem] shadow-2xl shadow-indigo-100 border border-slate-50 overflow-hidden max-w-xl mx-auto mt-10 p-12 text-center animate-in zoom-in-95 duration-500">
|
||||
<h2 className="text-4xl font-black text-slate-900 mb-2 tracking-tight">Quiz Terminé !</h2>
|
||||
<p className="text-slate-400 mb-10 font-bold uppercase tracking-widest text-xs">Sujet : {topic}</p>
|
||||
<div className="bg-white dark:bg-slate-800 rounded-[3rem] shadow-2xl shadow-indigo-100 dark:shadow-none border border-slate-50 dark:border-slate-700 overflow-hidden max-w-xl mx-auto mt-10 p-12 text-center animate-in zoom-in-95 duration-500">
|
||||
<h2 className="text-4xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">Quiz Terminé !</h2>
|
||||
<p className="text-slate-400 dark:text-slate-500 mb-10 font-bold uppercase tracking-widest text-xs">Sujet : {topic}</p>
|
||||
|
||||
<div className={`mb-10 p-8 rounded-2xl ${bgColor}`}>
|
||||
<div className={`text-7xl font-black ${color} mb-4`}>{percentage}%</div>
|
||||
<p className="text-slate-700 text-xl font-semibold">{score} sur {totalQuestions} corrects</p>
|
||||
<p className="text-slate-700 dark:text-slate-300 text-xl font-semibold">{score} sur {totalQuestions} corrects</p>
|
||||
<p className={`text-lg mt-3 font-medium ${color}`}>{message}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-soft-indigo text-soft-indigo rounded-xl hover:bg-indigo-50 font-bold transition-all"
|
||||
className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-soft-indigo dark:border-indigo-500 text-soft-indigo dark:text-indigo-400 rounded-xl hover:bg-indigo-50 dark:hover:bg-indigo-900/20 font-bold transition-all"
|
||||
>
|
||||
Recommencer
|
||||
</button>
|
||||
@@ -82,14 +82,14 @@ export function ResultCard({ score, totalQuestions, topic, onRetry, onNextSeries
|
||||
{onNextSeries && seriesInfo && seriesInfo.current < seriesInfo.total && (
|
||||
<button
|
||||
onClick={onNextSeries}
|
||||
className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-bold shadow-md shadow-indigo-200 transition-all animate-pulse"
|
||||
className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-bold shadow-md shadow-indigo-200 dark:shadow-none transition-all animate-pulse"
|
||||
>
|
||||
Suite (Partie {seriesInfo.current + 1}/{seriesInfo.total})
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-soft-indigo text-white rounded-xl hover:opacity-90 font-bold shadow-md shadow-indigo-200 transition-all"
|
||||
className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-soft-indigo dark:bg-indigo-600 text-white rounded-xl hover:opacity-90 font-bold shadow-md shadow-indigo-200 dark:shadow-none transition-all"
|
||||
>
|
||||
Tableau de bord
|
||||
</Link>
|
||||
|
||||
@@ -73,14 +73,14 @@ export function RevisionViewPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-[#FDFCF8] py-12 ${isDyslexic ? 'font-dyslexic' : ''}`}>
|
||||
<div className={`min-h-screen bg-[#FDFCF8] dark:bg-slate-900 py-12 ${isDyslexic ? 'font-dyslexic' : ''} transition-colors duration-300`}>
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="flex justify-between items-center mb-10">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 font-bold rounded-xl hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-100 dark:hover:border-indigo-900 transition-all shadow-sm"
|
||||
>
|
||||
<span>← Retour</span>
|
||||
</motion.button>
|
||||
@@ -88,22 +88,22 @@ export function RevisionViewPage() {
|
||||
<DyslexiaToggle />
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-[2.5rem] shadow-xl shadow-indigo-100/50 border border-slate-50 p-10 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="mb-8 border-b border-slate-100 pb-6">
|
||||
<h1 className="text-4xl font-black text-slate-900 mb-2">{revision.topic}</h1>
|
||||
<p className="text-slate-400 font-bold uppercase tracking-widest text-xs">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-[2.5rem] shadow-xl shadow-indigo-100/50 dark:shadow-none border border-slate-50 dark:border-slate-700 p-10 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="mb-8 border-b border-slate-100 dark:border-slate-700 pb-6">
|
||||
<h1 className="text-4xl font-black text-slate-900 dark:text-white mb-2">{revision.topic}</h1>
|
||||
<p className="text-slate-400 dark:text-slate-500 font-bold uppercase tracking-widest text-xs">
|
||||
Révision du {new Date(revision.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-indigo max-w-none text-slate-600 leading-relaxed whitespace-pre-wrap font-medium">
|
||||
<div className="prose prose-indigo dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-wrap font-medium">
|
||||
{/* Synthesis Section */}
|
||||
{revision.synthesis && (
|
||||
<div className="mb-10">
|
||||
<h3 className="text-lg font-black text-indigo-900 mb-4 flex items-center gap-2">
|
||||
<h3 className="text-lg font-black text-indigo-900 dark:text-indigo-300 mb-4 flex items-center gap-2">
|
||||
<span className="text-2xl">✨</span> Résumé Magique
|
||||
</h3>
|
||||
<div className="p-6 bg-indigo-50/50 border border-indigo-100 rounded-2xl italic text-slate-700">
|
||||
<div className="p-6 bg-indigo-50/50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-900/30 rounded-2xl italic text-slate-700 dark:text-slate-300">
|
||||
{revision.synthesis}
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,7 +112,7 @@ export function RevisionViewPage() {
|
||||
{/* Tips Section */}
|
||||
{revision.study_tips && (
|
||||
<div className="mb-10">
|
||||
<h3 className="text-lg font-black text-emerald-900 mb-4 flex items-center gap-2">
|
||||
<h3 className="text-lg font-black text-emerald-900 dark:text-emerald-400 mb-4 flex items-center gap-2">
|
||||
<span className="text-2xl">💡</span> Conseils Métho
|
||||
</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
@@ -120,8 +120,8 @@ export function RevisionViewPage() {
|
||||
try {
|
||||
const tips = JSON.parse(revision.study_tips);
|
||||
return Array.isArray(tips) ? tips.map((tip: string, idx: number) => (
|
||||
<div key={idx} className="p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-emerald-800 text-sm font-bold flex gap-3">
|
||||
<span className="w-6 h-6 bg-white rounded-full flex items-center justify-center text-xs shadow-sm shrink-0">{idx + 1}</span>
|
||||
<div key={idx} className="p-4 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-900/30 rounded-xl text-emerald-800 dark:text-emerald-200 text-sm font-bold flex gap-3">
|
||||
<span className="w-6 h-6 bg-white dark:bg-emerald-800 rounded-full flex items-center justify-center text-xs shadow-sm shrink-0">{idx + 1}</span>
|
||||
{tip}
|
||||
</div>
|
||||
)) : null;
|
||||
@@ -131,7 +131,7 @@ export function RevisionViewPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3 className="text-lg font-black text-slate-900 mb-4 uppercase tracking-widest text-sm">Contenu du Cours</h3>
|
||||
<h3 className="text-lg font-black text-slate-900 dark:text-white mb-4 uppercase tracking-widest text-sm">Contenu du Cours</h3>
|
||||
{revision.text_content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user