update text components

Author: 0xonramp

src/app/earn/components/earn-widget/components/selector-button.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react'
+import { Flex } from '@chakra-ui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import Image from 'next/image'
 
@@ -31,9 +31,7 @@ export const SelectorButton = ({
     visibility={visible ? 'visible' : 'hidden'}
   >
     <Image alt={`${symbol} logo`} src={image} width={20} height={20} />
-    <Text color={colors.ic.black} fontSize={'14px'} fontWeight={500} mx='8px'>
-      {symbol}
-    </Text>
+    <p className='text-ic-black mx-2 text-sm font-medium'>{symbol}</p>
     {showChevron !== false && (
       <ChevronDownIcon className='text-ic-gray-900 size-6' />
     )}

src/app/earn/components/earn-widget/components/trade-input-selector.tsx

@@ -1,4 +1,4 @@
-import { Flex, Input, Text } from '@chakra-ui/react'
+import { Flex, Input } from '@chakra-ui/react'
 import { useState } from 'react'
 
 import { colors } from '@/lib/styles/colors'
@@ -65,20 +65,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'
@@ -160,13 +156,11 @@ interface PriceUsdProps {
 
 const PriceUsd = (props: PriceUsdProps) => (
   <Flex>
-    <Text fontSize='12px' fontWeight={500} textColor={colors.ic.gray[400]}>
-      {props.fiat}
-    </Text>
+    <p className='text-ic-gray-400 text-xs font-medium'>{props.fiat}</p>
     {props.priceImpact && (
-      <Text fontSize='12px' textColor={props.priceImpact.colorCoding}>
+      <p className={cn('text-xs', props.priceImpact.colorCoding)}>
         &nbsp;{props.priceImpact.value}
-      </Text>
+      </p>
     )}
   </Flex>
 )

src/app/leverage/components/leverage-widget/trade-input-selector.tsx

@@ -1,4 +1,4 @@
-import { Flex, Input, Text } from '@chakra-ui/react'
+import { Flex, Input } from '@chakra-ui/react'
 
 import { Caption } from '@/components/swap/components/caption'
 import { SelectorButton } from '@/components/swap/components/selector-button'
@@ -149,9 +149,9 @@ const PriceUsd = (props: PriceUsdProps) => (
   <Flex>
     <p className='text-xs font-medium text-neutral-400'>{props.fiat}</p>
     {props.priceImpact && (
-      <Text fontSize='12px' textColor={props.priceImpact.colorCoding}>
+      <p className={cn('text-xs', props.priceImpact.colorCoding)}>
         &nbsp;{props.priceImpact.value}
-      </Text>
+      </p>
     )}
   </Flex>
 )

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

@@ -1,5 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react'
-import clsx from 'clsx'
+import { Flex } from '@chakra-ui/react'
 import Image from 'next/image'
 
 import { StyledSkeleton } from '@/components/skeleton'
@@ -83,22 +82,23 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
           </Flex>
         </Flex>
       </Flex>
-      <Text
-        className={clsx(isSelected ? 'text-ic-gray-800' : 'text-ic-gray-500')}
-        fontSize={'2xl'}
-        fontWeight={500}
+      <p
+        className={cn(
+          'text-2xl font-medium',
+          isSelected ? 'text-ic-gray-800' : 'text-ic-gray-500',
+        )}
       >
         {isLoading && <StyledSkeleton width={200} />}
         {!isLoading && quote && quote.outputAmount}
-      </Text>
+      </p>
       <Flex
         direction={['column', 'row']}
         justify={['flex-start', 'space-between']}
       >
-        <Text className='text-ic-gray-500' fontSize={'xs'} fontWeight={500}>
+        <p className='text-ic-gray-500 text-xs font-medium'>
           {isLoading && <StyledSkeleton width={80} />}
           {!isLoading && quote && quote.feesTotal}
-        </Text>
+        </p>
         {quote && (
           <Flex direction='row' gap='6px'>
             <Image
@@ -108,9 +108,9 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
               height={10}
               width={10}
             />
-            <Text className='text-ic-gray-500' fontSize={'xs'} fontWeight={500}>
+            <p className='text-ic-gray-500 text-xs font-medium'>
               {quote.feesGas}
-            </Text>
+            </p>
           </Flex>
         )}
       </Flex>