[web] interviews/navbar: tweak bottom border appearance

apps/web/src/app/[locale]/(interviews)/(footerless)/layout.tsx

@@ -9,7 +9,7 @@ export default function FooterlessLayout({ children }: Props) {
   return (
     <>
       <GlobalBannerInterviews />
-      <InterviewsNavbar showBottomBorderOnScroll={false} />
+      <InterviewsNavbar />
       {children}
     </>
   );

apps/web/src/app/[locale]/(interviews)/(marketing)/layout.tsx

@@ -15,7 +15,7 @@ export default function InterviewsMarketingLayout({ children }: Props) {
       <FeedbackWidget />
       <GlobalBannerInterviews />
       <div className="flex min-h-screen flex-col">
-        <InterviewsNavbar />
+        <InterviewsNavbar bottomBorder={false} />
         <div className="grow">{children}</div>
         <Section>
           <InterviewsFooter />

apps/web/src/components/global/navbar/NavProductDropdownMenu.tsx

@@ -88,7 +88,7 @@ export default function NavProductDropdownMenu({
             type="button">
             <Text
               color={variant === 'full' ? 'default' : 'secondary'}
-              size="body2"
+              size={variant === 'full' ? 'body2' : 'body3'}
               weight="bold">
               {label}
             </Text>

apps/web/src/components/interviews/common/InterviewsNavbar.tsx

@@ -31,13 +31,13 @@ import useInterviewsNavLinks from './useInterviewsNavLinks';
 import { useUser } from '@supabase/auth-helpers-react';
 
 type Props = Readonly<{
+  bottomBorder?: boolean;
   hideOnDesktop?: boolean;
-  showBottomBorderOnScroll?: boolean;
 }>;
 
 export default function InterviewsNavbar({
+  bottomBorder = true,
   hideOnDesktop = false,
-  showBottomBorderOnScroll = true,
 }: Props) {
   const { colorSchemePreference, setColorSchemePreference } =
     useColorSchemePreferences();
@@ -139,6 +139,7 @@ export default function InterviewsNavbar({
   return (
     <Navbar
       ref={navbarRef}
+      bottomBorder={bottomBorder}
       endAddOnItems={<InterviewsNavbarEndAddOnItems />}
       hideOnDesktop={hideOnDesktop}
       isLoading={isUserProfileLoading}
@@ -152,7 +153,6 @@ export default function InterviewsNavbar({
       }
       mobileSidebarBottomItems={mobileSidebarBottomItems}
       renderMobileSidebarAddOnItems={renderMobileSidebarAddOnItems}
-      showBottomBorderOnScroll={showBottomBorderOnScroll}
       translucent={!isSticky}
     />
   );

apps/web/src/components/ui/Navbar/Navbar.tsx

@@ -19,6 +19,7 @@ import type { NavbarTopLevelItem } from './NavTypes';
 import Button from '../Button';
 
 type Props = Readonly<{
+  bottomBorder?: boolean;
   className?: string;
   endAddOnItems?: React.ReactNode;
   hideOnDesktop?: boolean;
@@ -29,7 +30,6 @@ type Props = Readonly<{
   renderMobileSidebarAddOnItems?: ({
     closeMobileNav,
   }: Readonly<{ closeMobileNav: () => void }>) => React.ReactNode;
-  showBottomBorderOnScroll?: boolean;
   style?: CSSProperties;
   translucent?: boolean;
   unreadNotificationCount?: number;
@@ -47,7 +47,7 @@ function Navbar(
     translucent = false,
     hideOnDesktop = false,
     unreadNotificationCount = 0,
-    showBottomBorderOnScroll,
+    bottomBorder,
   }: Props,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -60,20 +60,21 @@ function Navbar(
     setIsMobileNavOpen(false);
   }
 
-  const showBottomBorder = showBottomBorderOnScroll ? translucent : true;
-
   return (
     <div
       ref={ref}
       className={clsx(
         'z-fixed sticky top-[var(--banner-height)]',
-        showBottomBorder && ['border-b', themeBorderColor],
+        bottomBorder && ['border-b', themeBorderColor],
         translucent ? 'backdrop-blur' : 'bg-white dark:bg-neutral-900/60',
         'transition-[background-color]',
         hideOnDesktop && 'lg:hidden',
         className,
       )}>
-      <NavbarHeightStyles hideOnDesktop={hideOnDesktop} />
+      <NavbarHeightStyles
+        hideOnDesktop={hideOnDesktop}
+        borderHeight={bottomBorder ? 1 : 0}
+      />
       <div className="max-w-8xl mx-auto px-6">
         <div
           className={clsx(