removed dark mod and applied fixes for text colors
This commit is contained in:
Naser Mansour
@@ -187,32 +187,32 @@ new class extends Component
|
||||
<flux:heading size="xl" class="mb-6 text-xl sm:text-2xl">{{ __('booking.request_consultation') }}</flux:heading>
|
||||
|
||||
{{-- Booking Status Banner --}}
|
||||
<div class="mb-6 rounded-lg border p-4 {{ $canBookToday ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20' : 'border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20' }}">
|
||||
<div class="mb-6 rounded-lg border p-4 {{ $canBookToday ? 'border-green-200 bg-green-50' : 'border-amber-200 bg-amber-50' }}">
|
||||
<div class="flex items-start gap-3">
|
||||
@if($canBookToday)
|
||||
<flux:icon name="check-circle" class="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-400" />
|
||||
<flux:icon name="check-circle" class="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600" />
|
||||
<div>
|
||||
<p class="font-medium text-green-700 dark:text-green-400">{{ __('booking.can_book_today') }}</p>
|
||||
<p class="font-medium text-green-700">{{ __('booking.can_book_today') }}</p>
|
||||
</div>
|
||||
@else
|
||||
<flux:icon name="information-circle" class="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400" />
|
||||
<flux:icon name="information-circle" class="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
|
||||
<div>
|
||||
<p class="font-medium text-amber-700 dark:text-amber-400">{{ __('booking.already_booked_today') }}</p>
|
||||
<p class="font-medium text-amber-700">{{ __('booking.already_booked_today') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($pendingRequests->isNotEmpty())
|
||||
<div class="mt-3 border-t border-zinc-200 pt-3 dark:border-zinc-700">
|
||||
<div class="mt-3 border-t border-zinc-200 pt-3">
|
||||
@if($pendingRequests->count() === 1)
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<p class="text-sm text-zinc-600">
|
||||
{{ __('booking.pending_for_date', ['date' => $pendingRequests->first()->booking_date->format('d/m/Y')]) }}
|
||||
</p>
|
||||
@else
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<p class="text-sm text-zinc-600">
|
||||
{{ __('booking.pending_count', ['count' => $pendingRequests->count()]) }}
|
||||
</p>
|
||||
<ul class="mt-1 list-inside list-disc text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<ul class="mt-1 list-inside list-disc text-sm text-zinc-500">
|
||||
@foreach($pendingRequests->take(3) as $request)
|
||||
<li>{{ $request->booking_date->format('d/m/Y') }}</li>
|
||||
@endforeach
|
||||
@@ -224,7 +224,7 @@ new class extends Component
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
<p class="mt-3 text-xs text-zinc-500">
|
||||
{{ __('booking.limit_message') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -232,19 +232,19 @@ new class extends Component
|
||||
@if(!$selectedDate || !$selectedTime)
|
||||
<!-- Step 1: Calendar Selection -->
|
||||
<div class="mt-6">
|
||||
<p class="mb-4 text-zinc-600 dark:text-zinc-400">{{ __('booking.select_date_time') }}</p>
|
||||
<p class="mb-4 text-zinc-600">{{ __('booking.select_date_time') }}</p>
|
||||
<livewire:availability-calendar :booked-dates="$bookedDates" />
|
||||
</div>
|
||||
@else
|
||||
<!-- Step 2: Problem Summary -->
|
||||
<div class="mt-6">
|
||||
<!-- Selected Time Display -->
|
||||
<div class="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-lg mb-6 border border-amber-200 dark:border-amber-800">
|
||||
<div class="bg-amber-50 p-4 rounded-lg mb-6 border border-amber-200">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="font-semibold text-zinc-900 dark:text-zinc-100">{{ __('booking.selected_time') }}</p>
|
||||
<p class="text-zinc-600 dark:text-zinc-400">{{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('l, d M Y') }}</p>
|
||||
<p class="text-zinc-600 dark:text-zinc-400">{{ \Carbon\Carbon::parse($selectedTime)->format('g:i A') }}</p>
|
||||
<p class="font-semibold text-zinc-900">{{ __('booking.selected_time') }}</p>
|
||||
<p class="text-zinc-600">{{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('l, d M Y') }}</p>
|
||||
<p class="text-zinc-600">{{ \Carbon\Carbon::parse($selectedTime)->format('g:i A') }}</p>
|
||||
</div>
|
||||
<flux:button size="sm" wire:click="clearSelection">
|
||||
{{ __('common.change') }}
|
||||
@@ -285,7 +285,7 @@ new class extends Component
|
||||
<!-- Confirmation Step -->
|
||||
<flux:callout>
|
||||
<flux:heading size="sm">{{ __('booking.confirm_booking') }}</flux:heading>
|
||||
<p class="text-zinc-600 dark:text-zinc-400">{{ __('booking.confirm_message') }}</p>
|
||||
<p class="text-zinc-600">{{ __('booking.confirm_message') }}</p>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<p><strong>{{ __('booking.date') }}:</strong>
|
||||
@@ -297,7 +297,7 @@ new class extends Component
|
||||
|
||||
<div class="mt-4">
|
||||
<p><strong>{{ __('booking.problem_summary') }}:</strong></p>
|
||||
<p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{{ $problemSummary }}</p>
|
||||
<p class="mt-1 text-sm text-zinc-600">{{ $problemSummary }}</p>
|
||||
</div>
|
||||
</flux:callout>
|
||||
|
||||
|
||||
@@ -65,18 +65,18 @@ new class extends Component
|
||||
@if($upcoming->isNotEmpty())
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($upcoming as $consultation)
|
||||
<div wire:key="upcoming-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div wire:key="upcoming-{{ $consultation->id }}" class="bg-white rounded-lg p-3 sm:p-4 border border-zinc-200">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<flux:icon name="calendar" class="w-5 h-5 text-zinc-500" />
|
||||
<span class="font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
<span class="font-semibold text-zinc-900">
|
||||
{{ $consultation->booking_date->translatedFormat(app()->getLocale() === 'ar' ? 'l، j F Y' : 'l, F j, Y') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<flux:icon name="clock" class="w-5 h-5 text-zinc-500" />
|
||||
<span class="text-zinc-600 dark:text-zinc-400">
|
||||
<span class="text-zinc-600">
|
||||
{{ \Carbon\Carbon::parse($consultation->booking_time)->format('g:i A') }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -116,9 +116,9 @@ new class extends Component
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
|
||||
<flux:icon name="calendar-days" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_upcoming_consultations') }}</flux:text>
|
||||
<div class="empty-state bg-zinc-50 rounded-lg">
|
||||
<flux:icon name="calendar-days" class="empty-state-icon text-zinc-300" />
|
||||
<flux:text class="text-zinc-500">{{ __('booking.no_upcoming_consultations') }}</flux:text>
|
||||
<div class="mt-4">
|
||||
<flux:button href="{{ route('client.consultations.book') }}" variant="primary" size="sm" wire:navigate class="w-full sm:w-auto">
|
||||
{{ __('booking.book_consultation') }}
|
||||
@@ -135,26 +135,26 @@ new class extends Component
|
||||
@if($pending->isNotEmpty())
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($pending as $consultation)
|
||||
<div wire:key="pending-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div wire:key="pending-{{ $consultation->id }}" class="bg-white rounded-lg p-3 sm:p-4 border border-zinc-200">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<flux:icon name="calendar" class="w-5 h-5 text-zinc-500" />
|
||||
<span class="font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
<span class="font-semibold text-zinc-900">
|
||||
{{ $consultation->booking_date->translatedFormat(app()->getLocale() === 'ar' ? 'l، j F Y' : 'l, F j, Y') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<flux:icon name="clock" class="w-5 h-5 text-zinc-500" />
|
||||
<span class="text-zinc-600 dark:text-zinc-400">
|
||||
<span class="text-zinc-600">
|
||||
{{ \Carbon\Carbon::parse($consultation->booking_time)->format('g:i A') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-zinc-500 dark:text-zinc-400 mb-2">
|
||||
<div class="text-sm text-zinc-500 mb-2">
|
||||
{{ __('booking.submitted_on') }}: {{ $consultation->created_at->translatedFormat(app()->getLocale() === 'ar' ? 'j F Y' : 'F j, Y') }}
|
||||
</div>
|
||||
@if($consultation->problem_summary)
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2">
|
||||
<p class="text-sm text-zinc-600 line-clamp-2">
|
||||
{{ Str::limit($consultation->problem_summary, 150) }}
|
||||
</p>
|
||||
@endif
|
||||
@@ -167,9 +167,9 @@ new class extends Component
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
|
||||
<flux:icon name="inbox" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_pending_requests') }}</flux:text>
|
||||
<div class="empty-state bg-zinc-50 rounded-lg">
|
||||
<flux:icon name="inbox" class="empty-state-icon text-zinc-300" />
|
||||
<flux:text class="text-zinc-500">{{ __('booking.no_pending_requests') }}</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
@@ -181,18 +181,18 @@ new class extends Component
|
||||
@if($past->isNotEmpty())
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@foreach($past as $consultation)
|
||||
<div wire:key="past-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-200 dark:border-zinc-700">
|
||||
<div wire:key="past-{{ $consultation->id }}" class="bg-white rounded-lg p-3 sm:p-4 border border-zinc-200">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<flux:icon name="calendar" class="w-5 h-5 text-zinc-500" />
|
||||
<span class="font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
<span class="font-semibold text-zinc-900">
|
||||
{{ $consultation->booking_date->translatedFormat(app()->getLocale() === 'ar' ? 'l، j F Y' : 'l, F j, Y') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<flux:icon name="clock" class="w-5 h-5 text-zinc-500" />
|
||||
<span class="text-zinc-600 dark:text-zinc-400">
|
||||
<span class="text-zinc-600">
|
||||
{{ \Carbon\Carbon::parse($consultation->booking_time)->format('g:i A') }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -226,9 +226,9 @@ new class extends Component
|
||||
{{ $past->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
|
||||
<flux:icon name="archive-box" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('booking.no_past_consultations') }}</flux:text>
|
||||
<div class="empty-state bg-zinc-50 rounded-lg">
|
||||
<flux:icon name="archive-box" class="empty-state-icon text-zinc-300" />
|
||||
<flux:text class="text-zinc-500">{{ __('booking.no_past_consultations') }}</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user