complete story 12.3
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
<footer class="bg-charcoal mt-auto" data-test="main-footer">
|
||||
<footer class="bg-primary mt-auto" data-test="main-footer">
|
||||
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
||||
<!-- Logo & Description -->
|
||||
<div class="text-center sm:text-start">
|
||||
<x-logo size="lg" />
|
||||
<p class="mt-3 text-warm-gray text-sm">
|
||||
<x-logo size="lg" class="logo-badge" />
|
||||
<p class="mt-3 text-accent text-sm">
|
||||
{{ __('footer.description') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- Contact Information -->
|
||||
<div class="text-center sm:text-start">
|
||||
<h3 class="text-off-white font-semibold mb-3">{{ __('footer.contact') }}</h3>
|
||||
<address class="text-warm-gray text-sm not-italic space-y-1">
|
||||
<address class="text-accent text-sm not-italic space-y-1">
|
||||
<p>{{ __('footer.address') }}</p>
|
||||
<p class="ltr-content">{{ __('footer.phone') }}</p>
|
||||
<p class="ltr-content">{{ __('footer.email') }}</p>
|
||||
@@ -26,7 +26,7 @@
|
||||
<li>
|
||||
<a
|
||||
href="{{ route('terms') }}"
|
||||
class="text-warm-gray hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
|
||||
class="text-accent hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
|
||||
data-test="footer-terms"
|
||||
>
|
||||
{{ __('footer.terms') }}
|
||||
@@ -35,7 +35,7 @@
|
||||
<li>
|
||||
<a
|
||||
href="{{ route('privacy') }}"
|
||||
class="text-warm-gray hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
|
||||
class="text-accent hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
|
||||
data-test="footer-privacy"
|
||||
>
|
||||
{{ __('footer.privacy') }}
|
||||
@@ -46,8 +46,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-warm-gray/20 text-center">
|
||||
<p class="text-warm-gray text-xs sm:text-sm" data-test="footer-copyright">
|
||||
<div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-accent/20 text-center">
|
||||
<p class="text-accent text-xs sm:text-sm" data-test="footer-copyright">
|
||||
© {{ date('Y') }} {{ __('footer.copyright') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
href="{{ route('language.switch', 'ar') }}"
|
||||
@class([
|
||||
'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
|
||||
'bg-warm-gray text-charcoal font-bold' => app()->getLocale() === 'ar',
|
||||
'text-off-white hover:text-warm-gray' => app()->getLocale() !== 'ar',
|
||||
'bg-accent text-text font-bold' => app()->getLocale() === 'ar',
|
||||
'text-off-white hover:text-accent' => app()->getLocale() !== 'ar',
|
||||
])
|
||||
data-test="language-switch-ar"
|
||||
>
|
||||
العربية
|
||||
</a>
|
||||
<span class="text-warm-gray/50">|</span>
|
||||
<span class="text-accent/50">|</span>
|
||||
<a
|
||||
href="{{ route('language.switch', 'en') }}"
|
||||
@class([
|
||||
'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
|
||||
'bg-warm-gray text-charcoal font-bold' => app()->getLocale() === 'en',
|
||||
'text-off-white hover:text-warm-gray' => app()->getLocale() !== 'en',
|
||||
'bg-accent text-text font-bold' => app()->getLocale() === 'en',
|
||||
'text-off-white hover:text-accent' => app()->getLocale() !== 'en',
|
||||
])
|
||||
data-test="language-switch-en"
|
||||
>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<nav
|
||||
x-data="{ mobileMenuOpen: false }"
|
||||
class="fixed top-0 inset-x-0 z-50 bg-charcoal"
|
||||
class="fixed top-0 inset-x-0 z-50 bg-primary"
|
||||
data-test="main-navigation"
|
||||
>
|
||||
<div class="max-w-[1200px] mx-auto px-4">
|
||||
@@ -8,7 +8,7 @@
|
||||
<!-- Logo - Left on desktop -->
|
||||
<div class="shrink-0 hidden md:block">
|
||||
<a href="{{ route('home') }}" class="flex items-center" wire:navigate>
|
||||
<x-logo size="md" />
|
||||
<x-logo size="md" class="logo-badge" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<!-- Hamburger Button -->
|
||||
<button
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
class="p-2 text-off-white hover:text-warm-gray focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||
class="p-2 text-off-white hover:text-accent focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||
:aria-expanded="mobileMenuOpen"
|
||||
aria-label="{{ __('Toggle navigation menu') }}"
|
||||
data-test="mobile-menu-button"
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
<!-- Centered Logo on Mobile -->
|
||||
<a href="{{ route('home') }}" class="flex items-center" wire:navigate>
|
||||
<x-logo size="sm" />
|
||||
<x-logo size="sm" class="logo-badge" />
|
||||
</a>
|
||||
|
||||
<!-- Language Toggle on Mobile -->
|
||||
@@ -46,8 +46,8 @@
|
||||
<a
|
||||
href="{{ route('home') }}"
|
||||
@class([
|
||||
'text-off-white hover:text-warm-gray transition-colors py-2',
|
||||
'border-b-2 border-warm-gray' => request()->routeIs('home'),
|
||||
'text-off-white hover:text-accent transition-colors py-2',
|
||||
'border-b-2 border-accent' => request()->routeIs('home'),
|
||||
])
|
||||
wire:navigate
|
||||
data-test="nav-home"
|
||||
@@ -57,8 +57,8 @@
|
||||
<a
|
||||
href="{{ route('booking') }}"
|
||||
@class([
|
||||
'text-off-white hover:text-warm-gray transition-colors py-2',
|
||||
'border-b-2 border-warm-gray' => request()->routeIs('booking*'),
|
||||
'text-off-white hover:text-accent transition-colors py-2',
|
||||
'border-b-2 border-accent' => request()->routeIs('booking*'),
|
||||
])
|
||||
wire:navigate
|
||||
data-test="nav-booking"
|
||||
@@ -68,8 +68,8 @@
|
||||
<a
|
||||
href="{{ route('posts.index') }}"
|
||||
@class([
|
||||
'text-off-white hover:text-warm-gray transition-colors py-2',
|
||||
'border-b-2 border-warm-gray' => request()->routeIs('posts*'),
|
||||
'text-off-white hover:text-accent transition-colors py-2',
|
||||
'border-b-2 border-accent' => request()->routeIs('posts*'),
|
||||
])
|
||||
wire:navigate
|
||||
data-test="nav-posts"
|
||||
@@ -84,8 +84,8 @@
|
||||
<a
|
||||
href="{{ $dashboardRoute }}"
|
||||
@class([
|
||||
'text-off-white hover:text-warm-gray transition-colors py-2',
|
||||
'border-b-2 border-warm-gray' => request()->routeIs('*.dashboard'),
|
||||
'text-off-white hover:text-accent transition-colors py-2',
|
||||
'border-b-2 border-accent' => request()->routeIs('*.dashboard'),
|
||||
])
|
||||
wire:navigate
|
||||
data-test="nav-dashboard"
|
||||
@@ -96,7 +96,7 @@
|
||||
@csrf
|
||||
<button
|
||||
type="submit"
|
||||
class="text-off-white hover:text-warm-gray transition-colors py-2"
|
||||
class="text-off-white hover:text-accent transition-colors py-2"
|
||||
data-test="nav-logout"
|
||||
>
|
||||
{{ __('navigation.logout') }}
|
||||
@@ -106,8 +106,8 @@
|
||||
<a
|
||||
href="{{ route('login') }}"
|
||||
@class([
|
||||
'text-off-white hover:text-warm-gray transition-colors py-2',
|
||||
'border-b-2 border-warm-gray' => request()->routeIs('login'),
|
||||
'text-off-white hover:text-accent transition-colors py-2',
|
||||
'border-b-2 border-accent' => request()->routeIs('login'),
|
||||
])
|
||||
wire:navigate
|
||||
data-test="nav-login"
|
||||
@@ -137,7 +137,7 @@
|
||||
x-cloak
|
||||
@click.away="mobileMenuOpen = false"
|
||||
@keydown.escape.window="mobileMenuOpen = false"
|
||||
class="md:hidden bg-charcoal border-t border-warm-gray/20"
|
||||
class="md:hidden bg-primary border-t border-accent/20"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="{{ __('Mobile navigation menu') }}"
|
||||
@@ -147,8 +147,8 @@
|
||||
<a
|
||||
href="{{ route('home') }}"
|
||||
@class([
|
||||
'block px-3 py-3 text-off-white hover:text-warm-gray hover:bg-charcoal/80 rounded-md min-h-[44px] flex items-center',
|
||||
'bg-charcoal/50 border-s-2 border-warm-gray' => request()->routeIs('home'),
|
||||
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
|
||||
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('home'),
|
||||
])
|
||||
wire:navigate
|
||||
@click="mobileMenuOpen = false"
|
||||
@@ -159,8 +159,8 @@
|
||||
<a
|
||||
href="{{ route('booking') }}"
|
||||
@class([
|
||||
'block px-3 py-3 text-off-white hover:text-warm-gray hover:bg-charcoal/80 rounded-md min-h-[44px] flex items-center',
|
||||
'bg-charcoal/50 border-s-2 border-warm-gray' => request()->routeIs('booking*'),
|
||||
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
|
||||
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('booking*'),
|
||||
])
|
||||
wire:navigate
|
||||
@click="mobileMenuOpen = false"
|
||||
@@ -171,8 +171,8 @@
|
||||
<a
|
||||
href="{{ route('posts.index') }}"
|
||||
@class([
|
||||
'block px-3 py-3 text-off-white hover:text-warm-gray hover:bg-charcoal/80 rounded-md min-h-[44px] flex items-center',
|
||||
'bg-charcoal/50 border-s-2 border-warm-gray' => request()->routeIs('posts*'),
|
||||
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
|
||||
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('posts*'),
|
||||
])
|
||||
wire:navigate
|
||||
@click="mobileMenuOpen = false"
|
||||
@@ -188,8 +188,8 @@
|
||||
<a
|
||||
href="{{ $dashboardRoute }}"
|
||||
@class([
|
||||
'block px-3 py-3 text-off-white hover:text-warm-gray hover:bg-charcoal/80 rounded-md min-h-[44px] flex items-center',
|
||||
'bg-charcoal/50 border-s-2 border-warm-gray' => request()->routeIs('*.dashboard'),
|
||||
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
|
||||
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('*.dashboard'),
|
||||
])
|
||||
wire:navigate
|
||||
@click="mobileMenuOpen = false"
|
||||
@@ -201,7 +201,7 @@
|
||||
@csrf
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full text-start px-3 py-3 text-off-white hover:text-warm-gray hover:bg-charcoal/80 rounded-md min-h-[44px] flex items-center"
|
||||
class="w-full text-start px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center"
|
||||
data-test="mobile-nav-logout"
|
||||
>
|
||||
{{ __('navigation.logout') }}
|
||||
@@ -211,8 +211,8 @@
|
||||
<a
|
||||
href="{{ route('login') }}"
|
||||
@class([
|
||||
'block px-3 py-3 text-off-white hover:text-warm-gray hover:bg-charcoal/80 rounded-md min-h-[44px] flex items-center',
|
||||
'bg-charcoal/50 border-s-2 border-warm-gray' => request()->routeIs('login'),
|
||||
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
|
||||
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('login'),
|
||||
])
|
||||
wire:navigate
|
||||
@click="mobileMenuOpen = false"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<div {{ $attributes->merge(['class' => $inline ? 'inline-flex items-center gap-2' : 'flex items-center gap-2']) }}>
|
||||
<svg
|
||||
class="animate-spin {{ $sizeClass }} text-charcoal"
|
||||
class="animate-spin {{ $sizeClass }} text-primary"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@@ -42,8 +42,8 @@
|
||||
:class="{
|
||||
'bg-success text-white': toast.type === 'success',
|
||||
'bg-danger text-white': toast.type === 'error',
|
||||
'bg-warning text-charcoal': toast.type === 'warning',
|
||||
'bg-charcoal text-white': toast.type === 'info' || !toast.type
|
||||
'bg-warning text-text': toast.type === 'warning',
|
||||
'bg-primary text-white': toast.type === 'info' || !toast.type
|
||||
}"
|
||||
role="alert"
|
||||
>
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
$classes .= ' hover:shadow-card-hover hover:-translate-y-0.5 transition-all duration-200 cursor-pointer';
|
||||
}
|
||||
|
||||
// Warm gray highlight border (uses border-s for RTL support)
|
||||
// Light Olive highlight border (uses border-s for RTL support)
|
||||
if ($highlight) {
|
||||
$classes .= ' border-s-4 border-warm-gray';
|
||||
$classes .= ' border-s-4 border-accent';
|
||||
}
|
||||
@endphp
|
||||
|
||||
|
||||
@@ -8,19 +8,19 @@
|
||||
<x-ui.card>
|
||||
<div class="flex items-center gap-4">
|
||||
@if($icon)
|
||||
<div class="p-3 bg-warm-gray/10 rounded-lg">
|
||||
<flux:icon :name="$icon" class="w-6 h-6 text-warm-gray" />
|
||||
<div class="p-3 bg-accent/10 rounded-lg">
|
||||
<flux:icon :name="$icon" class="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
@endif
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-charcoal">{{ $value }}</div>
|
||||
<div class="text-sm text-charcoal/70">{{ $label }}</div>
|
||||
<div class="text-2xl font-bold text-text">{{ $value }}</div>
|
||||
<div class="text-sm text-text/70">{{ $label }}</div>
|
||||
@if($trend !== null)
|
||||
@php
|
||||
$trendClass = match(true) {
|
||||
$trend > 0 => 'text-success',
|
||||
$trend < 0 => 'text-danger',
|
||||
default => 'text-charcoal/50',
|
||||
default => 'text-text/50',
|
||||
};
|
||||
$trendPrefix = $trend > 0 ? '+' : '';
|
||||
@endphp
|
||||
|
||||
Reference in New Issue
Block a user