Update UI elements and refine billing schema

Several changes were made to improve UI consistency across various components. Styling updates and enhancements were applied to elements including but not limited to, the SiteHeader, SiteNavigationItem, and ModeToggle components. Additionally, a refinement was made to the billing schema to enforce only having one per-seat and one flat line item per plan.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -63,26 +63,24 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 }
 
 function AuthButtons() {
+  const textClassName =
+    'text-gray-600 hover:text-current dark:text-gray-400 dark:hover:text-white';
+
   return (
     <div className={'flex space-x-2'}>
       <div className={'hidden space-x-0.5 md:flex'}>
-        <ModeToggle />
+        <ModeToggle className={textClassName} />
 
         <Link href={pathsConfig.auth.signIn}>
-          <Button variant={'link'}>
+          <Button variant={'ghost'} className={textClassName}>
             <Trans i18nKey={'auth:signIn'} />
           </Button>
         </Link>
       </div>
 
       <Link href={pathsConfig.auth.signUp}>
-        <Button
-          variant={'ghost'}
-          className={
-            'border border-primary hover:bg-primary hover:text-primary-foreground'
-          }
-        >
-          <Trans i18nKey={'auth:getStarted'} />
+        <Button variant={'default'}>
+          <Trans i18nKey={'auth:signUp'} />
           <ChevronRight className={'h-4'} />
         </Button>
       </Link>

apps/web/app/(marketing)/_components/site-header.tsx

@@ -9,7 +9,7 @@ export function SiteHeader(props: { user?: User | null }) {
   return (
     <div
       className={
-        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/20'
+        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/10'
       }
     >
       <div className={'px-4 lg:px-8'}>

apps/web/app/(marketing)/_components/site-navigation-item.tsx

@@ -10,9 +10,10 @@ const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
   return cn(
-    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors`,
+    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-200`,
     {
-      'hover:border-border': !isActive,
+      'hover:border-border active:dark:bg-secondary active:bg-gray-50 dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
+        !isActive,
       'dark:bg-secondary bg-gray-50': isActive,
     },
   );