From 77e3214491f6e98bb89f3aca6df8a34026ba2459 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 15 Aug 2025 09:23:17 +0000
Subject: [PATCH] Improve weather widget readability with clear daily and
 yearly temperature labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor the WeatherWidget component to add "Aujourd'hui" and "Année dernière" headers for better temperature comparison, adjusting layout with flex and self-center properties.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/g5c0JYM
---
 client/src/components/WeatherWidget.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/WeatherWidget.tsx b/client/src/components/WeatherWidget.tsx
index 913c595..f356b7d 100644
--- a/client/src/components/WeatherWidget.tsx
+++ b/client/src/components/WeatherWidget.tsx
@@ -169,31 +169,31 @@ export default function WeatherWidget() {
             </div>
           </div>
           
-          {/* Températures actuelles */}
-          <div className="flex items-center gap-3">
+          {/* Températures avec en-têtes */}
+          <div className="flex items-stretch gap-3">
             <div className="text-center">
+              <div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
+                Aujourd'hui
+              </div>
               <div className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                 {currentTemp !== undefined ? `${Math.round(currentTemp)}°` : '--°'}
               </div>
-              <div className="text-xs text-slate-500 dark:text-slate-400">
-                Aujourd'hui
-              </div>
             </div>
             
             {/* Comparaison avec l'an dernier */}
             {previousTemp !== undefined && (
               <>
-                <div className="h-12 w-px bg-slate-300 dark:bg-slate-600"></div>
-                <div className="text-center min-w-[80px]">
+                <div className="h-12 w-px bg-slate-300 dark:bg-slate-600 self-center"></div>
+                <div className="text-center min-w-[90px]">
+                  <div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
+                    Année dernière
+                  </div>
                   <div className="flex items-center justify-center gap-1 mb-1">
                     <WeatherIcon condition={weather.previousYear?.condition || ''} size={16} />
                     <div className="text-lg font-semibold text-slate-600 dark:text-slate-300">
                       {Math.round(previousTemp)}°
                     </div>
                   </div>
-                  <div className="text-xs text-slate-500 dark:text-slate-400 mb-1">
-                    Année dernière
-                  </div>
                   <div className="text-xs text-slate-600 dark:text-slate-300 font-medium leading-tight">
                     {translateToFrench(weather.previousYear?.condition || '')}
                   </div>