diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx index 07f129ef99f..a539a74421d 100644 --- a/src/app/pages/onboarding/set-password/components/password-field.tsx +++ b/src/app/pages/onboarding/set-password/components/password-field.tsx @@ -4,6 +4,7 @@ import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; import { useField } from 'formik'; import { Box, Flex, styled } from 'leather-styles/jsx'; +import { useThemeSwitcher } from '@app/common/theme-provider'; import { ValidatedPassword } from '@app/common/validation/validate-password'; import { Input } from '@app/ui/components/input/input'; import { Caption } from '@app/ui/components/typography/caption'; @@ -20,8 +21,9 @@ interface PasswordFieldProps { export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps) { const [field] = useField('password'); const [showPassword, setShowPassword] = useState(false); + const { theme } = useThemeSwitcher(); - const { strengthColor, strengthText } = useMemo( + const { strengthColorLightMode, strengthColorDarkMode, strengthText } = useMemo( () => getIndicatorsOfPasswordStrength(strengthResult), [strengthResult] ); @@ -61,8 +63,9 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps diff --git a/src/app/pages/onboarding/set-password/components/password-field.utils.ts b/src/app/pages/onboarding/set-password/components/password-field.utils.ts index 46402dfdbe0..bf079cbf199 100644 --- a/src/app/pages/onboarding/set-password/components/password-field.utils.ts +++ b/src/app/pages/onboarding/set-password/components/password-field.utils.ts @@ -6,27 +6,33 @@ export const defaultColor = token('colors.ink.background-secondary'); const strengthStyles = { [PasswordStrength.NoScore]: { - strengthColor: token('colors.red.action-primary-default'), + strengthColorLightMode: token('colors.red.background-secondary'), + strengthColorDarkMode: token('colors.red.border'), strengthText: 'Poor', }, [PasswordStrength.PoorScore]: { - strengthColor: token('colors.red.action-primary-default'), + strengthColorLightMode: token('colors.red.background-secondary'), + strengthColorDarkMode: token('colors.red.border'), strengthText: 'Poor', }, [PasswordStrength.WeakScore]: { - strengthColor: token('colors.yellow.action-primary-default'), + strengthColorLightMode: token('colors.yellow.background-secondary'), + strengthColorDarkMode: token('colors.yellow.border'), strengthText: 'Weak', }, [PasswordStrength.AverageScore]: { - strengthColor: token('colors.yellow.action-primary-default'), + strengthColorLightMode: token('colors.yellow.background-secondary'), + strengthColorDarkMode: token('colors.yellow.border'), strengthText: 'Average', }, [PasswordStrength.StrongScore]: { - strengthColor: token('colors.yellow.action-primary-default'), + strengthColorLightMode: token('colors.yellow.background-secondary'), + strengthColorDarkMode: token('colors.yellow.border'), strengthText: 'Average', }, [PasswordStrength.MeetsAllRequirements]: { - strengthColor: token('colors.green.action-primary-default'), + strengthColorLightMode: token('colors.green.background-secondary'), + strengthColorDarkMode: token('colors.green.border'), strengthText: 'Strong', }, }; diff --git a/src/app/pages/onboarding/welcome/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx index 433ed683356..64cee800550 100644 --- a/src/app/pages/onboarding/welcome/welcome.layout.tsx +++ b/src/app/pages/onboarding/welcome/welcome.layout.tsx @@ -37,7 +37,7 @@ export function WelcomeLayout({ flexDir="column" flex={[1, 1, 0]} justifyContent={['center', '', 'flex-start']} - color={['ink.background-primary', '', 'ink.background-secondary']} + color={['ink.text-primary', '', 'ink.background-secondary']} >