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

src/components/Checkbox.tsx

@@ -6,34 +6,42 @@ 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'>
-      <input
-        onChange={() => props.onChange(props.checked)}
-        checked={props.checked}
-        type='checkbox'
-        className='opacity-0 absolute'
-      />
-      <div
-        className={classNames(
-          'h-5 w-5 rounded-sm p-0.5',
-          props.checked && 'relative isolate overflow-hidden rounded-sm',
-          props.checked &&
-            'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
-          props.checked ? 'bg-white/20' : 'border border-white/60',
-        )}
+    <>
+      <label
+        className='flex items-center gap-2 border-white cursor-pointer'
+        htmlFor={`${props.name}-id}`}
       >
-        {props.checked && <Check />}
-      </div>
-      {props.text && (
-        <Text size='xs' className='text-white/60'>
-          {props.text}
-        </Text>
-      )}
-    </label>
+        <input
+          onChange={() => props.onChange(props.checked)}
+          id={`${props.name}-id`}
+          name={props.name}
+          checked={props.checked}
+          type='checkbox'
+          className='absolute w-0 h-0 opacity-0'
+        />
+        <div
+          className={classNames(
+            'h-5 w-5 rounded-sm p-0.5',
+            props.checked && 'relative isolate overflow-hidden rounded-sm',
+            props.checked &&
+              'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
+            props.checked ? 'bg-white/20' : 'border border-white/60',
+          )}
+        >
+          {props.checked && <Check />}
+        </div>
+        {props.text && (
+          <Text size='xs' className='text-white/60'>
+            {props.text}
+          </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'>