From be99613a62b1cc01d5b54a91d84561996e06e815 Mon Sep 17 00:00:00 2001
From: Rigidity <me@rigidnetwork.com>
Date: Mon, 22 Sep 2025 17:49:29 -0400
Subject: [PATCH] Improve styling of collapsed nav items

---
 src/components/Nav.tsx  | 8 ++++----
 src/pages/TokenList.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 98cae61b..0ec64879 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -37,7 +37,7 @@ export function TopNav({ isCollapsed }: NavProps) {
 
   return (
     <nav
-      className={`grid font-medium font-body ${isCollapsed ? 'gap-2' : ''}`}
+      className={`grid font-medium font-body ${isCollapsed ? 'gap-1' : ''}`}
       role='navigation'
       aria-label={t`Main navigation`}
     >
@@ -148,7 +148,7 @@ export function BottomNav({ isCollapsed }: NavProps) {
 
   return (
     <nav
-      className={`grid font-medium font-body ${isCollapsed ? 'gap-2' : ''}`}
+      className={`grid font-medium font-body ${isCollapsed ? 'gap-1' : ''}`}
       role='navigation'
       aria-label={t`Secondary navigation`}
     >
@@ -245,8 +245,8 @@ function NavLink({
     (location.pathname === url ||
       (url !== '/' && location.pathname.startsWith(url)));
 
-  const baseClassName = `flex items-center gap-3 rounded-lg py-1.5 transition-all ${
-    isCollapsed ? 'justify-center' : 'px-2'
+  const baseClassName = `flex items-center gap-3 transition-all ${
+    isCollapsed ? 'justify-center p-2 rounded-full' : 'px-2 rounded-lg py-1.5'
   } text-lg md:text-base`;
 
   const className = isActive
diff --git a/src/pages/TokenList.tsx b/src/pages/TokenList.tsx
index 172523fd..78a909e2 100644
--- a/src/pages/TokenList.tsx
+++ b/src/pages/TokenList.tsx
@@ -258,7 +258,7 @@ export function TokenList() {
                   </Tooltip>
                 </TooltipProvider>
               </div>
-              <span className='text-primary'>
+              <span className='text-primary-foreground'>
                 <NumberFormat
                   value={totalUsdBalance}
                   style='currency'