skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

fix(a11y): remove duplicate profile status dot; raise low-contrast text

Browse source 
- Profile showed the live status indicator twice (avatar + name row) -> once
- Stash/Wallet informational text bumped from gray-600/700 to gray-400/500 for
  readable contrast on the near-black background
This commit is contained in:
SkateSpots 2026-09-26 19:05:35 +07:00
parent c0ee70b8bb
commit 0aee937880
3 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/pages/NIP19Page.tsx
View file

@ -261,7 +261,6 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
<Bot className="h-3 w-3" /> Bot
</Badge>
)}
<UserStatusIndicator pubkey={pubkey} size="md" showLabel className="hidden sm:flex" />
</div>
{nip05 && (
<p

28
src/pages/StashPage.tsx
View file

@ -126,7 +126,7 @@ function StashListRow({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fal
{!isWTB && (
<div className="flex items-center gap-0.5">
{Array.from({ length: 5 }).map((_, i) => (
<Star key={i} className={cn('h-2.5 w-2.5', i < condition.stars ? 'fill-yellow-400 text-yellow-400' : 'text-gray-700')} />
<Star key={i} className={cn('h-2.5 w-2.5', i < condition.stars ? 'fill-yellow-400 text-yellow-400' : 'text-gray-500')} />
))}
</div>
)}
@ -237,7 +237,7 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
{!isWTB && (
<div className="flex items-center gap-1">
{Array.from({ length: 5 }).map((_, i) => (
<Star key={i} className={cn('h-3 w-3', i < condition.stars ? 'fill-yellow-400 text-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.5)]' : 'text-gray-700')} />
<Star key={i} className={cn('h-3 w-3', i < condition.stars ? 'fill-yellow-400 text-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.5)]' : 'text-gray-500')} />
))}
<span className="text-[10px] ml-1 font-medium" style={{ color: condition.color }}>{condition.label.split(' ')[1]}</span>
</div>
@ -251,7 +251,7 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
{usdValue && <span className="text-[10px] text-muted-foreground">(~${usdValue.toFixed(0)})</span>}
</div>
) : (
<span className="text-xs text-gray-700">No price set</span>
<span className="text-xs text-gray-500">No price set</span>
)}
<div className="flex items-center gap-1">
{item.visibility === 'private' && <Tooltip><TooltipTrigger><Lock className="h-3.5 w-3.5 text-red-400/60" /></TooltipTrigger><TooltipContent>Private</TooltipContent></Tooltip>}
@ -800,8 +800,8 @@ export default function StashPage() {
{/* View toggle — only useful when there are items to view */}
{stats.total > 0 && (
<div className="flex items-center rounded-lg border border-white/10 overflow-hidden">
<button aria-label="List view" onClick={() => setViewMode('list')} className={cn('px-2.5 py-1.5 transition-colors', viewMode === 'list' ? 'bg-white/12 text-white' : 'text-gray-600 hover:text-gray-300')}><List className="h-3.5 w-3.5" /></button>
<button aria-label="Grid view" onClick={() => setViewMode('grid')} className={cn('px-2.5 py-1.5 transition-colors', viewMode === 'grid' ? 'bg-white/12 text-white' : 'text-gray-600 hover:text-gray-300')}><LayoutGrid className="h-3.5 w-3.5" /></button>
<button aria-label="List view" onClick={() => setViewMode('list')} className={cn('px-2.5 py-1.5 transition-colors', viewMode === 'list' ? 'bg-white/12 text-white' : 'text-gray-400 hover:text-gray-300')}><List className="h-3.5 w-3.5" /></button>
<button aria-label="Grid view" onClick={() => setViewMode('grid')} className={cn('px-2.5 py-1.5 transition-colors', viewMode === 'grid' ? 'bg-white/12 text-white' : 'text-gray-400 hover:text-gray-300')}><LayoutGrid className="h-3.5 w-3.5" /></button>
</div>
)}
{/* Mobile-only quick add — desktop has sidebar buttons */}
@ -833,8 +833,8 @@ export default function StashPage() {
<div className="border-b border-white/6 bg-black/40">
<div className="container px-4 max-w-7xl py-2 flex items-center gap-2 flex-wrap">
<div className="relative flex-1 min-w-[140px] sm:flex-none sm:w-44">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-600 pointer-events-none" />
<Input placeholder="Search..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-8 h-8 bg-white/4 border-white/8 text-sm placeholder:text-gray-600 focus:border-[#ff6600]/50" />
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400 pointer-events-none" />
<Input placeholder="Search..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-8 h-8 bg-white/4 border-white/8 text-sm placeholder:text-gray-400 focus:border-[#ff6600]/50" />
</div>
<Select value={filterCategory} onValueChange={setFilterCategory}>
<SelectTrigger className="w-[130px] sm:w-[140px] h-8 bg-white/4 border-white/8 text-sm flex-shrink-0"><SelectValue placeholder="All categories" /></SelectTrigger>
@ -872,7 +872,7 @@ export default function StashPage() {
})}
</div>
)}
<span className="ml-auto text-xs text-gray-700 hidden lg:block flex-shrink-0">{filteredItems.length} item{filteredItems.length !== 1 ? 's' : ''}</span>
<span className="ml-auto text-xs text-gray-500 hidden lg:block flex-shrink-0">{filteredItems.length} item{filteredItems.length !== 1 ? 's' : ''}</span>
</div>
</div>
@ -922,7 +922,7 @@ export default function StashPage() {
) : (
<>
<div className="w-14 h-14 rounded-2xl bg-white/4 border border-white/8 flex items-center justify-center mb-4">
<Search className="h-7 w-7 text-gray-600" />
<Search className="h-7 w-7 text-gray-400" />
</div>
<p className="text-white font-bold mb-1">No items match</p>
<p className="text-muted-foreground text-sm mb-4">Try adjusting your filters.</p>
@ -977,7 +977,7 @@ export default function StashPage() {
<Zap className="h-4 w-4" />
{stats.totalValue > 999 ? (stats.totalValue / 1000).toFixed(1) + 'k' : stats.totalValue}
</p>
<p className="text-xs text-gray-600 mt-0.5">est. sats</p>
<p className="text-xs text-gray-400 mt-0.5">est. sats</p>
</div>
)}
</div>
@ -992,7 +992,7 @@ export default function StashPage() {
].map(({ label, value, color }) => (
<div key={label} className="flex flex-col items-center py-3 px-2 gap-0.5">
<span className={cn('text-lg font-black leading-none', color)}>{value}</span>
<span className="text-[10px] text-gray-600 font-bold">{label}</span>
<span className="text-[10px] text-gray-400 font-bold">{label}</span>
</div>
))}
</div>
@ -1012,7 +1012,7 @@ export default function StashPage() {
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1">
<span className="text-[11px] text-gray-400 font-bold group-hover:text-white transition-colors truncate">{category.label}</span>
<span className="text-[10px] text-gray-600 font-black ml-1">{count}</span>
<span className="text-[10px] text-gray-400 font-black ml-1">{count}</span>
</div>
<div className="h-1 rounded-full bg-white/6 overflow-hidden">
<div className="h-full rounded-full bg-gradient-to-r from-[#ff6600] to-[#ff0040] transition-all" style={{ width: `${pct}%` }} />
@ -1091,7 +1091,7 @@ export default function StashPage() {
{/* How it works */}
<div className="rounded-2xl border border-white/6 bg-white/2 p-4">
<p className="text-[10px] font-black uppercase tracking-widest text-gray-700 mb-3">How it works</p>
<p className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-3">How it works</p>
<ul className="space-y-2">
{[
{ icon: '✏️', text: 'Edit items with the pen button' },
@ -1101,7 +1101,7 @@ export default function StashPage() {
].map(({ icon, text }) => (
<li key={text} className="flex items-start gap-2.5">
<span className="text-sm flex-shrink-0 mt-0.5">{icon}</span>
<span className="text-[11px] text-gray-600 leading-snug">{text}</span>
<span className="text-[11px] text-gray-400 leading-snug">{text}</span>
</li>
))}
</ul>

2
src/pages/WalletPage.tsx
View file

@ -70,7 +70,7 @@ function StatusPill({
return (
<div className={cn(
'flex items-center gap-1 px-2 py-1 rounded-full border text-[10px] font-bold transition-all',
active ? `${activeBg} ${color}` : 'bg-white/3 border-white/8 text-gray-600'
active ? `${activeBg} ${color}` : 'bg-white/3 border-white/8 text-gray-400'
)}>
<Icon className="h-2.5 w-2.5" />
{label}