Merge pull request Expensify#30325 from Victor-Nyagudi/fix/29812-diff…

…erent-error-colors-on-same-page Fix/29812: Same page has different error text color for different errors
software-mansion-labs · Oct 30, 2023 · 50a327c · 50a327c
2 parents e6dad7a + f497b16
commit 50a327c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js
@@ -5,6 +5,7 @@ import _ from 'underscore';
 import * as Localize from '@libs/Localize';
 import stylePropTypes from '@styles/stylePropTypes';
 import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -57,19 +58,21 @@ function DotIndicatorMessage(props) {
         .map((message) => Localize.translateIfPhraseKey(message))
         .value();
 
+    const isErrorMessage = props.type === 'error';
+
     return (
         <View style={[styles.dotIndicatorMessage, ...props.style]}>
             <View style={styles.offlineFeedback.errorDot}>
                 <Icon
                     src={Expensicons.DotIndicator}
-                    fill={props.type === 'error' ? themeColors.danger : themeColors.success}
+                    fill={isErrorMessage ? themeColors.danger : themeColors.success}
                 />
             </View>
             <View style={styles.offlineFeedback.textContainer}>
                 {_.map(sortedMessages, (message, i) => (
                     <Text
                         key={i}
-                        style={[styles.offlineFeedback.text, ...props.textStyles]}
+                        style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), ...props.textStyles]}
                     >
                         {message}
                     </Text>

diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -10,6 +10,7 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import colors from '@styles/colors';
 import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
 import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
 
@@ -42,14 +43,14 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr
             <View style={styles.offlineFeedback.textContainer}>
                 {isPermissionDenied ? (
                     <Text>
-                        <Text style={[styles.offlineFeedback.text]}>{`${translate('location.permissionDenied')} ${translate('location.please')}`}</Text>
+                        <Text style={[StyleUtils.getDotIndicatorTextStyles()]}>{`${translate('location.permissionDenied')} ${translate('location.please')}`}</Text>
                         <TextLink
                             onPress={onAllowLocationLinkPress}
                             style={styles.locationErrorLinkText}
                         >
                             {` ${translate('location.allowPermission')} `}
                         </TextLink>
-                        <Text style={[styles.offlineFeedback.text]}>{translate('location.tryAgain')}</Text>
+                        <Text style={[StyleUtils.getDotIndicatorTextStyles()]}>{translate('location.tryAgain')}</Text>
                     </Text>
                 ) : (
                     <Text style={styles.offlineFeedback.text}>{translate('location.notFound')}</Text>

diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -1316,6 +1316,13 @@ function getTransparentColor(color: string) {
     return `${color}00`;
 }
 
+/**
+ * Get the styles of the text next to dot indicators
+ */
+function getDotIndicatorTextStyles(isErrorText = true): TextStyle {
+    return isErrorText ? {...styles.offlineFeedback.text, color: styles.formError.color} : {...styles.offlineFeedback.text};
+}
+
 export {
     combineStyles,
     displayIfTrue,
@@ -1361,6 +1368,7 @@ export {
     getDirectionStyle,
     getDisabledLinkStyles,
     getDropDownButtonHeight,
+    getDotIndicatorTextStyles,
     getEmojiPickerListHeight,
     getEmojiPickerStyle,
     getEmojiReactionBubbleStyle,