feat(trading): amend market red and green colors (#4226)

This commit is contained in:
Bartłomiej Głownia 2023-07-07 14:52:38 +02:00 committed by GitHub
parent 4581e117c4
commit 162a934408
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 100 additions and 73 deletions

View File

@ -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'
);
});
});

View File

@ -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) {

View File

@ -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 */

View File

@ -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 &&

View File

@ -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

View File

@ -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

View File

@ -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 () => {

View File

@ -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

View File

@ -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');
});

View File

@ -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',

View File

@ -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 = '';

View File

@ -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'
);
});

View File

@ -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 {