From 71672509b61c5fe08769a8e5bb5351402ed66846 Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Tue, 14 Apr 2026 19:06:17 +0200
Subject: [PATCH] design: fix candidate layout with full light theme, no dark
 mode dependencies, high contrast throughout

---
 resources/js/Layouts/AuthenticatedLayout.vue |  14 +--
 resources/js/Pages/Dashboard.vue             | 113 ++++++++++---------
 2 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 8aca9b9..1df35f6 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -14,10 +14,8 @@ const showingNavigationDropdown = ref(false);
 <template>
     <EnvironmentBanner />
     <div>
-        <div class="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-300">
-            <nav
-                class="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 backdrop-blur-md sticky top-0 z-50"
-            >
+        <div class="min-h-screen" style="background:#f8fafc;">
+            <nav style="border-bottom:1px solid #e2e8f0; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.04);">
                 <!-- Primary Navigation Menu -->
                 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                     <div class="flex h-16 justify-between">
@@ -52,7 +50,7 @@ const showingNavigationDropdown = ref(false);
                                         <span class="inline-flex rounded-md">
                                             <button
                                                 type="button"
-                                                class="inline-flex items-center rounded-xl border border-transparent bg-slate-50 dark:bg-slate-800 px-4 py-2 text-sm font-bold leading-4 text-slate-700 dark:text-slate-200 transition duration-150 ease-in-out hover:text-indigo-600 dark:hover:text-indigo-400 focus:outline-none"
+                                                style="display:inline-flex; align-items:center; border-radius:0.75rem; border:1.5px solid #e2e8f0; background:#f8fafc; padding:0.5rem 1rem; font-size:0.875rem; font-weight:700; color:#1e293b; transition:all 0.15s ease;"
                                             >
                                                 {{ $page.props.auth.user.name }}
 
@@ -183,7 +181,7 @@ const showingNavigationDropdown = ref(false);
 
             <!-- Page Heading -->
             <header
-                class="bg-white dark:bg-slate-900 shadow-sm border-b border-slate-100 dark:border-slate-800"
+                style="background:white; border-bottom:1px solid #f1f5f9; box-shadow:none;"
                 v-if="$slots.header"
             >
                 <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
@@ -196,8 +194,8 @@ const showingNavigationDropdown = ref(false);
                 <slot />
             </main>
             
