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
@@ -115,18 +115,18 @@ new class extends Component {
<flux:heading size="xl">{{ __('timelines.create_timeline') }}</flux:heading>
</div>
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="rounded-lg border border-zinc-200 bg-white p-6 ">
<form wire:submit="create" class="space-y-6">
{{-- Client Selection --}}
<flux:field>
<flux:label class="required">{{ __('timelines.select_client') }}</flux:label>
@if($selectedUser)
<div class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900">
<div class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-3 ">
<flux:avatar size="sm" name="{{ $selectedUser->full_name }}" />
<div class="flex-1">
<div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $selectedUser->full_name }}</div>
<div class="text-sm text-zinc-500 dark:text-zinc-400">{{ $selectedUser->email }}</div>
<div class="font-medium text-zinc-900 ">{{ $selectedUser->full_name }}</div>
<div class="text-sm text-zinc-500 ">{{ $selectedUser->email }}</div>
</div>
<flux:button variant="ghost" size="sm" wire:click="clearSelection" icon="x-mark" />
</div>
@@ -141,29 +141,29 @@ new class extends Component {
/>
@if(strlen($search) >= 2)
<div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
<div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white shadow-lg ">
@forelse($this->clients as $client)
<button
type="button"
wire:key="client-{{ $client->id }}"
wire:click="selectUser({{ $client->id }})"
class="flex w-full items-center gap-3 px-4 py-3 text-start hover:bg-zinc-50 dark:hover:bg-zinc-700 first:rounded-t-lg last:rounded-b-lg"
class="flex w-full items-center gap-3 px-4 py-3 text-start hover:bg-zinc-50 first:rounded-t-lg last:rounded-b-lg"
>
<flux:avatar size="sm" name="{{ $client->full_name }}" />
<div>
<div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $client->full_name }}</div>
<div class="text-sm text-zinc-500 dark:text-zinc-400">{{ $client->email }}</div>
<div class="font-medium text-zinc-900 ">{{ $client->full_name }}</div>
<div class="text-sm text-zinc-500 ">{{ $client->email }}</div>
</div>
</button>
@empty
<div class="px-4 py-3 text-sm text-zinc-500 dark:text-zinc-400">
<div class="px-4 py-3 text-sm text-zinc-500 ">
{{ __('timelines.no_clients_found') }}
</div>
@endforelse
</div>
@elseif(strlen($search) > 0 && strlen($search) < 2)
<div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white p-3 shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
<div class="text-sm text-zinc-500 dark:text-zinc-400">
<div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white p-3 shadow-lg ">
<div class="text-sm text-zinc-500 ">
{{ __('timelines.type_to_search') }}
</div>
</div>
@@ -210,7 +210,7 @@ new class extends Component {
<flux:error name="initialNotes" />
</flux:field>
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6 dark:border-zinc-700">
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6 ">
<flux:button variant="ghost" :href="route('admin.dashboard')" wire:navigate>
{{ __('timelines.cancel') }}
</flux:button>
@@ -196,11 +196,11 @@ new class extends Component {
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<flux:heading size="xl">{{ __('export.export_timelines') }}</flux:heading>
<flux:text class="mt-1 text-zinc-500 dark:text-zinc-400">{{ __('export.export_timelines_description') }}</flux:text>
<flux:text class="mt-1 text-zinc-500">{{ __('export.export_timelines_description') }}</flux:text>
</div>
</div>
<div class="mb-6 rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="mb-6 rounded-lg border border-zinc-200 bg-white p-6">
<flux:heading size="lg" class="mb-4">{{ __('export.filters_applied') }}</flux:heading>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -217,19 +217,19 @@ new class extends Component {
<button
wire:click="clearClient"
type="button"
class="absolute end-2 top-8 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
class="absolute end-2 top-8 text-zinc-400 hover:text-zinc-600"
>
<flux:icon name="x-mark" class="h-4 w-4" />
</button>
@endif
@if (strlen($clientSearch) >= 2 && ! $clientId && $this->clients->count() > 0)
<div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
<div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white shadow-lg">
@foreach ($this->clients as $client)
<button
wire:click="selectClient({{ $client->id }})"
type="button"
class="block w-full px-4 py-2 text-start hover:bg-zinc-100 dark:hover:bg-zinc-700"
class="block w-full px-4 py-2 text-start hover:bg-zinc-100"
>
<span class="font-medium">{{ $client->full_name }}</span>
<span class="text-sm text-zinc-500">{{ $client->email }}</span>
@@ -273,7 +273,7 @@ new class extends Component {
wire:model.live="includeUpdates"
:label="__('export.include_updates')"
/>
<flux:text class="ms-6 text-sm text-zinc-500 dark:text-zinc-400">
<flux:text class="ms-6 text-sm text-zinc-500">
{{ __('export.include_updates_description') }}
</flux:text>
</div>
@@ -287,11 +287,11 @@ new class extends Component {
@endif
</div>
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="rounded-lg border border-zinc-200 bg-white p-6">
<div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
<div>
<flux:text class="text-zinc-600 dark:text-zinc-400">
{{ __('export.total_records') }}: <span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $previewCount }}</span>
<flux:text class="text-zinc-600">
{{ __('export.total_records') }}: <span class="font-semibold text-zinc-900">{{ $previewCount }}</span>
</flux:text>
</div>
@@ -323,9 +323,9 @@ new class extends Component {
</div>
@if ($previewCount === 0)
<div class="mt-6 rounded-lg bg-zinc-50 p-8 text-center dark:bg-zinc-900">
<div class="mt-6 rounded-lg bg-zinc-50 p-8 text-center">
<flux:icon name="clock" class="mx-auto mb-4 h-12 w-12 text-zinc-400" />
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('export.no_timelines_match') }}</flux:text>
<flux:text class="text-zinc-500">{{ __('export.no_timelines_match') }}</flux:text>
</div>
@endif
</div>
@@ -125,7 +125,7 @@ new class extends Component
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
<div>
<flux:heading size="xl">{{ __('timelines.timelines') }}</flux:heading>
<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{{ __('timelines.timelines_description') }}</p>
<p class="text-sm text-zinc-500 mt-1">{{ __('timelines.timelines_description') }}</p>
</div>
<div class="flex gap-2">
<flux:button href="{{ route('admin.timelines.export') }}" icon="arrow-down-tray" wire:navigate>
@@ -150,7 +150,7 @@ new class extends Component
@endif
<!-- Filters -->
<div class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700 mb-6">
<div class="bg-white rounded-lg p-4 border border-zinc-200 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<flux:field>
<flux:input
@@ -208,27 +208,27 @@ new class extends Component
</div>
<!-- Sort Headers -->
<div class="hidden lg:flex bg-zinc-100 dark:bg-zinc-700 rounded-t-lg px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 gap-4 mb-0">
<button wire:click="sort('case_name')" class="flex items-center gap-1 flex-1 hover:text-zinc-900 dark:hover:text-white">
<div class="hidden lg:flex bg-zinc-100 rounded-t-lg px-4 py-2 text-sm font-medium text-zinc-600 gap-4 mb-0">
<button wire:click="sort('case_name')" class="flex items-center gap-1 flex-1 hover:text-zinc-900">
{{ __('timelines.case_name') }}
@if($sortBy === 'case_name')
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
@endif
</button>
<button wire:click="sort('user_id')" class="flex items-center gap-1 w-40 hover:text-zinc-900 dark:hover:text-white">
<button wire:click="sort('user_id')" class="flex items-center gap-1 w-40 hover:text-zinc-900">
{{ __('admin.client') }}
@if($sortBy === 'user_id')
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
@endif
</button>
<span class="w-24">{{ __('admin.current_status') }}</span>
<button wire:click="sort('updated_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900 dark:hover:text-white">
<button wire:click="sort('updated_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900">
{{ __('timelines.last_updated') }}
@if($sortBy === 'updated_at')
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
@endif
</button>
<button wire:click="sort('created_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900 dark:hover:text-white">
<button wire:click="sort('created_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900">
{{ __('timelines.created') }}
@if($sortBy === 'created_at')
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
@@ -241,15 +241,15 @@ new class extends Component
<!-- Timelines List -->
<div class="space-y-0">
@forelse($timelines as $timeline)
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white dark:bg-zinc-800 p-4 border border-zinc-200 dark:border-zinc-700 {{ $loop->first ? 'rounded-t-lg lg:rounded-t-none' : '' }} {{ $loop->last ? 'rounded-b-lg' : '' }} {{ !$loop->first ? 'border-t-0' : '' }}">
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white p-4 border border-zinc-200 {{ $loop->first ? 'rounded-t-lg lg:rounded-t-none' : '' }} {{ $loop->last ? 'rounded-b-lg' : '' }} {{ !$loop->first ? 'border-t-0' : '' }}">
<div class="flex flex-col lg:flex-row lg:items-center gap-4">
<!-- Case Name -->
<div class="flex-1">
<a href="{{ route('admin.timelines.show', $timeline) }}" class="font-semibold text-zinc-900 dark:text-zinc-100 hover:text-blue-600 dark:hover:text-blue-400" wire:navigate>
<a href="{{ route('admin.timelines.show', $timeline) }}" class="font-semibold text-zinc-900 hover:text-blue-600" wire:navigate>
{{ $timeline->case_name }}
</a>
@if($timeline->case_reference)
<div class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
<div class="text-xs text-zinc-500 mt-1">
{{ __('timelines.reference') }}: {{ $timeline->case_reference }}
</div>
@endif
@@ -257,10 +257,10 @@ new class extends Component
<!-- Client -->
<div class="lg:w-40">
<div class="text-sm text-zinc-900 dark:text-zinc-100">
<div class="text-sm text-zinc-900">
{{ $timeline->user->full_name }}
</div>
<div class="text-xs text-zinc-500 dark:text-zinc-400">
<div class="text-xs text-zinc-500">
{{ $timeline->user->email }}
</div>
</div>
@@ -274,14 +274,14 @@ new class extends Component
<!-- Last Updated -->
<div class="lg:w-32">
<div class="text-sm text-zinc-900 dark:text-zinc-100">
<div class="text-sm text-zinc-900">
{{ $timeline->updated_at->diffForHumans() }}
</div>
</div>
<!-- Created -->
<div class="lg:w-32">
<div class="text-sm text-zinc-500 dark:text-zinc-400">
<div class="text-sm text-zinc-500">
{{ $timeline->created_at->format('Y-m-d') }}
</div>
</div>
@@ -342,7 +342,7 @@ new class extends Component
</div>
</div>
@empty
<div class="text-center py-12 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
<div class="text-center py-12 text-zinc-500 bg-white rounded-lg border border-zinc-200">
<flux:icon name="inbox" class="w-12 h-12 mx-auto mb-4" />
<p>{{ __('timelines.no_timelines') }}</p>
</div>
@@ -157,12 +157,12 @@ new class extends Component {
</div>
{{-- Timeline Header --}}
<div class="mb-6 rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 {{ $timeline->isArchived() ? 'opacity-75' : '' }}">
<div class="mb-6 rounded-lg border border-zinc-200 bg-white p-6 {{ $timeline->isArchived() ? 'opacity-75' : '' }}">
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<flux:heading size="xl">{{ $timeline->case_name }}</flux:heading>
@if($timeline->case_reference)
<div class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
<div class="mt-1 text-sm text-zinc-500 ">
{{ __('timelines.reference') }}: {{ $timeline->case_reference }}
</div>
@endif
@@ -185,7 +185,7 @@ new class extends Component {
</div>
</div>
<div class="mt-4 flex flex-wrap gap-4 text-sm text-zinc-600 dark:text-zinc-300">
<div class="mt-4 flex flex-wrap gap-4 text-sm text-zinc-600 ">
<div class="flex items-center gap-2">
<flux:icon.user class="size-4" />
<span>{{ $timeline->user->full_name }}</span>
@@ -219,7 +219,7 @@ new class extends Component {
@endif
{{-- Add Update Form --}}
<div class="mb-6 rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 {{ $timeline->isArchived() ? 'opacity-60' : '' }}">
<div class="mb-6 rounded-lg border border-zinc-200 bg-white p-6 {{ $timeline->isArchived() ? 'opacity-60' : '' }}">
<flux:heading size="lg" class="mb-4">{{ __('timelines.add_update') }}</flux:heading>
@if($timeline->isArchived())
@@ -258,34 +258,34 @@ new class extends Component {
</div>
{{-- Timeline Updates --}}
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
<div class="rounded-lg border border-zinc-200 bg-white p-6 ">
<flux:heading size="lg" class="mb-6">{{ __('timelines.updates_history') }}</flux:heading>
@if($timeline->updates->isEmpty())
<div class="text-center py-8 text-zinc-500 dark:text-zinc-400">
<div class="text-center py-8 text-zinc-500 ">
{{ __('timelines.no_updates') }}
</div>
@else
<div class="relative">
{{-- Timeline line --}}
<div class="absolute start-4 top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
<div class="absolute start-4 top-0 bottom-0 w-0.5 bg-zinc-200 "></div>
<div class="space-y-6">
@foreach($timeline->updates as $update)
<div wire:key="update-{{ $update->id }}" class="relative flex gap-4">
{{-- Timeline dot --}}
<div class="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
<flux:icon.document-text class="size-4 text-blue-600 dark:text-blue-400" />
<div class="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 ">
<flux:icon.document-text class="size-4 text-blue-600 " />
</div>
{{-- Update content --}}
<div class="flex-1 rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
<div class="flex-1 rounded-lg border border-zinc-200 bg-zinc-50 p-4 ">
<div class="mb-2 flex flex-wrap items-center justify-between gap-2">
<div class="flex flex-wrap items-center gap-3 text-sm">
<span class="font-medium text-zinc-900 dark:text-zinc-100">
<span class="font-medium text-zinc-900 ">
{{ $update->admin->full_name }}
</span>
<span class="text-zinc-500 dark:text-zinc-400">
<span class="text-zinc-500 ">
{{ $update->created_at->format('Y-m-d H:i') }}
</span>
@if($update->updated_at->gt($update->created_at))
@@ -307,7 +307,7 @@ new class extends Component {
@endif
</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>