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
@@ -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>
@@ -33,7 +33,7 @@ new class extends Component {
<div class="space-y-6 p-4 sm:p-6">
{{-- Welcome Section --}}
<div class="rounded-lg border border-zinc-200 bg-[#0A1F44] p-4 sm:p-6 text-white dark:border-zinc-700">
<div class="rounded-lg border border-zinc-200 bg-[#0A1F44] p-4 sm:p-6 text-white">
<flux:heading size="xl" class="text-white text-lg sm:text-xl lg:text-2xl">
{{ __('client.dashboard.welcome', ['name' => auth()->user()->full_name]) }}
</flux:heading>
@@ -45,7 +45,7 @@ new class extends Component {
{{-- Widgets Grid --}}
<div class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2">
{{-- Upcoming Consultation Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm ">
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
{{ __('client.dashboard.upcoming_consultation') }}
</flux:heading>
@@ -106,7 +106,7 @@ new class extends Component {
</div>
{{-- Active Cases Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm ">
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
{{ __('client.dashboard.active_cases') }}
</flux:heading>
@@ -122,8 +122,8 @@ new class extends Component {
$latestUpdate = $latestTimeline->updates()->reorder()->latest()->first();
@endphp
@if ($latestUpdate)
<div class="rounded-lg bg-zinc-50 p-3 dark:bg-zinc-800">
<flux:text size="sm" class="text-zinc-600 dark:text-zinc-400">
<div class="rounded-lg bg-zinc-50 p-3">
<flux:text size="sm" class="text-zinc-600">
{{ __('client.dashboard.latest_update') }}:
</flux:text>
<flux:text class="mt-1">
@@ -152,7 +152,7 @@ new class extends Component {
</div>
{{-- Recent Updates Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm ">
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
{{ __('client.dashboard.recent_updates') }}
</flux:heading>
@@ -160,7 +160,7 @@ new class extends Component {
@if ($recentUpdates->isNotEmpty())
<div class="space-y-3">
@foreach ($recentUpdates as $update)
<div class="border-b border-zinc-100 pb-3 last:border-0 last:pb-0 dark:border-zinc-800">
<div class="border-b border-zinc-100 pb-3 last:border-0 last:pb-0 ">
<div class="flex items-start justify-between gap-2">
<div class="flex-1">
<flux:text size="sm" class="font-medium">
@@ -193,7 +193,7 @@ new class extends Component {
</div>
{{-- Booking Status Widget --}}
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="rounded-lg border border-zinc-200 bg-white p-4 sm:p-6 shadow-sm ">
<flux:heading size="lg" class="mb-4 text-base sm:text-lg">
{{ __('client.dashboard.booking_status') }}
</flux:heading>
@@ -208,18 +208,18 @@ new class extends Component {
</div>
@endif
<div class="rounded-lg p-3 {{ $canBookToday ? 'bg-green-50 dark:bg-green-900/20' : 'bg-amber-50 dark:bg-amber-900/20' }}">
<div class="rounded-lg p-3 {{ $canBookToday ? 'bg-green-50' : 'bg-amber-50' }}">
@if ($canBookToday)
<div class="flex items-center gap-2">
<flux:icon name="check-circle" class="h-5 w-5 text-green-600" />
<flux:text class="text-green-700 dark:text-green-400">
<flux:text class="text-green-700">
{{ __('client.dashboard.can_book') }}
</flux:text>
</div>
@else
<div class="flex items-center gap-2">
<flux:icon name="information-circle" class="h-5 w-5 text-amber-600" />
<flux:text class="text-amber-700 dark:text-amber-400">
<flux:text class="text-amber-700">
{{ __('client.dashboard.cannot_book') }}
</flux:text>
</div>
@@ -39,66 +39,66 @@ new class extends Component
</div>
{{-- Profile Information Card --}}
<div class="mt-6 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="mt-6 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
@if ($isIndividual)
<dl class="space-y-4">
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.full_name') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.full_name') }}</dt>
<dd class="text-lg font-medium">{{ $user->full_name }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.national_id') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.national_id') }}</dt>
<dd>{{ $user->national_id }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.email') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.email') }}</dt>
<dd>{{ $user->email }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.phone') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.phone') }}</dt>
<dd>{{ $user->phone }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.preferred_language') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.preferred_language') }}</dt>
<dd>{{ $user->preferred_language === 'ar' ? __('profile.arabic') : __('profile.english') }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.member_since') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.member_since') }}</dt>
<dd>{{ $user->created_at->translatedFormat(app()->getLocale() === 'ar' ? 'j F Y' : 'F j, Y') }}</dd>
</div>
</dl>
@else
<dl class="space-y-4">
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.company_name') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.company_name') }}</dt>
<dd class="text-lg font-medium">{{ $user->company_name }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.registration_number') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.registration_number') }}</dt>
<dd>{{ $user->company_cert_number }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.contact_person') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.contact_person') }}</dt>
<dd>{{ $user->contact_person_name }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.contact_person_id') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.contact_person_id') }}</dt>
<dd>{{ $user->contact_person_id }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.email') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.email') }}</dt>
<dd>{{ $user->email }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.phone') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.phone') }}</dt>
<dd>{{ $user->phone }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.preferred_language') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.preferred_language') }}</dt>
<dd>{{ $user->preferred_language === 'ar' ? __('profile.arabic') : __('profile.english') }}</dd>
</div>
<div>
<dt class="text-sm text-zinc-500 dark:text-zinc-400">{{ __('profile.member_since') }}</dt>
<dt class="text-sm text-zinc-500">{{ __('profile.member_since') }}</dt>
<dd>{{ $user->created_at->translatedFormat(app()->getLocale() === 'ar' ? 'j F Y' : 'F j, Y') }}</dd>
</div>
</dl>
@@ -34,17 +34,17 @@ new class extends Component
{{-- Active Timelines --}}
@if($activeTimelines->total() > 0)
<div class="mb-6 sm:mb-8">
<h2 class="text-base sm:text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">{{ __('client.active_cases') }}</h2>
<h2 class="text-base sm:text-lg font-semibold text-zinc-900 mb-4">{{ __('client.active_cases') }}</h2>
<div class="space-y-3 sm:space-y-4">
@foreach($activeTimelines as $timeline)
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white dark:bg-zinc-800 p-3 sm:p-4 rounded-lg border-s-4 border-amber-500 shadow-sm">
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white p-3 sm:p-4 rounded-lg border-s-4 border-amber-500 shadow-sm">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
<div class="flex-1 min-w-0">
<h3 class="font-medium text-zinc-900 dark:text-zinc-100 truncate">{{ $timeline->case_name }}</h3>
<h3 class="font-medium text-zinc-900 truncate">{{ $timeline->case_name }}</h3>
@if($timeline->case_reference)
<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
<p class="text-sm text-zinc-600">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
@endif
<p class="text-xs sm:text-sm text-zinc-500 dark:text-zinc-500 mt-1">
<p class="text-xs sm:text-sm text-zinc-500 mt-1">
{{ __('client.updates') }}: {{ $timeline->updates_count }}
@if($timeline->updates->first())
· {{ __('client.last_update') }}: {{ $timeline->updates->first()->created_at->diffForHumans() }}
@@ -72,17 +72,17 @@ new class extends Component
{{-- Archived Timelines --}}
@if($archivedTimelines->total() > 0)
<div>
<h2 class="text-base sm:text-lg font-semibold text-zinc-600 dark:text-zinc-400 mb-4">{{ __('client.archived_cases') }}</h2>
<h2 class="text-base sm:text-lg font-semibold text-zinc-600 mb-4">{{ __('client.archived_cases') }}</h2>
<div class="space-y-3 sm:space-y-4 opacity-75">
@foreach($archivedTimelines as $timeline)
<div wire:key="timeline-{{ $timeline->id }}" class="bg-zinc-50 dark:bg-zinc-900 p-3 sm:p-4 rounded-lg shadow-sm">
<div wire:key="timeline-{{ $timeline->id }}" class="bg-zinc-50 p-3 sm:p-4 rounded-lg shadow-sm">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
<div class="flex-1 min-w-0">
<h3 class="font-medium text-zinc-700 dark:text-zinc-300 truncate">{{ $timeline->case_name }}</h3>
<h3 class="font-medium text-zinc-700 truncate">{{ $timeline->case_name }}</h3>
@if($timeline->case_reference)
<p class="text-sm text-zinc-500 dark:text-zinc-500">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
<p class="text-sm text-zinc-500">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
@endif
<p class="text-xs sm:text-sm text-zinc-400 dark:text-zinc-600 mt-1">
<p class="text-xs sm:text-sm text-zinc-400 mt-1">
{{ __('client.updates') }}: {{ $timeline->updates_count }}
</p>
</div>
@@ -107,8 +107,8 @@ new class extends Component
{{-- Empty State --}}
@if($activeTimelines->total() === 0 && $archivedTimelines->total() === 0)
<div class="empty-state">
<flux:icon name="folder-open" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
<p class="text-zinc-500 dark:text-zinc-400">{{ __('client.no_cases_yet') }}</p>
<flux:icon name="folder-open" class="empty-state-icon text-zinc-300" />
<p class="text-zinc-500">{{ __('client.no_cases_yet') }}</p>
</div>
@endif
</div>
@@ -22,7 +22,7 @@ new class extends Component
<div>
<flux:heading size="xl">{{ $timeline->case_name }}</flux:heading>
@if($timeline->case_reference)
<p class="text-zinc-600 dark:text-zinc-400">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
<p class="text-zinc-600 ">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
@endif
</div>
<flux:badge :variant="$timeline->status->value === 'active' ? 'success' : 'default'">
@@ -39,19 +39,19 @@ new class extends Component
@forelse($timeline->updates as $update)
<div wire:key="update-{{ $update->id }}" class="relative ps-12">
{{-- Dot --}}
<div class="absolute start-2 top-2 w-4 h-4 rounded-full bg-amber-500 border-4 border-amber-50 dark:border-zinc-900"></div>
<div class="absolute start-2 top-2 w-4 h-4 rounded-full bg-amber-500 border-4 border-amber-50 "></div>
<div class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-sm">
<div class="text-sm text-zinc-500 dark:text-zinc-400 mb-2">
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="text-sm text-zinc-500 mb-2">
{{ $update->created_at->translatedFormat('l, d M Y - g:i A') }}
</div>
<div class="prose prose-sm dark:prose-invert max-w-none">
<div class="prose prose-sm max-w-none">
{!! $update->update_text !!}
</div>
</div>
</div>
@empty
<p class="text-center text-zinc-500 dark:text-zinc-400 py-8">
<p class="text-center text-zinc-500 py-8">
{{ __('client.no_updates_yet') }}
</p>
@endforelse