From 848328b25d2789931729074acd7b6f882a38f2a8 Mon Sep 17 00:00:00 2001 From: mulan xia Date: Tue, 4 Jun 2024 11:37:36 -0400 Subject: [PATCH 1/2] make triggers cell clickable --- .../PositionsTable/PositionsTriggersCell.tsx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx index 95a34b83a..7066df2e2 100644 --- a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx +++ b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx @@ -90,14 +90,14 @@ export const PositionsTriggersCell = ({ }; const viewOrdersButton = ( - <$Button + <$ViewOrdersButton action={ButtonAction.Navigation} size={ButtonSize.XSmall} onClick={onViewOrders ?? undefined} > {stringGetter({ key: STRING_KEYS.VIEW_ORDERS })} <$ArrowIcon iconName={IconName.Arrow} /> - + ); const renderOutput = ({ label, orders }: { label: string; orders: SubaccountOrder[] }) => { @@ -107,9 +107,14 @@ export const PositionsTriggersCell = ({ liquidationWarningSide?: Nullable; } = {}) => { const styledLabel = ( - <$Label warning={liquidationWarningSide != null} hasOrders={orders.length > 0}> + <$TriggerButton + action={ButtonAction.Primary} + onClick={openTriggersDialog} + warning={liquidationWarningSide != null} + hasOrders={orders.length > 0} + > {label} - + ); return liquidationWarningSide ? ( ` - align-items: center; - border: solid var(--border-width) var(--color-border); - border-radius: 0.5em; - display: flex; - font: var(--font-tiny-book); - height: var(--item-height); - padding: 0 0.25rem; +const $TriggerButton = styled(Button)<{ warning?: boolean; hasOrders: boolean }>` + --button-backgroundColor: transparent; + --button-border: solid var(--border-width) var(--color-border); + --button-font: var(--font-tiny-book); + --button-height: var(--item-height); + --button-padding: 0 0.25rem; + --button-textColor: var(--color-text-0); ${({ warning }) => warning && css` - background-color: var(--color-warning); - color: var(--color-black); + --button-textColor: var(--color-black); + --button-backgroundColor: var(--color-warning); `} ${({ hasOrders }) => hasOrders ? css` - color: var(--color-text-1); - background-color: var(--color-layer-4); + --button-textColor: var(--color-text-1); + --button-backgroundColor: var(--color-layer-4); ` : css` - color: var(--color-text-0); + --button-hover-textColor: var(--color-text-1); `} `; @@ -267,7 +271,7 @@ const $Output = styled(Output)<{ value: number | null }>` `} `; -const $Button = styled(Button)` +const $ViewOrdersButton = styled(Button)` --button-height: var(--item-height); --button-padding: 0; --button-textColor: var(--color-text-1); From 3aef7c31becd41e395e651bcd887a58d874d3964 Mon Sep 17 00:00:00 2001 From: mulan xia Date: Tue, 4 Jun 2024 12:13:31 -0400 Subject: [PATCH 2/2] fix styling --- .../PositionsTable/PositionsTriggersCell.tsx | 62 ++++++++++++------- 1 file changed, 40 insertions(+), 22 deletions(-) diff --git a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx index 7066df2e2..7769facfb 100644 --- a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx +++ b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx @@ -30,6 +30,12 @@ import { openDialog } from '@/state/dialogs'; import { isStopLossOrder } from '@/lib/orders'; import { testFlags } from '@/lib/testFlags'; +enum TriggerButtonState { + Warning = 'Warning', + HasOrders = 'HasOrders', + Default = 'Default', +} + type ElementProps = { marketId: string; assetId: string; @@ -106,12 +112,19 @@ export const PositionsTriggersCell = ({ }: { liquidationWarningSide?: Nullable; } = {}) => { - const styledLabel = ( + let triggerButtonState = TriggerButtonState.Default; + + if (liquidationWarningSide != null) { + triggerButtonState = TriggerButtonState.Warning; + } else if (orders.length > 0) { + triggerButtonState = TriggerButtonState.HasOrders; + } + + const triggerButton = ( <$TriggerButton action={ButtonAction.Primary} onClick={openTriggersDialog} - warning={liquidationWarningSide != null} - hasOrders={orders.length > 0} + triggerButtonState={triggerButtonState} > {label} @@ -134,10 +147,10 @@ export const PositionsTriggersCell = ({ {stringGetter({ key: STRING_KEYS.EDIT_STOP_LOSS })} } - slotTrigger={styledLabel} + slotTrigger={triggerButton} /> ) : ( - styledLabel + triggerButton ); }; @@ -233,7 +246,27 @@ const $Row = styled.span` --item-height: 1.25rem; `; -const $TriggerButton = styled(Button)<{ warning?: boolean; hasOrders: boolean }>` +const getStylingForTriggerButtonState = (state: TriggerButtonState) => { + switch (state) { + case TriggerButtonState.HasOrders: + return css` + --button-textColor: var(--color-text-1); + --button-backgroundColor: var(--color-layer-4); + `; + case TriggerButtonState.Warning: + return css` + --button-textColor: var(--color-black); + --button-backgroundColor: var(--color-warning); + `; + case TriggerButtonState.Default: + default: + return css` + --button-hover-textColor: var(--color-text-1); + `; + } +}; + +const $TriggerButton = styled(Button)<{ triggerButtonState: TriggerButtonState }>` --button-backgroundColor: transparent; --button-border: solid var(--border-width) var(--color-border); --button-font: var(--font-tiny-book); @@ -241,22 +274,7 @@ const $TriggerButton = styled(Button)<{ warning?: boolean; hasOrders: boolean }> --button-padding: 0 0.25rem; --button-textColor: var(--color-text-0); - ${({ warning }) => - warning && - css` - --button-textColor: var(--color-black); - --button-backgroundColor: var(--color-warning); - `} - - ${({ hasOrders }) => - hasOrders - ? css` - --button-textColor: var(--color-text-1); - --button-backgroundColor: var(--color-layer-4); - ` - : css` - --button-hover-textColor: var(--color-text-1); - `} + ${({ triggerButtonState }) => getStylingForTriggerButtonState(triggerButtonState)} `; const $Output = styled(Output)<{ value: number | null }>`