website refactor

apps/website/components/layout/HeaderActions.tsx

@@ -1,45 +1,49 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Stack } from '@/ui/Stack';
-import { LogIn, UserPlus } from 'lucide-react';
+import { Box } from '@/ui/Box';
 
 interface HeaderActionsProps {
   isAuthenticated: boolean;
 }
 
-/**
- * HeaderActions provides the primary actions in the header (Login, Signup, Profile).
- */
 export function HeaderActions({ isAuthenticated }: HeaderActionsProps) {
   if (isAuthenticated) {
     return (
-      <Stack direction="row" gap={3}>
-        <Button as="a" href={routes.protected.profile} variant="secondary" size="sm">
-          Profile
-        </Button>
-      </Stack>
+      <Button
+        as="a"
+        href={routes.protected.profile}
+        variant="ghost"
+        size="sm"
+        className="text-text-med hover:text-text-high transition-colors duration-200"
+      >
+        Profile
+      </Button>
     );
   }
 
   return (
-    <Stack direction="row" gap={3}>
+    <Stack direction="row" gap={4} align="center">
       <Button
         as="a"
         href={routes.auth.login}
         variant="ghost"
         size="sm"
-        icon={<LogIn size={16} />}
         data-testid="public-nav-login"
+        className="text-text-med hover:text-text-high transition-colors duration-200"
       >
-        Login
+        Sign In
       </Button>
+
+      <Box className="w-px h-4 bg-outline-steel" />
+
       <Button
         as="a"
         href={routes.auth.signup}
         variant="primary"
         size="sm"
-        icon={<UserPlus size={16} />}
         data-testid="public-nav-signup"
+        className="px-6 font-medium tracking-wide"
       >
         Sign Up
       </Button>