Merge pull request #2010 from oasisprotocol/lw/smaller-tx-fields

Make more transaction fields smaller
oasisprotocol · Jul 16, 2024 · 2f1b901 · 2f1b901
2 parents 5dd71b2 + a22f018
commit 2f1b901
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 46 deletions.
diff --git a/.changelog/2010.trivial.md b/.changelog/2010.trivial.md
@@ -0,0 +1 @@
+Make more transaction fields smaller
diff --git a/src/app/components/AddressFormatter/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddressFormatter/__tests__/__snapshots__/index.test.tsx.snap
@@ -29,8 +29,8 @@ exports[`<AddressFormatter  /> should match snapshot 1`] = `
 }
 
 .c3 {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: inherit;
+  line-height: normal;
 }
 
 .c2 {

diff --git a/src/app/components/AddressFormatter/index.tsx b/src/app/components/AddressFormatter/index.tsx
@@ -32,8 +32,14 @@ export const AddressFormatter = (props: AddressFormatterProps) => {
 
   return (
     <StyledBox>
-      {name && <StyledText data-testid="address-formatter-name">{name}</StyledText>}
-      <Text style={{ overflowWrap: 'anywhere' }}>{trimLongString(props.address)}</Text>
+      {name && (
+        <StyledText size="inherit" data-testid="address-formatter-name">
+          {name}
+        </StyledText>
+      )}
+      <Text size="inherit" style={{ overflowWrap: 'anywhere' }}>
+        {trimLongString(props.address)}
+      </Text>
     </StyledBox>
   )
 }
diff --git a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
@@ -230,7 +230,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   justify-content: center;
 }
 
-.c17 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -245,7 +245,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   padding: 12px;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,7 +260,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   padding-right: 12px;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -296,7 +296,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   width: 12px;
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -311,7 +311,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   cursor: pointer;
 }
 
-.c23:hover {
+.c24:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -340,34 +340,39 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
 }
 
 .c16 {
+  font-size: inherit;
+  line-height: normal;
+}
+
+.c17 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c19 {
+.c20 {
   margin-bottom: 6px;
   font-size: 26px;
   line-height: 32px;
   text-align: right;
   font-weight: bold;
 }
 
-.c20 {
+.c21 {
   font-size: 12px;
   line-height: 18px;
   color: ticker;
   font-weight: 600;
 }
 
-.c21 {
+.c22 {
   font-size: 14px;
   line-height: 20px;
   text-align: right;
   color: successful-label;
   font-weight: bold;
 }
 
-.c24 {
+.c25 {
   font-size: 14px;
   line-height: 20px;
 }
@@ -451,13 +456,13 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
 }
 
 @media only screen and (max-width:768px) {
-  .c17 {
+  .c18 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c18 {
+  .c19 {
     padding-right: 6px;
   }
 }
@@ -600,7 +605,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
                 common.hash
               </span>
               <span
-                class="c16"
+                class="c17"
               >
                 ff1234
               </span>
@@ -611,7 +616,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
           class="c9"
         >
           <div
-            class="c17"
+            class="c18"
           >
             <div
               class="c11"
@@ -652,10 +657,10 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
       </div>
     </div>
     <div
-      class="c18"
+      class="c19"
     >
       <span
-        class="c19"
+        class="c20"
       >
         <span>
           <div
@@ -665,7 +670,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
             0.001
           </div>
           <span
-            class="c20"
+            class="c21"
           >
             <span
               class="notranslate"
@@ -677,7 +682,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
         </span>
       </span>
       <span
-        class="c21"
+        class="c22"
       >
         <span>
           account.transaction.successful
@@ -686,17 +691,17 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
     </div>
   </div>
   <footer
-    class="c22"
+    class="c23"
   >
     <a
-      class="c23"
+      class="c24"
       data-testid="explorer-link"
       href="https://oasisscan.com/transactions/ff1234"
       rel="noopener"
       target="_blank"
     >
       <span
-        class="c24"
+        class="c25"
       >
         account.transaction.explorerLink
       </span>
@@ -947,7 +952,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   justify-content: center;
 }
 
-.c17 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -962,7 +967,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   padding: 12px;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -977,7 +982,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   padding-right: 12px;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1013,7 +1018,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   width: 12px;
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1028,7 +1033,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c23:hover {
+.c24:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -1057,34 +1062,39 @@ exports[`<Transaction  /> should match snapshot 1`] = `
 }
 
 .c16 {
+  font-size: inherit;
+  line-height: normal;
+}
+
+.c17 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c19 {
+.c20 {
   margin-bottom: 6px;
   font-size: 26px;
   line-height: 32px;
   text-align: right;
   font-weight: bold;
 }
 
-.c20 {
+.c21 {
   font-size: 12px;
   line-height: 18px;
   color: ticker;
   font-weight: 600;
 }
 
-.c21 {
+.c22 {
   font-size: 14px;
   line-height: 20px;
   text-align: right;
   color: successful-label;
   font-weight: bold;
 }
 
-.c24 {
+.c25 {
   font-size: 14px;
   line-height: 20px;
 }
@@ -1168,13 +1178,13 @@ exports[`<Transaction  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c17 {
+  .c18 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c18 {
+  .c19 {
     padding-right: 6px;
   }
 }
@@ -1317,7 +1327,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
                 common.hash
               </span>
               <span
-                class="c16"
+                class="c17"
               >
                 ff1234
               </span>
@@ -1328,7 +1338,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
           class="c9"
         >
           <div
-            class="c17"
+            class="c18"
           >
             <div
               class="c11"
@@ -1369,10 +1379,10 @@ exports[`<Transaction  /> should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c18"
+      class="c19"
     >
       <span
-        class="c19"
+        class="c20"
       >
         <span>
           <div
@@ -1382,7 +1392,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
             0.001
           </div>
           <span
-            class="c20"
+            class="c21"
           >
             <span
               class="notranslate"
@@ -1394,7 +1404,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
         </span>
       </span>
       <span
-        class="c21"
+        class="c22"
       >
         <span>
           account.transaction.successful
@@ -1403,17 +1413,17 @@ exports[`<Transaction  /> should match snapshot 1`] = `
     </div>
   </div>
   <footer
-    class="c22"
+    class="c23"
   >
     <a
-      class="c23"
+      class="c24"
       data-testid="explorer-link"
       href="https://oasisscan.com/transactions/ff1234"
       rel="noopener"
       target="_blank"
     >
       <span
-        class="c24"
+        class="c25"
       >
         account.transaction.explorerLink
       </span>

diff --git a/src/app/components/Transaction/index.tsx b/src/app/components/Transaction/index.tsx
@@ -432,7 +432,7 @@ export function Transaction(props: TransactionProps) {
         <Box>
           {isMobile && (
             <Box pad={{ left: 'small' }}>
-              <Text size="16px" margin={{ bottom: 'xsmall' }}>
+              <Text size="small" margin={{ bottom: 'xsmall' }}>
                 {otherAddress ? (
                   <AddressFormatter address={otherAddress} />
                 ) : (
@@ -487,7 +487,7 @@ export function Transaction(props: TransactionProps) {
         <Box pad={{ right: 'small' }}>
           <Text
             weight="bold"
-            size={isMobile ? 'medium' : 'xlarge'}
+            size={isMobile ? 'small' : 'xlarge'}
             margin={{ bottom: 'xsmall' }}
             textAlign="end"
           >