feat(trading): change to system monospace font (#4634)

apps/trading/pages/styles.css

@@ -15,6 +15,10 @@ body,
   @apply h-full;
 }
 
+.font-mono {
+  @apply tracking-tighter;
+}
+
 .text-default {
   @apply text-vega-clight-50 dark:text-vega-cdark-50;
 }
@@ -147,7 +151,7 @@ html [data-theme='dark'] {
 }
 
 .vega-ag-grid .ag-header-row {
-  @apply font-alpha font-normal;
+  @apply font-normal font-alpha;
 }
 
 /* Light variables */

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -1,8 +1,16 @@
-import { isNumeric } from '@vegaprotocol/utils';
-import { PriceChangeCell } from '@vegaprotocol/datagrid';
-import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+  isNumeric,
+  priceChange,
+  priceChangePercentage,
+} from '@vegaprotocol/utils';
+import { PriceChangeCell, signedNumberCssClass } from '@vegaprotocol/datagrid';
+import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useCandles } from '../../hooks/use-candles';
+import BigNumber from 'bignumber.js';
+import classNames from 'classnames';
 
 interface Props {
   marketId?: string;
@@ -47,10 +55,39 @@ export const Last24hPriceChange = ({
   if (error || !isNumeric(decimalPlaces)) {
     return <span>-</span>;
   }
+
+  const candles = oneDayCandles?.map((c) => c.close) || initialValue || [];
+  const change = priceChange(candles);
+  const changePercentage = priceChangePercentage(candles);
+
   return (
-    <PriceChangeCell
-      candles={oneDayCandles?.map((c) => c.close) || initialValue || []}
-      decimalPlaces={decimalPlaces}
-    />
+    <span
+      className={classNames(
+        'flex items-center gap-1',
+        signedNumberCssClass(change)
+      )}
+    >
+      <Arrow value={change} />
+      <span data-testid="price-change-percentage">
+        {formatNumberPercentage(new BigNumber(changePercentage.toString()), 2)}
+      </span>
+      <span data-testid="price-change">
+        {addDecimalsFormatNumber(change.toString(), decimalPlaces ?? 0, 3)}
+      </span>
+    </span>
   );
 };
+
+const Arrow = ({ value }: { value: number | bigint }) => {
+  const size = 10;
+
+  if (value > 0) {
+    return <VegaIcon name={VegaIconNames.ARROW_UP} size={size} />;
+  }
+
+  if (value < 0) {
+    return <VegaIcon name={VegaIconNames.ARROW_DOWN} size={size} />;
+  }
+
+  return null;
+};

libs/tailwindcss-config/src/theme.js

@@ -177,7 +177,21 @@ module.exports = {
     success: '#00F780',
   },
   fontFamily: {
-    mono: ['Roboto Mono', 'monospace'],
+    mono: [
+      'ui-monospace',
+      'Menlo',
+      'Monaco',
+      'Cascadia Mono',
+      'Segoe UI Mono',
+      'Roboto Mono',
+      'Oxygen Mono',
+      'Ubuntu Monospace',
+      'Source Code Pro',
+      'Fira Mono',
+      'Droid Sans Mono',
+      'Courier New',
+      'monospace',
+    ],
     sans: [
       '"Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
     ],