Vision Refactor

This commit is contained in:
alma 2026-01-14 12:22:07 +01:00
parent 1cf3b3fc4e
commit a07e9d6591

View File

@ -380,25 +380,63 @@ export default function VisionPage() {
<div className="flex flex-col lg:flex-row gap-6">
{/* Colonne calendrier (étroite, garde le thème par défaut qui fonctionnait) */}
<div className="w-full lg:w-80 lg:flex-shrink-0">
<style dangerouslySetInnerHTML={{__html: `
/* Forcer le header mois/année */
.rdp-caption_label {
color: #111827 !important;
font-weight: 600 !important;
}
/* Forcer les boutons de navigation */
.rdp-nav_button {
color: #374151 !important;
background-color: white !important;
}
.rdp-nav_button:hover {
color: #111827 !important;
}
.rdp-nav_button svg {
color: #374151 !important;
}
.rdp-nav_button:hover svg {
color: #111827 !important;
}
/* Forcer les jours normaux */
.rdp-day:not(.rdp-day_selected):not(.rdp-day_outside):not(.hasMeeting) {
color: #1f2937 !important;
background-color: white !important;
}
/* Forcer le jour d'aujourd'hui */
.rdp-day_today:not(.rdp-day_selected):not(.hasMeeting) {
background-color: #DBEAFE !important;
color: #1d4ed8 !important;
border: 2px solid #3b82f6 !important;
}
/* Forcer le jour sélectionné */
.rdp-day_selected {
background-color: #2563eb !important;
color: white !important;
}
/* Forcer les jours hors mois */
.rdp-day_outside {
color: #9ca3af !important;
background-color: white !important;
}
/* Forcer les jours avec réunion */
.rdp-day.hasMeeting {
background-color: #2563eb !important;
color: white !important;
font-weight: 600 !important;
}
.rdp-day.hasMeeting:hover {
background-color: #1d4ed8 !important;
color: white !important;
}
`}} />
<CalendarComponent
mode="single"
selected={selectedDate}
onSelect={setSelectedDate}
className="rounded-md border"
classNames={{
// Header: mois/année en texte sombre
caption_label: "!text-gray-900 !font-semibold",
// Boutons de navigation: texte sombre sur fond blanc
nav_button: "!text-gray-700 hover:!text-gray-900 !bg-white",
// Forcer texte sombre sur fond blanc pour les jours normaux
day: "!text-gray-900 !bg-white hover:!bg-gray-100",
// Jour d'aujourd'hui: fond bleu clair avec texte bleu lisible
day_today: "!bg-blue-100 !text-blue-700 !border-blue-500 !border-2",
// Jour sélectionné: fond bleu foncé, texte blanc
day_selected: "!bg-blue-600 !text-white hover:!bg-blue-700",
// Jours hors mois: texte gris clair
day_outside: "!text-gray-400 !bg-white",
}}
modifiers={{
hasMeeting: (date) => {
if (!date) return false;
@ -406,7 +444,7 @@ export default function VisionPage() {
},
}}
modifiersClassNames={{
hasMeeting: "!bg-blue-600 !text-white !font-semibold hover:!bg-blue-700",
hasMeeting: "hasMeeting",
}}
/>
</div>