From b590fa8b3041b647b87d768ec5b189a83c66b502 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 15 Aug 2025 11:47:29 +0000
Subject: [PATCH] Improve weather widget display for clearer temperature
 comparison

Update client/src/components/WeatherWidget.tsx to refine the display of previous year's weather data and the temperature difference, including removing extraneous text and adjusting layout for better readability.

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/zoZabWF
---
 client/src/components/WeatherWidget.tsx | 46 +++++++++++++------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/client/src/components/WeatherWidget.tsx b/client/src/components/WeatherWidget.tsx
index cf226b9..d4a01dc 100644
--- a/client/src/components/WeatherWidget.tsx
+++ b/client/src/components/WeatherWidget.tsx
@@ -291,15 +291,12 @@ export default function WeatherWidget() {
                   <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">
+                  <div className="flex items-center justify-center gap-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-600 dark:text-slate-300 font-medium leading-tight">
-                    {translateToFrench(weather.previousYear?.condition || '')}
-                  </div>
                 </div>
               </>
             )}
@@ -307,24 +304,29 @@ export default function WeatherWidget() {
             {/* Différence */}
             {currentTemp !== undefined && previousTemp !== undefined && (
               <>
-                <div className="h-8 w-px bg-slate-300 dark:bg-slate-600"></div>
-                <div className="flex items-center gap-1">
-                  {tempDifference > 0 ? (
-                    <div className="flex items-center gap-1 text-red-600 dark:text-red-400">
-                      <span className="text-lg">↗</span>
-                      <span className="text-sm font-semibold">+{Math.round(tempDifference)}°</span>
-                    </div>
-                  ) : tempDifference < 0 ? (
-                    <div className="flex items-center gap-1 text-blue-600 dark:text-blue-400">
-                      <span className="text-lg">↘</span>
-                      <span className="text-sm font-semibold">{Math.round(tempDifference)}°</span>
-                    </div>
-                  ) : (
-                    <div className="flex items-center gap-1 text-green-600 dark:text-green-400">
-                      <span className="text-lg">=</span>
-                      <span className="text-sm font-semibold">0°</span>
-                    </div>
-                  )}
+                <div className="h-12 w-px bg-slate-300 dark:bg-slate-600 self-center"></div>
+                <div className="text-center">
+                  <div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
+                    Différence
+                  </div>
+                  <div className="flex items-center justify-center gap-1">
+                    {tempDifference > 0 ? (
+                      <div className="flex items-center gap-1 text-red-600 dark:text-red-400">
+                        <span className="text-lg">↗</span>
+                        <span className="text-sm font-semibold">+{Math.round(tempDifference)}°</span>
+                      </div>
+                    ) : tempDifference < 0 ? (
+                      <div className="flex items-center gap-1 text-blue-600 dark:text-blue-400">
+                        <span className="text-lg">↘</span>
+                        <span className="text-sm font-semibold">{Math.round(tempDifference)}°</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1 text-green-600 dark:text-green-400">
+                        <span className="text-lg">=</span>
+                        <span className="text-sm font-semibold">0°</span>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </>
             )}