antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nav): remove unnecessary borders from transparent nav

Browse Source 
Remove borders and extra padding around navigation elements when in
transparent mode. The borders were appearing as black and cluttering
the clean transparent overlay look. Now navigation elements show only
white text without any borders.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-20 14:14:59 -05:00
parent eff44b3ad1
commit 8c2ddca28d
1 changed files with 4 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/web/src/components/AppNavBar.tsx
View File

@@ -659,31 +659,9 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
<div />
)}
<div
className={css({
display: 'flex',
gap: '6',
alignItems: 'center',
px: isTransparent ? '4' : '0',
py: isTransparent ? '2' : '0',
rounded: isTransparent ? 'lg' : 'none',
border: isTransparent ? '1px solid' : 'none',
borderColor: isTransparent ? 'rgba(255, 255, 255, 0.3)' : 'transparent',
transition: 'all 0.3s ease',
})}
>
<div className={hstack({ gap: '6', alignItems: 'center' })}>
{/* Navigation Links */}
<nav
className={css({
display: 'flex',
gap: '4',
px: isTransparent ? '2' : '0',
py: isTransparent ? '1' : '0',
rounded: isTransparent ? 'md' : 'none',
border: isTransparent ? '1px solid' : 'none',
borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
})}
>
<nav className={hstack({ gap: '4' })}>
<NavLink href="/create" currentPath={pathname} isTransparent={isTransparent}>
Create
</NavLink>
@@ -695,18 +673,8 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
</NavLink>
</nav>
{/* Abacus Style Dropdown - with border when transparent */}
<div
className={css({
px: isTransparent ? '2' : '0',
py: isTransparent ? '1' : '0',
rounded: isTransparent ? 'md' : 'none',
border: isTransparent ? '1px solid' : 'none',
borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
})}
>
<AbacusDisplayDropdown isFullscreen={false} />
</div>
{/* Abacus Style Dropdown */}
<AbacusDisplayDropdown isFullscreen={false} />
</div>
</div>
</div>