Use Roboto Mono for amounts

oasisprotocol · Jul 16, 2024 · 0e70833 · 0e70833
1 parent 1f408c3
commit 0e70833
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/.changelog/2006.trivial.md b/.changelog/2006.trivial.md
@@ -0,0 +1 @@
+Use Roboto Mono for amounts
diff --git a/src/app/components/AmountFormatter/index.tsx b/src/app/components/AmountFormatter/index.tsx
@@ -59,7 +59,16 @@ export const AmountFormatter = memo(
 
     return (
       <span>
-        <Box style={{ display: 'inline-flex', whiteSpace: 'nowrap' }}>{amountString}</Box>
+        <Box
+          style={{
+            display: 'inline-flex',
+            whiteSpace: 'nowrap',
+            fontFamily: '"Roboto mono", monospace',
+            letterSpacing: 0,
+          }}
+        >
+          {amountString}
+        </Box>
         {!hideTicker && (
           <Text size={size} {...tickerProps} {...colorProps}>
             <NoTranslate>{` ${ticker}`}</NoTranslate>

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -20,6 +20,18 @@
     url("./../fonts/roboto-mono/roboto-mono-v13-latin-300.woff") format("woff");
 }
 
+/** Use Rubik for "." and "," instead of Roboto Mono. */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    url("./../fonts/rubik/rubik-v20-latin-ext_latin-300.woff2") format("woff2"),
+    url("./../fonts/rubik/rubik-v20-latin-ext_latin-300.woff") format("woff");
+  unicode-range: U+002E, U+002C;
+}
+
 a {
   color: inherit; /* blue colors for links too */
   text-decoration: inherit; /* no underline */