LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: tweak position meter colours (#1185)

Browse Source
This commit is contained in:
PeteWilliams 2022-08-31 06:54:09 +01:00 committed by GitHub
parent 9199c79186
commit fa6c4e7a02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/positions/src/lib/positions-table.spec.tsx
View File

@ -48,8 +48,8 @@ it('Render correct columns', async () => {
).toEqual([ ).toEqual([
'Market', 'Market',
'Amount', 'Amount',
'Mark Price', 'Mark price',
'Entry Price', 'Entry price',
'Leverage', 'Leverage',
'Margin allocated', 'Margin allocated',
'Realised PNL', 'Realised PNL',
@ -131,7 +131,7 @@ it("displays properly entry, liquidation price and liquidation bar and it's inte
const progressBarWidth = progressBar?.style?.width; const progressBarWidth = progressBar?.style?.width;
expect(entryPrice).toEqual('13.3'); expect(entryPrice).toEqual('13.3');
expect(liquidationPrice).toEqual('8.3'); expect(liquidationPrice).toEqual('8.3');
expect(progressBar.classList.contains('bg-danger')).toEqual(false); expect(progressBar.classList.contains('bg-warning')).toEqual(false);
expect(progressBarWidth).toEqual('20%'); expect(progressBarWidth).toEqual('20%');
await act(async () => { await act(async () => {
result.rerender( result.rerender(
@ -141,7 +141,7 @@ it("displays properly entry, liquidation price and liquidation bar and it's inte
cells = screen.getAllByRole('gridcell'); cells = screen.getAllByRole('gridcell');
cell = cells[3]; cell = cells[3];
progressBar = cell.lastElementChild?.firstElementChild as HTMLElement; progressBar = cell.lastElementChild?.firstElementChild as HTMLElement;
expect(progressBar?.classList.contains('bg-danger')).toEqual(true); expect(progressBar?.classList.contains('bg-warning')).toEqual(true);
}); });
it('displays leverage', async () => { it('displays leverage', async () => {

6
libs/positions/src/lib/positions-table.tsx
View File

@ -166,7 +166,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>((props, ref) => {
}} }}
/> />
<AgGridColumn <AgGridColumn
headerName={t('Mark Price')} headerName={t('Mark price')}
field="markPrice" field="markPrice"
type="rightAligned" type="rightAligned"
cellRenderer="PriceFlashCell" cellRenderer="PriceFlashCell"
@ -192,7 +192,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>((props, ref) => {
}} }}
/> />
<AgGridColumn <AgGridColumn
headerName={t('Entry Price')} headerName={t('Entry price')}
field="averageEntryPrice" field="averageEntryPrice"
headerComponentParams={{ headerComponentParams={{
template: template:
@ -225,7 +225,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>((props, ref) => {
data.marketDecimalPlaces data.marketDecimalPlaces
), ),
value: range ? Number(((mid - min) * BigInt(100)) / range) : 0, value: range ? Number(((mid - min) * BigInt(100)) / range) : 0,
intent: data.lowMarginLevel ? Intent.Danger : undefined, intent: data.lowMarginLevel ? Intent.Warning : undefined,
}; };
}} }}
/> />

7
libs/ui-toolkit/src/components/progress-bar/progress-bar.tsx
View File

@ -12,13 +12,16 @@ export const ProgressBar = ({ className, intent, value }: ProgressBarProps) => {
return ( return (
<div <div
style={{ height: '6px' }} style={{ height: '6px' }}
className={classNames('bg-neutral-800 relative', className)} className={classNames(
'bg-neutral-300 dark:bg-neutral-700 relative',
className
)}
> >
<div <div
className={classNames( className={classNames(
'absolute left-0 top-0 bottom-0', 'absolute left-0 top-0 bottom-0',
intent === undefined || intent === Intent.None intent === undefined || intent === Intent.None
? 'bg-neutral-600' ? 'bg-neutral-600 dark:bg-white'
: getIntentBackground(intent ?? Intent.None) : getIntentBackground(intent ?? Intent.None)
)} )}
style={{ width: `${Math.max(0, value ?? 0)}%` }} style={{ width: `${Math.max(0, value ?? 0)}%` }}