From 981c8649a2a01a1ff1e8ed682f2aa4e1ed26a6ca Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 11 Jul 2023 14:26:24 +0100
Subject: [PATCH] fix(trading): replace oracle details and deal ticket pink
 with red (#4284)

---
 .../client-pages/market/trade-grid.tsx        |  2 +-
 apps/trading/pages/styles.css                 | 36 +++++++++++--------
 libs/accounts/src/lib/accounts-table.tsx      |  2 +-
 libs/accounts/src/lib/margin-health-chart.tsx |  2 +-
 .../deal-ticket/deal-ticket-button.tsx        | 19 ++++++----
 .../components/deal-ticket/deal-ticket.tsx    |  6 +---
 libs/market-depth/src/lib/orderbook-row.tsx   |  4 +--
 .../oracle-basic-profile.tsx                  |  2 +-
 .../oracle-full-profile.tsx                   |  2 +-
 libs/tailwindcss-config/src/theme.js          |  4 +++
 .../notification-banner.tsx                   |  6 ++--
 .../src/components/toggle/toggle.tsx          |  8 ++---
 12 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 8c70fb78b..0608a2d42 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -316,7 +316,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
       <div className="border-b border-default min-w-0">
         <HeaderStats market={market} />
       </div>
-      <div className="col-span-2 bg-vega-green">
+      <div className="col-span-2">
         <OracleBanner marketId={market?.id || ''} />
       </div>
       {sidebarOpen && (
diff --git a/apps/trading/pages/styles.css b/apps/trading/pages/styles.css
index c3a3dcfa6..b0f3f7203 100644
--- a/apps/trading/pages/styles.css
+++ b/apps/trading/pages/styles.css
@@ -48,30 +48,38 @@ html [data-theme='light'] {
 
 html [data-theme='light'] {
   /* candles */
-  --pennant-color-buy-fill: theme('colors.market.green.500');
-  --pennant-color-buy-stroke: theme('colors.market.green.600');
+  --pennant-color-buy-fill: theme(colors.market.green.500);
+  --pennant-color-buy-stroke: theme(colors.market.green.600);
+
+  /* sell uses stroke for fill and stroke */
+  --pennant-color-sell-stroke: theme(colors.market.red.500);
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.market.green.500');
-  --pennant-color-depth-buy-stroke: theme('colors.market.green.600');
-  --pennant-color-depth-sell-fill: theme('colors.market.red.500');
-  --pennant-color-depth-sell-stroke: theme('colors.market.red.600');
+  --pennant-color-depth-buy-fill: theme(colors.market.green.500);
+  --pennant-color-depth-buy-stroke: theme(colors.market.green.600);
+  --pennant-color-depth-sell-fill: theme(colors.market.red.500);
+  --pennant-color-depth-sell-stroke: theme(colors.market.red.600);
 
-  --pennant-color-volume-buy: theme('colors.market.green.500');
+  --pennant-color-volume-buy: theme(colors.market.green.400);
+  --pennant-color-volume-sell: theme(colors.market.red.400);
 }
 
 html [data-theme='dark'] {
   /* candles */
-  --pennant-color-buy-fill: theme('colors.market.green.600');
-  --pennant-color-buy-stroke: theme('colors.market.green.500');
+  --pennant-color-buy-fill: theme(colors.market.green.600);
+  --pennant-color-buy-stroke: theme(colors.market.green.500);
+
+  /* sell uses stroke for fill and stroke */
+  --pennant-color-sell-stroke: theme(colors.market.red.500);
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.market.green.600');
-  --pennant-color-depth-buy-stroke: theme('colors.market.green.500');
-  --pennant-color-depth-sell-fill: theme('colors.market.red.600');
-  --pennant-color-depth-sell-stroke: theme('colors.market.red.500');
+  --pennant-color-depth-buy-fill: theme(colors.market.green.600);
+  --pennant-color-depth-buy-stroke: theme(colors.market.green.500);
+  --pennant-color-depth-sell-fill: theme(colors.market.red.600);
+  --pennant-color-depth-sell-stroke: theme(colors.market.red.500);
 
-  --pennant-color-volume-buy: theme('colors.market.green.600');
+  --pennant-color-volume-buy: theme(colors.market.green.600);
+  --pennant-color-volume-sell: theme(colors.market.red.600);
 }
 
 /* AG GRID - Do not edit without updating other global stylesheets for each app */
diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx
index d95da2e81..d9b6ae1bb 100644
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/libs/accounts/src/lib/accounts-table.tsx
@@ -33,7 +33,7 @@ const colorClass = (percentageUsed: number, neutral = false) => {
   return classNames('text-right', {
     'text-neutral-500 dark:text-neutral-400': percentageUsed < 75 && !neutral,
     'text-vega-orange': percentageUsed >= 75 && percentageUsed < 90,
-    'text-vega-pink': percentageUsed >= 90,
+    'text-vega-red': percentageUsed >= 90,
   });
 };
 
diff --git a/libs/accounts/src/lib/margin-health-chart.tsx b/libs/accounts/src/lib/margin-health-chart.tsx
index 8a2cd3184..c2c0d2c1b 100644
--- a/libs/accounts/src/lib/margin-health-chart.tsx
+++ b/libs/accounts/src/lib/margin-health-chart.tsx
@@ -189,7 +189,7 @@ export const MarginHealthChart = ({
         >
           <div
             data-testid="margin-health-chart-red"
-            className="bg-vega-pink-550"
+            className="bg-vega-red-550"
             style={{
               height: '100%',
               width: `${red * 100}%`,
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
index 361b2fc0c..ed0ba2a58 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx
@@ -1,17 +1,24 @@
 import { t } from '@vegaprotocol/i18n';
-import type { ButtonVariant } from '@vegaprotocol/ui-toolkit';
-import { Button } from '@vegaprotocol/ui-toolkit';
+import { Side } from '@vegaprotocol/types';
+import classNames from 'classnames';
 
 interface Props {
-  variant: ButtonVariant;
+  side: Side;
 }
 
-export const DealTicketButton = ({ variant }: Props) => {
+export const DealTicketButton = ({ side }: Props) => {
+  const buttonClasses = classNames(
+    'px-10 py-2 uppercase rounded-md text-white w-full',
+    {
+      'bg-market-red-500': side === Side.SIDE_SELL,
+      'bg-market-green-550': side === Side.SIDE_BUY,
+    }
+  );
   return (
     <div className="mb-2">
-      <Button variant={variant} fill type="submit" data-testid="place-order">
+      <button type="submit" data-testid="place-order" className={buttonClasses}>
         {t('Place order')}
-      </Button>
+      </button>
     </div>
   );
 };
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
index 65a00479b..708b11ed6 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
@@ -476,11 +476,7 @@ export const DealTicket = ({
           pubKey={pubKey}
           onClickCollateral={onClickCollateral}
         />
-        <DealTicketButton
-          variant={
-            order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary'
-          }
-        />
+        <DealTicketButton side={order.side} />
         <DealTicketFeeDetails
           onMarketClick={onMarketClick}
           feeEstimate={feeEstimate}
diff --git a/libs/market-depth/src/lib/orderbook-row.tsx b/libs/market-depth/src/lib/orderbook-row.tsx
index caced7013..0cd191717 100644
--- a/libs/market-depth/src/lib/orderbook-row.tsx
+++ b/libs/market-depth/src/lib/orderbook-row.tsx
@@ -28,8 +28,8 @@ const CumulationBar = ({
       className={classNames(
         'absolute top-0 left-0 h-full transition-all',
         type === VolumeType.bid
-          ? 'bg-market-green/20 dark:bg-market-green/50'
-          : 'bg-market-red/20 dark:bg-market-red/30'
+          ? 'bg-market-green-300 dark:bg-market-green/50'
+          : 'bg-market-red-300 dark:bg-market-red/30'
       )}
       style={{
         width: `${cumulativeValue}%`,
diff --git a/libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx b/libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
index c06bd88e4..a8afd2966 100644
--- a/libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
+++ b/libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
@@ -104,7 +104,7 @@ export const OracleBasicProfile = ({
               'text-vega-blue': intent === Intent.Primary,
               'text-vega-green dark:text-vega-green': intent === Intent.Success,
               'text-yellow-600 dark:text-yellow': intent === Intent.Warning,
-              'text-vega-pink': intent === Intent.Danger,
+              'text-vega-red': intent === Intent.Danger,
             },
             'flex items-start align-text-bottom p-1'
           )}
diff --git a/libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx b/libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx
index 85a39797b..2affe9f92 100644
--- a/libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx
+++ b/libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx
@@ -40,7 +40,7 @@ export const OracleProfileTitle = ({ provider }: { provider: Provider }) => {
             'text-vega-blue': intent === Intent.Primary,
             'text-vega-green dark:text-vega-green': intent === Intent.Success,
             'text-yellow-600 dark:text-yellow': intent === Intent.Warning,
-            'text-vega-pink': intent === Intent.Danger,
+            'text-vega-red': intent === Intent.Danger,
           },
           'flex items-start align-text-bottom p-1'
         )}
diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index e7d715401..050eb6eda 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@@ -21,6 +21,8 @@ module.exports = {
         550: '#B3002E',
         DEFAULT: '#EC003C',
         500: '#EC003C',
+        400: '#F57382',
+        300: '#FDD9DC',
       },
       green: {
         // same as vega-green
@@ -29,6 +31,8 @@ module.exports = {
         550: '#01C566',
         DEFAULT: '#00F780',
         500: '#00F780',
+        400: '#74BE8E',
+        300: '#DDFEE8',
       },
     },
     vega: {
diff --git a/libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx b/libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx
index 8ea363eee..9fbcd04b1 100644
--- a/libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx
+++ b/libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx
@@ -25,7 +25,7 @@ export const NotificationBanner = ({
           'bg-vega-green-300 dark:bg-vega-green-700': intent === Intent.Success,
           'bg-vega-orange-300 dark:bg-vega-orange-700':
             intent === Intent.Warning,
-          'bg-vega-pink-300 dark:bg-vega-pink-700': intent === Intent.Danger,
+          'bg-vega-red-300 dark:bg-vega-red-700': intent === Intent.Danger,
         },
         {
           'border-b-vega-light-200 dark:border-b-vega-dark-200 ':
@@ -40,7 +40,7 @@ export const NotificationBanner = ({
           'border-b-vega-orange-500 dark:border-b-vega-orange-500':
             intent === Intent.Warning,
 
-          'border-b-vega-pink-500 dark:border-b-vega-pink-500':
+          'border-b-vega-red-500 dark:border-b-vega-red-500':
             intent === Intent.Danger,
         }
       )}
@@ -59,7 +59,7 @@ export const NotificationBanner = ({
             'text-vega-orange-500 dark:text-vega-orange-500':
               intent === Intent.Warning,
 
-            'text-vega-pink-500 dark:text-vega-pink-500':
+            'text-vega-red-500 dark:text-vega-red-500':
               intent === Intent.Danger,
           })}
         />
diff --git a/libs/ui-toolkit/src/components/toggle/toggle.tsx b/libs/ui-toolkit/src/components/toggle/toggle.tsx
index 8bb69d44c..fb3a49b61 100644
--- a/libs/ui-toolkit/src/components/toggle/toggle.tsx
+++ b/libs/ui-toolkit/src/components/toggle/toggle.tsx
@@ -38,14 +38,12 @@ export const Toggle = ({
     'relative inline-flex w-full h-full text-center items-center justify-center',
     'peer-checked:rounded-full',
     {
-      'peer-checked:bg-neutral-400 dark:peer-checked:bg-white dark:peer-checked:text-black':
+      'peer-checked:bg-neutral-400 dark:peer-checked:bg-white peer-checked:text-white dark:peer-checked:text-black':
         type === 'primary',
-      'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-550':
+      'peer-checked:bg-market-green-550 peer-checked:text-white':
         type === 'buy',
-      'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-550':
-        type === 'sell',
+      'peer-checked:bg-market-red-500 peer-checked:text-white': type === 'sell',
     },
-    'peer-checked:text-white dark:peer-checked:text-black',
     'cursor-pointer peer-checked:cursor-auto select-none',
     {
       'px-10 py-2': size === 'lg',