fix: fixed the checkbox not being clickable after select (#608)

src/components/Checkbox.tsx

@@ -6,17 +6,24 @@ import Text from 'components/Text'
 interface Props {
   checked: boolean
   onChange: (checked: boolean) => void
+  name: string
   text?: string
 }
 
 export default function Checkbox(props: Props) {
   return (
-    <label className='flex gap-2 items-center cursor-pointer'>
+    <>
+      <label
+        className='flex items-center gap-2 border-white cursor-pointer'
+        htmlFor={`${props.name}-id}`}
+      >
         <input
           onChange={() => props.onChange(props.checked)}
+          id={`${props.name}-id`}
+          name={props.name}
           checked={props.checked}
           type='checkbox'
-        className='opacity-0 absolute'
+          className='absolute w-0 h-0 opacity-0'
         />
         <div
           className={classNames(
@@ -35,5 +42,6 @@ export default function Checkbox(props: Props) {
           </Text>
         )}
       </label>
+    </>
   )
 }

src/components/Modals/AlertDialog/index.tsx

@@ -43,7 +43,7 @@ function AlertDialog(props: Props) {
       header={
         <div className='flex flex-col'>
           {icon && (
-            <div className='grid w-12 h-12 rounded-sm place-items-center bg-white/5 mb-4'>
+            <div className='grid w-12 h-12 mb-4 rounded-sm place-items-center bg-white/5'>
               {icon}
             </div>
           )}
@@ -74,7 +74,12 @@ function AlertDialog(props: Props) {
             />
           )}
           {checkbox && (
-            <Checkbox checked={toggle} onChange={handleCheckboxClick} text={checkbox.text} />
+            <Checkbox
+              name='aleart-toggle'
+              checked={toggle}
+              onChange={handleCheckboxClick}
+              text={checkbox.text}
+            />
           )}
         </div>
         <Button

src/components/Modals/AssetsSelect/useAssetTableColumns.tsx

@@ -34,7 +34,11 @@ export default function useAssetTableColumns(isBorrow: boolean) {
 
           return (
             <div className='flex items-center'>
-              <Checkbox checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />
+              <Checkbox
+                name={`asset-${asset.id.toLowerCase()}`}
+                checked={row.getIsSelected()}
+                onChange={row.getToggleSelectedHandler()}
+              />
               <AssetImage asset={asset} size={24} className='ml-4' />
               <div className='ml-2 text-left'>
                 <Text size='sm' className='mb-0.5 text-white'>