Update remaining text components

Author: 0xonramp

src/components/swap/components/quote-result/available.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image'
 
 import { StyledSkeleton } from '@/components/skeleton'
 import { colors } from '@/lib/styles/colors'
+import { cn } from '@/lib/utils/tailwind'
 
 import { QuoteDisplay } from './types'
 
@@ -23,12 +24,22 @@ function getBackgroundColor(isSelected: boolean, isBestQuote: boolean) {
 }
 
 function useHighlightColor(isSelected: boolean, isBestQuote: boolean) {
-  if (isBestQuote && isSelected) return colors.ic.blue[600]
-  if (isBestQuote && !isSelected) return '#CFF5F6'
+  if (isBestQuote && isSelected) {
+    return { border: colors.ic.blue[600], text: 'text-ic-blue-600' }
+  }
+  if (isBestQuote && !isSelected) {
+    return { border: '#CFF5F6', text: 'text-[#CFF5F6]' }
+  }
   if (!isBestQuote && isSelected) {
-    return '#F178B6'
+    return {
+      border: '#F178B6',
+      text: 'text-[#F178B6]',
+    }
+  }
+  return {
+    border: colors.ic.gray[400],
+    text: 'text-ic-gray-400',
   }
-  return colors.ic.gray[400]
 }
 
 export const QuoteAvailable = (props: QuoteAvailableProps) => {
@@ -39,7 +50,7 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
   return (
     <Flex
       bg={background}
-      borderColor={highlight}
+      borderColor={highlight.border}
       borderRadius='12'
       borderWidth={borderWidth}
       cursor='pointer'
@@ -66,7 +77,7 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
                 />
               </Flex>
             )}
-            <p className='text-sm font-semibold' textColor={highlight}>
+            <p className={cn('text-sm font-semibold', highlight.text)}>
               {type.toUpperCase()}
             </p>
           </Flex>

src/components/swap/components/trade-input-selector.tsx

@@ -1,6 +1,7 @@
-import { Flex, Input, Text } from '@chakra-ui/react'
+import { Flex, Input } from '@chakra-ui/react'
 
 import { colors } from '@/lib/styles/colors'
+import { cn } from '@/lib/utils/tailwind'
 
 import { Caption } from './caption'
 import { SelectorButton } from './selector-button'
@@ -56,20 +57,16 @@ export const TradeInputSelector = (props: TradeInputSelectorProps) => {
       <Caption caption={props.caption} />
       <Flex align='center' direction='row' justify='space-between' mt='6px'>
         {config.isReadOnly ? (
-          <Text
-            color={
+          <p
+            className={cn(
+              'text-ellipsis whitespace-nowrap pr-1 text-[25px] font-medium',
               props.selectedTokenAmount === '0'
-                ? colors.ic.gray[400]
-                : colors.ic.black
-            }
-            fontSize='25px'
-            fontWeight={500}
-            pr='4px'
-            textOverflow='ellipsis'
-            whiteSpace='nowrap'
+                ? 'text-ic-gray-400'
+                : 'text-ic-black',
+            )}
           >
             {props.selectedTokenAmount}
-          </Text>
+          </p>
         ) : (
           <Input
             className='text-ic-black dark:text-ic-white bg-transparent pr-1 text-3xl'
@@ -153,7 +150,7 @@ const PriceUsd = (props: PriceUsdProps) => (
   <Flex>
     <p className='text-ic-gray-400 text-xs font-medium'>{props.fiat}</p>
     {props.priceImpact && (
-      <p className='text-xs' textColor={props.priceImpact.colorCoding}>
+      <p className={cn('text-xs', props.priceImpact.colorCoding)}>
         &nbsp;{props.priceImpact.value}
       </p>
     )}

src/components/swap/hooks/use-swap/formatters/price-impact.test.ts

@@ -1,7 +1,6 @@
 import { getPriceImpact } from '@/lib/hooks/use-best-quote/utils/price-impact'
-import { colors } from '@/lib/styles/colors'
 
-import { getPriceImpactColorCoding } from './price-impact'
+import { getPriceImpactTextColor } from './price-impact'
 
 describe('getPriceImpact()', () => {
   test('should return null if input/output token amount smaller or equal 0', async () => {
@@ -42,19 +41,18 @@ describe('getPriceImpact()', () => {
 
 describe('getPriceImpaceColorCoding()', () => {
   test('should return correct color for > 5% price impact', async () => {
-    const colorCoding = getPriceImpactColorCoding(-5.1, true)
-    expect(colorCoding).toEqual(colors.ic.red)
+    const colorCoding = getPriceImpactTextColor(-5.1)
+    expect(colorCoding).toEqual('text-ic-red')
   })
 
   test('should return correct color for price impact > 3% < 5%', async () => {
-    const colorCoding = getPriceImpactColorCoding(-3.1, true)
-    expect(colorCoding).toEqual(colors.ic.blue[500])
+    const colorCoding = getPriceImpactTextColor(-3.1)
+    expect(colorCoding).toEqual('text-ic-blue-500')
   })
 
   test('should return correct color for price impact < 3%', async () => {
-    const colorCodingDarkMode = getPriceImpactColorCoding(2, true)
-    expect(colorCodingDarkMode).toEqual(colors.icGrayDarkMode)
-    const colorCodingLightMode = getPriceImpactColorCoding(2, false)
-    expect(colorCodingLightMode).toEqual(colors.icGrayLightMode)
+    const colorCodingFallback = getPriceImpactTextColor(2)
+    expect(colorCodingFallback).toContain('text-[#aaa]')
+    expect(colorCodingFallback).toContain('dark:text-[#777]')
   })
 })

src/components/swap/hooks/use-swap/formatters/price-impact.ts

@@ -1,28 +1,22 @@
-import { colors } from '@/lib/styles/colors'
-
-export function getPriceImpactColorCoding(
-  priceImpact: number,
-  isDarkMode: boolean,
-): string {
+export function getPriceImpactTextColor(priceImpact: number): string {
   if (priceImpact < -5) {
-    return colors.ic.red
+    return 'text-ic-red'
   }
 
   if (priceImpact < -3) {
-    return colors.ic.blue[500]
+    return 'text-ic-blue-500'
   }
 
-  return isDarkMode ? colors.icGrayDarkMode : colors.icGrayLightMode
+  return 'text-[#aaa] dark:text-[#777]'
 }
 
 /**
  * Returns price impact in the format (x.yy%)
  */
 export function getFormattedPriceImpact(
   priceImpact: number,
-  isDarkMode: boolean,
 ): { priceImpact: string; colorCoding: string } | null {
   if (!priceImpact) return null
-  const colorCoding = getPriceImpactColorCoding(priceImpact, isDarkMode)
+  const colorCoding = getPriceImpactTextColor(priceImpact)
   return { priceImpact: `(${priceImpact.toFixed(2)}%)`, colorCoding }
 }