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
This commit is contained in:
michaelschal committed 2025-08-15 11:47:29 +00:00
1 parent 663f50d534
commit b590fa8b30
1 file changed
+24 -22
+24 -22
View File
@@ -291,15 +291,12 @@ export default function WeatherWidget() {
<div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium"> <div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
Année dernière Année dernière
</div> </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} /> <WeatherIcon condition={weather.previousYear?.condition || ''} size={16} />
<div className="text-lg font-semibold text-slate-600 dark:text-slate-300"> <div className="text-lg font-semibold text-slate-600 dark:text-slate-300">
{Math.round(previousTemp)}° {Math.round(previousTemp)}°
</div> </div>
</div> </div>
<div className="text-xs text-slate-600 dark:text-slate-300 font-medium leading-tight">
{translateToFrench(weather.previousYear?.condition || '')}
</div>
</div> </div>
</> </>
)} )}
@@ -307,24 +304,29 @@ export default function WeatherWidget() {
{/* Différence */} {/* Différence */}
{currentTemp !== undefined && previousTemp !== undefined && ( {currentTemp !== undefined && previousTemp !== undefined && (
<> <>
<div className="h-8 w-px bg-slate-300 dark:bg-slate-600"></div> <div className="h-12 w-px bg-slate-300 dark:bg-slate-600 self-center"></div>
<div className="flex items-center gap-1"> <div className="text-center">
{tempDifference > 0 ? ( <div className="text-xs text-slate-500 dark:text-slate-400 mb-1 font-medium">
<div className="flex items-center gap-1 text-red-600 dark:text-red-400"> Différence
<span className="text-lg">↗</span> </div>
<span className="text-sm font-semibold">+{Math.round(tempDifference)}°</span> <div className="flex items-center justify-center gap-1">
</div> {tempDifference > 0 ? (
) : tempDifference < 0 ? ( <div className="flex items-center gap-1 text-red-600 dark:text-red-400">
<div className="flex items-center gap-1 text-blue-600 dark:text-blue-400"> <span className="text-lg">↗</span>
<span className="text-lg">↘</span> <span className="text-sm font-semibold">+{Math.round(tempDifference)}°</span>
<span className="text-sm font-semibold">{Math.round(tempDifference)}°</span> </div>
</div> ) : tempDifference < 0 ? (
) : ( <div className="flex items-center gap-1 text-blue-600 dark:text-blue-400">
<div className="flex items-center gap-1 text-green-600 dark:text-green-400"> <span className="text-lg">↘</span>
<span className="text-lg">=</span> <span className="text-sm font-semibold">{Math.round(tempDifference)}°</span>
<span className="text-sm font-semibold">0°</span> </div>
</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> </div>
</> </>
)} )}