Merge pull request #2006 from oasisprotocol/lw/mono-amounts

Use Roboto Mono font for amounts
oasisprotocol · Jul 16, 2024 · fbd656d · fbd656d
2 parents 1f408c3 + f4955f1
commit fbd656d
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 19 deletions.
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/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -345,7 +345,7 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
             <span>
               <div
                 class="c9"
-                style="display: inline-flex; white-space: nowrap;"
+                style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
               >
                 456.542341274
               </div>

diff --git a/src/app/components/AmountFormatter/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AmountFormatter/__tests__/__snapshots__/index.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<AmountFormatter /> should render component 1`] = `
   <span>
     <div
       class="c0"
-      style="display: inline-flex; white-space: nowrap;"
+      style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
     >
       456.542341274
     </div>
@@ -69,7 +69,7 @@ exports[`<AmountFormatter /> should render component with small ticker 1`] = `
   <span>
     <div
       class="c0"
-      style="display: inline-flex; white-space: nowrap;"
+      style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
     >
       456.542341274
     </div>

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/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -465,7 +465,7 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
             <span>
               <div
                 class="c2"
-                style="display: inline-flex; white-space: nowrap;"
+                style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
               >
                 0.000001
               </div>

diff --git a/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap b/src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap
@@ -515,7 +515,7 @@ exports[`<Account  /> should match snapshot 1`] = `
               <span>
                 <div
                   class="c11"
-                  style="display: inline-flex; white-space: nowrap;"
+                  style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   0.000001
                 </div>

diff --git a/...p/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap b/...p/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
@@ -734,7 +734,7 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
                   <span>
                     <div
                       class="c5"
-                      style="display: inline-flex; white-space: nowrap;"
+                      style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                     >
                       0.0000001
                     </div>

diff --git a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
@@ -677,7 +677,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
         <span>
           <div
             class="c15"
-            style="display: inline-flex; white-space: nowrap;"
+            style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
           >
             0.001
           </div>
@@ -1411,7 +1411,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
         <span>
           <div
             class="c15"
-            style="display: inline-flex; white-space: nowrap;"
+            style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
           >
             0.001
           </div>

diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -968,7 +968,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
               <span>
                 <div
                   class="c15"
-                  style="display: inline-flex; white-space: nowrap;"
+                  style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   100.000001111
                 </div>
@@ -991,7 +991,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
               <span>
                 <div
                   class="c15"
-                  style="display: inline-flex; white-space: nowrap;"
+                  style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   100.0
                 </div>
@@ -1015,7 +1015,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
               <span>
                 <div
                   class="c15"
-                  style="display: inline-flex; white-space: nowrap;"
+                  style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   0.000001111
                 </div>
@@ -1038,7 +1038,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
               <span>
                 <div
                   class="c15"
-                  style="display: inline-flex; white-space: nowrap;"
+                  style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                 >
                   0.0
                 </div>

diff --git a/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
@@ -683,7 +683,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
                 <span>
                   <div
                     class="c15"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
                     1.0
                   </div>

diff --git a/...ngPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap b/...ngPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap
@@ -594,7 +594,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                 <span>
                   <div
                     class="c0"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
                     0.0000001
                   </div>

diff --git a/...age/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap b/...age/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap
@@ -582,7 +582,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                 <span>
                   <div
                     class="c0"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
                     0.0000001
                   </div>

diff --git a/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap
@@ -765,7 +765,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 <span>
                   <div
                     class="c0"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
                     0
                   </div>
@@ -837,7 +837,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 <span>
                   <div
                     class="c0"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
                     0
                   </div>
@@ -909,7 +909,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 <span>
                   <div
                     class="c0"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
                     0
                   </div>

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 */
-Original file line number
+Diff line change
@@ Expand Up @@
                 <span>
                   <div
                     class="c2"
-                    style="display: inline-flex; white-space: nowrap;"
+                    style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
                   >
 .000001
                   </div>
@@ Expand Down @@