diff --git a/app/views/PushTroubleshootView/components/ListPercentage.tsx b/app/views/PushTroubleshootView/components/ListPercentage.tsx index e0c23184a..913112b9d 100644 --- a/app/views/PushTroubleshootView/components/ListPercentage.tsx +++ b/app/views/PushTroubleshootView/components/ListPercentage.tsx @@ -12,6 +12,22 @@ const styles = StyleSheet.create({ } }); +type TPercentageState = 'success' | 'warning' | 'danger'; + +const DANGER_VALUE = 90; +const WARNING_MINIMUM_VALUE = 70; +const WARNING_MAXIMUM_VALUE = 90; + +const getPercentageState = (value: number): TPercentageState => { + if (value > WARNING_MINIMUM_VALUE && value < WARNING_MAXIMUM_VALUE) { + return 'warning'; + } + if (value >= DANGER_VALUE) { + return 'danger'; + } + return 'success'; +}; + const ListPercentage = ({ value = 0, title, @@ -24,13 +40,14 @@ const ListPercentage = ({ onPress: () => void; }) => { const { colors } = useTheme(); - const percentage = `${Math.floor(value)}%`; + const percentageState = getPercentageState(value); + let percentageTextColor = colors.statusFontOnSuccess; - if (value > 70 && value < 90) { + if (percentageState === 'warning') { percentageTextColor = colors.statusFontOnWarning; } - if (value >= 90) { + if (percentageState === 'danger') { percentageTextColor = colors.statusFontOnDanger; }