Skip to content

Commit 5e95160

Browse files
0xonramp0xonramp
committed
Merge remote-tracking branch 'origin/master' into chore/refactor-chakra-icon-button
# Conflicts: # src/components/swap/index.tsx
2 parents 4ac4e54 + f71fa1d commit 5e95160

File tree

22 files changed

+143
-178
lines changed

22 files changed

+143
-178
lines changed

‎src/app/earn/components/earn-widget/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/app/earn/components/earn-widget/components/trade-input-selector.tsx‎

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

44
import { colors } from '@/lib/styles/colors'
@@ -65,20 +65,16 @@ export const TradeInputSelector = (props: TradeInputSelectorProps) => {
6565
<Caption caption={props.caption} />
6666
<Flex align='center' direction='row' justify='space-between' mt='6px'>
6767
{config.isReadOnly ? (
68-
<Text
69-
color={
68+
<p
69+
className={cn(
70+
'text-ellipsis whitespace-nowrap pr-1 text-[25px] font-medium',
7071
props.selectedTokenAmount === '0'
71-
? colors.ic.gray[400]
72-
: colors.ic.black
73-
}
74-
fontSize='25px'
75-
fontWeight={500}
76-
pr='4px'
77-
textOverflow='ellipsis'
78-
whiteSpace='nowrap'
72+
? 'text-ic-gray-400'
73+
: 'text-ic-black',
74+
)}
7975
>
8076
{props.selectedTokenAmount}
81-
</Text>
77+
</p>
8278
) : (
8379
<Input
8480
className='text-ic-black dark:text-ic-white bg-transparent pr-1 text-3xl'
@@ -160,13 +156,11 @@ interface PriceUsdProps {
160156

161157
const PriceUsd = (props: PriceUsdProps) => (
162158
<Flex>
163-
<Text fontSize='12px' fontWeight={500} textColor={colors.ic.gray[400]}>
164-
{props.fiat}
165-
</Text>
159+
<p className='text-ic-gray-400 text-xs font-medium'>{props.fiat}</p>
166160
{props.priceImpact && (
167-
<Text fontSize='12px' textColor={props.priceImpact.colorCoding}>
161+
<p className={cn('text-xs', props.priceImpact.colorCoding)}>
168162
&nbsp;{props.priceImpact.value}
169-
</Text>
163+
</p>
170164
)}
171165
</Flex>
172166
)

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

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

33
import { Caption } from '@/components/swap/components/caption'
44
import { SelectorButton } from '@/components/swap/components/selector-button'
@@ -149,9 +149,9 @@ const PriceUsd = (props: PriceUsdProps) => (
149149
<Flex>
150150
<p className='text-xs font-medium text-neutral-400'>{props.fiat}</p>
151151
{props.priceImpact && (
152-
<Text fontSize='12px' textColor={props.priceImpact.colorCoding}>
152+
<p className={cn('text-xs', props.priceImpact.colorCoding)}>
153153
&nbsp;{props.priceImpact.value}
154-
</Text>
154+
</p>
155155
)}
156156
</Flex>
157157
)

‎src/components/settings/index.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
PopoverBody,
66
PopoverContent,
77
PopoverTrigger,
8-
Text,
98
} from '@chakra-ui/react'
109
import { Cog8ToothIcon } from '@heroicons/react/20/solid'
1110
import { useMemo, useRef, useState } from 'react'
@@ -87,9 +86,7 @@ export const Settings = (props: SettingsProps) => {
8786
w='320px'
8887
>
8988
<PopoverBody>
90-
<Text fontSize='md' fontWeight='500' textColor={colors.ic.gray[600]}>
91-
Max Slippage
92-
</Text>
89+
<p className='text-ic-gray-600 text-base font-medium'>Max Slippage</p>
9390
<Flex align='center' my='4'>
9491
<Toggle
9592
toggleState={toggleState}
@@ -125,13 +122,7 @@ export const Settings = (props: SettingsProps) => {
125122
onChangeInput(value)
126123
}}
127124
/>
128-
<Text
129-
fontSize={'sm'}
130-
fontWeight={500}
131-
textColor={colors.ic.gray[900]}
132-
>
133-
%
134-
</Text>
125+
<p className='text-ic-gray-900 text-sm font-medium'>%</p>
135126
</Flex>
136127
</Flex>
137128
{showWarning && <Warning lowSlippage={lowSlippage} />}

‎src/components/settings/warning.tsx‎

Lines changed: 5 additions & 17 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,12 @@ 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-
>
18+
<p className='text-ic-gray-600 ml-1.5 text-base font-medium'>
2619
Slippage warning
27-
</Text>
20+
</p>
2821
</Flex>
29-
<Text
30-
fontSize={'sm'}
31-
fontWeight={400}
32-
mt='2px'
33-
textColor={colors.ic.gray[600]}
34-
>
22+
<p className='text-ic-gray-600 mt-0.5 text-sm font-normal'>
3523
{getTexts(props.lowSlippage)}
36-
</Text>
24+
</p>
3725
</Flex>
3826
)

‎src/components/trade-button/spinner.tsx‎ renamed to ‎src/components/spinner.tsx‎

File renamed without changes.

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

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Flex, Text } from '@chakra-ui/react'
2-
import clsx from 'clsx'
1+
import { Flex } from '@chakra-ui/react'
32
import Image from 'next/image'
43

54
import { StyledSkeleton } from '@/components/skeleton'
65
import { colors } from '@/lib/styles/colors'
6+
import { cn } from '@/lib/utils/tailwind'
77

88
import { QuoteDisplay } from './types'
99

@@ -23,12 +23,22 @@ function getBackgroundColor(isSelected: boolean, isBestQuote: boolean) {
2323
}
2424

2525
function useHighlightColor(isSelected: boolean, isBestQuote: boolean) {
26-
if (isBestQuote && isSelected) return colors.ic.blue[600]
27-
if (isBestQuote && !isSelected) return '#CFF5F6'
26+
if (isBestQuote && isSelected) {
27+
return { border: colors.ic.blue[600], text: 'text-ic-blue-600' }
28+
}
29+
if (isBestQuote && !isSelected) {
30+
return { border: '#CFF5F6', text: 'text-[#CFF5F6]' }
31+
}
2832
if (!isBestQuote && isSelected) {
29-
return '#F178B6'
33+
return {
34+
border: '#F178B6',
35+
text: 'text-[#F178B6]',
36+
}
37+
}
38+
return {
39+
border: colors.ic.gray[400],
40+
text: 'text-ic-gray-400',
3041
}
31-
return colors.ic.gray[400]
3242
}
3343

3444
export const QuoteAvailable = (props: QuoteAvailableProps) => {
@@ -39,7 +49,7 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
3949
return (
4050
<Flex
4151
bg={background}
42-
borderColor={highlight}
52+
borderColor={highlight.border}
4353
borderRadius='12'
4454
borderWidth={borderWidth}
4555
cursor='pointer'
@@ -51,10 +61,10 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
5161
>
5262
<Flex align='space-between' direction='column' justify={'flex-start'}>
5363
<Flex justify={'space-between'}>
54-
<Text className='text-ic-gray-500' fontSize={'xs'} fontWeight={500}>
64+
<p className='text-ic-gray-500 text-xs font-medium'>
5565
{isLoading && <StyledSkeleton width={50} />}
5666
{!isLoading && quote && quote.inputAmount}
57-
</Text>
67+
</p>
5868
<Flex direction={'row'} gap={1}>
5969
{quote?.isBestQuote && (
6070
<Flex opacity={isSelected ? 1 : 0.2}>
@@ -66,28 +76,29 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
6676
/>
6777
</Flex>
6878
)}
69-
<Text fontSize={'sm'} fontWeight={600} textColor={highlight}>
79+
<p className={cn('text-sm font-semibold', highlight.text)}>
7080
{type.toUpperCase()}
71-
</Text>
81+
</p>
7282
</Flex>
7383
</Flex>
7484
</Flex>
75-
<Text
76-
className={clsx(isSelected ? 'text-ic-gray-800' : 'text-ic-gray-500')}
77-
fontSize={'2xl'}
78-
fontWeight={500}
85+
<p
86+
className={cn(
87+
'text-2xl font-medium',
88+
isSelected ? 'text-ic-gray-800' : 'text-ic-gray-500',
89+
)}
7990
>
8091
{isLoading && <StyledSkeleton width={200} />}
8192
{!isLoading && quote && quote.outputAmount}
82-
</Text>
93+
</p>
8394
<Flex
8495
direction={['column', 'row']}
8596
justify={['flex-start', 'space-between']}
8697
>
87-
<Text className='text-ic-gray-500' fontSize={'xs'} fontWeight={500}>
98+
<p className='text-ic-gray-500 text-xs font-medium'>
8899
{isLoading && <StyledSkeleton width={80} />}
89100
{!isLoading && quote && quote.feesTotal}
90-
</Text>
101+
</p>
91102
{quote && (
92103
<Flex direction='row' gap='6px'>
93104
<Image
@@ -97,9 +108,9 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
97108
height={10}
98109
width={10}
99110
/>
100-
<Text className='text-ic-gray-500' fontSize={'xs'} fontWeight={500}>
111+
<p className='text-ic-gray-500 text-xs font-medium'>
101112
{quote.feesGas}
102-
</Text>
113+
</p>
103114
</Flex>
104115
)}
105116
</Flex>

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

Lines changed: 7 additions & 7 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,16 @@ 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}>
25+
<p className='text-ic-gray-300 text-base font-medium'>
2626
{type} unavailable
27-
</Text>
28-
<Text className='text-ic-gray-300' fontSize={'sm'} fontWeight={400}>
27+
</p>
28+
<p className='text-ic-gray-300 text-sm font-normal'>
2929
{`This token is not available for ${text}.`}
30-
</Text>
30+
</p>
3131
</Flex>
3232
)
3333
}

‎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
}

0 commit comments

Comments
 (0)