Added signout button to intake forms

Author: UmairHundekar

frontend/src/components/intake/IntakeHeader.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, Flex, Text, Link } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import { logout } from '@/APIClients/authAPIClient';
+import { COLORS } from '@/constants/form';
+
+interface IntakeHeaderProps {
+  title: string;
+}
+
+export function IntakeHeader({ title }: IntakeHeaderProps) {
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    await logout();
+    await router.push('/');
+  };
+
+  return (
+    <Flex
+      w="full"
+      maxW="1200px"
+      justify="space-between"
+      align="center"
+      mb={8}
+      px={4}
+    >
+      <Text
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontWeight={600}
+        color={COLORS.veniceBlue}
+        fontSize="28px"
+      >
+        {title}
+      </Text>
+      <Link
+        onClick={handleSignOut}
+        style={{
+          color: COLORS.veniceBlue,
+          textDecoration: 'underline',
+          fontWeight: 400,
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontSize: '16px',
+          cursor: 'pointer',
+        }}
+      >
+        Sign out
+      </Link>
+    </Flex>
+  );
+}

frontend/src/pages/participant/intake/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/intake/demographic-cancer-form';
 import { LovedOneForm } from '@/components/intake/loved-one-form';
 import { AdditionalInfoForm } from '@/components/intake/additional-info-form';
+import { IntakeHeader } from '@/components/intake/IntakeHeader';
 import {
   COLORS,
   IntakeFormData,
@@ -236,9 +237,12 @@ export default function ParticipantIntakePage() {
           bg={COLORS.lightGray}
           justify="center"
           py={12}
+          direction="column"
+          align="center"
           overflow="visible"
           pb={hasDropdownOpen ? '50vh' : 12}
         >
+          <IntakeHeader title="First Connection Participant Form" />
           <Box
             w="full"
             maxW="1200px"

frontend/src/pages/volunteer/intake/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/intake/demographic-cancer-form';
 import { LovedOneForm } from '@/components/intake/loved-one-form';
 import { AdditionalInfoForm } from '@/components/intake/additional-info-form';
+import { IntakeHeader } from '@/components/intake/IntakeHeader';
 import {
   COLORS,
   IntakeFormData,
@@ -245,9 +246,12 @@ export default function VolunteerIntakePage() {
           bg={COLORS.lightGray}
           justify="center"
           py={12}
+          direction="column"
+          align="center"
           overflow="visible"
           pb={hasDropdownOpen ? '30vh' : 12}
         >
+          <IntakeHeader title="First Connection Volunteer Form" />
           <Box
             w="full"
             maxW="1200px"