Apply Finlio cream/terracotta design system
Re-theme dashboard, suivi, plan, and flux pages plus nav from the claude.ai/design import: warm cream/terracotta/olive palette, pill nav/buttons/inputs, Caprasimo display font for headings. Dark mode variant derived to hold the existing WCAG AA contrast ratios since the import only specified light. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
97dc7cdb2a
commit
52ebb9bc83
@@ -16,20 +16,23 @@ new class extends Component
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<nav x-data="{ open: false }" class="bg-surface border-b border-border">
|
||||
<nav x-data="{ open: false }" class="bg-surface rounded-full shadow-sm">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="px-2.5 py-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<!-- Logo -->
|
||||
<div class="shrink-0 flex items-center">
|
||||
<a href="{{ route('dashboard') }}" wire:navigate aria-label="{{ config('app.name', 'Laravel') }} — Tableau de bord" class="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
|
||||
<x-application-logo class="block h-9 w-auto text-text" />
|
||||
<div class="shrink-0 flex items-center gap-2.5 mr-2">
|
||||
<a href="{{ route('dashboard') }}" wire:navigate aria-label="{{ config('app.name', 'Laravel') }} — Tableau de bord" class="flex items-center gap-2.5 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
|
||||
<span class="w-9 h-9 rounded-full bg-brand flex items-center justify-center shrink-0">
|
||||
<x-application-logo class="block h-5 w-auto text-surface" />
|
||||
</span>
|
||||
<span class="hidden sm:inline font-display text-lg text-text">{{ config('app.name', 'SuiviCPT') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
|
||||
<div class="hidden sm:flex sm:items-center sm:gap-1">
|
||||
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Tableau de bord') }}
|
||||
</x-nav-link>
|
||||
@@ -57,14 +60,11 @@ new class extends Component
|
||||
|
||||
<x-dropdown align="right" width="48">
|
||||
<x-slot name="trigger">
|
||||
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-text-muted bg-surface hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150">
|
||||
<button class="inline-flex items-center gap-2 pl-1 pr-3 py-1 rounded-full text-sm leading-4 font-medium text-text hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150">
|
||||
<span class="w-8 h-8 rounded-full bg-positive-fill text-surface flex items-center justify-center text-xs font-bold shrink-0">{{ Str::of(auth()->user()->name)->explode(' ')->map(fn ($p) => mb_substr($p, 0, 1))->take(2)->implode('') }}</span>
|
||||
<div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
|
||||
|
||||
<div class="ms-1">
|
||||
<svg class="fill-current h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-text-muted text-[10px]">⌄</div>
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
@@ -117,7 +117,7 @@ new class extends Component
|
||||
</div>
|
||||
|
||||
<!-- Responsive Navigation Menu -->
|
||||
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
|
||||
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden mt-2 bg-surface rounded-3xl shadow-sm px-2">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Tableau de bord') }}
|
||||
|
||||
Reference in New Issue
Block a user