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

chore(trading): change pane context buttons color (#4680)

Browse Source
This commit is contained in:
Matthew Russell 2023-09-01 17:00:11 -07:00 committed by GitHub
parent 39e5836edb
commit 9209074332
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/trading/components/accounts-menu/accounts-menu.tsx
View File

@ -1,5 +1,5 @@
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit'; import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { ViewType, useSidebar } from '../sidebar'; import { ViewType, useSidebar } from '../sidebar';
export const AccountsMenu = () => { export const AccountsMenu = () => {
@ -8,7 +8,6 @@ export const AccountsMenu = () => {
return ( return (
<> <>
<TradingButton <TradingButton
intent={Intent.Primary}
size="extra-small" size="extra-small"
data-testid="open-transfer" data-testid="open-transfer"
onClick={() => setView({ type: ViewType.Transfer })} onClick={() => setView({ type: ViewType.Transfer })}
@ -16,7 +15,6 @@ export const AccountsMenu = () => {
{t('Transfer')} {t('Transfer')}
</TradingButton> </TradingButton>
<TradingButton <TradingButton
intent={Intent.Primary}
size="extra-small" size="extra-small"
onClick={() => setView({ type: ViewType.Deposit })} onClick={() => setView({ type: ViewType.Deposit })}
> >

3
apps/trading/components/deposits-menu/deposits-menu.tsx
View File

@ -1,5 +1,5 @@
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit'; import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { ViewType, useSidebar } from '../sidebar'; import { ViewType, useSidebar } from '../sidebar';
export const DepositsMenu = () => { export const DepositsMenu = () => {
@ -7,7 +7,6 @@ export const DepositsMenu = () => {
return ( return (
<TradingButton <TradingButton
intent={Intent.Primary}
size="extra-small" size="extra-small"
onClick={() => setView({ type: ViewType.Deposit })} onClick={() => setView({ type: ViewType.Deposit })}
data-testid="deposit-button" data-testid="deposit-button"

3
apps/trading/components/positions-menu/positions-menu.tsx
View File

@ -1,5 +1,5 @@
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit'; import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { usePositionsStore } from '../positions-container'; import { usePositionsStore } from '../positions-container';
export const PositionsMenu = () => { export const PositionsMenu = () => {
@ -7,7 +7,6 @@ export const PositionsMenu = () => {
const toggle = usePositionsStore((store) => store.toggleClosedMarkets); const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
return ( return (
<TradingButton <TradingButton
intent={Intent.Primary}
size="extra-small" size="extra-small"
data-testid="open-transfer" data-testid="open-transfer"
onClick={toggle} onClick={toggle}

3
apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
View File

@ -1,5 +1,5 @@
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit'; import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { ViewType, useSidebar } from '../sidebar'; import { ViewType, useSidebar } from '../sidebar';
export const WithdrawalsMenu = () => { export const WithdrawalsMenu = () => {
@ -7,7 +7,6 @@ export const WithdrawalsMenu = () => {
return ( return (
<TradingButton <TradingButton
intent={Intent.Primary}
size="extra-small" size="extra-small"
onClick={() => setView({ type: ViewType.Withdraw })} onClick={() => setView({ type: ViewType.Withdraw })}
data-testid="withdraw-dialog-button" data-testid="withdraw-dialog-button"

4
libs/candles-chart/src/lib/candles-menu.spec.tsx
View File

@ -7,8 +7,8 @@ describe('CandlesMenu', () => {
render(<CandlesMenu />); render(<CandlesMenu />);
await userEvent.click( await userEvent.click(
screen.getByText('Studies', { screen.getByRole('button', {
selector: '[type="button"]', name: 'Studies',
}) })
); );
expect(await screen.findByRole('menu')).toBeInTheDocument(); expect(await screen.findByRole('menu')).toBeInTheDocument();

104
libs/candles-chart/src/lib/candles-menu.tsx
View File

@ -10,13 +10,14 @@ import {
studyLabels, studyLabels,
} from 'pennant'; } from 'pennant';
import { import {
DropdownMenu, TradingButton,
DropdownMenuCheckboxItem, TradingDropdown,
DropdownMenuContent, TradingDropdownCheckboxItem,
DropdownMenuItemIndicator, TradingDropdownContent,
DropdownMenuRadioGroup, TradingDropdownItemIndicator,
DropdownMenuRadioItem, TradingDropdownRadioGroup,
DropdownMenuTrigger, TradingDropdownRadioItem,
TradingDropdownTrigger,
Icon, Icon,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import type { IconName } from '@blueprintjs/icons'; import type { IconName } from '@blueprintjs/icons';
@ -44,69 +45,76 @@ export const CandlesMenu = () => {
} = useCandlesChartSettings(); } = useCandlesChartSettings();
const triggerClasses = 'text-xs'; const triggerClasses = 'text-xs';
const contentAlign = 'end'; const contentAlign = 'end';
const triggerButtonProps = { size: 'extra-small' } as const;
return ( return (
<> <>
<DropdownMenu <TradingDropdown
trigger={ trigger={
<DropdownMenuTrigger className={triggerClasses}> <TradingDropdownTrigger className={triggerClasses}>
<TradingButton {...triggerButtonProps}>
{t(`Interval: ${intervalLabels[interval]}`)} {t(`Interval: ${intervalLabels[interval]}`)}
</DropdownMenuTrigger> </TradingButton>
</TradingDropdownTrigger>
} }
> >
<DropdownMenuContent align={contentAlign}> <TradingDropdownContent align={contentAlign}>
<DropdownMenuRadioGroup <TradingDropdownRadioGroup
value={interval} value={interval}
onValueChange={(value) => { onValueChange={(value) => {
setInterval(value as Interval); setInterval(value as Interval);
}} }}
> >
{Object.values(Interval).map((timeInterval) => ( {Object.values(Interval).map((timeInterval) => (
<DropdownMenuRadioItem <TradingDropdownRadioItem
key={timeInterval} key={timeInterval}
inset inset
value={timeInterval} value={timeInterval}
> >
{intervalLabels[timeInterval]} {intervalLabels[timeInterval]}
<DropdownMenuItemIndicator /> <TradingDropdownItemIndicator />
</DropdownMenuRadioItem> </TradingDropdownRadioItem>
))} ))}
</DropdownMenuRadioGroup> </TradingDropdownRadioGroup>
</DropdownMenuContent> </TradingDropdownContent>
</DropdownMenu> </TradingDropdown>
<DropdownMenu <TradingDropdown
trigger={ trigger={
<DropdownMenuTrigger className={triggerClasses}> <TradingDropdownTrigger className={triggerClasses}>
<TradingButton {...triggerButtonProps}>
<Icon name={chartTypeIcon.get(chartType) as IconName} /> <Icon name={chartTypeIcon.get(chartType) as IconName} />
</DropdownMenuTrigger> </TradingButton>
</TradingDropdownTrigger>
} }
> >
<DropdownMenuContent align={contentAlign}> <TradingDropdownContent align={contentAlign}>
<DropdownMenuRadioGroup <TradingDropdownRadioGroup
value={chartType} value={chartType}
onValueChange={(value) => { onValueChange={(value) => {
setType(value as ChartType); setType(value as ChartType);
}} }}
> >
{Object.values(ChartType).map((type) => ( {Object.values(ChartType).map((type) => (
<DropdownMenuRadioItem key={type} inset value={type}> <TradingDropdownRadioItem key={type} inset value={type}>
{chartTypeLabels[type]} {chartTypeLabels[type]}
<DropdownMenuItemIndicator /> <TradingDropdownItemIndicator />
</DropdownMenuRadioItem> </TradingDropdownRadioItem>
))} ))}
</DropdownMenuRadioGroup> </TradingDropdownRadioGroup>
</DropdownMenuContent> </TradingDropdownContent>
</DropdownMenu> </TradingDropdown>
<DropdownMenu <TradingDropdown
trigger={ trigger={
<DropdownMenuTrigger className={triggerClasses}> <TradingDropdownTrigger className={triggerClasses}>
<TradingButton {...triggerButtonProps}>
{t('Overlays')} {t('Overlays')}
</DropdownMenuTrigger> </TradingButton>
</TradingDropdownTrigger>
} }
> >
<DropdownMenuContent align={contentAlign}> <TradingDropdownContent align={contentAlign}>
{Object.values(Overlay).map((overlay) => ( {Object.values(Overlay).map((overlay) => (
<DropdownMenuCheckboxItem <TradingDropdownCheckboxItem
key={overlay} key={overlay}
checked={overlays.includes(overlay)} checked={overlays.includes(overlay)}
onCheckedChange={() => { onCheckedChange={() => {
@ -121,21 +129,23 @@ export const CandlesMenu = () => {
}} }}
> >
{overlayLabels[overlay]} {overlayLabels[overlay]}
<DropdownMenuItemIndicator /> <TradingDropdownItemIndicator />
</DropdownMenuCheckboxItem> </TradingDropdownCheckboxItem>
))} ))}
</DropdownMenuContent> </TradingDropdownContent>
</DropdownMenu> </TradingDropdown>
<DropdownMenu <TradingDropdown
trigger={ trigger={
<DropdownMenuTrigger className={triggerClasses}> <TradingDropdownTrigger className={triggerClasses}>
<TradingButton {...triggerButtonProps}>
{t('Studies')} {t('Studies')}
</DropdownMenuTrigger> </TradingButton>
</TradingDropdownTrigger>
} }
> >
<DropdownMenuContent align={contentAlign}> <TradingDropdownContent align={contentAlign}>
{Object.values(Study).map((study) => ( {Object.values(Study).map((study) => (
<DropdownMenuCheckboxItem <TradingDropdownCheckboxItem
key={study} key={study}
checked={studies.includes(study)} checked={studies.includes(study)}
onCheckedChange={() => { onCheckedChange={() => {
@ -150,11 +160,11 @@ export const CandlesMenu = () => {
}} }}
> >
{studyLabels[study]} {studyLabels[study]}
<DropdownMenuItemIndicator /> <TradingDropdownItemIndicator />
</DropdownMenuCheckboxItem> </TradingDropdownCheckboxItem>
))} ))}
</DropdownMenuContent> </TradingDropdownContent>
</DropdownMenu> </TradingDropdown>
</> </>
); );
}; };

9
libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx
View File

@ -1,5 +1,5 @@
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit'; import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet';
import { useHasAmendableOrder } from '../../order-hooks'; import { useHasAmendableOrder } from '../../order-hooks';
@ -28,12 +28,7 @@ export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
}; };
const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => ( const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
<TradingButton <TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
intent={Intent.Primary}
size="extra-small"
onClick={onClick}
data-testid="cancelAll"
>
{t('Cancel all')} {t('Cancel all')}
</TradingButton> </TradingButton>
); );