From 92090743326fdfe63b10dff83cfd7958b7b4b5ac Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Fri, 1 Sep 2023 17:00:11 -0700
Subject: [PATCH] chore(trading): change pane context buttons color (#4680)

---
 .../accounts-menu/accounts-menu.tsx           |   4 +-
 .../deposits-menu/deposits-menu.tsx           |   3 +-
 .../positions-menu/positions-menu.tsx         |   3 +-
 .../withdrawals-menu/withdrawals-menu.tsx     |   3 +-
 .../src/lib/candles-menu.spec.tsx             |   4 +-
 libs/candles-chart/src/lib/candles-menu.tsx   | 112 ++++++++++--------
 .../open-orders-menu/open-orders-menu.tsx     |   9 +-
 7 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/apps/trading/components/accounts-menu/accounts-menu.tsx b/apps/trading/components/accounts-menu/accounts-menu.tsx
index 8fe5ae993..86c80e91c 100644
--- a/apps/trading/components/accounts-menu/accounts-menu.tsx
+++ b/apps/trading/components/accounts-menu/accounts-menu.tsx
@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const AccountsMenu = () => {
@@ -8,7 +8,6 @@ export const AccountsMenu = () => {
   return (
     <>
       <TradingButton
-        intent={Intent.Primary}
         size="extra-small"
         data-testid="open-transfer"
         onClick={() => setView({ type: ViewType.Transfer })}
@@ -16,7 +15,6 @@ export const AccountsMenu = () => {
         {t('Transfer')}
       </TradingButton>
       <TradingButton
-        intent={Intent.Primary}
         size="extra-small"
         onClick={() => setView({ type: ViewType.Deposit })}
       >
diff --git a/apps/trading/components/deposits-menu/deposits-menu.tsx b/apps/trading/components/deposits-menu/deposits-menu.tsx
index 28c751e84..81b6edf60 100644
--- a/apps/trading/components/deposits-menu/deposits-menu.tsx
+++ b/apps/trading/components/deposits-menu/deposits-menu.tsx
@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const DepositsMenu = () => {
@@ -7,7 +7,6 @@ export const DepositsMenu = () => {
 
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       onClick={() => setView({ type: ViewType.Deposit })}
       data-testid="deposit-button"
diff --git a/apps/trading/components/positions-menu/positions-menu.tsx b/apps/trading/components/positions-menu/positions-menu.tsx
index 58dddee7b..428bb82d7 100644
--- a/apps/trading/components/positions-menu/positions-menu.tsx
+++ b/apps/trading/components/positions-menu/positions-menu.tsx
@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { usePositionsStore } from '../positions-container';
 
 export const PositionsMenu = () => {
@@ -7,7 +7,6 @@ export const PositionsMenu = () => {
   const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       data-testid="open-transfer"
       onClick={toggle}
diff --git a/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx b/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
index 22f64f40f..cc0724cf4 100644
--- a/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
+++ b/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const WithdrawalsMenu = () => {
@@ -7,7 +7,6 @@ export const WithdrawalsMenu = () => {
 
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       onClick={() => setView({ type: ViewType.Withdraw })}
       data-testid="withdraw-dialog-button"
diff --git a/libs/candles-chart/src/lib/candles-menu.spec.tsx b/libs/candles-chart/src/lib/candles-menu.spec.tsx
index 7a9ed6f52..85f8b5b24 100644
--- a/libs/candles-chart/src/lib/candles-menu.spec.tsx
+++ b/libs/candles-chart/src/lib/candles-menu.spec.tsx
@@ -7,8 +7,8 @@ describe('CandlesMenu', () => {
     render(<CandlesMenu />);
 
     await userEvent.click(
-      screen.getByText('Studies', {
-        selector: '[type="button"]',
+      screen.getByRole('button', {
+        name: 'Studies',
       })
     );
     expect(await screen.findByRole('menu')).toBeInTheDocument();
diff --git a/libs/candles-chart/src/lib/candles-menu.tsx b/libs/candles-chart/src/lib/candles-menu.tsx
index 2b3209e0a..cc5b62e40 100644
--- a/libs/candles-chart/src/lib/candles-menu.tsx
+++ b/libs/candles-chart/src/lib/candles-menu.tsx
@@ -10,13 +10,14 @@ import {
   studyLabels,
 } from 'pennant';
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
+  TradingButton,
+  TradingDropdown,
+  TradingDropdownCheckboxItem,
+  TradingDropdownContent,
+  TradingDropdownItemIndicator,
+  TradingDropdownRadioGroup,
+  TradingDropdownRadioItem,
+  TradingDropdownTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
 import type { IconName } from '@blueprintjs/icons';
@@ -44,69 +45,76 @@ export const CandlesMenu = () => {
   } = useCandlesChartSettings();
   const triggerClasses = 'text-xs';
   const contentAlign = 'end';
+  const triggerButtonProps = { size: 'extra-small' } as const;
 
   return (
     <>
-      <DropdownMenu
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t(`Interval: ${intervalLabels[interval]}`)}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t(`Interval: ${intervalLabels[interval]}`)}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
+        <TradingDropdownContent align={contentAlign}>
+          <TradingDropdownRadioGroup
             value={interval}
             onValueChange={(value) => {
               setInterval(value as Interval);
             }}
           >
             {Object.values(Interval).map((timeInterval) => (
-              <DropdownMenuRadioItem
+              <TradingDropdownRadioItem
                 key={timeInterval}
                 inset
                 value={timeInterval}
               >
                 {intervalLabels[timeInterval]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+          </TradingDropdownRadioGroup>
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            <Icon name={chartTypeIcon.get(chartType) as IconName} />
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              <Icon name={chartTypeIcon.get(chartType) as IconName} />
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
+        <TradingDropdownContent align={contentAlign}>
+          <TradingDropdownRadioGroup
             value={chartType}
             onValueChange={(value) => {
               setType(value as ChartType);
             }}
           >
             {Object.values(ChartType).map((type) => (
-              <DropdownMenuRadioItem key={type} inset value={type}>
+              <TradingDropdownRadioItem key={type} inset value={type}>
                 {chartTypeLabels[type]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+          </TradingDropdownRadioGroup>
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Overlays')}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t('Overlays')}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
+        <TradingDropdownContent align={contentAlign}>
           {Object.values(Overlay).map((overlay) => (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={overlay}
               checked={overlays.includes(overlay)}
               onCheckedChange={() => {
@@ -121,21 +129,23 @@ export const CandlesMenu = () => {
               }}
             >
               {overlayLabels[overlay]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Studies')}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t('Studies')}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
+        <TradingDropdownContent align={contentAlign}>
           {Object.values(Study).map((study) => (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={study}
               checked={studies.includes(study)}
               onCheckedChange={() => {
@@ -150,11 +160,11 @@ export const CandlesMenu = () => {
               }}
             >
               {studyLabels[study]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </TradingDropdownContent>
+      </TradingDropdown>
     </>
   );
 };
diff --git a/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx b/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx
index 4ada22fb6..1f3879aa1 100644
--- a/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx
+++ b/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx
@@ -1,5 +1,5 @@
 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 { useHasAmendableOrder } from '../../order-hooks';
 
@@ -28,12 +28,7 @@ export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
 };
 
 const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <TradingButton
-    intent={Intent.Primary}
-    size="extra-small"
-    onClick={onClick}
-    data-testid="cancelAll"
-  >
+  <TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
     {t('Cancel all')}
   </TradingButton>
 );