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>
<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>

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

@@ -142,49 +142,56 @@ 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>
<!-- 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>
<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" />
<!-- 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 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">
<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 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 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" 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">
<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é
@@ -192,32 +199,34 @@ const getStatusColor = (status) => {
<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"
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>
</div>
</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>