-            <footer class="pb-8 pt-4 text-center">
-                <span class="text-[10px] text-gray-400 font-mono">v{{ $page.props.app_version }}</span>
+            <footer class="pb-8 pt-4 text-center" style="background:#f8fafc;">
+                <span class="text-[10px] font-mono" style="color:#9ca3af;">v{{ $page.props.app_version }}</span>
             </footer>
         </div>
     </div>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 2f6047e..c7412bc 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -142,82 +142,91 @@ const getStatusColor = (status) => {
             </div>
         </div>
 
-        <div v-else class="min-h-[calc(100vh-4rem)] p-8 flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-950 px-4 md:px-8">
+        <!-- Candidate Dashboard: LIGHT ONLY, high contrast, no dark: classes -->
+        <div v-else style="background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%); min-height: calc(100vh - 4rem);" class="flex flex-col items-center justify-center px-4 py-16">
             <div class="w-full max-w-4xl">
+
                 <!-- Welcome Section -->
                 <div class="mb-12 text-center">
-                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 text-[10px] font-black uppercase tracking-widest mb-6 border border-indigo-100 dark:border-indigo-800">
-                        Espace Candidat Certifié
+                    <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-6 border" style="background:#eef2ff; color:#4f46e5; border-color:#c7d2fe;">
+                        ✦ Espace Candidat
                     </div>
-                    <h3 class="text-4xl md:text-5xl font-black mb-6 tracking-tight text-slate-900 dark:text-white">
-                        Bienvenue, <span class="text-indigo-600 dark:text-indigo-400">{{ user.name }}</span> !
+                    <h3 class="font-black mb-5 tracking-tight" style="font-size: clamp(2rem, 5vw, 3.5rem); color: #1e1b4b; line-height: 1.1;">
+                        Bienvenue, <span style="color:#4f46e5;">{{ user.name }}</span> !
                     </h3>
-                    <p class="text-slate-500 dark:text-slate-400 max-w-xl mx-auto leading-relaxed text-lg font-medium">
-                        C'est l'heure de briller. Voici les défis techniques préparés spécialement pour vous par rapport à votre profil candidat.
+                    <p style="color:#6b7280; font-size:1.1rem; max-width:40rem; margin:0 auto; line-height:1.7;">
+                        Voici les tests techniques préparés pour votre candidature. Installez-vous confortablement avant de commencer.
                     </p>
                 </div>
 
                 <!-- Quizzes Grid -->
                 <div v-if="quizzes && quizzes.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                    <div v-for="quiz in quizzes" :key="quiz.id" 
-                        class="relative group bg-white dark:bg-slate-900 rounded-[2.5rem] p-10 shadow-2xl shadow-indigo-500/5 border border-slate-100 dark:border-slate-800 hover:border-indigo-500/50 transition-all duration-500 hover:-translate-y-2"
+                    <div
+                        v-for="quiz in quizzes"
+                        :key="quiz.id"
+                        class="group"
+                        style="background: white; border-radius: 2rem; padding: 2.5rem; box-shadow: 0 4px 24px rgba(79,70,229,0.08); border: 1.5px solid #e0e7ff; transition: all 0.4s ease; position: relative; overflow: hidden;"
+                        @mouseenter="$event.currentTarget.style.borderColor='#6366f1'; $event.currentTarget.style.boxShadow='0 12px 40px rgba(79,70,229,0.15)'; $event.currentTarget.style.transform='translateY(-4px)'"
+                        @mouseleave="$event.currentTarget.style.borderColor='#e0e7ff'; $event.currentTarget.style.boxShadow='0 4px 24px rgba(79,70,229,0.08)'; $event.currentTarget.style.transform='translateY(0)'"
                     >
-                        <!-- Icon/Decoration -->
-                        <div class="absolute -top-4 -right-4 w-24 h-24 bg-indigo-500/10 rounded-full blur-2xl group-hover:bg-indigo-500/20 transition-all"></div>
-                        
-                        <div class="relative z-10 flex flex-col h-full">
-                            <div class="mb-8 p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl w-fit group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 21v-1m4.243-4.243l-.707-.707m2.828-9.9l-.707.707" />
+                        <!-- Decorative blob -->
+                        <div style="position:absolute; top:-2rem; right:-2rem; width:8rem; height:8rem; background:radial-gradient(circle, #818cf820 0%, transparent 70%); border-radius:50%;"></div>
+
+                        <!-- Icon badge -->
+                        <div style="display:inline-flex; padding:0.75rem; background:#eef2ff; border-radius:1rem; margin-bottom:1.5rem;">
+                            <svg xmlns="http://www.w3.org/2000/svg" style="width:1.75rem;height:1.75rem;color:#4f46e5;stroke:#4f46e5;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+                            </svg>
+                        </div>
+
+                        <h4 style="font-size:1.25rem; font-weight:800; color:#1e1b4b; margin-bottom:0.75rem; line-height:1.3;">{{ quiz.title }}</h4>
+                        <p style="color:#6b7280; font-size:0.875rem; line-height:1.6; margin-bottom:2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
+                            {{ quiz.description }}
+                        </p>
+
+                        <div style="border-top:1.5px solid #f1f5f9; padding-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;">
+                            <div>
+                                <div style="font-size:0.65rem; font-weight:900; text-transform:uppercase; letter-spacing:0.1em; color:#9ca3af; margin-bottom:0.2rem;">Durée</div>
+                                <div style="font-size:0.95rem; font-weight:800; color:#374151;">{{ quiz.duration_minutes }} min</div>
+                            </div>
+
+                            <div v-if="quiz.has_finished_attempt" style="display:flex; align-items:center; gap:0.5rem; background:#ecfdf5; color:#059669; font-weight:800; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; padding:0.625rem 1.25rem; border-radius:0.75rem; border:1.5px solid #a7f3d0;">
+                                <svg xmlns="http://www.w3.org/2000/svg" style="width:1rem;height:1rem;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                 </svg>
+                                Terminé
                             </div>
-
-                            <h4 class="text-2xl font-black mb-4 tracking-tight group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">{{ quiz.title }}</h4>
-                            <p class="text-slate-500 dark:text-slate-400 text-sm mb-10 leading-relaxed line-clamp-2">
-                                {{ quiz.description }}
-                            </p>
-
-                            <div class="mt-auto flex items-center justify-between pt-10 border-t border-slate-50 dark:border-slate-800">
-                                <div class="flex flex-col">
-                                    <span class="text-[10px] font-black uppercase text-slate-400 tracking-tighter">Temps Estimé</span>
-                                    <span class="text-sm font-bold">{{ quiz.duration_minutes }} Minutes</span>
-                                </div>
-
-                                <div v-if="quiz.has_finished_attempt" class="flex items-center gap-2 text-emerald-500 font-black text-xs uppercase tracking-widest bg-emerald-50 dark:bg-emerald-900/20 px-4 py-2 rounded-xl border border-emerald-100 dark:border-emerald-800">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                                    </svg>
-                                    Terminé
-                                </div>
-                                <Link 
-                                    v-else
-                                    :href="route('quizzes.take', quiz.id)"
-                                    class="inline-flex items-center justify-center px-10 py-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded-2xl font-black text-sm hover:bg-indigo-600 dark:hover:bg-indigo-400 dark:hover:text-white transition-all duration-300 shadow-xl shadow-slate-900/10 active:scale-95 whitespace-nowrap"
-                                >
-                                    Démarrer
-                                </Link>
-                            </div>
+                            <Link
+                                v-else
+                                :href="route('quizzes.take', quiz.id)"
+                                style="display:inline-flex; align-items:center; justify-content:center; padding:0.75rem 2rem; background:#4f46e5; color:white; border-radius:0.875rem; font-weight:800; font-size:0.875rem; text-decoration:none; box-shadow:0 4px 14px rgba(79,70,229,0.35); transition:all 0.2s ease; white-space:nowrap;"
+                                @mouseenter="$event.currentTarget.style.background='#4338ca'; $event.currentTarget.style.transform='scale(0.98)'"
+                                @mouseleave="$event.currentTarget.style.background='#4f46e5'; $event.currentTarget.style.transform='scale(1)'"
+                            >
+                                Démarrer →
+                            </Link>
                         </div>
                     </div>
                 </div>
 
                 <!-- Empty State -->
-                <div v-else class="text-center p-20 bg-white dark:bg-slate-900 rounded-[3rem] shadow-2xl shadow-indigo-500/5 border border-slate-100 dark:border-slate-800">
-                    <div class="mb-8 inline-flex p-6 bg-slate-50 dark:bg-slate-800 rounded-full text-slate-300">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <div v-else style="text-align:center; padding:5rem 2rem; background:white; border-radius:2rem; box-shadow:0 4px 24px rgba(0,0,0,0.06); border:1.5px solid #e0e7ff;">
+                    <div style="display:inline-flex; padding:1.5rem; background:#fff7ed; border-radius:9999px; margin-bottom:1.5rem;">
+                        <svg xmlns="http://www.w3.org/2000/svg" style="width:3rem;height:3rem;stroke:#f97316;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                         </svg>
                     </div>
-                    <h4 class="text-2xl font-black mb-4">Aucun test assigné</h4>
-                    <p class="text-slate-500 dark:text-slate-400 max-w-sm mx-auto leading-relaxed">
-                        Votre dossier est en cours de traitement. Un administrateur vous assignera des tests techniques après validation de votre candidature.
+                    <h4 style="font-size:1.5rem; font-weight:900; color:#1e1b4b; margin-bottom:0.75rem;">Aucun test assigné</h4>
+                    <p style="color:#6b7280; max-width:28rem; margin:0 auto; line-height:1.7; font-size:0.95rem;">
+                        Votre dossier est en cours de traitement. Un administrateur vous assignera bientôt vos tests techniques.
                     </p>
                 </div>
-                
-                <!-- Footer Support -->
-                <div class="mt-12 text-center">
-                    <p class="text-[10px] font-black uppercase text-slate-300 dark:text-slate-600 tracking-[0.2em]">RecruitQuizz Platform • v{{ $page.props.app_version }}</p>
+
+                <!-- Footer -->
+                <div style="margin-top:3rem; text-align:center;">
+                    <p style="font-size:0.65rem; font-weight:900; text-transform:uppercase; letter-spacing:0.15em; color:#d1d5db;">RecruitQuizz Platform • v{{ $page.props.app_version }}</p>
                 </div>
+
             </div>
         </div>
     </component>