Skip to content

Commit aa99c44

Browse files
0xonramp0xonramp
committed
chore: refactor chakra text
1 parent 47d7aa5 commit aa99c44

File tree

12 files changed

+45
-98
lines changed

12 files changed

+45
-98
lines changed

‎src/components/settings/index.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
PopoverBody,
77
PopoverContent,
88
PopoverTrigger,
9-
Text,
109
} from '@chakra-ui/react'
1110
import { Cog8ToothIcon } from '@heroicons/react/20/solid'
1211
import { useMemo, useRef, useState } from 'react'
@@ -94,9 +93,7 @@ export const Settings = (props: SettingsProps) => {
9493
w='320px'
9594
>
9695
<PopoverBody>
97-
<Text fontSize='md' fontWeight='500' textColor={colors.ic.gray[600]}>
98-
Max Slippage
99-
</Text>
96+
<p className='text-ic-gray-600 font-medium'>Max Slippage</p>
10097
<Flex align='center' my='4'>
10198
<Toggle
10299
toggleState={toggleState}
@@ -132,13 +129,7 @@ export const Settings = (props: SettingsProps) => {
132129
onChangeInput(value)
133130
}}
134131
/>
135-
<Text
136-
fontSize={'sm'}
137-
fontWeight={500}
138-
textColor={colors.ic.gray[900]}
139-
>
140-
%
141-
</Text>
132+
<p className='text-ic-gray-900 text-sm font-medium'>%</p>
142133
</Flex>
143134
</Flex>
144135
{showWarning && <Warning lowSlippage={lowSlippage} />}

‎src/components/settings/warning.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { Flex, Text } from '@chakra-ui/react'
1+
import { Flex } from '@chakra-ui/react'
22
import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
33

4-
import { colors } from '@/lib/styles/colors'
5-
64
type WarningProps = {
75
lowSlippage: boolean
86
}
@@ -17,22 +15,10 @@ export const Warning = (props: WarningProps) => (
1715
<Flex direction={'column'}>
1816
<Flex align={'center'} direction={'row'}>
1917
<ExclamationCircleIcon className='text-ic-yellow size-4' />
20-
<Text
21-
fontSize={'md'}
22-
fontWeight={500}
23-
ml='6px'
24-
textColor={colors.ic.gray[600]}
25-
>
26-
Slippage warning
27-
</Text>
18+
<p className='text-ic-gray-600 ml-1.5 font-medium'>Slippage warning</p>
2819
</Flex>
29-
<Text
30-
fontSize={'sm'}
31-
fontWeight={400}
32-
mt='2px'
33-
textColor={colors.ic.gray[600]}
34-
>
20+
<p className='text-ic-gray-600 mt-0.5 text-sm'>
3521
{getTexts(props.lowSlippage)}
36-
</Text>
22+
</p>
3723
</Flex>
3824
)

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
5151
>
5252
<Flex align='space-between' direction='column' justify={'flex-start'}>
5353
<Flex justify={'space-between'}>
54-
<Text className='text-ic-gray-500' fontSize={'xs'} fontWeight={500}>
54+
<p className='text-ic-gray-500 text-xs font-medium'>
5555
{isLoading && <StyledSkeleton width={50} />}
5656
{!isLoading && quote && quote.inputAmount}
57-
</Text>
57+
</p>
5858
<Flex direction={'row'} gap={1}>
5959
{quote?.isBestQuote && (
6060
<Flex opacity={isSelected ? 1 : 0.2}>
@@ -66,9 +66,9 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
6666
/>
6767
</Flex>
6868
)}
69-
<Text fontSize={'sm'} fontWeight={600} textColor={highlight}>
69+
<p className='text-sm font-semibold' textColor={highlight}>
7070
{type.toUpperCase()}
71-
</Text>
71+
</p>
7272
</Flex>
7373
</Flex>
7474
</Flex>

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Text } from '@chakra-ui/react'
1+
import { Flex } from '@chakra-ui/react'
22

33
type QuoteNotAvailableProps = {
44
type: string
@@ -18,16 +18,14 @@ export const QuoteNotAvailable = ({ type }: QuoteNotAvailableProps) => {
1818
h='110px'
1919
>
2020
<Flex justify='flex-end' direction='row'>
21-
<Text className='text-ic-gray-400' fontSize={'sm'} fontWeight={600}>
21+
<p className='text-ic-gray-400 text-sm font-semibold'>
2222
{type.toUpperCase()}
23-
</Text>
23+
</p>
2424
</Flex>
25-
<Text className='text-ic-gray-300' fontSize={'md'} fontWeight={500}>
26-
{type} unavailable
27-
</Text>
28-
<Text className='text-ic-gray-300' fontSize={'sm'} fontWeight={400}>
25+
<p className='text-ic-gray-300 font-medium'>{type} unavailable</p>
26+
<p className='text-ic-gray-300 text-sm'>
2927
{`This token is not available for ${text}.`}
30-
</Text>
28+
</p>
3129
</Flex>
3230
)
3331
}

‎src/components/swap/components/selector-button.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Text } from '@chakra-ui/react'
1+
import { Flex } from '@chakra-ui/react'
22
import { ChevronDownIcon } from '@heroicons/react/20/solid'
33
import Image from 'next/image'
44

