chore: tweak position meter colours (#1185)

libs/positions/src/lib/positions-table.spec.tsx

@@ -48,8 +48,8 @@ it('Render correct columns', async () => {
   ).toEqual([
     'Market',
     'Amount',
-    'Mark Price',
-    'Entry Price',
+    'Mark price',
+    'Entry price',
     'Leverage',
     'Margin allocated',
     'Realised PNL',
@@ -131,7 +131,7 @@ it("displays properly entry, liquidation price and liquidation bar and it's inte
   const progressBarWidth = progressBar?.style?.width;
   expect(entryPrice).toEqual('13.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%');
   await act(async () => {
     result.rerender(
@@ -141,7 +141,7 @@ it("displays properly entry, liquidation price and liquidation bar and it's inte
   cells = screen.getAllByRole('gridcell');
   cell = cells[3];
   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 () => {

libs/positions/src/lib/positions-table.tsx

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

libs/ui-toolkit/src/components/progress-bar/progress-bar.tsx

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