From 73219c89fb043b041909cab9be0c5cd3ec6b7b99 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Tue, 24 Feb 2026 18:18:28 +0100
Subject: [PATCH] fix: make evolution indicators visually prominent with badge
 style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace plain text-xs arrows with 20×20px colored circular badges
(green ↑, red ↓, muted →) to ensure they are clearly visible next
to emoji cells. Also widen emoji columns from w-24 → w-28 to give
the badge room without overflow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/weather/WeatherCard.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/weather/WeatherCard.tsx b/src/components/weather/WeatherCard.tsx
index c90cb44..f17585e 100644
--- a/src/components/weather/WeatherCard.tsx
+++ b/src/components/weather/WeatherCard.tsx
@@ -48,12 +48,12 @@ function EvolutionIndicator({
   if (direction === null) return null;
 
   if (direction === 'up') {
-    return <span className="text-xs text-green-500 font-bold leading-none" title="Amélioration">↑</span>;
+    return <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 text-xs font-bold shrink-0" title="Amélioration">↑</span>;
   }
   if (direction === 'down') {
-    return <span className="text-xs text-red-500 font-bold leading-none" title="Dégradation">↓</span>;
+    return <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-100 text-red-700 text-xs font-bold shrink-0" title="Dégradation">↓</span>;
   }
-  return <span className="text-xs text-muted font-bold leading-none" title="Stable">→</span>;
+  return <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-muted/30 text-muted text-xs font-bold shrink-0" title="Stable">→</span>;
 }
 
 export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previousEntry }: WeatherCardProps) {
@@ -143,7 +143,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       </td>
 
       {/* Performance */}
-      <td className="w-24 px-2 py-3">
+      <td className="w-28 px-2 py-3">
         {canEditThis ? (
           <div className="flex items-center justify-center gap-1">
             <Select
@@ -165,7 +165,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       </td>
 
       {/* Moral */}
-      <td className="w-24 px-2 py-3">
+      <td className="w-28 px-2 py-3">
         {canEditThis ? (
           <div className="flex items-center justify-center gap-1">
             <Select
@@ -187,7 +187,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       </td>
 
       {/* Flux */}
-      <td className="w-24 px-2 py-3">
+      <td className="w-28 px-2 py-3">
         {canEditThis ? (
           <div className="flex items-center justify-center gap-1">
             <Select
@@ -209,7 +209,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       </td>
 
       {/* Création de valeur */}
-      <td className="w-24 px-2 py-3">
+      <td className="w-28 px-2 py-3">
         {canEditThis ? (
           <div className="flex items-center justify-center gap-1">
             <Select