Skip to content

Commit b7db820

Browse files
YashK2005claude
YashK2005
and
claude
committed
Fix color consistency and refactor become-* pages
- Updated COLORS.teal to match brand.primary (#056067) - Updated COLORS.lightTeal to match brand.primaryLight (#E6F4F5) - Refactored become-participant and become-volunteer pages to use FormPageLayout - Migrated Back button colors to theme tokens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
1 parent 3870538 commit b7db820

File tree

3 files changed

+116
-154
lines changed

3 files changed

+116
-154
lines changed

‎frontend/src/constants/form.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33
* - COLORS.veniceBlue → brand.navy
44
* - COLORS.fieldGray → brand.fieldText
55
* - COLORS.teal → brand.primary
6+
* - COLORS.lightTeal → brand.primaryLight
67
* - COLORS.lightGray → gray.50
78
* - COLORS.progressGray → gray.300
89
*
9-
* These are temporarily kept for pages not yet migrated (ranking forms, admin, dashboards).
10+
* These are temporarily kept for pages not yet migrated (admin, dashboards).
1011
* Will be removed after all form refactoring is complete.
1112
*/
1213
export const COLORS = {
1314
veniceBlue: '#1d3448',
1415
fieldGray: '#6b7280',
15-
teal: '#0d7377',
16-
lightTeal: '#e6f7f7',
16+
teal: '#056067', // Updated to match brand.primary
17+
lightTeal: '#E6F4F5', // Updated to match brand.primaryLight
1718
lightGray: '#f3f4f6',
1819
progressTeal: '#5eead4',
1920
progressGray: '#d1d5db',

‎frontend/src/pages/participant/become-volunteer/index.tsx‎

Lines changed: 56 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo, useState } from 'react';
2-
import { Box, Flex, Text } from '@chakra-ui/react';
2+
import { Flex, Text } from '@chakra-ui/react';
33
import { useRouter } from 'next/router';
44
import { FiChevronLeft } from 'react-icons/fi';
55
import baseAPIClient from '@/APIClients/baseAPIClient';
@@ -11,8 +11,8 @@ import {
1111
} from '@/components/intake/demographic-cancer-form';
1212
import { LovedOneForm } from '@/components/intake/loved-one-form';
1313
import { AdditionalInfoForm } from '@/components/intake/additional-info-form';
14+
import { FormPageLayout } from '@/components/layout';
1415
import {
15-
COLORS,
1616
IntakeFormData,
1717
INITIAL_INTAKE_FORM_DATA,
1818
ExperienceData,
@@ -224,85 +224,67 @@ export default function BecomeVolunteerPage() {
224224
return (
225225
<ProtectedPage allowedRoles={[UserRole.PARTICIPANT, UserRole.ADMIN]}>
226226
<FormStatusGuard allowedStatuses={[FormStatus.COMPLETED]}>
227-
<Flex
228-
minH="100vh"
229-
bg={COLORS.lightGray}
230-
justify="center"
231-
py={12}
232-
overflow="visible"
233-
pb={hasDropdownOpen ? '50vh' : 12}
234-
>
235-
<Box
236-
w="full"
237-
maxW="1200px"
238-
bg="white"
239-
borderRadius="8px"
240-
boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
241-
p={10}
242-
overflow="visible"
243-
position="relative"
227+
<FormPageLayout hasDropdownOpen={hasDropdownOpen}>
228+
<Flex
229+
align="center"
230+
gap={2}
231+
cursor="pointer"
232+
onClick={() => {
233+
void router.push('/participant/dashboard');
234+
}}
235+
alignSelf="flex-start"
236+
color="brand.navy"
237+
fontSize="16px"
238+
fontWeight={600}
239+
fontFamily="'Open Sans', sans-serif"
240+
lineHeight="1.25em"
241+
mb={6}
244242
>
245-
<Flex
246-
align="center"
247-
gap={2}
248-
cursor="pointer"
249-
onClick={() => {
250-
void router.push('/participant/dashboard');
251-
}}
252-
alignSelf="flex-start"
253-
color={COLORS.veniceBlue}
254-
fontSize="16px"
255-
fontWeight={600}
256-
fontFamily="'Open Sans', sans-serif"
257-
lineHeight="1.25em"
258-
mb={6}
259-
>
260-
<FiChevronLeft size={20} />
261-
<Text>Back</Text>
262-
</Flex>
243+
<FiChevronLeft size={20} />
244+
<Text>Back</Text>
245+
</Flex>
263246

264-
{currentStepType === 'experience-personal' && (
265-
<PersonalInfoForm
266-
formType="become_volunteer"
267-
onSubmit={handleExperiencePersonalSubmit}
268-
onDropdownOpenChange={setHasDropdownOpen}
269-
/>
270-
)}
247+
{currentStepType === 'experience-personal' && (
248+
<PersonalInfoForm
249+
formType="become_volunteer"
250+
onSubmit={handleExperiencePersonalSubmit}
251+
onDropdownOpenChange={setHasDropdownOpen}
252+
/>
253+
)}
271254

272-
{currentStepType === 'demographics-cancer' && (
273-
<DemographicCancerForm
274-
formType="become_volunteer"
275-
onNext={handleDemographicsNext}
276-
hasBloodCancer={formData.hasBloodCancer}
277-
caringForSomeone={formData.caringForSomeone}
278-
/>
279-
)}
255+
{currentStepType === 'demographics-cancer' && (
256+
<DemographicCancerForm
257+
formType="become_volunteer"
258+
onNext={handleDemographicsNext}
259+
hasBloodCancer={formData.hasBloodCancer}
260+
caringForSomeone={formData.caringForSomeone}
261+
/>
262+
)}
280263

281-
{currentStepType === 'demographics-caregiver' && (
282-
<DemographicCancerForm
283-
formType="become_volunteer"
284-
onNext={handleDemographicsNext}
285-
hasBloodCancer={formData.hasBloodCancer}
286-
caringForSomeone={formData.caringForSomeone}
287-
/>
288-
)}
264+
{currentStepType === 'demographics-caregiver' && (
265+
<DemographicCancerForm
266+
formType="become_volunteer"
267+
onNext={handleDemographicsNext}
268+
hasBloodCancer={formData.hasBloodCancer}
269+
caringForSomeone={formData.caringForSomeone}
270+
/>
271+
)}
289272

290-
{currentStepType === 'loved-one' && (
291-
<LovedOneForm formType="become_volunteer" onSubmit={handleLovedOneNext} />
292-
)}
273+
{currentStepType === 'loved-one' && (
274+
<LovedOneForm formType="become_volunteer" onSubmit={handleLovedOneNext} />
275+
)}
293276

294-
{currentStepType === 'demographics-basic' && (
295-
<BasicDemographicsForm
296-
formType="become_volunteer"
297-
onNext={handleBasicDemographicsNext}
298-
/>
299-
)}
277+
{currentStepType === 'demographics-basic' && (
278+
<BasicDemographicsForm
279+
formType="become_volunteer"
280+
onNext={handleBasicDemographicsNext}
281+
/>
282+
)}
300283

301-
{currentStepType === 'additional-info' && (
302-
<AdditionalInfoForm formType="become_volunteer" onSubmit={handleAdditionalInfoNext} />
303-
)}
304-
</Box>
305-
</Flex>
284+
{currentStepType === 'additional-info' && (
285+
<AdditionalInfoForm formType="become_volunteer" onSubmit={handleAdditionalInfoNext} />
286+
)}
287+
</FormPageLayout>
306288
</FormStatusGuard>
307289
</ProtectedPage>
308290
);

‎frontend/src/pages/volunteer/become-participant/index.tsx‎

Lines changed: 56 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo, useState } from 'react';
2-
import { Box, Flex, Text } from '@chakra-ui/react';
2+
import { Flex, Text } from '@chakra-ui/react';
33
import { useRouter } from 'next/router';
44
import { FiChevronLeft } from 'react-icons/fi';
55
import baseAPIClient from '@/APIClients/baseAPIClient';
@@ -11,8 +11,8 @@ import {
1111
} from '@/components/intake/demographic-cancer-form';
1212
import { LovedOneForm } from '@/components/intake/loved-one-form';
1313
import { AdditionalInfoForm } from '@/components/intake/additional-info-form';
14+
import { FormPageLayout } from '@/components/layout';
1415
import {
15-
COLORS,
1616
IntakeFormData,
1717
INITIAL_INTAKE_FORM_DATA,
1818
ExperienceData,
@@ -234,88 +234,67 @@ export default function BecomeParticipantPage() {
234234
return (
235235
<ProtectedPage allowedRoles={[UserRole.VOLUNTEER, UserRole.ADMIN]}>
236236
<FormStatusGuard allowedStatuses={[FormStatus.COMPLETED]}>
237-
<Flex
238-
minH="100vh"
239-
bg={COLORS.lightGray}
240-
justify="center"
241-
py={12}
242-
overflow="visible"
243-
pb={hasDropdownOpen ? '50vh' : 12}
244-
>
245-
<Box
246-
w="full"
247-
maxW="1200px"
248-
bg="white"
249-
borderRadius="8px"
250-
boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
251-
p={10}
252-
overflow="visible"
253-
position="relative"
237+
<FormPageLayout hasDropdownOpen={hasDropdownOpen}>
238+
<Flex
239+
align="center"
240+
gap={2}
241+
cursor="pointer"
242+
onClick={() => {
243+
void router.push('/volunteer/dashboard');
244+
}}
245+
alignSelf="flex-start"
246+
color="brand.navy"
247+
fontSize="16px"
248+
fontWeight={600}
249+
fontFamily="'Open Sans', sans-serif"
250+
lineHeight="1.25em"
251+
mb={6}
254252
>
255-
<Flex
256-
align="center"
257-
gap={2}
258-
cursor="pointer"
259-
onClick={() => {
260-
void router.push('/volunteer/dashboard');
261-
}}
262-
alignSelf="flex-start"
263-
color={COLORS.veniceBlue}
264-
fontSize="16px"
265-
fontWeight={600}
266-
fontFamily="'Open Sans', sans-serif"
267-
lineHeight="1.25em"
268-
mb={6}
269-
>
270-
<FiChevronLeft size={20} />
271-
<Text>Back</Text>
272-
</Flex>
253+
<FiChevronLeft size={20} />
254+
<Text>Back</Text>
255+
</Flex>
273256

274-
{currentStepType === 'experience-personal' && (
275-
<PersonalInfoForm
276-
formType="become_participant"
277-
onSubmit={handleExperiencePersonalSubmit}
278-
onDropdownOpenChange={setHasDropdownOpen}
279-
/>
280-
)}
257+
{currentStepType === 'experience-personal' && (
258+
<PersonalInfoForm
259+
formType="become_participant"
260+
onSubmit={handleExperiencePersonalSubmit}
261+
onDropdownOpenChange={setHasDropdownOpen}
262+
/>
263+
)}
281264

282-
{currentStepType === 'demographics-cancer' && (
283-
<DemographicCancerForm
284-
formType="become_participant"
285-
onNext={handleDemographicsNext}
286-
hasBloodCancer={formData.hasBloodCancer}
287-
caringForSomeone={formData.caringForSomeone}
288-
/>
289-
)}
265+
{currentStepType === 'demographics-cancer' && (
266+
<DemographicCancerForm
267+
formType="become_participant"
268+
onNext={handleDemographicsNext}
269+
hasBloodCancer={formData.hasBloodCancer}
270+
caringForSomeone={formData.caringForSomeone}
271+
/>
272+
)}
290273

291-
{currentStepType === 'demographics-caregiver' && (
292-
<DemographicCancerForm
293-
formType="become_participant"
294-
onNext={handleDemographicsNext}
295-
hasBloodCancer={formData.hasBloodCancer}
296-
caringForSomeone={formData.caringForSomeone}
297-
/>
298-
)}
274+
{currentStepType === 'demographics-caregiver' && (
275+
<DemographicCancerForm
276+
formType="become_participant"
277+
onNext={handleDemographicsNext}
278+
hasBloodCancer={formData.hasBloodCancer}
279+
caringForSomeone={formData.caringForSomeone}
280+
/>
281+
)}
299282

300-
{currentStepType === 'loved-one' && (
301-
<LovedOneForm formType="become_participant" onSubmit={handleLovedOneNext} />
302-
)}
283+
{currentStepType === 'loved-one' && (
284+
<LovedOneForm formType="become_participant" onSubmit={handleLovedOneNext} />
285+
)}
303286

304-
{currentStepType === 'demographics-basic' && (
305-
<BasicDemographicsForm
306-
formType="become_participant"
307-
onNext={handleBasicDemographicsNext}
308-
/>
309-
)}
287+
{currentStepType === 'demographics-basic' && (
288+
<BasicDemographicsForm
289+
formType="become_participant"
290+
onNext={handleBasicDemographicsNext}
291+
/>
292+
)}
310293

311-
{currentStepType === 'additional-info' && (
312-
<AdditionalInfoForm
313-
formType="become_participant"
314-
onSubmit={handleAdditionalInfoNext}
315-
/>
316-
)}
317-
</Box>
318-
</Flex>
294+
{currentStepType === 'additional-info' && (
295+
<AdditionalInfoForm formType="become_participant" onSubmit={handleAdditionalInfoNext} />
296+
)}
297+
</FormPageLayout>
319298
</FormStatusGuard>
320299
</ProtectedPage>
321300
);

0 commit comments

Comments
 (0)