fix: correct text color (#3686)

Author: lukewalczak

src/components/HelperText.tsx

@@ -124,13 +124,13 @@ const HelperText = ({
 
   const { colors, dark } = theme;
 
-  const textColor =
-    type === 'error'
-      ? colors?.error
-      : color(theme.isV3 ? theme.colors.onSurface : theme?.colors?.text)
-          .alpha(dark ? 0.7 : 0.54)
-          .rgb()
-          .string();
+  const infoTextColor = theme.isV3
+    ? theme.colors.onSurfaceVariant
+    : color(theme?.colors?.text)
+        .alpha(dark ? 0.7 : 0.54)
+        .rgb()
+        .string();
+  const textColor = type === 'error' ? colors?.error : infoTextColor;
 
   return (
     <AnimatedText

src/components/__tests__/HelperText.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { getTheme } from '../../core/theming';
+import HelperText from '../HelperText';
+
+describe('HelperText', () => {
+  it('should have correct text color for info type', () => {
+    const { getByTestId } = render(
+      <HelperText testID="helper-text" type="info">
+        Info: Maximum length is 100 characters
+      </HelperText>
+    );
+
+    expect(getByTestId('helper-text')).toHaveStyle({
+      color: getTheme().colors.onSurfaceVariant,
+    });
+  });
+
+  it('should have correct text color for error type', () => {
+    const { getByTestId } = render(
+      <HelperText testID="helper-text" type="error">
+        Error: Only letters are allowed
+      </HelperText>
+    );
+
+    expect(getByTestId('helper-text')).toHaveStyle({
+      color: getTheme().colors.error,
+    });
+  });
+});