Merge pull request #1820 from IndexCoop/chore/refactor-chakra-box

chore: refactor chakra box

Author: 0xonramp

src/components/swap/components/trade-details/index.tsx

@@ -4,7 +4,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Box,
   Flex,
 } from '@chakra-ui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
@@ -95,7 +94,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
                             height={16}
                           />
                         )}
-                        <Box onClick={onToggleTokenPrice}>
+                        <div onClick={onToggleTokenPrice}>
                           {isLoading ? (
                             <StyledSkeleton width={200} />
                           ) : (
@@ -104,7 +103,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
                               usdLabel={usdLabel}
                             />
                           )}
-                        </Box>
+                        </div>
                       </Flex>
                       <div className={cn('flex gap-4', isExpanded && 'hidden')}>
                         {!isLoading &&

src/components/swap/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, IconButton, Text } from '@chakra-ui/react'
+import { Flex, IconButton, Text } from '@chakra-ui/react'
 import { ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import { useCallback, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
@@ -215,15 +215,15 @@ export const Swap = (props: SwapProps) => {
             if (inputTokenslist.length > 1) onOpenSelectInputToken()
           }}
         />
-        <Box h='6px' alignSelf={'center'}>
+        <div className='flex h-1.5 self-center'>
           <IconButton
             className='bg-ic-white text-ic-gray-400'
             margin={'-16px 0 0 0'}
             aria-label='switch input/output tokens'
             icon={<ChevronUpDownIcon className='h-7 w-5 text-gray-500' />}
             onClick={onSwitchTokens}
           />
-        </Box>
+        </div>
         <TradeOutput
           caption={'You receive'}
           selectedToken={outputToken}