fix: fix pr comments

MetaMask · Jul 2, 2024 · 232a594 · 232a594
1 parent 2e66882
commit 232a594
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 64 deletions.
diff --git a/...mponent-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.styles.ts b/...mponent-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.styles.ts
@@ -22,21 +22,6 @@ const styleSheet = (params: { theme: Theme }) => {
       flexDirection: 'row',
       alignItems: 'center',
     },
-    balanceZeroStyle: {
-      color: colors.text.default,
-      ...fontStyles.normal,
-      textTransform: 'uppercase',
-    },
-    balancePositiveStyle: {
-      color: colors.success.default,
-      ...fontStyles.normal,
-      textTransform: 'uppercase',
-    },
-    balanceNegativeStyle: {
-      color: colors.error.default,
-      ...fontStyles.normal,
-      textTransform: 'uppercase',
-    },
   });
 };
 

diff --git a/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import Text from '../../../../component-library/components/Texts/Text';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
 import { View } from 'react-native';
 import { renderFiat } from '../../../../util/number';
 import { useSelector } from 'react-redux';
@@ -34,14 +37,14 @@ const AggregatedPercentage = ({
   const percentageChange =
     ((totalBalance - totalBalance1dAgo) / totalBalance1dAgo) * 100 || 0;
 
-  let percentageStyle = styles.balanceZeroStyle;
+  let percentageTextColor = TextColor.Default;
 
   if (percentageChange === 0) {
-    percentageStyle = styles.balanceZeroStyle;
+    percentageTextColor = TextColor.Default;
   } else if (percentageChange > 0) {
-    percentageStyle = styles.balancePositiveStyle;
+    percentageTextColor = TextColor.Success;
   } else {
-    percentageStyle = styles.balanceNegativeStyle;
+    percentageTextColor = TextColor.Error;
   }
 
   const formattedPercentage = isValidAmount(percentageChange)
@@ -60,8 +63,12 @@ const AggregatedPercentage = ({
 
   return (
     <View style={styles.wrapper}>
-      <Text style={percentageStyle}>{formattedValuePrice}</Text>
-      <Text style={percentageStyle}>{formattedPercentage}</Text>
+      <Text color={percentageTextColor} variant={TextVariant.BodyMDMedium}>
+        {formattedValuePrice}
+      </Text>
+      <Text color={percentageTextColor} variant={TextVariant.BodyMDMedium}>
+        {formattedPercentage}
+      </Text>
     </View>
   );
 };

diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.styles.ts b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.styles.ts
diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import Text from '../../../../component-library/components/Texts/Text';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
 import { View } from 'react-native';
 import styleSheet from './PercentageChange.styles';
 import { useStyles } from '../../../hooks';
 
 const PercentageChange = ({ value }: { value: number | null | undefined }) => {
-  const { styles } = useStyles(styleSheet, {});
-
-  const percentageStyle =
-    value && value >= 0
-      ? styles.balancePositiveStyle
-      : styles.balanceNegativeStyle;
+  const percentageColorText =
+    value && value >= 0 ? TextColor.Success : TextColor.Error;
 
   const isValidAmount = (amount: number | null | undefined): boolean =>
     amount !== null && amount !== undefined && !Number.isNaN(amount);
@@ -21,7 +20,9 @@ const PercentageChange = ({ value }: { value: number | null | undefined }) => {
 
   return (
     <View>
-      <Text style={percentageStyle}>{formattedValue}</Text>
+      <Text color={percentageColorText} variant={TextVariant.BodyMDMedium}>
+        {formattedValue}
+      </Text>
     </View>
   );
 };