Explore tx 11 (MystenLabs#1852)

* sender added to tx page * fixed latest transactions column alignment issue * fixed latest transactions column alignment bug * lint
futureengco · May 7, 2022 · 3b8a9c2 · 3b8a9c2
1 parent 2a87c3e
commit 3b8a9c2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/explorer/client/src/components/transaction-card/RecentTxCard.module.css b/explorer/client/src/components/transaction-card/RecentTxCard.module.css
@@ -7,7 +7,7 @@ div.txcardgrid h3 {
 }
 
 div.txcard {
-    @apply font-mono md:flex grid items-center bg-center shadow-sm pt-5 pb-5 h-auto border-solid border border-gray-100 pl-5 pr-5 bg-white mt-5 mb-5 text-left;
+    @apply font-mono md:flex grid items-center bg-center shadow-sm pt-5 pb-5 h-auto border-solid border border-gray-100 pl-5 pr-5 bg-white mt-5 mb-5 text-left md:justify-around;
 }
 
 div.txcardgridlarge {
@@ -19,7 +19,7 @@ div.txcardgrid > div {
 }
 
 div.txcardgrid > div:first-child {
-    @apply w-full md:w-1/3;
+    @apply w-full md:w-1/4 lg:w-1/3;
 }
 
 .txlatestesults {
@@ -29,7 +29,7 @@ div.txcardgrid > div:first-child {
 }
 
 div.txadd {
-    @apply flex md:flex-col flex-row;
+    @apply flex md:flex-col flex-row md:w-1/4 lg:w-1/3 w-auto;
 }
 
 .txheader {
@@ -44,6 +44,10 @@ div.txadd {
     @apply md:w-1/12 max-w-sm;
 }
 
+.txstatus {
+    @apply md:w-1/12 max-w-sm;
+}
+
 .txsearch {
     @apply w-full;
 }

diff --git a/explorer/client/src/components/transaction-card/RecentTxCard.tsx b/explorer/client/src/components/transaction-card/RecentTxCard.tsx
@@ -175,7 +175,7 @@ function LatestTxCard() {
                     >
                         <div className={styles.txcardgridlarge}>TxId</div>
                         <div className={styles.txtype}>TxType</div>
-                        <div className={styles.txgas}>Status</div>
+                        <div className={styles.txstatus}>Status</div>
                         <div className={styles.txgas}>Gas</div>
                         <div className={styles.txadd}>Addresses</div>
                     </div>
@@ -198,7 +198,7 @@ function LatestTxCard() {
                             <div
                                 className={cl(
                                     styles[tx.status.toLowerCase()],
-                                    styles.txgas
+                                    styles.txstatus
                                 )}
                             >
                                 {tx.status === 'Success' ? '✔' : '✖'}