use headless buttons

Author: 0xonramp

src/components/settings/index.tsx

@@ -6,6 +6,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@chakra-ui/react'
+import { Button } from '@headlessui/react'
 import { Cog8ToothIcon } from '@heroicons/react/20/solid'
 import { useMemo, useRef, useState } from 'react'
 
@@ -70,9 +71,9 @@ export const Settings = (props: SettingsProps) => {
   return (
     <Popover placement='bottom-end'>
       <PopoverTrigger>
-        <button aria-label='Trade Settings' className='my-0.5 mr-1'>
+        <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>
+        </Button>
       </PopoverTrigger>
       <PopoverContent
         bg={'linear-gradient(187deg, #FCFFFF -184.07%, #F7F8F8 171.05%)'}

src/components/swap/index.tsx

@@ -1,4 +1,5 @@
 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'>
-          <button
+          <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'
             onClick={onSwitchTokens}
           >
             <ChevronUpDownIcon className='h-7 w-5 text-gray-500' />
-          </button>
+          </Button>
         </div>
         <TradeOutput
           caption={'You receive'}