arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve dark mode

Browse source
This commit is contained in:
Arthur Belleville 2025-10-07 21:57:03 +02:00
parent 222391f315
commit 949b28c726
No known key found for this signature in database
12 changed files with 116 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/src/App.tsx
View file

@ -1,10 +1,8 @@
import { BrowserRouter as Router, useRoutes } from "react-router-dom";
import { ThemeProvider } from "@ui/contexts/ThemeContext";
import { twMerge } from "tailwind-merge";
import { SessionProvider } from "@ui/contexts/SessionContext";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
import { UserStoreProvider } from "@ui/providers/UserStoreProvider";
import { isProd } from "@ui/utils/helpers";
import { DatadogRumProvider } from "@ui/providers/DatadogRumProvider";
import { routes } from "@ui/lib/routes";
@ -23,13 +21,7 @@ export const App = () => {
<UserStoreProvider>
<Router>
<DatadogRumProvider>
<div
className={twMerge(
"min-h-screen",
!isProd ? "bg-orange-50" : "bg-white",
"dark:bg-gray-900"
)}
>
<div className="min-h-screen bg-background">
<AppRoutes />
<style>
{`

18
ui/src/components/AvailabilityCard.tsx
View file

@ -159,7 +159,7 @@ export function AvailabilityCard({
size="sm"
variant="outline"
onPress={() => onCopyToOtherDays(day, enabled, timeRanges)}
className="h-6 px-2 text-xs border-gray-300 hover:border-primary hover:bg-primary/5 text-gray-600 hover:text-primary"
className="h-6 px-2 text-xs border-gray-300 dark:border-gray-600 hover:border-primary hover:bg-primary/5 dark:hover:bg-primary/10 text-gray-600 dark:text-gray-300 hover:text-primary"
>
<CopyIcon className="size-3 mr-1" />
Copier
@ -174,7 +174,9 @@ export function AvailabilityCard({
>
<Text
className={`font-medium text-sm ${
enabled ? "text-gray-900" : "text-gray-500"
enabled
? "text-gray-900 dark:text-gray-100"
: "text-gray-500 dark:text-gray-400"
}`}
>
{enabled ? "Disponible" : "Indisponible"}
@ -191,7 +193,7 @@ export function AvailabilityCard({
className={`flex items-center gap-1 rounded-md px-1.5 py-1 cursor-pointer transition-all duration-200 ${
selectedRangeIndex === index
? "bg-primary/10 dark:bg-primary/20"
: "bg-gray-50/80 dark:bg-gray-900/80 hover:bg-gray-100 dark:hover:bg-gray-800/80"
: "bg-gray-50/80 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-700/60"
}`}
>
<div className="flex items-center text-xs w-fit">
@ -223,7 +225,9 @@ export function AvailabilityCard({
</SelectListBox>
</SelectPopover>
</Select>
<Text className="text-gray-500 text-[10px] mx-2">-</Text>
<Text className="text-gray-500 dark:text-gray-400 text-[10px] mx-2">
-
</Text>
<Select
aria-label="Heure de fin"
selectedKey={range.end}
@ -256,7 +260,9 @@ export function AvailabilityCard({
<Text className="font-medium text-xs px-1">
{range.start}
</Text>
<Text className="text-gray-500 text-[10px]">→</Text>
<Text className="text-gray-500 dark:text-gray-400 text-[10px]">
→
</Text>
<Text className="font-medium text-xs px-1">{range.end}</Text>
</>
)}
@ -281,7 +287,7 @@ export function AvailabilityCard({
isDisabled={!enabled}
variant="outline"
size="sm"
className="h-5 px-1.5 flex items-center text-xs border-0 bg-gray-100/50 dark:bg-gray-800/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50"
className="h-5 px-1.5 flex items-center text-xs border-0 bg-gray-100/50 dark:bg-gray-700/50 hover:bg-gray-200/50 dark:hover:bg-gray-600/50"
>
<PlusIcon className="size-2.5" />
</Button>

8
ui/src/components/AvailabilityVisualization.tsx
View file

@ -64,10 +64,10 @@ export const AvailabilityVisualization = ({
}) => {
const timeSlots = generateTimeSlots(slotDurationMinutes);
return (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div className="bg-white dark:bg-gray-700/40 rounded-xl shadow-sm dark:shadow-gray-900/20 border border-gray-200 dark:border-gray-600/50 overflow-hidden">
{/* Weekly Calendar Header */}
<div className="grid grid-cols-8 border-b-2 border-gray-200 dark:border-gray-600">
<div className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 border-r border-gray-200 dark:border-gray-600">
<div className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700/60 dark:to-slate-800/60 border-r border-gray-200 dark:border-gray-600">
<Text className="font-bold text-sm text-slate-700 dark:text-slate-300">
Heure
</Text>
@ -75,7 +75,7 @@ export const AvailabilityVisualization = ({
{DAYS_OF_WEEK.map((day) => (
<div
key={day}
className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 border-r border-gray-200 dark:border-gray-600 last:border-r-0 text-center"
className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700/60 dark:to-slate-800/60 border-r border-gray-200 dark:border-gray-600 last:border-r-0 text-center"
>
<Text className="font-bold text-sm text-slate-700 dark:text-slate-300">
{DAYS_OF_WEEK_DISPLAY[day]}
@ -105,7 +105,7 @@ export const AvailabilityVisualization = ({
{DAYS_OF_WEEK.map((day) => (
<div
key={`${day}-${timeSlot}`}
className="p-3 border-r border-gray-200 dark:border-gray-600 last:border-r-0 min-h-[3rem] flex items-center justify-center bg-gradient-to-br from-white to-slate-50/30 dark:from-gray-800 dark:to-slate-900/30"
className="p-3 border-r border-gray-200 dark:border-gray-600 last:border-r-0 min-h-[3rem] flex items-center justify-center bg-gradient-to-br from-white to-slate-50/30 dark:from-gray-700/40 dark:to-slate-800/40"
>
{isTimeSlotAvailable(day, timeSlot, draftAvailabilities) ? (
<div className="w-full h-8 bg-gradient-to-r from-emerald-400 via-emerald-500 to-emerald-600 dark:from-emerald-500 dark:via-emerald-600 dark:to-emerald-700 rounded-lg shadow-sm border border-emerald-300 dark:border-emerald-600 flex items-center justify-center group hover:shadow-md transition-all duration-200 hover:scale-105">

27
ui/src/main.css
View file

@ -1,9 +1,24 @@
.str-chat {
--str-chat__primary-color: #3b82f6;
--str-chat__active-primary-color: #2563eb;
--str-chat__surface-color: #f1f5f9;
--str-chat__secondary-surface-color: #e2e8f0;
--str-chat__primary-surface-color: #dbeafe;
--str-chat__primary-surface-color-low-emphasis: #eff6ff;
--str-chat__primary-color: #8b7396;
--str-chat__active-primary-color: #6e5c7d;
--str-chat__surface-color: #f5f3f7;
--str-chat__secondary-surface-color: #e8e4ec;
--str-chat__primary-surface-color: #ebe7f0;
--str-chat__primary-surface-color-low-emphasis: #f2f0f5;
--str-chat__border-radius-circle: 6px;
}
.dark .str-chat {
--str-chat__primary-color: #a68bb5;
--str-chat__active-primary-color: #8b7396;
--str-chat__surface-color: rgba(120, 107, 130, 0.25);
--str-chat__secondary-surface-color: rgba(140, 130, 150, 0.18);
--str-chat__primary-surface-color: rgba(166, 139, 181, 0.12);
--str-chat__primary-surface-color-low-emphasis: rgba(166, 139, 181, 0.06);
--str-chat__background-color: rgba(110, 100, 120, 0.2);
--str-chat__secondary-background-color: rgba(80, 72, 88, 0.35);
--str-chat__border-color: rgba(120, 107, 130, 0.28);
--str-chat__text-color: #f5f3f7;
--str-chat__text-low-emphasis-color: #b8b0c0;
--str-chat__disabled-color: rgba(155, 143, 165, 0.35);
}

6
ui/src/pages/PublicBookingPage.tsx
View file

@ -405,7 +405,7 @@ export function PublicBookingPage() {
)}
{eventType?.location && (
<div className="flex items-center gap-3">
<MapPinIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
<MapPinIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div>
<Text className="text-gray-600 dark:text-gray-400 text-sm">
{eventType.location}
@ -485,11 +485,11 @@ export function PublicBookingPage() {
? "text-gray-300 dark:text-gray-600 cursor-not-allowed"
: selectedDate?.toDateString() ===
date.toDateString()
? "bg-blue-600 text-white"
? "bg-purple-600 text-white"
: isToday(date)
? "bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 font-semibold"
: hasAvailableSlots(date)
? "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-green-200 dark:border-green-800"
? "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-purple-200 dark:border-purple-800"
: "text-gray-400 dark:text-gray-500 cursor-not-allowed"
}`}
>

22
ui/src/pages/availabilities.tsx
View file

@ -146,9 +146,10 @@ export function AvailabilitiesPage() {
variant="solid"
size="lg"
onPress={() => setExceptionModalOpen(true)}
className="[--btn-bg:var(--color-blue-800)]"
className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
>
<PlusIcon /> Ajouter une exception
<PlusIcon className="text-[#1a1a1a] dark:text-white" /> Ajouter
une exception
</Button>
<Button
size="lg"
@ -226,7 +227,7 @@ export function AvailabilitiesPage() {
{DAYS_OF_WEEK.map((day) => (
<div
key={day}
className="bg-white dark:bg-gray-800 rounded-lg shadow p-2"
className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-2 dark:border dark:border-gray-600/30"
>
<div className="space-y-2">
<AvailabilityCard
@ -269,7 +270,7 @@ export function AvailabilitiesPage() {
</Text>
</div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 dark:border dark:border-gray-600/30">
<Strong className="block mb-2">Votre fuseau horaire</Strong>
<Text className="text-gray-500">
{Intl.DateTimeFormat().resolvedOptions().timeZone}
@ -283,7 +284,7 @@ export function AvailabilitiesPage() {
</Text>
</div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 dark:border dark:border-gray-600/30">
<Strong className="block mb-2">Information</Strong>
<Text className="text-gray-500 text-sm">
Les créneaux horaires seront automatiquement convertis dans
@ -317,15 +318,16 @@ export function AvailabilitiesPage() {
variant="solid"
size="lg"
onPress={() => setExceptionModalOpen(true)}
className="[--btn-bg:var(--color-blue-800)]"
className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
>
<PlusIcon /> Ajouter une exception
<PlusIcon className="text-[#1a1a1a] dark:text-white" /> Ajouter
une exception
</Button>
</div>
{exceptions.length === 0 ? (
<div className="text-center py-12">
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-8">
<div className="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-8 dark:border dark:border-gray-600/20">
<Text className="text-gray-500 dark:text-gray-400 text-lg mb-4">
Aucune exception définie
</Text>
@ -340,7 +342,7 @@ export function AvailabilitiesPage() {
{exceptions.map((exception, index) => (
<div
key={`${exception.date}-${index}`}
className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700"
className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 border border-gray-200 dark:border-gray-600/50"
>
<div className="flex justify-between items-start">
<div className="flex-1">
@ -598,7 +600,7 @@ export function AvailabilitiesPage() {
]);
}}
>
<PlusIcon className="w-4 h-4 mr-1" />
<PlusIcon className="w-4 h-4 mr-1 text-[#1a1a1a] dark:text-white" />
Ajouter un créneau
</Button>
</div>

24
ui/src/pages/bookings.tsx
View file

@ -159,19 +159,19 @@ export const BookingsPage = () => {
if (eventDate.getTime() === today.getTime()) {
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/60 dark:text-blue-200">
Aujourd&apos;hui
</span>
);
} else if (eventDate > today) {
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/60 dark:text-purple-200">
À venir
</span>
);
} else {
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800/60 dark:text-gray-200">
Passé
</span>
);
@ -209,7 +209,7 @@ export const BookingsPage = () => {
return (
<div className="min-h-screen">
{/* Header */}
<header className="bg-white dark:bg-gray-800 shadow">
<header className="bg-white dark:bg-gray-700/40 shadow-sm dark:shadow-gray-900/20 dark:border-b dark:border-gray-600/30">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<div>
@ -222,10 +222,10 @@ export const BookingsPage = () => {
</div>
<div className="flex items-center space-x-3">
<Button
className="bg-emerald-700 text-white hover:bg-emerald-600"
className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
onPress={handleCreateEvent}
>
<CalendarIcon className="w-4 h-4 mr-2" />
<CalendarIcon className="w-4 h-4 mr-2 text-[#1a1a1a] dark:text-white" />
Nouvel événement
</Button>
</div>
@ -236,12 +236,12 @@ export const BookingsPage = () => {
{/* Main Content */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
{/* Filters */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
<div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 p-6 mb-6">
<div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
{/* Search */}
<div className="flex-1 w-full">
<div className="relative">
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-300 w-4 h-4" />
<Input
type="text"
placeholder="Rechercher un événement..."
@ -312,7 +312,7 @@ export const BookingsPage = () => {
</div>
{/* Events List */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
<div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30">
{tablosLoading || eventsLoading ? (
<div className="flex items-center justify-center h-screen">
<LoadingSpinner />
@ -334,7 +334,7 @@ export const BookingsPage = () => {
{paginatedEvents.map((event) => (
<div
key={event.event_id}
className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
className="p-6 hover:bg-gray-50 dark:hover:bg-gray-600/40 transition-colors cursor-pointer"
>
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
@ -388,7 +388,7 @@ export const BookingsPage = () => {
{/* Pagination Controls */}
{totalItems > 0 && (
<div className="bg-white dark:bg-gray-800 rounded-lg shadow mt-4 px-6 py-4">
<div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 mt-4 px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
<span>
@ -486,7 +486,7 @@ export const BookingsPage = () => {
{/* Stats Summary */}
{filteredEvents.length > 0 && (
<div className="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div className="mt-6 bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 p-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div className="text-center">
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">

6
ui/src/pages/chat.tsx
View file

@ -36,9 +36,9 @@ export function ChatPage() {
}, [channelFromUrl]);
return (
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
<div className="flex h-screen bg-gray-50 dark:bg-background">
<div
className={`border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out overflow-hidden ${
className={`border-r border-gray-200 dark:border-gray-600/50 bg-white dark:bg-gray-700/40 transition-all duration-300 ease-in-out overflow-hidden ${
isChannelListExpanded ? "w-80" : "w-0"
}`}
>
@ -65,7 +65,7 @@ export function ChatPage() {
)}
/>
</div>
<div className="flex-1 bg-white dark:bg-gray-800">
<div className="flex-1 bg-white dark:bg-gray-700/40">
<Channel channel={channel}>
<Window>
<CustomChannelHeader

39
ui/src/pages/event-types-page.tsx
View file

@ -109,10 +109,10 @@ export function EventTypesPage() {
<Button
size="lg"
variant="solid"
className="[--btn-bg:var(--color-blue-800)]"
className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
onPress={handleCreateEventType}
>
<PlusIcon /> Nouveau type
<PlusIcon className="text-[#1a1a1a] dark:text-white" /> Nouveau type
</Button>
</div>
@ -121,7 +121,7 @@ export function EventTypesPage() {
{eventTypesData?.map((eventType) => (
<div
key={eventType.id}
className={`bg-white dark:bg-gray-800 rounded-lg shadow p-6 border ${
className={`bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border-gray-600/50 p-6 border ${
eventType.isActive ? "opacity-100" : "opacity-60"
}`}
>
@ -139,7 +139,7 @@ export function EventTypesPage() {
"_blank"
)
}
className="text-gray-500 hover:text-blue-600"
className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
tooltip="Aperçu"
>
<ExternalLinkIcon className="w-4 h-4" />
@ -148,7 +148,7 @@ export function EventTypesPage() {
copyValue={getPublicLink(eventType.standardName)}
label="Copier le lien"
labelAfterCopied="Lien copié"
className="text-gray-500 hover:text-blue-600"
className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
></CopyButton>
<Button
variant="plain"
@ -159,7 +159,7 @@ export function EventTypesPage() {
eventType as EventTypeConfig
)
}
className="text-gray-500 hover:text-blue-600"
className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
>
<EditIcon className="w-4 h-4" />
</Button>
@ -167,7 +167,7 @@ export function EventTypesPage() {
variant="plain"
isIconOnly
onPress={() => deleteEventType({ id: eventType.id })}
className="text-gray-500 hover:text-red-600"
className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
>
<TrashIcon className="w-4 h-4" />
</Button>
@ -180,12 +180,16 @@ export function EventTypesPage() {
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-500">Durée:</span>
<span className="text-gray-500 dark:text-gray-400">
Durée:
</span>
<span className="font-medium">{eventType.duration} min</span>
</div>
{eventType.bufferTime && (
<div className="flex justify-between">
<span className="text-gray-500">Temps de battement:</span>
<span className="text-gray-500 dark:text-gray-400">
Temps de battement:
</span>
<span className="font-medium">
{eventType.bufferTime} min
</span>
@ -193,7 +197,9 @@ export function EventTypesPage() {
)}
{eventType.maxBookingsPerDay && (
<div className="flex justify-between">
<span className="text-gray-500">Max par jour:</span>
<span className="text-gray-500 dark:text-gray-400">
Max par jour:
</span>
<span className="font-medium">
{eventType.maxBookingsPerDay}
</span>
@ -201,7 +207,7 @@ export function EventTypesPage() {
)}
{eventType.minAdvanceBooking && (
<div className="flex justify-between">
<span className="text-gray-500">
<span className="text-gray-500 dark:text-gray-400">
Réservation à l&apos;avance:
</span>
<span className="font-medium">
@ -215,7 +221,9 @@ export function EventTypesPage() {
</div>
)}
<div className="flex justify-between items-center pt-2 border-t border-gray-200 dark:border-gray-700">
<span className="text-gray-500">Statut:</span>
<span className="text-gray-500 dark:text-gray-400">
Statut:
</span>
<ToggleButton
isSelected={eventType.isActive}
onChange={() =>
@ -237,15 +245,16 @@ export function EventTypesPage() {
{eventTypesData?.length === 0 && (
<div className="text-center py-12">
<Text className="text-gray-500 mb-4">
<Text className="text-gray-500 dark:text-gray-400 mb-4">
Aucun type d&apos;événement configuré
</Text>
<Button
variant="solid"
onPress={handleCreateEventType}
className="[--btn-bg:var(--color-blue-800)]"
className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
>
<PlusIcon /> Créer votre premier type
<PlusIcon className="text-[#1a1a1a] dark:text-white" /> Créer
votre premier type
</Button>
</div>
)}

31
ui/src/pages/planning.tsx
View file

@ -324,7 +324,7 @@ export const PlanningPage = () => {
);
const renderMonthView = () => (
<div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50">
{/* Days header */}
<div className="grid grid-cols-7 border-b border-gray-200 dark:border-gray-700">
{dayNamesShort.map((day) => (
@ -348,8 +348,8 @@ export const PlanningPage = () => {
: ""
} ${
day
? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
: "bg-gray-50 dark:bg-gray-900"
? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600/40"
: "bg-gray-50 dark:bg-gray-800/60"
} ${
day && formatDate(day) === formatDate(new Date())
? "bg-blue-50 dark:bg-blue-900/20"
@ -443,7 +443,7 @@ export const PlanningPage = () => {
);
const renderWeekView = () => (
<div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col">
<div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50 flex flex-col">
{/* Week header */}
<div className="flex border-b border-gray-200 dark:border-gray-700">
<div className="w-20 p-4 border-r border-gray-200 dark:border-gray-700 flex-shrink-0"></div>
@ -483,7 +483,7 @@ export const PlanningPage = () => {
{getWeekDays().map((day, index) => (
<div
key={`${day.toISOString()}-${time}`}
className={`flex-1 min-h-[60px] border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer relative ${
className={`flex-1 min-h-[60px] border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600/40 cursor-pointer relative ${
index === 6 ? "border-r-0" : ""
}`}
onClick={() => {
@ -587,7 +587,7 @@ export const PlanningPage = () => {
);
const renderDayView = () => (
<div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50">
{/* Day header */}
<div className="p-4 border-b border-gray-200 dark:border-gray-700 text-center">
<div className="text-sm text-gray-500 dark:text-gray-400 uppercase">
@ -603,7 +603,7 @@ export const PlanningPage = () => {
{timeSlots.map((time) => (
<div
key={time}
className="flex border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer relative min-h-[60px]"
className="flex border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600/40 cursor-pointer relative min-h-[60px]"
onClick={() => {
const [hour] = time.split(":").map(Number);
const dateWithTime = new Date(currentDate);
@ -713,16 +713,13 @@ export const PlanningPage = () => {
);
return (
<div className="min-h-screen bg-gray-100 dark:bg-gray-900">
<div className="min-h-screen bg-gray-100 dark:bg-background">
<div className="flex">
{/* Sidebar */}
<div className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 min-h-screen">
<div className="w-64 bg-white dark:bg-gray-700/40 border-r border-gray-200 dark:border-gray-600/50 min-h-screen">
<div className="p-4">
{/* Tablo Selector */}
<div className="mb-4">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Tablo
</label>
<Select
placeholder={
tablosLoading ? "Chargement..." : "Sélectionner un tablo"
@ -761,15 +758,15 @@ export const PlanningPage = () => {
);
}
}}
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
className="w-full px-4 py-2 bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 rounded-lg"
>
<PlusIcon className="w-5 h-5 mr-2" />
<PlusIcon className="w-5 h-5 mr-2 text-[#1a1a1a] dark:text-white" />
<span className="text-sm">Créer un événement</span>
</button>
<button
onClick={() => setIsImportModalOpen(true)}
className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
className="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
>
<FolderInputIcon className="w-5 h-5 mr-2" />
<span className="text-sm">Importer un planning</span>
@ -794,7 +791,7 @@ export const PlanningPage = () => {
<div
key={index}
className={`text-center p-1 cursor-pointer rounded ${
day ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""
day ? "hover:bg-gray-100 dark:hover:bg-gray-600/40" : ""
} ${
day && formatDate(day) === formatDate(new Date())
? "bg-blue-600 text-white"
@ -818,7 +815,7 @@ export const PlanningPage = () => {
{/* Main Content */}
<div className="flex-1 flex flex-col">
{/* Header */}
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
<div className="bg-white dark:bg-gray-700/40 border-b border-gray-200 dark:border-gray-600/50 p-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white">

20
ui/src/pages/tablo.tsx
View file

@ -1,4 +1,3 @@
import { SignOutButton } from "@ui/components/SignOutButton";
import { CreateTabloModal } from "@ui/components/CreateTabloModal";
import { TabloModal } from "@ui/components/TabloModal";
import { DeleteTabloModal } from "@ui/components/DeleteTabloModal";
@ -239,11 +238,11 @@ export const TabloPage = () => {
<div className="flex items-center gap-3">
<button
type="button"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
onClick={openCreateModal}
>
<svg
className="w-4 h-4"
className="w-4 h-4 text-[#1a1a1a] dark:text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -258,7 +257,6 @@ export const TabloPage = () => {
</svg>
<span>Nouveau tablo</span>
</button>
<SignOutButton />
</div>
</div>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@ -281,11 +279,11 @@ export const TabloPage = () => {
<div className="flex items-center gap-3">
<button
type="button"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
onClick={openCreateModal}
>
<svg
className="w-4 h-4"
className="w-4 h-4 text-[#1a1a1a] dark:text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -300,7 +298,6 @@ export const TabloPage = () => {
</svg>
<span>Nouveau tablo</span>
</button>
<SignOutButton />
</div>
</div>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@ -645,12 +642,12 @@ export const TabloPage = () => {
<button
id="create-tablo-button"
type="button"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
onClick={openCreateModal}
disabled={createTabloMutation.isPending}
>
<svg
className="w-4 h-4"
className="w-4 h-4 text-[#1a1a1a] dark:text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -667,7 +664,6 @@ export const TabloPage = () => {
{createTabloMutation.isPending ? "Création..." : "Nouveau tablo"}
</span>
</button>
<SignOutButton />
</div>
</div>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@ -693,11 +689,11 @@ export const TabloPage = () => {
<div className="flex justify-center">
<button
type="button"
className="flex items-center gap-1.5 px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
className="flex items-center gap-1.5 px-4 py-2 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
onClick={openCreateModal}
>
<svg
className="w-4 h-4"
className="w-4 h-4 text-[#1a1a1a] dark:text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"

4
ui/src/ui-library/theme/index.css
View file

@ -40,7 +40,7 @@
@layer base {
:root {
--background: oklch(1 0 0);
--background: #f4f4f4;
--foreground: oklch(0.141 0.005 285.823);
--accent: oklch(0.21 0.006 285.885);
--input: oklch(0.871 0.006 286.286);
@ -53,7 +53,7 @@
}
.dark {
--background: oklch(0.141 0.005 285.823);
--background: #1c1b1f;
--foreground: oklch(1 0 0);
--accent: oklch(1 0 0);
--input: oklch(0.37 0.013 285.805);