@@ -31,9 +31,7 @@ export const SelectorButton = ({
3131
visibility={visible ? 'visible' : 'hidden'}
3232
>
3333
<Image alt={`${symbol} logo`} src={image} width={20} height={20} />
34-
<Text color={colors.ic.black} fontSize={'14px'} fontWeight={500} mx='8px'>
35-
{symbol}
36-
</Text>
34+
<p className='text-ic-black mx-2 text-sm font-medium'>{symbol}</p>
3735
{showChevron !== false && (
3836
<ChevronDownIcon className='text-ic-gray-900 size-6' />
3937
)}

‎src/components/swap/components/trade-details/tag.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
import { Text } from '@chakra-ui/react'
2-
3-
import { colors } from '@/lib/styles/colors'
4-
51
interface TagProps {
62
label: string
73
}
84

95
export const Tag = ({ label }: TagProps) => (
10-
<Text fontSize='12px' fontWeight={600} textColor={colors.ic.gray[600]}>
11-
{label}
12-
</Text>
6+
<p className='text-ic-gray-600 text-xs font-semibold'>{label}</p>
137
)

‎src/components/swap/components/trade-details/trade-price.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { Flex, Text } from '@chakra-ui/react'
2-
3-
import { colors } from '@/lib/styles/colors'
1+
import { Flex } from '@chakra-ui/react'
42

53
interface TradePriceProps {
64
comparisonLabel: string
@@ -10,17 +8,10 @@ interface TradePriceProps {
108
export const TradePrice = ({ comparisonLabel, usdLabel }: TradePriceProps) => {
119
return (
1210
<Flex align='flex-start' direction={['column', 'row']}>
13-
<Text fontSize='12px' fontWeight={500} textColor={colors.ic.gray[600]}>
14-
{comparisonLabel}
15-
</Text>
16-
<Text
17-
fontSize='12px'
18-
fontWeight={500}
19-
textColor={colors.ic.gray[400]}
20-
ml={[0, '4px']}
21-
>
11+
<p className='text-ic-gray-600 text-xs font-medium'>{comparisonLabel}</p>
12+
<p className='text-ic-gray-400 ml-0 text-xs font-medium sm:ml-1'>
2213
{usdLabel}
23-
</Text>
14+
</p>
2415
</Flex>
2516
)
2617
}

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,13 +151,11 @@ interface PriceUsdProps {
151151

152152
const PriceUsd = (props: PriceUsdProps) => (
153153
<Flex>
154-
<Text fontSize='12px' fontWeight={500} textColor={colors.ic.gray[400]}>
155-
{props.fiat}
156-
</Text>
154+
<p className='text-ic-gray-400 text-xs font-medium'>{props.fiat}</p>
157155
{props.priceImpact && (
158-
<Text fontSize='12px' textColor={props.priceImpact.colorCoding}>
156+
<p className='text-xs' textColor={props.priceImpact.colorCoding}>
159157
&nbsp;{props.priceImpact.value}
160-
</Text>
158+
</p>
161159
)}
162160
</Flex>
163161
)

‎src/components/swap/components/trade-output.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Text } from '@chakra-ui/react'
1+
import { Flex } from '@chakra-ui/react'
22

33
import { Token } from '@/constants/tokens'
44
import { QuoteType } from '@/lib/hooks/use-best-quote/types'
@@ -40,9 +40,9 @@ export const TradeOutput = (props: TradeOutputProps) => {
4040
</Flex>
4141
<Flex direction='column' gap='8px' mt='20px'>
4242
{props.quotes.length > 0 && (
43-
<Text className='text-ic-gray-600' fontSize='xs' fontWeight={500}>
43+
<p className='text-ic-gray-600 text-xs font-medium'>
4444
Select your preferred route
45-
</Text>
45+
</p>
4646
)}
4747
{props.quotes.map((formattedQuote) => (
4848
<QuoteResult

‎src/components/swap/components/warning.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { Flex, Link, Text } from '@chakra-ui/react'
1+
import { Flex, Link } from '@chakra-ui/react'
22
import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
33
import { ReactNode } from 'react'
44

5-
import { colors } from '@/lib/styles/colors'
65
import { addMEVProtectionChain } from '@/lib/utils/chains'
76

87
export enum WarningType {
@@ -105,21 +104,11 @@ export const WarningCompProtection = () => {
105104
<Flex direction={'column'} m='20px 16px 8px'>
106105
<Flex align={'center'} direction={'row'}>
107106
<ExclamationCircleIcon className='text-ic-gray-600 dark:text-ic-gray-400 size-5' />
108-
<Text
109-
fontSize={'sm'}
110-
fontWeight={600}
111-
ml={2}
112-
textColor={colors.ic.gray[600]}
113-
>
107+
<p className='text-ic-gray-600 ml-2 text-sm font-semibold'>
114108
MEV Protection
115-
</Text>
109+
</p>
116110
</Flex>
117-
<Text
118-
fontSize={'xs'}
119-
fontWeight={400}
120-
mt='8px'
121-
textColor={colors.ic.gray[600]}
122-
>
111+
<p className='text-ic-gray-600 mt-2 text-xs'>
123112
It is highly recommended to use an MEV protected RPC.{' '}
124113
<Link onClick={onClick} style={{ textDecoration: 'underline' }}>
125114
Click here
@@ -132,7 +121,7 @@ export const WarningCompProtection = () => {
132121
>
133122
Learn More about MEV protection
134123
</Link>
135-
</Text>
124+
</p>
136125
</Flex>
137126
)
138127
}

0 commit comments

Comments
 (0)