naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

color manual fixing

This commit is contained in:
Naser Mansour 2026-01-04 01:15:42 +02:00
parent 82e803dc26
commit a33cbfb908
18 changed files with 79 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
resources/css/app.css
View File

@ -43,7 +43,7 @@
/* Neutrals (unchanged) */
--color-background: #E8E4DC; /* Off-White - light backgrounds */
--color-text: #1A1A1A; /* Deep Black - text color */
--color-body: #1A1A1A; /* Deep Black - body text color */
/* Semantic Aliases - used by components */
--color-accent-content: #A5C87A; /* Light Olive */
@ -91,7 +91,7 @@
========================================================================== */
.logo-badge {
border: 2px solid var(--color-text);
border: 2px solid var(--color-body);
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
}
@ -106,7 +106,7 @@
/* Label styling - semibold weight per specs */
[data-flux-label] {
@apply !mb-0 !leading-tight font-semibold text-text;
@apply !mb-0 !leading-tight font-semibold text-body;
}
/* Input, Textarea, Select base styling */
@ -115,7 +115,7 @@ textarea[data-flux-control],
[data-flux-control] input,
select[data-flux-control],
[data-flux-select-button] {
@apply border-text/30 rounded-md transition-colors;
@apply border-body/30 rounded-md transition-colors text-body;
}
/* Focus states - Warm Gray border with subtle ring */
@ -135,13 +135,13 @@ textarea[data-flux-control] {
/* Checkbox styling - Light Olive accent when checked */
[data-flux-checkbox] input[type="checkbox"],
input[type="checkbox"][data-flux-control] {
@apply w-5 h-5 rounded border-text/30 text-accent focus:ring-accent focus:ring-offset-0;
@apply w-5 h-5 rounded border-body/30 text-accent focus:ring-accent focus:ring-offset-0;
}
/* Radio styling - Light Olive accent when selected */
[data-flux-radio] input[type="radio"],
input[type="radio"][data-flux-control] {
@apply w-5 h-5 border-text/30 text-accent focus:ring-accent focus:ring-offset-0;
@apply w-5 h-5 border-body/30 text-accent focus:ring-accent focus:ring-offset-0;
}
/* Error state styling for Flux fields */
@ -185,10 +185,10 @@ input[type="radio"][data-flux-control] {
/* Prose Brand styling for blog posts - Olive Green palette (Story 12.2) */
.prose-brand {
--tw-prose-headings: var(--color-text); /* Deep Black */
--tw-prose-headings: var(--color-body); /* Deep Black */
--tw-prose-links: var(--color-primary); /* Olive Green */
--tw-prose-bold: var(--color-text); /* Deep Black */
--tw-prose-body: var(--color-text); /* Deep Black */
--tw-prose-bold: var(--color-body); /* Deep Black */
--tw-prose-body: var(--color-body); /* Deep Black */
}
.prose-brand a {
@ -201,10 +201,10 @@ input[type="radio"][data-flux-control] {
/* Backward compatibility alias for prose-navy */
.prose-navy {
--tw-prose-headings: var(--color-text);
--tw-prose-headings: var(--color-body);
--tw-prose-links: var(--color-primary);
--tw-prose-bold: var(--color-text);
--tw-prose-body: var(--color-text);
--tw-prose-bold: var(--color-body);
--tw-prose-body: var(--color-body);
}
.prose-navy a {
@ -266,8 +266,8 @@ small, .text-sm {
/* Secondary button - Outlined with Light Olive border, Deep Black text */
.btn-secondary {
@apply bg-transparent border-2 border-accent text-text rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-accent hover:text-text;
@apply bg-transparent border-2 border-accent text-body rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-accent hover:text-body;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
}
@ -356,7 +356,7 @@ button.btn-danger:disabled {
/* Input field styling */
.input-field {
@apply w-full border border-text/30 rounded-md px-4 py-3
@apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20
transition-colors outline-none bg-white;
}
@ -368,7 +368,7 @@ button.btn-danger:disabled {
/* Form label styling */
.form-label {
@apply block text-sm font-semibold text-text mb-2;
@apply block text-sm font-semibold text-body mb-2;
}
/* Required field indicator - for manual class usage */
@ -390,7 +390,7 @@ button.btn-danger:disabled {
/* Textarea specific styling */
.textarea-field {
@apply w-full border border-text/30 rounded-md px-4 py-3
@apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20
transition-colors outline-none bg-white
min-h-[120px] resize-y;
@ -398,20 +398,20 @@ button.btn-danger:disabled {
/* Select dropdown styling */
.select-field {
@apply w-full border border-text/30 rounded-md px-4 py-3
@apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20
transition-colors outline-none bg-white;
}
/* Custom checkbox styling */
.checkbox-custom {
@apply w-5 h-5 rounded border-text/30 text-accent
@apply w-5 h-5 rounded border-body/30 text-accent
focus:ring-accent focus:ring-offset-0;
}
/* Custom radio styling */
.radio-custom {
@apply w-5 h-5 border-text/30 text-accent
@apply w-5 h-5 border-body/30 text-accent
focus:ring-accent focus:ring-offset-0;
}

4
resources/views/components/auth-header.blade.php
View File

@ -4,6 +4,6 @@
])
<div class="flex w-full flex-col text-center">
<flux:heading size="xl">{{ $title }}</flux:heading>
<flux:subheading>{{ $description }}</flux:subheading>
<flux:heading size="xl" class="text-body">{{ $title }}</flux:heading>
<flux:subheading class="text-body/70">{{ $description }}</flux:subheading>
</div>

17
resources/views/components/language-toggle.blade.php
View File

@ -1,22 +1,29 @@
@props(['variant' => 'dark'])
<div class="flex items-center gap-2">
<a
href="{{ route('language.switch', 'ar') }}"
@class([
'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
'bg-accent text-text font-bold' => app()->getLocale() === 'ar',
'text-off-white hover:text-accent' => app()->getLocale() !== 'ar',
'bg-amber-500 text-white font-bold' => app()->getLocale() === 'ar',
'text-off-white hover:text-accent' => app()->getLocale() !== 'ar' && $variant === 'dark',
'text-body/70 hover:text-body' => app()->getLocale() !== 'ar' && $variant === 'light',
])
data-test="language-switch-ar"
>
العربية
</a>
<span class="text-accent/50">|</span>
<span @class([
'text-accent/50' => $variant === 'dark',
'text-body/30' => $variant === 'light',
])>|</span>
<a
href="{{ route('language.switch', 'en') }}"
@class([
'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
'bg-accent text-text font-bold' => app()->getLocale() === 'en',
'text-off-white hover:text-accent' => app()->getLocale() !== 'en',
'bg-amber-500 text-white font-bold' => app()->getLocale() === 'en',
'text-off-white hover:text-accent' => app()->getLocale() !== 'en' && $variant === 'dark',
'text-body/70 hover:text-body' => app()->getLocale() !== 'en' && $variant === 'light',
])
data-test="language-switch-en"
>

4
resources/views/components/layouts/auth/card.blade.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}" class="dark">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
@include('partials.head')
</head>
@ -11,7 +11,7 @@
<!-- Language Toggle -->
<div class="absolute end-4 top-4">
<x-language-toggle />
<x-language-toggle variant="light" />
</div>
<main id="main-content" role="main" tabindex="-1" class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">

4
resources/views/components/layouts/auth/simple.blade.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}" class="dark">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
@include('partials.head')
</head>
@ -11,7 +11,7 @@
<!-- Language Toggle -->
<div class="absolute end-4 top-4">
<x-language-toggle />
<x-language-toggle variant="light" />
</div>
<main id="main-content" role="main" tabindex="-1" class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">

4
resources/views/components/layouts/auth/split.blade.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}" class="dark">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
@include('partials.head')
</head>
@ -11,7 +11,7 @@
<!-- Language Toggle -->
<div class="absolute end-4 top-4 z-50">
<x-language-toggle />
<x-language-toggle variant="light" />
</div>
<main id="main-content" role="main" tabindex="-1" class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">

2
resources/views/components/toast.blade.php
View File

@ -42,7 +42,7 @@
:class="{
'bg-success text-white': toast.type === 'success',
'bg-danger text-white': toast.type === 'error',
'bg-warning text-text': toast.type === 'warning',
'bg-warning text-body': toast.type === 'warning',
'bg-primary text-white': toast.type === 'info' || !toast.type
}"
role="alert"

6
resources/views/components/ui/stat-card.blade.php
View File

@ -13,14 +13,14 @@
</div>
@endif
<div>
<div class="text-2xl font-bold text-text">{{ $value }}</div>
<div class="text-sm text-text/70">{{ $label }}</div>
<div class="text-2xl font-bold text-body">{{ $value }}</div>
<div class="text-sm text-body/70">{{ $label }}</div>
@if($trend !== null)
@php
$trendClass = match(true) {
$trend > 0 => 'text-success',
$trend < 0 => 'text-danger',
default => 'text-text/50',
default => 'text-body/50',
};
$trendPrefix = $trend > 0 ? '+' : '';
@endphp

4
resources/views/livewire/availability-calendar.blade.php
View File

@ -162,7 +162,7 @@ new class extends Component
<flux:icon name="chevron-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }}" class="size-5" />
</flux:button>
<flux:heading size="lg">{{ $monthName }}</flux:heading>
<flux:heading size="lg" class="text-body">{{ $monthName }}</flux:heading>
<flux:button size="sm" wire:click="nextMonth" variant="ghost">
<flux:icon name="chevron-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}" class="size-5" />
@ -205,7 +205,7 @@ new class extends Component
<!-- Time Slots -->
@if($selectedDate)
<div class="mt-6">
<flux:heading size="sm" class="mb-3">
<flux:heading size="sm" class="mb-3 text-body">
{{ __('booking.available_times') }} -
{{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('d M Y') }}
</flux:heading>

2
resources/views/livewire/pages/booking-success.blade.php
View File

@ -11,7 +11,7 @@ new #[Layout('components.layouts.public')] class extends Component
<div class="max-w-2xl mx-auto py-16 px-4 text-center">
<flux:icon name="check-circle" class="w-16 h-16 mx-auto text-green-500 mb-6" />
<flux:heading size="xl" class="mb-4">
<flux:heading size="xl" class="mb-4 text-body">
{{ __('booking.success_title') }}
</flux:heading>

6
resources/views/livewire/pages/booking.blade.php
View File

@ -191,7 +191,7 @@ new #[Layout('components.layouts.public')] class extends Component
}; ?>
<div class="max-w-4xl mx-auto py-8 px-4">
<flux:heading size="xl" class="mb-6">
<flux:heading size="xl" class="mb-6 text-body">
{{ __('booking.request_consultation') }}
</flux:heading>
@ -204,7 +204,7 @@ new #[Layout('components.layouts.public')] class extends Component
@if(!$selectedDate || !$selectedTime)
{{-- Step 1: Calendar Selection --}}
<flux:callout class="mb-6">
<p>{{ __('booking.guest_intro') }}</p>
<p class="text-body">{{ __('booking.guest_intro') }}</p>
</flux:callout>
<p class="mb-4 text-zinc-600 dark:text-zinc-400">
@ -291,7 +291,7 @@ new #[Layout('components.layouts.public')] class extends Component
@else
{{-- Confirmation Step --}}
<flux:callout>
<flux:heading size="sm">{{ __('booking.confirm_booking') }}</flux:heading>
<flux:heading size="sm" class="text-body">{{ __('booking.confirm_booking') }}</flux:heading>
<p class="text-zinc-600 dark:text-zinc-400">{{ __('booking.confirm_message') }}</p>
<div class="mt-4 space-y-2">

22
resources/views/livewire/pages/posts/index.blade.php
View File

@ -56,7 +56,7 @@ new #[Layout('components.layouts.public')] class extends Component
}; ?>
<div class="max-w-4xl mx-auto px-0">
<flux:heading size="xl" class="text-text text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
<flux:heading size="xl" class="text-body text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
<!-- Search Bar -->
<div class="mt-4 sm:mt-6 relative">
@ -66,14 +66,14 @@ new #[Layout('components.layouts.public')] class extends Component
class="w-full min-h-[44px]"
>
<x-slot:iconLeading>
<flux:icon name="magnifying-glass" class="w-5 h-5 text-text/50" />
<flux:icon name="magnifying-glass" class="w-5 h-5 text-body/50" />
</x-slot:iconLeading>
</flux:input>
@if($search)
<button
wire:click="clearSearch"
class="absolute end-3 top-1/2 -translate-y-1/2 text-text/50 hover:text-text min-h-[44px] min-w-[44px] flex items-center justify-center"
class="absolute end-3 top-1/2 -translate-y-1/2 text-body/50 hover:text-body min-h-[44px] min-w-[44px] flex items-center justify-center"
>
<flux:icon name="x-mark" class="w-5 h-5" />
</button>
@ -82,7 +82,7 @@ new #[Layout('components.layouts.public')] class extends Component
<!-- Search Results Info -->
@if($search)
<p class="mt-4 text-sm text-text/70">
<p class="mt-4 text-sm text-body/70">
@if($posts->total() > 0)
{{ __('posts.search_results', ['count' => $posts->total(), 'query' => $search]) }}
@else
@ -95,7 +95,7 @@ new #[Layout('components.layouts.public')] class extends Component
<div class="mt-6 sm:mt-8 space-y-4 sm:space-y-6">
@forelse($posts as $post)
<article wire:key="post-{{ $post->id }}" class="bg-white p-4 sm:p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-lg sm:text-xl font-semibold text-text">
<h2 class="text-lg sm:text-xl font-semibold text-body">
<a href="{{ route('posts.show', $post) }}" class="hover:text-primary" wire:navigate>
@if($search)
{!! $this->highlightSearch($post->getTitle(), $search) !!}
@ -105,11 +105,11 @@ new #[Layout('components.layouts.public')] class extends Component
</a>
</h2>
<time class="text-xs sm:text-sm text-text/70 mt-2 block">
<time class="text-xs sm:text-sm text-body/70 mt-2 block">
{{ $post->published_at?->translatedFormat('d F Y') ?? $post->created_at->translatedFormat('d F Y') }}
</time>
<p class="mt-2 sm:mt-3 text-text text-sm sm:text-base">
<p class="mt-2 sm:mt-3 text-body text-sm sm:text-base">
@if($search)
{!! $this->highlightSearch($post->getExcerpt(), $search) !!}
@else
@ -124,14 +124,14 @@ new #[Layout('components.layouts.public')] class extends Component
@empty
<div class="empty-state bg-white rounded-lg">
@if($search)
<flux:icon name="magnifying-glass" class="empty-state-icon text-text/30" />
<p class="text-text/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
<flux:icon name="magnifying-glass" class="empty-state-icon text-body/30" />
<p class="text-body/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
<flux:button wire:click="clearSearch" class="mt-4">
{{ __('posts.clear_search') }}
</flux:button>
@else
<flux:icon name="document-text" class="empty-state-icon text-text/40" />
<p class="text-text/70">{{ __('posts.no_posts') }}</p>
<flux:icon name="document-text" class="empty-state-icon text-body/40" />
<p class="text-body/70">{{ __('posts.no_posts') }}</p>
@endif
</div>
@endforelse

4
resources/views/livewire/pages/posts/show.blade.php
View File

@ -20,9 +20,9 @@ new #[Layout('components.layouts.public')] class extends Component
<article class="max-w-3xl mx-auto">
<header class="mb-8">
<flux:heading size="xl" class="text-text">{{ $post->getTitle() }}</flux:heading>
<flux:heading size="xl" class="text-body">{{ $post->getTitle() }}</flux:heading>
<time class="text-text/70 mt-2 block">
<time class="text-body/70 mt-2 block">
{{ $post->published_at?->translatedFormat('l, d F Y') ?? $post->created_at->translatedFormat('l, d F Y') }}
</time>
</header>

4
resources/views/pages/booking.blade.php
View File

@ -1,8 +1,8 @@
<x-layouts.public>
<div class="py-8">
<h1 class="text-3xl font-bold text-text mb-6">{{ __('navigation.booking') }}</h1>
<h1 class="text-3xl font-bold text-body mb-6">{{ __('navigation.booking') }}</h1>
<div class="bg-white p-8 rounded-lg shadow-md">
<p class="text-text">{{ __('Booking form will be implemented in a future story.') }}</p>
<p class="text-body">{{ __('Booking form will be implemented in a future story.') }}</p>
</div>
</div>
</x-layouts.public>

16
resources/views/pages/home.blade.php
View File

@ -1,20 +1,20 @@
<x-layouts.public>
<div class="text-center py-8 sm:py-12">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-text mb-4">{{ __('Libra Law Firm') }}</h1>
<p class="text-text text-base sm:text-lg mb-6 sm:mb-8 px-4">{{ __('Professional legal services with integrity and excellence.') }}</p>
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-body mb-4">{{ __('Libra Law Firm') }}</h1>
<p class="text-body text-base sm:text-lg mb-6 sm:mb-8 px-4">{{ __('Professional legal services with integrity and excellence.') }}</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mt-8 sm:mt-12">
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
<h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Expert Consultations') }}</h3>
<p class="text-text text-sm sm:text-base">{{ __('Professional legal advice tailored to your needs.') }}</p>
<h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Expert Consultations') }}</h3>
<p class="text-body text-sm sm:text-base">{{ __('Professional legal advice tailored to your needs.') }}</p>
</div>
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
<h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Case Management') }}</h3>
<p class="text-text text-sm sm:text-base">{{ __('Track your cases and stay informed every step of the way.') }}</p>
<h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Case Management') }}</h3>
<p class="text-body text-sm sm:text-base">{{ __('Track your cases and stay informed every step of the way.') }}</p>
</div>
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md sm:col-span-2 lg:col-span-1">
<h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Legal Resources') }}</h3>
<p class="text-text text-sm sm:text-base">{{ __('Access our library of legal insights and articles.') }}</p>
<h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Legal Resources') }}</h3>
<p class="text-body text-sm sm:text-base">{{ __('Access our library of legal insights and articles.') }}</p>
</div>
</div>
</div>

4
resources/views/pages/legal.blade.php
View File

@ -1,11 +1,11 @@
<x-layouts.public>
<div class="py-8">
<h1 class="mb-6 text-3xl font-bold text-text dark:text-off-white">{{ $page->getTitle() }}</h1>
<h1 class="mb-6 text-3xl font-bold text-body dark:text-off-white">{{ $page->getTitle() }}</h1>
<div class="prose max-w-none rounded-lg bg-white p-8 shadow-md dark:bg-zinc-800 dark:prose-invert" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
@if ($page->getContent())
{!! clean($page->getContent()) !!}
@else
<p class="text-text dark:text-zinc-400">{{ __('pages.content_coming_soon') }}</p>
<p class="text-body dark:text-zinc-400">{{ __('pages.content_coming_soon') }}</p>
@endif
</div>
<p class="mt-4 text-sm text-zinc-500 dark:text-zinc-400">

4
resources/views/pages/privacy.blade.php
View File

@ -1,8 +1,8 @@
<x-layouts.public>
<div class="py-8">
<h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.privacy') }}</h1>
<h1 class="text-3xl font-bold text-body mb-6">{{ __('footer.privacy') }}</h1>
<div class="bg-white p-8 rounded-lg shadow-md prose max-w-none">
<p class="text-text">{{ __('Privacy policy content will be added here.') }}</p>
<p class="text-body">{{ __('Privacy policy content will be added here.') }}</p>
</div>
</div>
</x-layouts.public>

4
resources/views/pages/terms.blade.php
View File

@ -1,8 +1,8 @@
<x-layouts.public>
<div class="py-8">
<h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.terms') }}</h1>
<h1 class="text-3xl font-bold text-body mb-6">{{ __('footer.terms') }}</h1>
<div class="bg-white p-8 rounded-lg shadow-md prose max-w-none">
<p class="text-text">{{ __('Terms of service content will be added here.') }}</p>
<p class="text-body">{{ __('Terms of service content will be added here.') }}</p>
</div>
</div>
</x-layouts.public>