Merge pull request #1881 from IndexCoop/chore/refactor-chakra-icon-button

chore: refactor chakra IconButton

Author: 0xonramp

src/components/settings/index.tsx

@@ -1,12 +1,12 @@
 import {
   Flex,
-  IconButton,
   Input,
   Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
 } from '@chakra-ui/react'
+import { Button } from '@headlessui/react'
 import { Cog8ToothIcon } from '@heroicons/react/20/solid'
 import { useMemo, useRef, useState } from 'react'
 
@@ -71,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,5 @@
-import { Flex, IconButton } from '@chakra-ui/react'
+import { Flex } from '@chakra-ui/react'
+import { Button } from '@headlessui/react'
 import { ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import { useAtom } from 'jotai'
 import { useCallback, useEffect, useState } from 'react'
@@ -225,13 +226,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'}