removed dark mod and applied fixes for text colors

This commit is contained in:
Naser Mansour
2026-01-08 19:15:02 +02:00
parent ddbb224d07
commit dfee2ff5c8
64 changed files with 744 additions and 711 deletions
@@ -172,7 +172,7 @@ new class extends Component
<!-- Day Headers -->
<div class="grid grid-cols-7 gap-1 mb-2" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
@foreach($dayHeaders as $day)
<div class="text-center text-sm font-semibold text-zinc-600 dark:text-zinc-400">
<div class="text-center text-sm font-semibold text-zinc-600">
{{ __("calendar.{$day}") }}
</div>
@endforeach
@@ -188,11 +188,11 @@ new class extends Component
wire:click="selectDate('{{ $dayData['date'] }}')"
@class([
'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'],
'bg-[#4A5D23]/70 hover:bg-[#4A5D23]/85' => $dayData['status'] === 'available',
'bg-[#D4A84B]/70 hover:bg-[#D4A84B]/85' => $dayData['status'] === 'partial',
'bg-sky-400/50 cursor-not-allowed' => $dayData['status'] === 'user_booked',
'bg-zinc-300/50 !text-zinc-400 cursor-not-allowed' => in_array($dayData['status'], ['past', 'closed', 'blocked', 'full']),
'ring-2 ring-[#A68966]' => $selectedDate === $dayData['date'],
])
@disabled(in_array($dayData['status'], ['past', 'closed', 'blocked', 'full', 'user_booked']))
>
@@ -215,14 +215,14 @@ new class extends Component
@foreach($availableSlots as $slot)
<button
wire:click="$parent.selectSlot('{{ $selectedDate }}', '{{ $slot }}')"
class="time-slot-btn rounded-lg border border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white transition-colors dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 dark:hover:text-white"
class="time-slot-btn rounded-lg border border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white transition-colors"
>
{{ \Carbon\Carbon::parse($slot)->format('g:i A') }}
</button>
@endforeach
</div>
@else
<p class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_slots_available') }}</p>
<p class="text-zinc-500">{{ __('booking.no_slots_available') }}</p>
@endif
</div>
@endif
@@ -230,22 +230,22 @@ 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-[#4A5D23]/70 dark:bg-[#4A5D23]/60"></div>
<span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.available') }}</span>
<div class="w-4 h-4 rounded bg-[#4A5D23]/70"></div>
<span class="text-zinc-600">{{ __('booking.available') }}</span>
</div>
<div class="flex items-center gap-2">
<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 class="w-4 h-4 rounded bg-[#D4A84B]/70"></div>
<span class="text-zinc-600">{{ __('booking.partial') }}</span>
</div>
@if(count($bookedDates) > 0)
<div class="flex items-center gap-2">
<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 class="w-4 h-4 rounded bg-sky-400/50"></div>
<span class="text-zinc-600">{{ __('booking.user_booked') }}</span>
</div>
@endif
<div class="flex items-center gap-2">
<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 class="w-4 h-4 rounded bg-zinc-300/50"></div>
<span class="text-zinc-600">{{ __('booking.unavailable') }}</span>
</div>
</div>
</div>