Skip to content

fix(ui): add font-variant tabular-nums on all amount displays #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
greatest0fallt1me merged 1 commit into from
Jul 24, 2026
Merged

fix(ui): add font-variant tabular-nums on all amount displays #518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/(dashboard)/bets/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ export default function BetsPage() {
<TableCell>
{getCategoryBadge(event.category)}
</TableCell>
<TableCell className="font-medium">
<TableCell className="font-medium tabular-nums">
{event.odds.toFixed(1)}
</TableCell>
<TableCell className="text-sm text-muted-foreground">
Expand Down
10 changes: 5 additions & 5 deletions app/(dashboard)/events/event-page/EventDetailsClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export default function EventDetailsClient() {
<DollarSign className="h-5 w-5 text-primary" />
<div>
<p className="text-muted-foreground">Total Pool</p>
<p className="font-medium">
<p className="font-medium tabular-nums">
$
{eventData.totalPool.toLocaleString(undefined, {
minimumFractionDigits: 2,
Expand All @@ -266,7 +266,7 @@ export default function EventDetailsClient() {
<Users className="h-5 w-5 text-primary" />
<div>
<p className="text-muted-foreground">Participants</p>
<p className="font-medium">
<p className="font-medium tabular-nums">
{eventData.participants.toLocaleString()}
</p>
</div>
Expand Down Expand Up @@ -315,7 +315,7 @@ export default function EventDetailsClient() {
<span>{option.text}</span>
</div>
<Badge variant="secondary" className="gap-1">
Odds: {eventData.odds[option.id]?.toFixed(1) ?? "N/A"}x
Odds: <span className="tabular-nums">{eventData.odds[option.id]?.toFixed(1) ?? "N/A"}</span>x
<LongPressHelp content={oddsHelp} />
</Badge>
</Label>
Expand Down Expand Up @@ -357,7 +357,7 @@ export default function EventDetailsClient() {
{data.year}:{" "}
<span className="font-medium">{data.winner}</span>
</span>
<span className="text-muted-foreground">
<span className="text-muted-foreground tabular-nums">
Pool: ${data.pool.toLocaleString()}
</span>
</li>
Expand Down Expand Up @@ -411,7 +411,7 @@ export default function EventDetailsClient() {
/>
</div>
{selectedOption && currentOdds !== undefined && (
<p className="text-sm text-muted-foreground">
<p className="text-sm text-muted-foreground tabular-nums">
Potential Payout: $
{potentialPayout.toLocaleString(undefined, {
minimumFractionDigits: 2,
Expand Down
20 changes: 10 additions & 10 deletions app/(dashboard)/finances/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,10 @@ export default function FinancesPage() {
<DollarSign className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.totalFees) : financialData.totalFees.toLocaleString()}</div>
<div className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.totalFees) : financialData.totalFees.toLocaleString()}</div>
<div className="flex items-center pt-1 text-xs text-muted-foreground">
<TrendingUp className="mr-1 h-3.5 w-3.5 text-green-500" />
<span className="text-green-500">{financialData.feeGrowth}%</span>
<span className="text-green-500 tabular-nums">{financialData.feeGrowth}%</span>
<span className="ml-1">from last month</span>
</div>
</CardContent>
Expand All @@ -144,7 +144,7 @@ export default function FinancesPage() {
<CreditCard className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.monthlyFees) : financialData.monthlyFees.toLocaleString()}</div>
<div className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.monthlyFees) : financialData.monthlyFees.toLocaleString()}</div>
<div className="flex items-center pt-1 text-xs text-muted-foreground">
<ArrowUpRight className="mr-1 h-3.5 w-3.5 text-green-500" />
<span>April 2023</span>
Expand All @@ -157,10 +157,10 @@ export default function FinancesPage() {
<CreditCard className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.weeklyFees) : financialData.weeklyFees.toLocaleString()}</div>
<div className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.weeklyFees) : financialData.weeklyFees.toLocaleString()}</div>
<div className="flex items-center pt-1 text-xs text-muted-foreground">
<ArrowDownRight className="mr-1 h-3.5 w-3.5 text-red-500" />
<span className="text-red-500">3.2%</span>
<span className="text-red-500 tabular-nums">3.2%</span>
<span className="ml-1">from last week</span>
</div>
</CardContent>
Expand All @@ -171,10 +171,10 @@ export default function FinancesPage() {
<CreditCard className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{hideBalances ? maskAmount(financialData.dailyFees) : financialData.dailyFees.toLocaleString()}</div>
<div className="text-2xl font-bold tabular-nums">{hideBalances ? maskAmount(financialData.dailyFees) : financialData.dailyFees.toLocaleString()}</div>
<div className="flex items-center pt-1 text-xs text-muted-foreground">
<TrendingUp className="mr-1 h-3.5 w-3.5 text-green-500" />
<span className="text-green-500">8.4%</span>
<span className="text-green-500 tabular-nums">8.4%</span>
<span className="ml-1">from yesterday</span>
</div>
</CardContent>
Expand Down Expand Up @@ -235,7 +235,7 @@ export default function FinancesPage() {
<TableCell>{new Date(transaction.date).toLocaleDateString()}</TableCell>
<TableCell className="font-medium">{transaction.eventTitle}</TableCell>
<TableCell>{transaction.type === "platform_fee" ? "Platform Fee" : transaction.type}</TableCell>
<TableCell className="text-right">{hideBalances ? maskAmount(transaction.amount) : transaction.amount.toLocaleString()}</TableCell>
<TableCell className="text-right tabular-nums">{hideBalances ? maskAmount(transaction.amount) : transaction.amount.toLocaleString()}</TableCell>
</TableRow>
))}
</TableBody>
Expand Down Expand Up @@ -265,8 +265,8 @@ export default function FinancesPage() {
{financialData.feeDistribution.map((item) => (
<TableRow key={item.category}>
<TableCell className="font-medium">{item.category}</TableCell>
<TableCell>{item.percentage}%</TableCell>
<TableCell className="text-right">${item.amount.toLocaleString()}</TableCell>
<TableCell className="tabular-nums">{item.percentage}%</TableCell>
<TableCell className="text-right tabular-nums">${item.amount.toLocaleString()}</TableCell>
</TableRow>
))}
</TableBody>
Expand Down
8 changes: 4 additions & 4 deletions app/(dashboard)/mypredictions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const StatBox: React.FC<{ stat: Stat }> = ({ stat }) => {
</p>
{/* Value text color */}
<p
className={`text-[22px] font-bold mt-1 leading-none ${primaryTextColor}`}
className={`text-[22px] font-bold mt-1 leading-none tabular-nums ${primaryTextColor}`}
>
{stat.value.toFixed(2)}
</p>
Expand Down Expand Up @@ -223,23 +223,23 @@ const PredictionCard: React.FC<{ prediction: Prediction }> = ({
{/* Stake */}
<div>
<p className="text-[#6B7280] text-[15px]">Stake</p>
<p className="text-gray-900 font-medium text-[15px]">
<p className="text-gray-900 font-medium text-[15px] tabular-nums">
{stakeAmount} {stakeToken}
</p>
</div>

{/* Odds */}
<div>
<p className="text-gray-600 text-[15px]">Odds</p>
<p className="text-gray-900 font-medium text-[15px]">
<p className="text-gray-900 font-medium text-[15px] tabular-nums">
{odds.toFixed(1)}x
</p>
</div>

{/* Potential Winnings */}
<div>
<p className="text-[#6B7280] text-[15px]">Potential Winnings</p>
<p className="text-gray-900 font-medium text-[15px]">
<p className="text-gray-900 font-medium text-[15px] tabular-nums">
{potentialWinnings} {winningsToken}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/(dashboard)/verification/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ export default function VerificationPage() {
className="flex items-center justify-between rounded-md border p-3"
>
<span>{option.text}</span>
<span className="text-sm text-muted-foreground">
<span className="text-sm text-muted-foreground tabular-nums">
{(option.probability * 100).toFixed(0)}%
</span>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/(marketing)/_components/markets-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export function MarketsWidget({ className }: MarketsWidgetProps) {
<div className="rounded-full bg-white/20 p-2">
<Coins className="h-5 w-5 text-white" />
</div>
<span className="text-lg font-semibold text-white">
<span className="text-lg font-semibold text-white tabular-nums">
+{winNotifications[0].amount} {winNotifications[0].currency} Won!
</span>
</div>
Expand Down Expand Up @@ -166,8 +166,8 @@ function MarketCard({ market, IconComponent, colors, index, reducedMotion }: Mar
</div>
</div>
<div className="text-right">
<div className="text-sm font-medium text-green-400">Yes: {market.yesOdds}%</div>
<div className="text-sm text-red-400">No: {market.noOdds}%</div>
<div className="text-sm font-medium text-green-400 tabular-nums">Yes: {market.yesOdds}%</div>
<div className="text-sm text-red-400 tabular-nums">No: {market.noOdds}%</div>
</div>
</div>

Expand All @@ -180,7 +180,7 @@ function MarketCard({ market, IconComponent, colors, index, reducedMotion }: Mar
</div>

<div className="flex justify-between text-xs text-white/60">
<span>Pool: {market.poolAmount.toLocaleString()} USDC</span>
<span className="tabular-nums">Pool: {market.poolAmount.toLocaleString()} USDC</span>
<span>Ends in {market.endsIn}</span>
</div>
</Card>
Expand Down
8 changes: 4 additions & 4 deletions components/PredictionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
{/* Stake */}
<div>
<p className="text-muted-foreground">Stake</p>
<p className="text-card-foreground font-medium">{stakeAmount} {stakeToken}</p>
<p className="text-card-foreground font-medium tabular-nums">{stakeAmount} {stakeToken}</p>
</div>

{/* Odds */}
Expand All @@ -162,11 +162,11 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
aria-controls="odds-breakdown"
>
<p className="text-muted-foreground">Odds</p>
<p className="text-card-foreground font-medium">{odds.toFixed(1)}x</p>
<p className="text-card-foreground font-medium tabular-nums">{odds.toFixed(1)}x</p>
</button>
</CollapsibleTrigger>
<CollapsibleContent id="odds-breakdown" className="mt-2 text-sm text-muted-foreground">
<p>Implied probability: {(1 / odds * 100).toFixed(1)}%</p>
<p className="tabular-nums">Implied probability: {(1 / odds * 100).toFixed(1)}%</p>
<p>Last move: N/A</p>
<p>24h volume: N/A</p>
</CollapsibleContent>
Expand All @@ -175,7 +175,7 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
{/* Potential Winnings */}
<div>
<p className="text-muted-foreground">Potential Winnings</p>
<p className="text-card-foreground font-medium">{potentialWinnings} {winningsToken}</p>
<p className="text-card-foreground font-medium tabular-nums">{potentialWinnings} {winningsToken}</p>
</div>

{/* Event Date */}
Expand Down
4 changes: 2 additions & 2 deletions components/QuickBetPresets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ const QuickBetPresets: React.FC<QuickBetPresetsProps> = ({
// Active vs. inactive appearance using design-system tokens
isActive
? "bg-primary text-primary-foreground border-primary"
: "bg-background text-foreground border-border hover:bg-muted",
: "bg-background text-foreground border-border hover:bg-muted",
].join(" ")}
>
{amount} XLM
<span className="tabular-nums">{amount}</span> XLM
</button>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion components/activity-timeline/activity-timeline-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function ActivityTimelineItem({
)}
>
{event.eventType.includes("withdrawal") ? "−" : "+"}
{event.amount.toLocaleString()} {event.currency}
<span className="tabular-nums">{event.amount.toLocaleString()}</span> {event.currency}
</span>
{event.relatedEventId && (
<span className="text-xs text-gray-500">
Expand Down
2 changes: 1 addition & 1 deletion components/cards/stat-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function StatCard({ stat, index, status, emptyVariant = 'volume', onRetry
return (
<div className="relative group">
<div className="bg-slate-900/50 backdrop-blur-sm border border-cyan-500/20 rounded-2xl p-6 sm:p-8 shadow-xl hover:shadow-cyan-500/20 transition-all duration-300 transform hover:scale-105 hover:-translate-y-2">
<div className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-cyan-400 to-emerald-400 bg-clip-text text-transparent mb-2">
<div className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-cyan-400 to-emerald-400 bg-clip-text text-transparent mb-2 tabular-nums">
{stat?.value}
</div>
<div className="text-slate-400 font-medium text-sm sm:text-base">
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/RecommendationsStrip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ function RecommendationCard({ market }: { market: RecommendedMarket }) {
<p className="mb-3 text-xs text-muted-foreground">{market.categoryLabel}</p>

<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">{market.participants.toLocaleString()} participants</span>
<span className="font-mono font-medium text-foreground">{market.odds.toFixed(1)}x</span>
<span className="text-muted-foreground tabular-nums">{market.participants.toLocaleString()} participants</span>
<span className="font-mono font-medium text-foreground tabular-nums">{market.odds.toFixed(1)}x</span>
</div>
</Link>
)
Expand Down
8 changes: 4 additions & 4 deletions components/disputes/shared/TallyBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ export function TallyBar({ tally, showAmounts = false }: TallyBarProps) {
const animatedLeftAmount = useCountUp(left.amount, 0, 400);
const animatedRightAmount = useCountUp(right.amount, 0, 400);

const leftPctLabel = `${animatedLeftPct.toFixed(1)}%`;
const rightPctLabel = `${animatedRightPct.toFixed(1)}%`;
const leftAmountLabel = `${Math.round(animatedLeftAmount).toLocaleString()} tokens`;
const rightAmountLabel = `${Math.round(animatedRightAmount).toLocaleString()} tokens`;
const leftPctLabel = <><span className="tabular-nums">{animatedLeftPct.toFixed(1)}</span>%</>;
const rightPctLabel = <><span className="tabular-nums">{animatedRightPct.toFixed(1)}</span>%</>;
const leftAmountLabel = <><span className="tabular-nums">{Math.round(animatedLeftAmount).toLocaleString()}</span> tokens</>;
const rightAmountLabel = <><span className="tabular-nums">{Math.round(animatedRightAmount).toLocaleString()}</span> tokens</>;

// Compute aria summary from the TARGET (final) prop values, not the animated
// intermediates. This keeps screen-reader announcements clean: one clear
Expand Down
8 changes: 4 additions & 4 deletions components/events/events-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,8 @@ function EventRow({
<p className="font-bold text-xs uppercase tracking-wider text-purple-300">Event Details</p>
<div className="text-xs space-y-1 text-white/90">
<div><span className="text-white/50">Category:</span> {event.category}</div>
<div><span className="text-white/50">Odds:</span> {event.odds}</div>
<div><span className="text-white/50">Participants:</span> {event.participants.toLocaleString()}</div>
<div><span className="text-white/50">Odds:</span> <span className="tabular-nums">{event.odds}</span></div>
<div><span className="text-white/50">Participants:</span> <span className="tabular-nums">{event.participants.toLocaleString()}</span></div>
<div><span className="text-white/50">Ends:</span> {formatDate(new Date(event.endDate))}</div>
</div>
</div>
Expand All @@ -225,7 +225,7 @@ function EventRow({
</TableCell>

<TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[80px] sm:min-w-0">
<div className="font-medium text-sm text-white">{event.odds}</div>
<div className="font-medium text-sm text-white tabular-nums">{event.odds}</div>
</TableCell>

<TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[180px] sm:min-w-0 text-white">
Expand All @@ -248,7 +248,7 @@ function EventRow({
<TableCell className="py-3 md:py-4 px-4 md:px-6 min-w-[120px] sm:min-w-0">
<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
<Users className="h-4 w-4" />
<span className="font-medium text-foreground">{event.participants.toLocaleString()}</span>
<span className="font-medium text-foreground tabular-nums">{event.participants.toLocaleString()}</span>
</div>
</TableCell>

Expand Down
4 changes: 2 additions & 2 deletions components/events/virtualized-events-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@ export function VirtualizedEventsList({
{event.category}
</Badge>

<div className="font-medium text-sm text-white min-w-[60px]">
<div className="font-medium text-sm text-white min-w-[60px] tabular-nums">
{event.odds}
</div>

Expand All @@ -427,7 +427,7 @@ export function VirtualizedEventsList({

<div className="flex items-center gap-1.5 text-sm text-muted-foreground min-w-[100px]">
<Users className="h-4 w-4" />
<span className="font-medium text-foreground">
<span className="font-medium text-foreground tabular-nums">
{event.participants.toLocaleString()}
</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/leaderboard/LeaderboardCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,13 @@ export function LeaderboardCards({ users, onUserVisibilityChange }: LeaderboardC
<p className={cn("text-sm font-bold truncate", user.isCurrentUser ? "text-cyan-400" : "text-white")}>
{user.name}
</p>
<p className="text-[10px] text-slate-500 uppercase tracking-wider">
<p className="text-[10px] text-slate-500 uppercase tracking-wider tabular-nums">
{user.predictions} predictions
</p>
</div>
<div className="text-right text-sm">
<p className="font-bold text-emerald-400">+{user.profit}</p>
<p className="text-[10px] text-slate-400">{user.winRate}% SR</p>
<p className="font-bold text-emerald-400 tabular-nums">+{user.profit}</p>
<p className="text-[10px] text-slate-400 tabular-nums">{user.winRate}% SR</p>
</div>
</div>
</div>
Expand Down
Loading