jeremy/RecruIT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: fix candidate layout with full light theme, no dark mode dependencies, high contrast throughout

Browse Source
This commit is contained in:
jeremy bayse
2026-04-14 19:06:17 +02:00
parent 351bdda2a1
commit 71672509b6
2 changed files with 67 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/Layouts/AuthenticatedLayout.vue
View File

@@ -14,10 +14,8 @@ const showingNavigationDropdown = ref(false);
<template> <template>
<EnvironmentBanner /> <EnvironmentBanner />
<div> <div>
<div class="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-300"> <div class="min-h-screen" style="background:#f8fafc;">
<nav <nav style="border-bottom:1px solid #e2e8f0; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.04);">
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"
>
<!-- Primary Navigation Menu --> <!-- Primary Navigation Menu -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between"> <div class="flex h-16 justify-between">
@@ -52,7 +50,7 @@ const showingNavigationDropdown = ref(false);
<span class="inline-flex rounded-md"> <span class="inline-flex rounded-md">
<button <button
type="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 }} {{ $page.props.auth.user.name }}
@@ -183,7 +181,7 @@ const showingNavigationDropdown = ref(false);
<!-- Page Heading --> <!-- Page Heading -->
<header <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" v-if="$slots.header"
> >
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8"> <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 /> <slot />
</main> </main>
<footer class="pb-8 pt-4 text-center"> <footer class="pb-8 pt-4 text-center" style="background:#f8fafc;">
<span class="text-[10px] text-gray-400 font-mono">v{{ $page.props.app_version }}</span> <span class="text-[10px] font-mono" style="color:#9ca3af;">v{{ $page.props.app_version }}</span>
</footer> </footer>
</div> </div>
</div> </div>

79
resources/js/Pages/Dashboard.vue
View File

@@ -142,49 +142,56 @@ const getStatusColor = (status) => {
</div> </div>
</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"> <div class="w-full max-w-4xl">
<!-- Welcome Section --> <!-- Welcome Section -->
<div class="mb-12 text-center"> <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"> <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 Certifié ✦ Espace Candidat
</div> </div>
<h3 class="text-4xl md:text-5xl font-black mb-6 tracking-tight text-slate-900 dark:text-white"> <h3 class="font-black mb-5 tracking-tight" style="font-size: clamp(2rem, 5vw, 3.5rem); color: #1e1b4b; line-height: 1.1;">
Bienvenue, <span class="text-indigo-600 dark:text-indigo-400">{{ user.name }}</span> ! Bienvenue, <span style="color:#4f46e5;">{{ user.name }}</span> !
</h3> </h3>
<p class="text-slate-500 dark:text-slate-400 max-w-xl mx-auto leading-relaxed text-lg font-medium"> <p style="color:#6b7280; font-size:1.1rem; max-width:40rem; margin:0 auto; line-height:1.7;">
C'est l'heure de briller. Voici les défis techniques préparés spécialement pour vous par rapport à votre profil candidat. Voici les tests techniques préparés pour votre candidature. Installez-vous confortablement avant de commencer.
</p> </p>
</div> </div>
<!-- Quizzes Grid --> <!-- Quizzes Grid -->
<div v-if="quizzes && quizzes.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-8"> <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" <div
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" 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 --> <!-- Decorative blob -->
<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 style="position:absolute; top:-2rem; right:-2rem; width:8rem; height:8rem; background:radial-gradient(circle, #818cf820 0%, transparent 70%); border-radius:50%;"></div>
<div class="relative z-10 flex flex-col h-full"> <!-- Icon badge -->
<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"> <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" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <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.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" /> <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> </svg>
</div> </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> <h4 style="font-size:1.25rem; font-weight:800; color:#1e1b4b; margin-bottom:0.75rem; line-height:1.3;">{{ quiz.title }}</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-10 leading-relaxed line-clamp-2"> <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 }} {{ quiz.description }}
</p> </p>
<div class="mt-auto flex items-center justify-between pt-10 border-t border-slate-50 dark:border-slate-800"> <div style="border-top:1.5px solid #f1f5f9; padding-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;">
<div class="flex flex-col"> <div>
<span class="text-[10px] font-black uppercase text-slate-400 tracking-tighter">Temps Estimé</span> <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>
<span class="text-sm font-bold">{{ quiz.duration_minutes }} Minutes</span> <div style="font-size:0.95rem; font-weight:800; color:#374151;">{{ quiz.duration_minutes }} min</div>
</div> </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"> <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" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg> </svg>
Terminé Terminé
@@ -192,32 +199,34 @@ const getStatusColor = (status) => {
<Link <Link
v-else v-else
:href="route('quizzes.take', quiz.id)" :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" 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 Démarrer →
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Empty State --> <!-- 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 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 class="mb-8 inline-flex p-6 bg-slate-50 dark:bg-slate-800 rounded-full text-slate-300"> <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" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <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" /> <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> </svg>
</div> </div>
<h4 class="text-2xl font-black mb-4">Aucun test assigné</h4> <h4 style="font-size:1.5rem; font-weight:900; color:#1e1b4b; margin-bottom:0.75rem;">Aucun test assigné</h4>
<p class="text-slate-500 dark:text-slate-400 max-w-sm mx-auto leading-relaxed"> <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 des tests techniques après validation de votre candidature. Votre dossier est en cours de traitement. Un administrateur vous assignera bientôt vos tests techniques.
</p> </p>
</div> </div>
<!-- Footer Support --> <!-- Footer -->
<div class="mt-12 text-center"> <div style="margin-top:3rem; text-align: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> <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> </div>
</div> </div>
</component> </component>