fix: broken color on welcome page

leather-io · Feb 26, 2024 · 9d173ec · 9d173ec
1 parent 86dd00d
commit 9d173ec
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git 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
         </styled.button>
       </Box>
       <PasswordStrengthIndicator
+        isLightMode={theme === 'light'}
         password={field.value}
-        strengthColor={strengthColor}
+        strengthColor={theme === 'light' ? strengthColorLightMode : strengthColorDarkMode}
         strengthResult={strengthResult}
       />
       <Flex alignItems="center">

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
@@ -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
@@ -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']}
         >
           <Box>
             <styled.h1 textStyle={['heading.03', '', 'display.02', 'display.01']}>