chore: refactor chakra IconButton

Author: 0xonramp

src/components/settings/index.tsx

@@ -1,6 +1,5 @@
 import {
   Flex,
-  IconButton,
   Input,
   Popover,
   PopoverBody,
@@ -72,15 +71,9 @@ export const Settings = (props: SettingsProps) => {
   return (
     <Popover placement='bottom-end'>
       <PopoverTrigger>
-        <IconButton
-          aria-label='Trade Settings'
-          icon={
-            <Cog8ToothIcon className='dark:text-ic-gray-400 text-ic-black m-1.5 size-4' />
-          }
-          size='sm'
-          style={{ border: 0 }}
-          variant='unstyled'
-        />
+        <button aria-label='Trade Settings' className='my-0.5 mr-1'>
+          <Cog8ToothIcon className='dark:text-ic-gray-400 text-ic-black m-1.5 size-4' />
+        </button>
       </PopoverTrigger>
       <PopoverContent
         bg={'linear-gradient(187deg, #FCFFFF -184.07%, #F7F8F8 171.05%)'}

src/components/swap/index.tsx

@@ -1,4 +1,4 @@
-import { Flex, IconButton, Text } from '@chakra-ui/react'
+import { Flex, Text } from '@chakra-ui/react'
 import { ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import { useAtom } from 'jotai'
 import { useCallback, useEffect, useState } from 'react'
@@ -225,13 +225,13 @@ export const Swap = (props: SwapProps) => {
           }}
         />
         <div className='flex h-1.5 self-center'>
-          <IconButton
-            className='bg-ic-white text-ic-gray-400'
-            margin={'-16px 0 0 0'}
+          <button
+            className='text-ic-gray-400 border-ic-gray-400 bg-ic-white hover:bg-ic-gray-100 relative z-50 flex self-center rounded-lg border px-2 py-1'
             aria-label='switch input/output tokens'
-            icon={<ChevronUpDownIcon className='h-7 w-5 text-gray-500' />}
             onClick={onSwitchTokens}
-          />
+          >
+            <ChevronUpDownIcon className='h-7 w-5 text-gray-500' />
+          </button>
         </div>
         <TradeOutput
           caption={'You receive'}