diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 678187add..e94e9648b 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
import type { ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { LayoutPriority } from 'allotment';
@@ -317,7 +317,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
+
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 = ({
>
{
+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 (
-
);
};
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}
/>
-
+
{
'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',