update css styles (MystenLabs#3228)

ihabhamed · Jul 16, 2022 · b10253f · b10253f
1 parent 5ebf7ab
commit b10253f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/explorer/client/src/pages/transaction-result/SendReceiveView.module.css b/explorer/client/src/pages/transaction-result/SendReceiveView.module.css
@@ -2,17 +2,21 @@
     @apply list-none p-0;
 }
 
-.txaddresssender a,
-.txaddresssender span {
-    @apply pl-2 pr-0;
-}
-
 .txaddresssender a,
 .txaddresssender,
 .txaddress ul li a {
     @apply break-all font-mono text-sm text-sui-dark;
 }
 
+.label span {
+    @apply text-sui-grey-80 font-[500] text-[13px] mb-2;
+}
+
+.recipient.txaddresssender a,
+.recipient.txaddresssender span {
+    @apply pl-2 pr-0;
+}
+
 .txaddress ul li {
     @apply p-1.5 pl-5 md:pl-4 pr-0  ml-2;
 
@@ -21,10 +25,14 @@
 }
 
 .txaddresssender {
-    @apply relative pl-1.5;
+    @apply relative mt-1;
+}
+
+.recipient.txaddresssender {
+    @apply pl-1.5;
 }
 
-.txaddresssender::before {
+.recipient.txaddresssender::before {
     content: '';
     background-image: url('../../assets/SVGIcons/Start.svg');
     background-size: 16px 16px;
@@ -37,7 +45,7 @@
     align-items: center;
 }
 
-.txaddresssender::after {
+.recipient.txaddresssender::after {
     @apply ml-[-0.5rem];
 
     top: 10px;
@@ -55,7 +63,7 @@
 
 .label {
     border-bottom: 1px solid #f0f1f2;
-    @apply text-sui-grey-85 font-[500] text-lg  mt-0 mb-2 border-b-[1px] border-[#f0f1f2] md:border-0;
+    @apply text-sui-grey-100 font-[500] text-lg  mt-0 mb-2 border-b-[1px] border-[#f0f1f2] md:border-0;
 }
 
 .txaddressheader {
@@ -103,7 +111,3 @@
 .txrecipents li :first-child::after {
     height: 20px;
 }
-
-.label span {
-    @apply text-sui-grey-80 font-[500] text-[13px] mb-2;
-}
diff --git a/explorer/client/src/pages/transaction-result/SendReceiveView.tsx b/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
@@ -1,5 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
+import cl from 'classnames';
+
 import Longtext from '../../components/longtext/Longtext';
 
 import styles from './SendReceiveView.module.css';
@@ -21,7 +23,12 @@ function SendRecieveView({ data }: { data: TxAddress }) {
                     )}
                 </h3>
             </div>
-            <div className={styles.txaddresssender}>
+            <div
+                className={cl([
+                    styles.txaddresssender,
+                    data.recipient?.length ? styles.recipient : '',
+                ])}
+            >
                 <Longtext
                     text={data.sender}
                     category="addresses"

diff --git a/explorer/client/src/pages/transaction-result/TransactionResult.module.css b/explorer/client/src/pages/transaction-result/TransactionResult.module.css
@@ -21,7 +21,7 @@
 }
 
 .txsender {
-    @apply col-start-2 md:col-start-3 md:row-start-1 md:row-end-2;
+    @apply col-start-2 md:col-start-3 md:row-start-1 md:row-end-2 mt-1;
 }
 
 .itemviewtitle,

diff --git a/explorer/client/src/pages/transaction-result/TxLinks.module.css b/explorer/client/src/pages/transaction-result/TxLinks.module.css
@@ -1,5 +1,5 @@
 .mutatedcreatedlist ul {
-    @apply list-none p-0 m-0;
+    @apply list-none p-0 m-0 !important;
 }
 
 .mutatedcreatedlist ul li {
@@ -13,7 +13,7 @@
 
 .label {
     border-bottom: 1px solid #f0f1f2;
-    @apply text-sui-grey-85 font-[500] text-lg mb-2 mt-0 border-b-[1px] border-[#f0f1f2] md:border-0;
+    @apply text-sui-grey-100 font-[500] text-lg mb-2 mt-1 border-b-[1px] border-[#f0f1f2] md:border-0;
 }
 
 .moretxbtn {