feat(trading): amend market red and green colors (#4226)
This commit is contained in:
parent
4581e117c4
commit
162a934408
@ -267,22 +267,22 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
|
||||
cy.get('.ag-center-cols-container').within(() => {
|
||||
assertPNLColor(
|
||||
'[col-id="realisedPNL"]',
|
||||
'text-vega-green',
|
||||
'text-vega-pink'
|
||||
'text-market-green-600',
|
||||
'text-market-red'
|
||||
);
|
||||
});
|
||||
cy.get('.ag-center-cols-container').within(() => {
|
||||
assertPNLColor(
|
||||
'[col-id="unrealisedPNL"]',
|
||||
'text-vega-green',
|
||||
'text-vega-pink'
|
||||
'text-market-green-600',
|
||||
'text-market-red'
|
||||
);
|
||||
});
|
||||
cy.get('.ag-center-cols-container').within(() => {
|
||||
assertPNLColor(
|
||||
'[col-id="openVolume"]',
|
||||
'text-vega-green',
|
||||
'text-vega-pink'
|
||||
'text-market-green-600',
|
||||
'text-market-red'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@ -160,8 +160,9 @@ const DataRow = ({
|
||||
const PriceChange = ({ candles }: { candles: string[] }) => {
|
||||
const priceChange = candles ? priceChangePercentage(candles) : undefined;
|
||||
const priceChangeClasses = classNames('text-xs', {
|
||||
'text-vega-pink': priceChange && priceChange < 0,
|
||||
'text-vega-green': priceChange && priceChange > 0,
|
||||
'text-market-red': priceChange && priceChange < 0,
|
||||
'text-market-green-600 dark:text-market-green':
|
||||
priceChange && priceChange > 0,
|
||||
});
|
||||
let prefix = '';
|
||||
if (priceChange && priceChange > 0) {
|
||||
|
@ -29,51 +29,49 @@ html.dark {
|
||||
|
||||
/* PENNANT */
|
||||
|
||||
html [data-theme='dark'] {
|
||||
--pennant-color-danger: theme('colors.vega.pink.DEFAULT');
|
||||
|
||||
/* candles */
|
||||
--pennant-color-buy-fill: theme('colors.vega.green.650');
|
||||
--pennant-color-buy-stroke: theme('colors.vega.green.500');
|
||||
html [data-theme='dark'],
|
||||
html [data-theme='light'] {
|
||||
/* sell candles only use stroke as the candle is solid (without border) */
|
||||
--pennant-color-sell-stroke: theme('colors.vega.pink.500');
|
||||
--pennant-color-sell-stroke: theme('colors.market.red.500');
|
||||
|
||||
/* studies */
|
||||
--pennant-color-eldar-ray-bear-power: theme('colors.vega.pink.500');
|
||||
--pennant-color-eldar-ray-bull-power: theme('colors.vega.green.650');
|
||||
--pennant-color-eldar-ray-bear-power: theme('colors.market.red.500');
|
||||
--pennant-color-eldar-ray-bull-power: theme('colors.market.green.600');
|
||||
|
||||
--pennant-color-macd-divergence-buy: theme('colors.vega.green.650');
|
||||
--pennant-color-macd-divergence-sell: theme('colors.vega.pink.500');
|
||||
--pennant-color-macd-divergence-buy: theme('colors.market.green.600');
|
||||
--pennant-color-macd-divergence-sell: theme('colors.market.red.500');
|
||||
--pennant-color-macd-signal: theme('colors.vega.blue.500');
|
||||
--pennant-color-macd-macd: theme('colors.vega.yellow.500');
|
||||
|
||||
--pennant-color-volume-buy: theme('colors.vega.green.650');
|
||||
--pennant-color-volume-sell: theme('colors.vega.pink.500');
|
||||
|
||||
/* depth chart */
|
||||
--pennant-color-depth-buy-fill: theme('colors.vega.green.650');
|
||||
--pennant-color-depth-buy-stroke: theme('colors.vega.green.500');
|
||||
--pennant-color-depth-sell-fill: theme('colors.vega.pink.650');
|
||||
--pennant-color-depth-sell-stroke: theme('colors.vega.pink.500');
|
||||
--pennant-color-volume-sell: theme('colors.market.red.500');
|
||||
}
|
||||
|
||||
html [data-theme='light'] {
|
||||
--pennant-color-danger: theme('colors.vega.pink.500');
|
||||
|
||||
/* candles */
|
||||
--pennant-color-buy-fill: theme('colors.vega.green.400');
|
||||
--pennant-color-buy-stroke: theme('colors.vega.green.550');
|
||||
/* sell candles only use stroke as the candle is solid (without border) */
|
||||
--pennant-color-sell-stroke: theme('colors.vega.pink.400');
|
||||
|
||||
--pennant-color-volume-buy: theme('colors.vega.green.400');
|
||||
--pennant-color-volume-sell: theme('colors.vega.pink.400');
|
||||
--pennant-color-buy-fill: theme('colors.market.green.500');
|
||||
--pennant-color-buy-stroke: theme('colors.market.green.600');
|
||||
|
||||
/* depth chart */
|
||||
--pennant-color-depth-buy-fill: theme('colors.vega.green.400');
|
||||
--pennant-color-depth-buy-stroke: theme('colors.vega.green.550');
|
||||
--pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
|
||||
--pennant-color-depth-sell-stroke: theme('colors.vega.pink.550');
|
||||
--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');
|
||||
}
|
||||
|
||||
html [data-theme='dark'] {
|
||||
/* candles */
|
||||
--pennant-color-buy-fill: theme('colors.market.green.600');
|
||||
--pennant-color-buy-stroke: theme('colors.market.green.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-volume-buy: theme('colors.market.green.600');
|
||||
}
|
||||
|
||||
/* AG GRID - Do not edit without updating other global stylesheets for each app */
|
||||
|
@ -1,5 +1,6 @@
|
||||
export const positiveClassNames = 'text-vega-green-550 dark:text-vega-green';
|
||||
export const negativeClassNames = 'text-vega-pink dark:text-vega-pink';
|
||||
export const positiveClassNames =
|
||||
'text-market-green-600 dark:text-market-green';
|
||||
export const negativeClassNames = 'text-market-red dark:text-market-red';
|
||||
|
||||
const isPositive = ({ value }: { value: string | bigint | number }) =>
|
||||
!!value &&
|
||||
|
@ -71,8 +71,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
|
||||
if (value < previousValue) {
|
||||
ref.current?.animate(
|
||||
[
|
||||
{ color: theme.colors.vega.pink.DEFAULT },
|
||||
{ color: theme.colors.vega.pink.DEFAULT, offset: 0.8 },
|
||||
{ color: theme.colors.market.red.DEFAULT },
|
||||
{ color: theme.colors.market.red.DEFAULT, offset: 0.8 },
|
||||
{ color: 'inherit' },
|
||||
],
|
||||
FLASH_DURATION
|
||||
@ -80,8 +80,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
|
||||
} else if (value > previousValue) {
|
||||
ref.current?.animate(
|
||||
[
|
||||
{ color: theme.colors.vega.green.DEFAULT },
|
||||
{ color: theme.colors.vega.green.DEFAULT, offset: 0.8 },
|
||||
{ color: theme.colors.market.green.DEFAULT },
|
||||
{ color: theme.colors.market.green.DEFAULT, offset: 0.8 },
|
||||
{ color: 'inherit' },
|
||||
],
|
||||
FLASH_DURATION
|
||||
|
@ -19,19 +19,14 @@ export const Size = ({
|
||||
data-testid="size"
|
||||
className={classNames('text-right', {
|
||||
// BUY
|
||||
'text-vega-green-550 dark:text-vega-green':
|
||||
'text-market-green-600 dark:text-market-green':
|
||||
side === Schema.Side.SIDE_BUY && !forceTheme,
|
||||
'text-vega-green-550':
|
||||
'text-market-green-600':
|
||||
side === Schema.Side.SIDE_BUY && forceTheme === 'light',
|
||||
'text-vega-green':
|
||||
'text-market-green':
|
||||
side === Schema.Side.SIDE_BUY && forceTheme === 'dark',
|
||||
// SELL
|
||||
'text-vega-pink-550 dark:text-vega-pink':
|
||||
side === Schema.Side.SIDE_SELL && !forceTheme,
|
||||
'text-vega-pink-550':
|
||||
side === Schema.Side.SIDE_SELL && forceTheme === 'light',
|
||||
'text-vega-pink':
|
||||
side === Schema.Side.SIDE_SELL && forceTheme === 'dark',
|
||||
'text-market-red': side === Schema.Side.SIDE_SELL,
|
||||
})}
|
||||
>
|
||||
{side === Schema.Side.SIDE_BUY
|
||||
|
@ -85,7 +85,7 @@ describe('FillsTable', () => {
|
||||
});
|
||||
|
||||
const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
|
||||
expect(amountCell).toHaveClass('text-vega-green-550');
|
||||
expect(amountCell).toHaveClass('text-market-green-600');
|
||||
});
|
||||
|
||||
it('should format cells correctly for seller fill', async () => {
|
||||
@ -120,7 +120,7 @@ describe('FillsTable', () => {
|
||||
});
|
||||
|
||||
const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
|
||||
expect(amountCell).toHaveClass('text-vega-pink');
|
||||
expect(amountCell).toHaveClass('text-market-red');
|
||||
});
|
||||
|
||||
it('should format cells correctly for side unspecified', async () => {
|
||||
@ -155,7 +155,7 @@ describe('FillsTable', () => {
|
||||
});
|
||||
|
||||
const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
|
||||
expect(amountCell).toHaveClass('text-vega-pink');
|
||||
expect(amountCell).toHaveClass('text-market-red');
|
||||
});
|
||||
|
||||
it('should render correct maker or taker role', async () => {
|
||||
|
@ -28,8 +28,8 @@ const CumulationBar = ({
|
||||
className={classNames(
|
||||
'absolute top-0 left-0 h-full transition-all',
|
||||
type === VolumeType.bid
|
||||
? 'bg-vega-green/20 dark:bg-vega-green/50'
|
||||
: 'bg-vega-pink/20 dark:bg-vega-pink/30'
|
||||
? 'bg-market-green/20 dark:bg-market-green/50'
|
||||
: 'bg-market-red/20 dark:bg-market-red/30'
|
||||
)}
|
||||
style={{
|
||||
width: `${cumulativeValue}%`,
|
||||
@ -93,8 +93,8 @@ export const OrderbookRow = React.memo(
|
||||
valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)}
|
||||
className={
|
||||
type === VolumeType.ask
|
||||
? '!text-vega-pink dark:text-vega-pink'
|
||||
: 'text-vega-green-550 dark:text-vega-green'
|
||||
? 'text-market-red dark:text-market-red'
|
||||
: 'text-market-green-600 dark:text-market-green'
|
||||
}
|
||||
/>
|
||||
<NumericCell
|
||||
|
@ -102,8 +102,8 @@ it('add color and sign to amount, displays positive notional value', async () =>
|
||||
});
|
||||
let cells = screen.getAllByRole('gridcell');
|
||||
|
||||
expect(cells[2].classList.contains('text-vega-green-550')).toBeTruthy();
|
||||
expect(cells[2].classList.contains('text-vega-pink')).toBeFalsy();
|
||||
expect(cells[2].classList.contains('text-market-green-600')).toBeTruthy();
|
||||
expect(cells[2].classList.contains('text-market-red')).toBeFalsy();
|
||||
expect(cells[2].textContent).toEqual('+100');
|
||||
expect(cells[1].textContent).toEqual('1,230.0');
|
||||
await act(async () => {
|
||||
@ -115,8 +115,8 @@ it('add color and sign to amount, displays positive notional value', async () =>
|
||||
);
|
||||
});
|
||||
cells = screen.getAllByRole('gridcell');
|
||||
expect(cells[2].classList.contains('text-vega-green-550')).toBeFalsy();
|
||||
expect(cells[2].classList.contains('text-vega-pink')).toBeTruthy();
|
||||
expect(cells[2].classList.contains('text-market-green-600')).toBeFalsy();
|
||||
expect(cells[2].classList.contains('text-market-red')).toBeTruthy();
|
||||
expect(cells[2].textContent?.startsWith('-100')).toBeTruthy();
|
||||
expect(cells[1].textContent).toEqual('1,230.0');
|
||||
});
|
||||
|
@ -13,6 +13,24 @@ module.exports = {
|
||||
current: 'currentColor',
|
||||
black: '#000000',
|
||||
white: '#FFFFFF',
|
||||
market: {
|
||||
red: {
|
||||
// same as vega-red
|
||||
700: '#2F000C',
|
||||
600: '#7B001F',
|
||||
550: '#B3002E',
|
||||
DEFAULT: '#EC003C',
|
||||
500: '#EC003C',
|
||||
},
|
||||
green: {
|
||||
// same as vega-green
|
||||
700: '#012915',
|
||||
600: '#01914B',
|
||||
550: '#01C566',
|
||||
DEFAULT: '#00F780',
|
||||
500: '#00F780',
|
||||
},
|
||||
},
|
||||
vega: {
|
||||
// YELLOW
|
||||
yellow: {
|
||||
@ -32,7 +50,7 @@ module.exports = {
|
||||
green: {
|
||||
700: '#012915',
|
||||
650: '#015D30',
|
||||
600: '#01914B',
|
||||
600: '#008545',
|
||||
550: '#01C566',
|
||||
DEFAULT: '#00F780',
|
||||
500: '#00F780',
|
||||
@ -84,6 +102,20 @@ module.exports = {
|
||||
300: '#FFD7EA',
|
||||
},
|
||||
|
||||
// RED
|
||||
red: {
|
||||
700: '#2F000C',
|
||||
650: '#550016',
|
||||
600: '#7B001F',
|
||||
550: '#B3002E',
|
||||
DEFAULT: '#EC003C',
|
||||
500: '#EC003C',
|
||||
450: '#F03D6B',
|
||||
400: '#F4668A',
|
||||
350: '#F78FA9',
|
||||
300: '#F8A3B9',
|
||||
},
|
||||
|
||||
// ORANGE
|
||||
orange: {
|
||||
700: '#2A1701',
|
||||
|
@ -19,8 +19,8 @@ import type { AgGridReactProps } from 'ag-grid-react';
|
||||
import type { Trade } from './trades-data-provider';
|
||||
import { Side } from '@vegaprotocol/types';
|
||||
|
||||
export const BUY_CLASS = 'text-vega-green dark:text-vega-green';
|
||||
export const SELL_CLASS = 'text-vega-pink dark:text-vega-pink';
|
||||
export const BUY_CLASS = 'text-market-green-600 dark:text-market-green';
|
||||
export const SELL_CLASS = 'text-market-red dark:text-market-red';
|
||||
|
||||
const changeCellClass = ({ node }: CellClassParams) => {
|
||||
let colorClass = '';
|
||||
|
@ -36,7 +36,7 @@ it('Renders a red line if the last value is less than the first', () => {
|
||||
const paths = screen.getAllByTestId('sparkline-path');
|
||||
const path = paths[0];
|
||||
expect(path).toHaveClass(
|
||||
'[vector-effect:non-scaling-stroke] stroke-vega-pink dark:stroke-vega-pink'
|
||||
'[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
|
||||
);
|
||||
});
|
||||
|
||||
@ -48,7 +48,7 @@ it('Renders a green line if the last value is greater than the first', () => {
|
||||
const paths = screen.getAllByTestId('sparkline-path');
|
||||
const path = paths[0];
|
||||
expect(path).toHaveClass(
|
||||
'[vector-effect:non-scaling-stroke] stroke-vega-green dark:stroke-vega-green'
|
||||
'[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -9,8 +9,8 @@ function colorByChange(a: number, b: number) {
|
||||
return a === b
|
||||
? 'stroke-black/40 dark:stroke-white/40'
|
||||
: a < b
|
||||
? 'stroke-vega-green dark:stroke-vega-green'
|
||||
: 'stroke-vega-pink dark:stroke-vega-pink';
|
||||
? 'stroke-market-green-600 dark:stroke-market-green'
|
||||
: 'stroke-market-red dark:stroke-market-red';
|
||||
}
|
||||
|
||||
export interface SparklineProps {
|
||||
|
Loading…
Reference in New Issue
Block a user