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">
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>
</>
)}