From 0aee9378808e4ec7fc3edcecf209dbac716229e6 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 19:05:35 +0700
Subject: [PATCH] fix(a11y): remove duplicate profile status dot; raise
 low-contrast text

- 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
---
 src/pages/NIP19Page.tsx  |  1 -
 src/pages/StashPage.tsx  | 28 ++++++++++++++--------------
 src/pages/WalletPage.tsx |  2 +-
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/pages/NIP19Page.tsx b/src/pages/NIP19Page.tsx
index 898bab2..062fb46 100644
--- a/src/pages/NIP19Page.tsx
+++ b/src/pages/NIP19Page.tsx
@@ -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
diff --git a/src/pages/StashPage.tsx b/src/pages/StashPage.tsx
index 1f40f23..dcdc718 100644
--- a/src/pages/StashPage.tsx
+++ b/src/pages/StashPage.tsx
@@ -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>
diff --git a/src/pages/WalletPage.tsx b/src/pages/WalletPage.tsx
index 39c0512..80a4818 100644
--- a/src/pages/WalletPage.tsx
+++ b/src/pages/WalletPage.tsx
@@ -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}