Fix WCAG contrast on events page and add width/height to logo

- Labels and card text: text-gray-400 -> text-gray-600 on #fbfbfb bg
- Empty state message: text-gray-400 -> text-gray-600 on white bg
- Add explicit width/height to navbar logo to prevent CLS

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-26 12:56:54 +01:00
parent d1fed64d72
commit 220ea937dc
2 changed files with 6 additions and 6 deletions

View File

@@ -90,7 +90,7 @@
<div class="flex justify-between items-center h-20"> <div class="flex justify-between items-center h-20">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<a href="{{ path('app_home') }}" class="flex items-center group" aria-label="E-Ticket - Retour a l'accueil"> <a href="{{ path('app_home') }}" class="flex items-center group" aria-label="E-Ticket - Retour a l'accueil">
<img class="h-8 md:h-12 w-auto" src="{{ 'logo.png' | imagine_filter('navbar_logo') }}" alt="E-Ticket" loading="eager"> <img class="h-8 md:h-12 w-auto" src="{{ 'logo.png' | imagine_filter('navbar_logo') }}" alt="E-Ticket" loading="eager" width="48" height="48">
</a> </a>
</div> </div>

View File

@@ -25,15 +25,15 @@
<div class="max-w-7xl mx-auto"> <div class="max-w-7xl mx-auto">
<form method="get" action="{{ path('app_events') }}" class="flex flex-wrap gap-3 items-end"> <form method="get" action="{{ path('app_events') }}" class="flex flex-wrap gap-3 items-end">
<div class="flex-1 min-w-[200px]"> <div class="flex-1 min-w-[200px]">
<label for="filter-q" class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1 block">Recherche</label> <label for="filter-q" class="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1 block">Recherche</label>
<input type="text" id="filter-q" name="q" value="{{ searchQuery }}" class="form-input" placeholder="Nom, organisateur..."> <input type="text" id="filter-q" name="q" value="{{ searchQuery }}" class="form-input" placeholder="Nom, organisateur...">
</div> </div>
<div class="w-full sm:w-auto"> <div class="w-full sm:w-auto">
<label for="filter-city" class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1 block">Ville</label> <label for="filter-city" class="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1 block">Ville</label>
<input type="text" id="filter-city" name="city" value="{{ city }}" class="form-input" placeholder="Paris, Lyon..."> <input type="text" id="filter-city" name="city" value="{{ city }}" class="form-input" placeholder="Paris, Lyon...">
</div> </div>
<div class="w-full sm:w-auto"> <div class="w-full sm:w-auto">
<label for="filter-date" class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1 block">Date</label> <label for="filter-date" class="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1 block">Date</label>
<input type="date" id="filter-date" name="date" value="{{ date }}" class="form-input"> <input type="date" id="filter-date" name="date" value="{{ date }}" class="form-input">
</div> </div>
<button type="submit" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">Filtrer</button> <button type="submit" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">Filtrer</button>
@@ -60,7 +60,7 @@
<div class="p-6"> <div class="p-6">
<h2 class="text-xl font-black uppercase tracking-tighter group-hover:text-indigo-600 transition-colors mb-2">{{ event.title }}</h2> <h2 class="text-xl font-black uppercase tracking-tighter group-hover:text-indigo-600 transition-colors mb-2">{{ event.title }}</h2>
<p class="text-sm font-bold text-gray-500 mb-1">{{ event.startAt|date('d/m/Y') }} &bull; {{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p> <p class="text-sm font-bold text-gray-500 mb-1">{{ event.startAt|date('d/m/Y') }} &bull; {{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p>
<p class="text-xs font-black uppercase tracking-widest text-gray-400">{{ event.zipcode }} {{ event.city }}</p> <p class="text-xs font-black uppercase tracking-widest text-gray-600">{{ event.zipcode }} {{ event.city }}</p>
<p class="text-xs font-bold text-gray-400 mt-2">{{ event.account.companyName ?? (event.account.firstName ~ ' ' ~ event.account.lastName) }}</p> <p class="text-xs font-bold text-gray-400 mt-2">{{ event.account.companyName ?? (event.account.firstName ~ ' ' ~ event.account.lastName) }}</p>
</div> </div>
</a> </a>
@@ -76,7 +76,7 @@
{% else %} {% else %}
<div class="text-center py-16"> <div class="text-center py-16">
<div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-12 max-w-lg mx-auto"> <div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-12 max-w-lg mx-auto">
<p class="text-gray-400 font-black text-lg uppercase"> <p class="text-gray-600 font-black text-lg uppercase">
{% if searchQuery or city or date %} {% if searchQuery or city or date %}
Aucun evenement trouve{% if searchQuery %} pour "{{ searchQuery }}"{% endif %}{% if city %} a {{ city }}{% endif %}{% if date %} le {{ date }}{% endif %} Aucun evenement trouve{% if searchQuery %} pour "{{ searchQuery }}"{% endif %}{% if city %} a {{ city }}{% endif %}{% if date %} le {{ date }}{% endif %}
{% else %} {% else %}