feat: grey text for 0.0% price change (#1781)

TalismanSociety · Jan 14, 2025 · ab858a7 · ab858a7
1 parent f926b14
commit ab858a7
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/apps/extension/src/ui/domains/Asset/AssetPrice.tsx b/apps/extension/src/ui/domains/Asset/AssetPrice.tsx
@@ -32,10 +32,13 @@ const [useDisplayAssetPrice] = bind((tokenId: TokenId | null | undefined) =>
           : rawChange24h
         : undefined
 
+      const changeClassName = getPriceChangeClassName(change24h)
+
       return {
         compact,
         full,
         change24h,
+        changeClassName,
       }
     }),
   ),
@@ -68,13 +71,7 @@ export const AssetPrice: FC<{
         <Container className={classNames("whitespace-nowrap", className)}>
           <span className={priceClassName}>{price.compact} </span>
           {!noChange && price.change24h ? (
-            <span
-              className={classNames(
-                price.change24h.startsWith("+") && "text-price-up",
-                price.change24h.startsWith("-") && "text-price-down",
-                changeClassName,
-              )}
-            >
+            <span className={classNames(price.changeClassName, changeClassName)}>
               {price.change24h}
             </span>
           ) : null}
@@ -84,3 +81,16 @@ export const AssetPrice: FC<{
     </Tooltip>
   )
 }
+
+const getPriceChangeClassName = (change24h: string | undefined) => {
+  switch (change24h?.[0]) {
+    case "+":
+      return "text-price-up"
+    case "-":
+      return "text-price-down"
+    case "0": // 0.0%
+      return "text-body-inactive"
+    default:
+      return null
+  }
+}