chore(#2668): use ui-toolkit checkbox for orderbook (#2702)

libs/market-depth/src/lib/orderbook.tsx

@@ -22,7 +22,7 @@ import {
 import * as Schema from '@vegaprotocol/types';
 import { OrderbookRow } from './orderbook-row';
 import { createRow, getPriceLevel } from './orderbook-data';
-import { Icon, Splash } from '@vegaprotocol/ui-toolkit';
+import { Checkbox, Icon, Splash } from '@vegaprotocol/ui-toolkit';
 import type { OrderbookData, OrderbookRowData } from './orderbook-data';
 
 interface OrderbookProps extends OrderbookData {
@@ -635,19 +635,18 @@ export const Orderbook = ({
       </div>
       <div
         className="absolute bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-default mt-2 z-10 bg-white dark:bg-black w-full"
-        style={{ gridAutoRows: '17px' }}
+        style={{ gridAutoRows: '20px' }}
         ref={footerElement}
       >
         <div className="col-span-2">
-          <label className="flex items-center whitespace-nowrap overflow-hidden text-ellipsis">
-            <input
-              className="mr-1"
-              type="checkbox"
+          <Checkbox
+            name="empty-prices"
             checked={fillGaps}
-              onChange={() => setFillGaps(!fillGaps)}
+            onCheckedChange={() => setFillGaps((curr) => !curr)}
+            label={
+              <span className="text-xs">{t('Show prices with no orders')}</span>
+            }
           />
-            {t('Show prices with no orders')}
-          </label>
         </div>
         <div className="col-start-3">
           <select

libs/ui-toolkit/src/components/checkbox/checkbox.tsx

@@ -1,11 +1,12 @@
 import { Icon } from '../icon';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 
 type CheckedState = boolean | 'indeterminate';
 export interface CheckboxProps {
   checked?: CheckedState;
-  label?: string;
+  label?: ReactNode;
   name?: string;
   onCheckedChange?: (checked: CheckedState) => void;
   disabled?: boolean;
@@ -29,7 +30,7 @@ export const Checkbox = ({
   );
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className="flex gap-1 items-center">
       <CheckboxPrimitive.Root
         name={name}
         id={name}
@@ -47,7 +48,7 @@ export const Checkbox = ({
           ) : (
             <Icon
               name="tick"
-              className="relative w-[11px] h-[11px] text-white dark:text-black"
+              className="relative w-[10px] h-[10px] text-white dark:text-black"
             />
           )}
         </CheckboxPrimitive.CheckboxIndicator>