LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matthew Russell 2023-01-24 21:49:59 -08:00 committed by GitHub
parent dc3330d55e
commit cd0e2e41a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
libs/market-depth/src/lib/orderbook.tsx
View File

@ -22,7 +22,7 @@ import {
import * as Schema from '@vegaprotocol/types'; import * as Schema from '@vegaprotocol/types';
import { OrderbookRow } from './orderbook-row'; import { OrderbookRow } from './orderbook-row';
import { createRow, getPriceLevel } from './orderbook-data'; 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'; import type { OrderbookData, OrderbookRowData } from './orderbook-data';
interface OrderbookProps extends OrderbookData { interface OrderbookProps extends OrderbookData {
@ -635,19 +635,18 @@ export const Orderbook = ({
</div> </div>
<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" 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} ref={footerElement}
> >
<div className="col-span-2"> <div className="col-span-2">
<label className="flex items-center whitespace-nowrap overflow-hidden text-ellipsis"> <Checkbox
<input name="empty-prices"
className="mr-1" checked={fillGaps}
type="checkbox" onCheckedChange={() => setFillGaps((curr) => !curr)}
checked={fillGaps} label={
onChange={() => setFillGaps(!fillGaps)} <span className="text-xs">{t('Show prices with no orders')}</span>
/> }
{t('Show prices with no orders')} />
</label>
</div> </div>
<div className="col-start-3"> <div className="col-start-3">
<select <select

7
libs/ui-toolkit/src/components/checkbox/checkbox.tsx
View File

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