Merge pull request #1880 from IndexCoop/chore/refactor-chakra-checkbox

chore: refactor chakra checkbox

Author: 0xonramp

src/components/swap/components/transaction-review/components/override.tsx

@@ -1,11 +1,13 @@
 import { Checkbox } from '@chakra-ui/react'
+import { Field, Label } from '@headlessui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
 
 type OverrideProps = {
   onChange: (isChecked: boolean) => void
+  override: boolean
 }
 
-export const Override = (props: OverrideProps) => {
+export const Override = ({ onChange, override }: OverrideProps) => {
   return (
     <div className='bg-ic-gray-100 flex flex-col items-start gap-2 rounded-xl p-4'>
       <div className='items-top flex'>
@@ -15,9 +17,29 @@ export const Override = (props: OverrideProps) => {
           again to execute anyway.
         </p>
       </div>
-      <Checkbox onChange={(e) => props.onChange(e.target.checked)}>
-        Override?
-      </Checkbox>
+      <Field className='flex cursor-pointer items-center gap-2'>
+        <Checkbox
+          checked={override}
+          className='data-[checked]:bg-ic-blue-500 bg-ic-white group block size-4 rounded border'
+          onChange={() => onChange(!override)}
+        >
+          <svg
+            className='stroke-white opacity-0 group-data-[checked]:opacity-100'
+            viewBox='0 0 14 14'
+            fill='none'
+          >
+            <path
+              d='M3 8L6 11L11 3.5'
+              strokeWidth={2}
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+        </Checkbox>
+        <Label className='text-ic-black mx-4 cursor-pointer text-sm font-bold'>
+          Override?
+        </Label>
+      </Field>
     </div>
   )
 }

src/components/swap/components/transaction-review/components/review.tsx

@@ -25,6 +25,7 @@ export function Review(props: ReviewProps) {
     shouldShowOverride,
     onChangeOverride,
     onSubmit,
+    override,
   } = useTransactionReview(props)
   return (
     <div className='flex h-full w-full flex-col'>
@@ -52,7 +53,7 @@ export function Review(props: ReviewProps) {
       </div>
       {shouldShowOverride ? (
         <div className='my-2'>
-          <Override onChange={onChangeOverride} />
+          <Override onChange={onChangeOverride} override={override} />
         </div>
       ) : (
         <BottomMessage />

src/components/swap/components/transaction-review/provider.tsx

@@ -173,5 +173,6 @@ export function useTransactionReview(props: ReviewProps) {
     simulationState,
     onChangeOverride,
     onSubmit,
+    override,
   }
 }