From f34d0cfe205670a427baef417e59a4913d6e170f Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:04:45 +0800 Subject: [PATCH 01/35] feat: add theme-blue to FieldColorScheme enum type --- frontend/src/theme/foundations/colours.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/theme/foundations/colours.ts b/frontend/src/theme/foundations/colours.ts index 9b5651ea7f..fb69487f6b 100644 --- a/frontend/src/theme/foundations/colours.ts +++ b/frontend/src/theme/foundations/colours.ts @@ -22,6 +22,7 @@ export type ThemeColorScheme = export type FieldColorScheme = Extract< ThemeColorScheme, | 'primary' + | 'theme-blue' | 'theme-green' | 'theme-teal' | 'theme-purple' From 6c19053ff0fb25895bbe95368b5f746fd6b0eb82 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:05:09 +0800 Subject: [PATCH 02/35] feat: pass colorTheme into YesNoField --- frontend/src/templates/Field/YesNo/YesNoField.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/templates/Field/YesNo/YesNoField.tsx b/frontend/src/templates/Field/YesNo/YesNoField.tsx index b88d0a8cf1..2cf11974c8 100644 --- a/frontend/src/templates/Field/YesNo/YesNoField.tsx +++ b/frontend/src/templates/Field/YesNo/YesNoField.tsx @@ -4,6 +4,8 @@ import { useMemo } from 'react' import { Controller, useFormContext } from 'react-hook-form' +import { FormColorTheme } from '~shared/types' + import { createBaseValidationRules } from '~/utils/fieldValidation' import YesNo from '~components/Field/YesNo' @@ -15,7 +17,10 @@ export interface YesNoFieldProps extends BaseFieldProps { schema: YesNoFieldSchema } -export const YesNoField = ({ schema }: YesNoFieldProps): JSX.Element => { +export const YesNoField = ({ + schema, + colorTheme = FormColorTheme.Blue, +}: YesNoFieldProps): JSX.Element => { const validationRules = useMemo( () => createBaseValidationRules(schema), [schema], @@ -29,7 +34,9 @@ export const YesNoField = ({ schema }: YesNoFieldProps): JSX.Element => { control={control} rules={validationRules} name={schema._id} - render={({ field }) => } + render={({ field }) => ( + + )} /> ) From 366149c1fd9f4edd8bc5e64b14058ac4ab0f572e Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:05:43 +0800 Subject: [PATCH 03/35] feat: make Attachment component responsive to colorScheme --- frontend/src/theme/components/Field/Attachment.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/theme/components/Field/Attachment.ts b/frontend/src/theme/components/Field/Attachment.ts index f1d75179f8..4d81ef19b4 100644 --- a/frontend/src/theme/components/Field/Attachment.ts +++ b/frontend/src/theme/components/Field/Attachment.ts @@ -34,6 +34,7 @@ export const Attachment: ComponentMultiStyleConfig = { isDragActive, focusBorderColor: fc, errorBorderColor: ec, + colorScheme: c, theme, } = props @@ -49,9 +50,9 @@ export const Attachment: ComponentMultiStyleConfig = { justifyContent: 'center', cursor: 'pointer', border: '1px dashed', - borderColor: 'primary.700', + borderColor: `${c}.700`, borderRadius: '0.25rem', - bg: isDragActive ? 'primary.200' : 'neutral.100', + bg: isDragActive ? `${c}.200` : 'neutral.100', _invalid: { // Remove extra 1px of outline. borderColor: getColor(theme, ec), @@ -66,10 +67,10 @@ export const Attachment: ComponentMultiStyleConfig = { ...inputStyle._disabled, }, _hover: { - bg: 'primary.100', + bg: `${c}.100`, }, _active: { - bg: 'primary.200', + bg: `${c}.200`, }, }, } @@ -77,5 +78,6 @@ export const Attachment: ComponentMultiStyleConfig = { }, defaultProps: { ...Input.defaultProps, + colorScheme: 'primary', }, } From 94b75c79b2dd547e92065602b29360d329bd01a7 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:06:11 +0800 Subject: [PATCH 04/35] feat: make Menu component responsive to colorScheme --- frontend/src/theme/components/Menu.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/theme/components/Menu.ts b/frontend/src/theme/components/Menu.ts index 270a94a723..d1afcd2bc0 100644 --- a/frontend/src/theme/components/Menu.ts +++ b/frontend/src/theme/components/Menu.ts @@ -27,18 +27,18 @@ const baseStyle: PartsStyleFunction = (props) => { fontWeight: '400', color: 'secondary.700', _hover: { - bg: 'primary.100', + bg: `${c}.100`, borderWidth: '0rem', }, _focus: { - bg: 'primary.100', + bg: `${c}.100`, boxShadow: `0 0 0 2px ${getColor(theme, fc)}`, _active: { - bg: 'primary.200', + bg: `${c}.200`, }, }, _active: { - bg: 'primary.200', + bg: `${c}.200`, fontWeight: 500, }, _disabled: { From 7d908d3a9a3a4b2ff395c247327c6e2f8123d26d Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:06:43 +0800 Subject: [PATCH 05/35] feat: make DateInput component responsive to colorScheme --- .../components/DatePicker/Calendar/CalendarContext.tsx | 8 ++++++++ .../DatePicker/Calendar/CalendarTodayButton.tsx | 3 ++- .../src/components/DatePicker/Calendar/DayOfMonth.tsx | 9 +++------ frontend/src/components/DatePicker/DateInput.tsx | 7 +++++-- frontend/src/components/DatePicker/DatePicker.tsx | 7 ++++++- 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx b/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx index 0bbd892d66..a33228b932 100644 --- a/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx +++ b/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx @@ -17,6 +17,8 @@ import { import { Props as DayzedProps, RenderProps, useDayzed } from 'dayzed' import { inRange } from 'lodash' +import { ThemeColorScheme } from '~theme/foundations/colours' + import { DatePickerProps } from '../DatePicker' import { generateClassNameForDate, @@ -64,6 +66,10 @@ type PassthroughProps = { * Date currently being hovered, if any. */ hoveredDate?: Date + /** + * Color scheme of date input + */ + colorScheme?: ThemeColorScheme } export type UseProvideCalendarProps = Pick & PassthroughProps @@ -122,6 +128,7 @@ const useProvideCalendar = ({ onMouseLeaveCalendar, isDateInRange, hoveredDate, + colorScheme, }: UseProvideCalendarProps) => { // Ensure that calculations are always made based on date of initial render, // so component state doesn't suddenly jump at midnight @@ -293,5 +300,6 @@ const useProvideCalendar = ({ onMouseLeaveCalendar, isDateInRange, hoveredDate, + colorScheme, } } diff --git a/frontend/src/components/DatePicker/Calendar/CalendarTodayButton.tsx b/frontend/src/components/DatePicker/Calendar/CalendarTodayButton.tsx index 431f080f75..d3c7d5b2ae 100644 --- a/frontend/src/components/DatePicker/Calendar/CalendarTodayButton.tsx +++ b/frontend/src/components/DatePicker/Calendar/CalendarTodayButton.tsx @@ -6,11 +6,12 @@ import { useCalendar } from './CalendarContext' export const CalendarTodayButton = (): JSX.Element => { const styles = useStyles() - const { handleTodayClick } = useCalendar() + const { handleTodayClick, colorScheme } = useCalendar() return ( - - {displayedInfo.helpText} - - + + + + + + {displayedInfo.helpText} + + + ) } diff --git a/frontend/src/features/public-form/components/FormFields/FormFields.tsx b/frontend/src/features/public-form/components/FormFields/FormFields.tsx index a646b9c401..caae7a3316 100644 --- a/frontend/src/features/public-form/components/FormFields/FormFields.tsx +++ b/frontend/src/features/public-form/components/FormFields/FormFields.tsx @@ -1,11 +1,12 @@ import { useMemo } from 'react' import { FormProvider, SubmitHandler, useForm } from 'react-hook-form' -import { Stack } from '@chakra-ui/react' +import { Box, Stack } from '@chakra-ui/react' import { times } from 'lodash' import { BasicField, FormFieldDto } from '~shared/types/field' import { FormColorTheme, LogicDto } from '~shared/types/form' +import { useIsMobile } from '~hooks/useIsMobile' import Button from '~components/Button' import { FormFieldValues } from '~templates/Field' import { createTableRow } from '~templates/Field/Table/utils/createRow' @@ -27,6 +28,8 @@ export const FormFields = ({ colorTheme, onSubmit, }: FormFieldsProps): JSX.Element => { + const isMobile = useIsMobile() + // TODO: Inject default values is field is also prefilled. const augmentedFormFields = useMemo( () => formFields.map(augmentWithMyInfo), @@ -59,23 +62,28 @@ export const FormFields = ({ return (
- - + + + + + + - +
) diff --git a/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx b/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx index 3a8270fa2a..01ad6a9bbd 100644 --- a/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx +++ b/frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx @@ -53,15 +53,7 @@ export const FormFieldsContainer = (): JSX.Element | null => { {isAuthRequired ? null : } - + {renderFields} {isAuthRequired ? null : } From b7ddee9b3410b927992b675e12c5370c2de1a760 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:36:07 +0800 Subject: [PATCH 22/35] feat(PublicFormPage): add stories for color theme variants --- .../public-form/PublicFormPage.stories.tsx | 45 ++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/frontend/src/features/public-form/PublicFormPage.stories.tsx b/frontend/src/features/public-form/PublicFormPage.stories.tsx index 5e0802ae3a..7eb93c2c79 100644 --- a/frontend/src/features/public-form/PublicFormPage.stories.tsx +++ b/frontend/src/features/public-form/PublicFormPage.stories.tsx @@ -1,7 +1,7 @@ import { Meta, Story } from '@storybook/react' import { BasicField } from '~shared/types/field' -import { FormAuthType } from '~shared/types/form' +import { FormAuthType, FormColorTheme } from '~shared/types/form' import { envHandlers } from '~/mocks/msw/handlers/env' import { @@ -24,6 +24,24 @@ const DEFAULT_MSW_HANDLERS = [ postVerifyVfnOtpResponse(), ] +const generateMswHandlersForColorTheme = (colorTheme: FormColorTheme) => { + return [ + ...envHandlers, + getPublicFormResponse({ + overrides: { + form: { + startPage: { + colorTheme, + }, + }, + }, + }), + postVfnTransactionResponse(), + postGenerateVfnOtpResponse(), + postVerifyVfnOtpResponse(), + ] +} + export default { title: 'Pages/PublicFormPage', component: PublicFormPage, @@ -44,6 +62,31 @@ export default { const Template: Story = () => export const Default = Template.bind({}) +export const ColorThemeGreen = Template.bind({}) +ColorThemeGreen.parameters = { + msw: generateMswHandlersForColorTheme(FormColorTheme.Green), +} + +export const ColorThemeGrey = Template.bind({}) +ColorThemeGrey.parameters = { + msw: generateMswHandlersForColorTheme(FormColorTheme.Grey), +} + +export const ColorThemeBrown = Template.bind({}) +ColorThemeBrown.parameters = { + msw: generateMswHandlersForColorTheme(FormColorTheme.Brown), +} + +export const ColorThemeRed = Template.bind({}) +ColorThemeRed.parameters = { + msw: generateMswHandlersForColorTheme(FormColorTheme.Red), +} + +export const ColorThemeOrange = Template.bind({}) +ColorThemeOrange.parameters = { + msw: generateMswHandlersForColorTheme(FormColorTheme.Orange), +} + export const Loading = Template.bind({}) Loading.parameters = { msw: [...envHandlers, getPublicFormResponse({ delay: 'infinite' })], From 9250193837fa239b04f9a5e35b3dadff5d719aee Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:39:09 +0800 Subject: [PATCH 23/35] feat(PublicFormPage): add mobile stories --- .../features/public-form/PublicFormPage.stories.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/features/public-form/PublicFormPage.stories.tsx b/frontend/src/features/public-form/PublicFormPage.stories.tsx index 7eb93c2c79..e890d29d71 100644 --- a/frontend/src/features/public-form/PublicFormPage.stories.tsx +++ b/frontend/src/features/public-form/PublicFormPage.stories.tsx @@ -12,7 +12,7 @@ import { SHOW_FIELDS_ON_YES_LOGIC, } from '~/mocks/msw/handlers/public-form' -import { StoryRouter } from '~utils/storybook' +import { getMobileViewParameters, StoryRouter } from '~utils/storybook' import PublicFormPage from './PublicFormPage' @@ -62,6 +62,9 @@ export default { const Template: Story = () => export const Default = Template.bind({}) +export const Mobile = Template.bind({}) +Mobile.parameters = getMobileViewParameters() + export const ColorThemeGreen = Template.bind({}) ColorThemeGreen.parameters = { msw: generateMswHandlersForColorTheme(FormColorTheme.Green), @@ -109,6 +112,12 @@ SingpassUnauthorized.parameters = { ], } +export const UnauthedMobile = Template.bind({}) +UnauthedMobile.parameters = { + ...SingpassUnauthorized.parameters, + ...getMobileViewParameters(), +} + export const SingpassAuthorized = Template.bind({}) SingpassAuthorized.storyName = 'Singpass/Authorized' SingpassAuthorized.parameters = { From 726b15ba77e787290fbd282a962b36251b0c5ee4 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 00:55:18 +0800 Subject: [PATCH 24/35] fix: storybook snapshot regressions --- .../src/components/DatePicker/Calendar/CalendarContext.tsx | 2 +- frontend/src/templates/Field/Section/SectionField.tsx | 4 +++- .../src/templates/Field/Section/SectionFieldContainer.tsx | 4 +++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx b/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx index a33228b932..77b950d5ff 100644 --- a/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx +++ b/frontend/src/components/DatePicker/Calendar/CalendarContext.tsx @@ -128,7 +128,7 @@ const useProvideCalendar = ({ onMouseLeaveCalendar, isDateInRange, hoveredDate, - colorScheme, + colorScheme = 'primary', }: UseProvideCalendarProps) => { // Ensure that calculations are always made based on date of initial render, // so component state doesn't suddenly jump at midnight diff --git a/frontend/src/templates/Field/Section/SectionField.tsx b/frontend/src/templates/Field/Section/SectionField.tsx index e640f2f66a..4656e4d714 100644 --- a/frontend/src/templates/Field/Section/SectionField.tsx +++ b/frontend/src/templates/Field/Section/SectionField.tsx @@ -1,6 +1,8 @@ import { Waypoint } from 'react-waypoint' import { Box, forwardRef, Text } from '@chakra-ui/react' +import { FormColorTheme } from '~shared/types' + import { SectionFieldContainerProps } from './SectionFieldContainer' export interface SectionFieldProps extends SectionFieldContainerProps { @@ -13,7 +15,7 @@ export interface SectionFieldProps extends SectionFieldContainerProps { // Used by SectionFieldContainer export const SectionField = forwardRef( - ({ schema, colorTheme, handleSectionEnter }, ref) => { + ({ schema, colorTheme = FormColorTheme.Blue, handleSectionEnter }, ref) => { return ( { const { sectionRefs, setActiveSectionId } = useFormSections() From 7dc3e81c4c1dfe9ea6b1faff6930d99666437435 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 11:01:56 +0800 Subject: [PATCH 25/35] style(Button): update backgrounds of theme color scheme --- frontend/src/theme/components/Button.ts | 44 ++++++++++++++++++------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/frontend/src/theme/components/Button.ts b/frontend/src/theme/components/Button.ts index 499a5ba9a7..9705532065 100644 --- a/frontend/src/theme/components/Button.ts +++ b/frontend/src/theme/components/Button.ts @@ -13,19 +13,41 @@ export type ThemeButtonVariant = | 'link' | 'inputAttached' +const genVariantSolidColours = (c: string) => { + const defaultBackgrounds = { + bg: `${c}.500`, + activeBg: `${c}.700`, + hoverBg: `${c}.600`, + focusBoxShadow: `0 0 0 4px var(--chakra-colors-${c}-300)`, + } + switch (c) { + case 'success': { + return { + bg: `${c}.700`, + activeBg: `${c}.800`, + hoverBg: `${c}.800`, + focusBoxShadow: `0 0 0 4px var(--chakra-colors-${c}-400)`, + } + } + case 'theme-red': + case 'theme-orange': + case 'theme-yellow': { + return { + ...defaultBackgrounds, + bg: `${c}.600`, + activeBg: `${c}.800`, + hoverBg: `${c}.700`, + } + } + default: { + return defaultBackgrounds + } + } +} + const variantSolid: SystemStyleFunction = (props) => { const { colorScheme: c } = props - let bg = `${c}.500` - let activeBg = `${c}.700` - let hoverBg = `${c}.600` - let focusBoxShadow = `0 0 0 4px var(--chakra-colors-${c}-300)` - - if (c === 'success') { - bg = `${c}.700` - activeBg = `${c}.800` - hoverBg = `${c}.800` - focusBoxShadow = `0 0 0 4px var(--chakra-colors-${c}-400)` - } + const { bg, hoverBg, activeBg, focusBoxShadow } = genVariantSolidColours(c) return { bg, From e6cddb748a5513845fb445e682a6f854a278e9f4 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 11:11:20 +0800 Subject: [PATCH 26/35] feat(FormHeader): update alignment in mobile view --- .../components/FormStartPage/FormHeader.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx b/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx index f97922444d..56e43a195b 100644 --- a/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx +++ b/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx @@ -123,7 +123,12 @@ export const FormHeader = (): JSX.Element | null => { return ( <> - + { color={titleColour} > - + {title ?? 'Loading title'} {estTimeString && ( - + - {estTimeString} + + {estTimeString} + )} {loggedInId ? ( From 3f173dae162ca357414823dceb8ae2dd8fecd69d Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 21 Apr 2022 11:54:54 +0800 Subject: [PATCH 27/35] feat: add colorTheme to unauth page login button --- .../src/features/public-form/PublicFormPage.stories.tsx | 3 +++ .../features/public-form/components/FormAuth/FormAuth.tsx | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/features/public-form/PublicFormPage.stories.tsx b/frontend/src/features/public-form/PublicFormPage.stories.tsx index e890d29d71..4d976155c3 100644 --- a/frontend/src/features/public-form/PublicFormPage.stories.tsx +++ b/frontend/src/features/public-form/PublicFormPage.stories.tsx @@ -106,6 +106,9 @@ SingpassUnauthorized.parameters = { form: { title: 'Singpass login form', authType: FormAuthType.SP, + startPage: { + colorTheme: FormColorTheme.Grey, + }, }, }, }), diff --git a/frontend/src/features/public-form/components/FormAuth/FormAuth.tsx b/frontend/src/features/public-form/components/FormAuth/FormAuth.tsx index ecdcbc276d..2e5b13d7f7 100644 --- a/frontend/src/features/public-form/components/FormAuth/FormAuth.tsx +++ b/frontend/src/features/public-form/components/FormAuth/FormAuth.tsx @@ -17,7 +17,12 @@ export interface FormAuthProps { } export const FormAuth = ({ authType }: FormAuthProps): JSX.Element => { - const { formId } = usePublicFormContext() + const { formId, form } = usePublicFormContext() + + const buttonColorScheme = useMemo(() => { + if (!form) return + return `theme-${form.startPage.colorTheme}` as const + }, [form]) const isMobile = useIsMobile() @@ -58,6 +63,7 @@ export const FormAuth = ({ authType }: FormAuthProps): JSX.Element => { diff --git a/frontend/src/features/public-form/components/FormEndPage/components/FeedbackBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/FeedbackBlock.tsx index 285bc337b5..b83acccaab 100644 --- a/frontend/src/features/public-form/components/FormEndPage/components/FeedbackBlock.tsx +++ b/frontend/src/features/public-form/components/FormEndPage/components/FeedbackBlock.tsx @@ -1,6 +1,9 @@ +import { useMemo } from 'react' import { Controller, useForm } from 'react-hook-form' import { chakra, Flex, FormControl } from '@chakra-ui/react' +import { FormColorTheme } from '~shared/types/form' + import Button from '~components/Button' import Rating from '~components/Field/Rating' import FormErrorMessage from '~components/FormControl/FormErrorMessage' @@ -14,10 +17,12 @@ export type FeedbackFormInput = { export interface FeedbackBlockProps { onSubmit: (input: FeedbackFormInput) => void + colorTheme?: FormColorTheme } export const FeedbackBlock = ({ onSubmit, + colorTheme = FormColorTheme.Blue, }: FeedbackBlockProps): JSX.Element => { const { control, @@ -28,6 +33,10 @@ export const FeedbackBlock = ({ const handleFormSubmit = handleSubmit((inputs) => onSubmit(inputs)) + const colorScheme = useMemo(() => { + return `theme-${colorTheme}` as const + }, [colorTheme]) + return ( ( - + )} /> {errors.rating?.message} @@ -61,6 +75,7 @@ export const FeedbackBlock = ({ mt="1.5rem" variant="outline" type="submit" + colorScheme={colorScheme} isLoading={isSubmitting} > Submit feedback From f2ba1fd73f99936629e1ab0b20acb88e4deec4e7 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Fri, 22 Apr 2022 10:51:21 +0800 Subject: [PATCH 31/35] style(FormHeader): increase maxW and change to start align on mobile --- .../public-form/components/FormStartPage/FormHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx b/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx index 56e43a195b..d756f1925a 100644 --- a/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx +++ b/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx @@ -130,9 +130,9 @@ export const FormHeader = (): JSX.Element | null => { bg={titleBg} > From ae08fb45b606d70e0aea9e6e20ff72b1186fbf10 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Fri, 22 Apr 2022 10:58:16 +0800 Subject: [PATCH 32/35] feat: change section field color for orange and red themes --- .../src/templates/Field/Section/SectionField.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/templates/Field/Section/SectionField.tsx b/frontend/src/templates/Field/Section/SectionField.tsx index 4656e4d714..3b9f14877e 100644 --- a/frontend/src/templates/Field/Section/SectionField.tsx +++ b/frontend/src/templates/Field/Section/SectionField.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react' import { Waypoint } from 'react-waypoint' import { Box, forwardRef, Text } from '@chakra-ui/react' @@ -16,6 +17,16 @@ export interface SectionFieldProps extends SectionFieldContainerProps { // Used by SectionFieldContainer export const SectionField = forwardRef( ({ schema, colorTheme = FormColorTheme.Blue, handleSectionEnter }, ref) => { + const sectionColor = useMemo(() => { + switch (colorTheme) { + case FormColorTheme.Orange: + case FormColorTheme.Red: + return `theme-${colorTheme}.600` as const + default: + return `theme-${colorTheme}.500` as const + } + }, []) + return ( ( > {/* id given so app can scrolled to this section */} - + {schema.title} From 1444b43836ffcd29f8cbdb3cc537678f6f76b104 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 25 Apr 2022 16:44:49 +0800 Subject: [PATCH 33/35] style(Rating): use theme/600 instead of 700 for yellow orange red --- frontend/src/theme/components/Field/Rating.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/theme/components/Field/Rating.ts b/frontend/src/theme/components/Field/Rating.ts index e45ce232a7..a747c7da19 100644 --- a/frontend/src/theme/components/Field/Rating.ts +++ b/frontend/src/theme/components/Field/Rating.ts @@ -10,7 +10,7 @@ const getOptionThemeColor = (colorScheme: string) => { case 'theme-red': case 'theme-orange': case 'theme-yellow': - return `${colorScheme}.700` + return `${colorScheme}.600` default: return `${colorScheme}.500` } From 4ed396a1bba4118b3fa3ddc0a4b85cf6178fbec3 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 25 Apr 2022 16:45:50 +0800 Subject: [PATCH 34/35] feat(EndPageBlock): remove colortheme styling for accordion --- .../components/FormEndPage/components/EndPageBlock.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx index 5f326f3486..646380c3d7 100644 --- a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx +++ b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx @@ -38,13 +38,7 @@ export const EndPageBlock = ({ return ( - + Date: Mon, 25 Apr 2022 17:28:45 +0800 Subject: [PATCH 35/35] style(Button): update colours for outline variant with certain themes --- frontend/src/theme/components/Button.ts | 39 +++++++++++++++++++++---- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/frontend/src/theme/components/Button.ts b/frontend/src/theme/components/Button.ts index 9705532065..cfabaed958 100644 --- a/frontend/src/theme/components/Button.ts +++ b/frontend/src/theme/components/Button.ts @@ -1,4 +1,8 @@ -import { getColor, SystemStyleFunction } from '@chakra-ui/theme-tools' +import { + getColor, + StyleFunctionProps, + SystemStyleFunction, +} from '@chakra-ui/theme-tools' import merge from 'lodash/merge' import { textStyles } from '../textStyles' @@ -45,6 +49,28 @@ const genVariantSolidColours = (c: string) => { } } +const genVariantOutlineColours = ({ + colorScheme: c, + theme, +}: StyleFunctionProps) => { + switch (c) { + case 'theme-red': + case 'theme-orange': + case 'theme-yellow': { + return { + borderColor: `${c}.600` as const, + focusBorderColor: getColor(theme, `${c}.400`), + } + } + default: { + return { + borderColor: `${c}.500` as const, + focusBorderColor: getColor(theme, `${c}.300`), + } + } + } +} + const variantSolid: SystemStyleFunction = (props) => { const { colorScheme: c } = props const { bg, hoverBg, activeBg, focusBoxShadow } = genVariantSolidColours(c) @@ -114,15 +140,16 @@ const variantClear: SystemStyleFunction = (props) => { const variantOutlineReverse: SystemStyleFunction = (props) => { const { colorScheme: c, variant } = props + const { borderColor, focusBorderColor } = genVariantOutlineColours(props) const showBorder = variant === 'outline' return { bg: 'white', px: '15px', - borderColor: showBorder ? `${c}.500` : 'white', - color: `${c}.500`, + borderColor: showBorder ? borderColor : 'white', + color: borderColor, _focus: { - boxShadow: `0 0 0 4px var(--chakra-colors-${c}-300)`, + boxShadow: `0 0 0 4px ${focusBorderColor}`, }, _disabled: { color: `${c}.300`, @@ -132,7 +159,7 @@ const variantOutlineReverse: SystemStyleFunction = (props) => { }, _active: { bg: `${c}.200`, - borderColor: showBorder ? `${c}.500` : `${c}.200`, + borderColor: showBorder ? borderColor : `${c}.200`, _disabled: { bg: 'white', borderColor: showBorder ? `${c}.300` : 'white', @@ -140,7 +167,7 @@ const variantOutlineReverse: SystemStyleFunction = (props) => { }, _hover: { bg: `${c}.100`, - borderColor: showBorder ? `${c}.500` : `${c}.100`, + borderColor: showBorder ? borderColor : `${c}.100`, _disabled: { bg: 'white', borderColor: showBorder ? `${c}.300` : 'white',