julienfroidefond/workshop-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make evolution indicators visually prominent with badge style

Browse Source 
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>
This commit is contained in:
Julien Froidefond
2026-02-24 18:18:28 +01:00
parent 30c2b6cc1e
commit 73219c89fb
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/weather/WeatherCard.tsx
View File

@@ -48,12 +48,12 @@ function EvolutionIndicator({
if (direction === null) return null; if (direction === null) return null;
if (direction === 'up') { 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') { 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) { export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previousEntry }: WeatherCardProps) {
@@ -143,7 +143,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
</td> </td>
{/* Performance */} {/* Performance */}
<td className="w-24 px-2 py-3"> <td className="w-28 px-2 py-3">
{canEditThis ? ( {canEditThis ? (
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">
<Select <Select
@@ -165,7 +165,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
</td> </td>
{/* Moral */} {/* Moral */}
<td className="w-24 px-2 py-3"> <td className="w-28 px-2 py-3">
{canEditThis ? ( {canEditThis ? (
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">
<Select <Select
@@ -187,7 +187,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
</td> </td>
{/* Flux */} {/* Flux */}
<td className="w-24 px-2 py-3"> <td className="w-28 px-2 py-3">
{canEditThis ? ( {canEditThis ? (
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">
<Select <Select
@@ -209,7 +209,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
</td> </td>
{/* Création de valeur */} {/* Création de valeur */}
<td className="w-24 px-2 py-3"> <td className="w-28 px-2 py-3">
{canEditThis ? ( {canEditThis ? (
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">
<Select <Select