fix(navbar): remove border artifact and add 10px bottom fade

Fixed two visual issues with the navbar:

1. Removed black border line when transparent: Changed borderBottom to
   conditionally be 'none' instead of '1px solid transparent', which was
   showing up as a visible line when the navbar is transparent on homepage

2. Added 10px gradient fade at bottom: Applied linear-gradient that fades
   from the dark background to transparent over the last 10px, creating a
   softer transition instead of a sharp cut-off

The navbar now seamlessly blends into the page content with no visual artifacts.

🤖 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-21 09:51:48 -05:00
parent 284fc90a53
commit d5f60ce9d2
1 changed files with 6 additions and 2 deletions

View File

@ -575,11 +575,15 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
return (
<Tooltip.Provider delayDuration={200}>
<header
style={{
background: isTransparent
? 'transparent'
: 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) calc(100% - 10px), transparent 100%)',
}}
className={css({
bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
backdropFilter: isTransparent ? 'none' : 'blur(12px)',
shadow: isTransparent ? 'none' : 'lg',
borderBottom: '1px solid',
borderBottom: isTransparent ? 'none' : '1px solid',
borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.2)',
position: 'fixed',
top: 0,