fixed invisible buttons issue across the website

This commit is contained in:
Naser Mansour
2026-01-09 19:32:10 +02:00
parent 80072eae56
commit 773e1d3f7f
39 changed files with 155 additions and 155 deletions
@@ -80,7 +80,7 @@ new class extends Component {
<div>
<div class="mb-6">
<flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
<flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
{{ __('clients.back_to_companies') }}
</flux:button>
</div>
@@ -175,7 +175,7 @@ new class extends Component {
</div>
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
<flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate>
<flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate>
{{ __('clients.cancel') }}
</flux:button>
<flux:button variant="primary" type="submit">
@@ -104,7 +104,7 @@ new class extends Component {
<div>
<div class="mb-6">
<flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
<flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
{{ __('clients.back_to_companies') }}
</flux:button>
</div>
@@ -211,7 +211,7 @@ new class extends Component {
</div>
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
<flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate>
<flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate>
{{ __('clients.cancel') }}
</flux:button>
<flux:button variant="primary" type="submit">
@@ -94,7 +94,7 @@ new class extends Component {
</flux:select>
</div>
@if ($search || $statusFilter)
<flux:button wire:click="clearFilters" variant="ghost" icon="x-mark">
<flux:button wire:click="clearFilters" variant="outline" icon="x-mark">
{{ __('clients.clear_filters') }}
</flux:button>
@endif
@@ -160,7 +160,7 @@ new class extends Component {
<td class="whitespace-nowrap px-6 py-4 text-end">
<div class="flex items-center justify-end gap-2">
<flux:button
variant="ghost"
variant="outline"
size="sm"
icon="eye"
:href="route('admin.clients.company.show', $client)"
@@ -168,7 +168,7 @@ new class extends Component {
:title="__('clients.view')"
/>
<flux:button
variant="ghost"
variant="outline"
size="sm"
icon="pencil"
:href="route('admin.clients.company.edit', $client)"
@@ -191,7 +191,7 @@ new class extends Component {
@endif
</flux:text>
@if ($search || $statusFilter)
<flux:button wire:click="clearFilters" variant="ghost" class="mt-4">
<flux:button wire:click="clearFilters" variant="outline" class="mt-4">
{{ __('clients.clear_filters') }}
</flux:button>
@endif
@@ -24,12 +24,12 @@ new class extends Component {
<div>
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
<flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
{{ __('clients.back_to_companies') }}
</flux:button>
</div>
<div class="flex flex-wrap gap-2">
<flux:button variant="ghost" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-individual').show()" icon="user">
<flux:button variant="outline" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-individual').show()" icon="user">
{{ __('clients.convert_to_individual') }}
</flux:button>
<flux:button variant="primary" :href="route('admin.clients.company.edit', $client)" wire:navigate icon="pencil">
@@ -41,11 +41,11 @@ new class extends Component
<div class="max-w-5xl mx-auto">
<div class="mb-6">
@if($user->user_type->value === 'individual')
<flux:button href="{{ route('admin.clients.individual.show', $user) }}" variant="ghost" icon="arrow-left" wire:navigate>
<flux:button href="{{ route('admin.clients.individual.show', $user) }}" variant="outline" icon="arrow-left" wire:navigate>
{{ __('common.back') }}
</flux:button>
@else
<flux:button href="{{ route('admin.clients.company.show', $user) }}" variant="ghost" icon="arrow-left" wire:navigate>
<flux:button href="{{ route('admin.clients.company.show', $user) }}" variant="outline" icon="arrow-left" wire:navigate>
{{ __('common.back') }}
</flux:button>
@endif
@@ -95,32 +95,32 @@ new class extends Component
<div class="flex flex-wrap items-center gap-2">
@php
$statusVariant = match($consultation->status) {
\App\Enums\ConsultationStatus::Pending => 'warning',
\App\Enums\ConsultationStatus::Approved => 'primary',
\App\Enums\ConsultationStatus::Completed => 'success',
\App\Enums\ConsultationStatus::Cancelled => 'danger',
\App\Enums\ConsultationStatus::NoShow => 'danger',
\App\Enums\ConsultationStatus::Rejected => 'danger',
$statusColor = match($consultation->status) {
\App\Enums\ConsultationStatus::Pending => 'amber',
\App\Enums\ConsultationStatus::Approved => 'sky',
\App\Enums\ConsultationStatus::Completed => 'green',
\App\Enums\ConsultationStatus::Cancelled => 'red',
\App\Enums\ConsultationStatus::NoShow => 'orange',
\App\Enums\ConsultationStatus::Rejected => 'rose',
};
@endphp
<flux:badge variant="{{ $statusVariant }}" size="sm">
<flux:badge color="{{ $statusColor }}" size="sm">
{{ $consultation->status->label() }}
</flux:badge>
<flux:badge variant="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'primary' : 'outline' }}" size="sm">
<flux:badge color="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'indigo' : 'zinc' }}" size="sm">
{{ $consultation->consultation_type->label() }}
</flux:badge>
@if($consultation->consultation_type === \App\Enums\ConsultationType::Paid)
@php
$paymentVariant = match($consultation->payment_status) {
\App\Enums\PaymentStatus::Pending => 'warning',
\App\Enums\PaymentStatus::Received => 'success',
default => 'outline',
$paymentColor = match($consultation->payment_status) {
\App\Enums\PaymentStatus::Pending => 'amber',
\App\Enums\PaymentStatus::Received => 'green',
default => 'zinc',
};
@endphp
<flux:badge variant="{{ $paymentVariant }}" size="sm">
<flux:badge color="{{ $paymentColor }}" size="sm">
{{ $consultation->payment_status->label() }}
</flux:badge>
@endif
@@ -135,7 +135,7 @@ new class extends Component
<flux:button
href="{{ route('admin.consultations.show', $consultation) }}"
variant="ghost"
variant="outline"
size="sm"
wire:navigate
>
@@ -131,7 +131,7 @@ new class extends Component {
</flux:field>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" x-on:click="$flux.modal('convert-to-company').close()">
<flux:button type="button" variant="outline" x-on:click="$flux.modal('convert-to-company').close()">
{{ __('clients.cancel') }}
</flux:button>
<flux:button type="submit" variant="primary">
@@ -164,7 +164,7 @@ new class extends Component {
</div>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" wire:click="cancelConfirmation">
<flux:button type="button" variant="outline" wire:click="cancelConfirmation">
{{ __('clients.back') }}
</flux:button>
<flux:button type="button" variant="primary" wire:click="convertToCompany">
@@ -117,7 +117,7 @@ new class extends Component {
</flux:callout>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" x-on:click="$flux.modal('convert-to-individual').close()">
<flux:button type="button" variant="outline" x-on:click="$flux.modal('convert-to-individual').close()">
{{ __('clients.cancel') }}
</flux:button>
<flux:button type="submit" variant="primary">
@@ -146,7 +146,7 @@ new class extends Component {
</div>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" wire:click="cancelConfirmation">
<flux:button type="button" variant="outline" wire:click="cancelConfirmation">
{{ __('clients.back') }}
</flux:button>
<flux:button type="button" variant="primary" wire:click="convertToIndividual">
@@ -73,7 +73,7 @@ new class extends Component {
<div>
<div class="mb-6">
<flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
<flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
{{ __('clients.back_to_clients') }}
</flux:button>
</div>
@@ -148,7 +148,7 @@ new class extends Component {
</div>
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
<flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate>
<flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate>
{{ __('clients.cancel') }}
</flux:button>
<flux:button variant="primary" type="submit">
@@ -95,7 +95,7 @@ new class extends Component {
<div>
<div class="mb-6">
<flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
<flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
{{ __('clients.back_to_clients') }}
</flux:button>
</div>
@@ -182,7 +182,7 @@ new class extends Component {
</div>
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
<flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate>
<flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate>
{{ __('clients.cancel') }}
</flux:button>
<flux:button variant="primary" type="submit">
@@ -94,7 +94,7 @@ new class extends Component {
</flux:select>
</div>
@if ($search || $statusFilter)
<flux:button wire:click="clearFilters" variant="ghost" icon="x-mark">
<flux:button wire:click="clearFilters" variant="outline" icon="x-mark">
{{ __('clients.clear_filters') }}
</flux:button>
@endif
@@ -160,7 +160,7 @@ new class extends Component {
<td class="whitespace-nowrap px-6 py-4 text-end">
<div class="flex items-center justify-end gap-2">
<flux:button
variant="ghost"
variant="outline"
size="sm"
icon="eye"
:href="route('admin.clients.individual.show', $client)"
@@ -168,7 +168,7 @@ new class extends Component {
:title="__('clients.view')"
/>
<flux:button
variant="ghost"
variant="outline"
size="sm"
icon="pencil"
:href="route('admin.clients.individual.edit', $client)"
@@ -191,7 +191,7 @@ new class extends Component {
@endif
</flux:text>
@if ($search || $statusFilter)
<flux:button wire:click="clearFilters" variant="ghost" class="mt-4">
<flux:button wire:click="clearFilters" variant="outline" class="mt-4">
{{ __('clients.clear_filters') }}
</flux:button>
@endif
@@ -24,12 +24,12 @@ new class extends Component {
<div>
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
<flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
{{ __('clients.back_to_clients') }}
</flux:button>
</div>
<div class="flex flex-wrap gap-2">
<flux:button variant="ghost" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-company').show()" icon="building-office">
<flux:button variant="outline" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-company').show()" icon="building-office">
{{ __('clients.convert_to_company') }}
</flux:button>
<flux:button variant="primary" :href="route('admin.clients.individual.edit', $client)" wire:navigate icon="pencil">
@@ -214,17 +214,17 @@ new class extends Component {
{{-- Action Buttons --}}
<div class="flex flex-wrap gap-2">
{{-- Password Reset Button --}}
<flux:button variant="ghost" icon="key" wire:click="openPasswordResetModal">
<flux:button variant="outline" icon="key" wire:click="openPasswordResetModal">
{{ __('clients.reset_password') }}
</flux:button>
{{-- Deactivate/Reactivate Button --}}
@if ($client->isActive())
<flux:button variant="ghost" class="text-amber-600 hover:bg-amber-50" icon="pause-circle" wire:click="openDeactivateModal">
<flux:button variant="outline" class="text-amber-600 hover:bg-amber-50" icon="pause-circle" wire:click="openDeactivateModal">
{{ __('clients.deactivate') }}
</flux:button>
@else
<flux:button variant="ghost" class="text-green-600 hover:bg-green-50" icon="play-circle" wire:click="openReactivateModal">
<flux:button variant="outline" class="text-green-600 hover:bg-green-50" icon="play-circle" wire:click="openReactivateModal">
{{ __('clients.reactivate') }}
</flux:button>
@endif
@@ -257,7 +257,7 @@ new class extends Component {
</div>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" wire:click="closeDeactivateModal">
<flux:button type="button" variant="outline" wire:click="closeDeactivateModal">
{{ __('clients.cancel') }}
</flux:button>
<flux:button type="button" variant="primary" class="bg-amber-600 hover:bg-amber-700" wire:click="deactivate">
@@ -288,7 +288,7 @@ new class extends Component {
</div>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" wire:click="closeReactivateModal">
<flux:button type="button" variant="outline" wire:click="closeReactivateModal">
{{ __('clients.cancel') }}
</flux:button>
<flux:button type="button" variant="primary" wire:click="reactivate">
@@ -327,7 +327,7 @@ new class extends Component {
</flux:field>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" wire:click="closeDeleteModal">
<flux:button type="button" variant="outline" wire:click="closeDeleteModal">
{{ __('clients.cancel') }}
</flux:button>
<flux:button type="button" variant="danger" wire:click="delete">
@@ -358,7 +358,7 @@ new class extends Component {
</div>
<div class="flex gap-2 pt-4">
<flux:button type="button" variant="ghost" wire:click="closePasswordResetModal">
<flux:button type="button" variant="outline" wire:click="closePasswordResetModal">
{{ __('clients.cancel') }}
</flux:button>
<flux:button type="button" variant="primary" wire:click="resetPassword">