changed calender colors

This commit is contained in:
Naser Mansour 2026-01-08 18:45:41 +02:00
parent 5291ac7fb1
commit ddbb224d07
1 changed files with 10 additions and 10 deletions

View File

@ -187,12 +187,12 @@ new class extends Component
<button
wire:click="selectDate('{{ $dayData['date'] }}')"
@class([
'calendar-cell rounded-lg text-center transition-colors font-medium min-h-[44px]',
'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:hover:bg-emerald-900/50' => $dayData['status'] === 'available',
'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50' => $dayData['status'] === 'partial',
'bg-sky-100 text-sky-700 cursor-not-allowed dark:bg-sky-900/30 dark:text-sky-400' => $dayData['status'] === 'user_booked',
'bg-zinc-100 text-zinc-400 cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-600' => in_array($dayData['status'], ['past', 'closed', 'blocked', 'full']),
'ring-2 ring-amber-500 dark:ring-amber-400' => $selectedDate === $dayData['date'],
'calendar-cell rounded-lg text-center transition-colors font-medium min-h-[44px] text-white',
'bg-[#4A5D23]/70 hover:bg-[#4A5D23]/85 dark:bg-[#4A5D23]/60 dark:hover:bg-[#4A5D23]/75' => $dayData['status'] === 'available',
'bg-[#D4A84B]/70 hover:bg-[#D4A84B]/85 dark:bg-[#D4A84B]/60 dark:hover:bg-[#D4A84B]/75' => $dayData['status'] === 'partial',
'bg-sky-400/50 cursor-not-allowed dark:bg-sky-500/40' => $dayData['status'] === 'user_booked',
'bg-zinc-300/50 !text-zinc-400 cursor-not-allowed dark:bg-zinc-700/50 dark:!text-zinc-500' => in_array($dayData['status'], ['past', 'closed', 'blocked', 'full']),
'ring-2 ring-[#A68966] dark:ring-[#C4A882]' => $selectedDate === $dayData['date'],
])
@disabled(in_array($dayData['status'], ['past', 'closed', 'blocked', 'full', 'user_booked']))
>
@ -230,21 +230,21 @@ new class extends Component
<!-- Legend -->
<div class="flex flex-wrap gap-4 mt-6 text-sm">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded bg-emerald-100 dark:bg-emerald-900/30"></div>
<div class="w-4 h-4 rounded bg-[#4A5D23]/70 dark:bg-[#4A5D23]/60"></div>
<span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.available') }}</span>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded bg-amber-100 dark:bg-amber-900/30"></div>
<div class="w-4 h-4 rounded bg-[#D4A84B]/70 dark:bg-[#D4A84B]/60"></div>
<span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.partial') }}</span>
</div>
@if(count($bookedDates) > 0)
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded bg-sky-100 dark:bg-sky-900/30"></div>
<div class="w-4 h-4 rounded bg-sky-400/50 dark:bg-sky-500/40"></div>
<span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.user_booked') }}</span>
</div>
@endif
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded bg-zinc-100 dark:bg-zinc-800"></div>
<div class="w-4 h-4 rounded bg-zinc-300/50 dark:bg-zinc-700/50"></div>
<span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.unavailable') }}</span>
</div>
</div>