fix(trading): replace oracle details and deal ticket pink with red (#4284)

2023-07-11 14:26:24 +01:00 · 2023-07-11 14:26:24 +01:00 · 981c8649a2
commit 981c8649a2
parent 501ffbfc80
12 changed files with 53 additions and 40 deletions
--- 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 && (
--- 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 */
--- 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,
  });
 };

--- 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}%`,
--- 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>
  );
 };
--- 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}
--- 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}%`,
--- 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'
          )}
--- 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'
        )}
--- 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: {
--- 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,
          })}
        />
--- 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',