[Explorer] Standardizes the headers across Object, Address and Transa…

…ction Results (MystenLabs#3760) * standardize address and object headers * address header has no margin * apply standardized theme to transaction results * changes container label
oursy · Aug 4, 2022 · 276356e · 276356e
1 parent dd37ce1
commit 276356e
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 71 deletions.
diff --git a/explorer/client/src/assets/AddressIcon.svg b/explorer/client/src/assets/AddressIcon.svg
diff --git a/explorer/client/src/pages/address-result/AddressResult.module.css b/explorer/client/src/pages/address-result/AddressResult.module.css
diff --git a/explorer/client/src/pages/address-result/AddressResult.tsx b/explorer/client/src/pages/address-result/AddressResult.tsx
@@ -9,8 +9,7 @@ import GoBack from '../../components/goback/GoBack';
 import Longtext from '../../components/longtext/Longtext';
 import OwnedObjects from '../../components/ownedobjects/OwnedObjects';
 import TxForID from '../../components/transactions-for-id/TxForID';
-
-import styles from './AddressResult.module.css';
+import resultheaderstyle from '../../styles/resultheader.module.css';
 
 type DataType = {
     id: string;
@@ -32,31 +31,29 @@ function AddressResult() {
     if (addressID !== undefined) {
         return (
             <>
-                <GoBack />
-                <div className={styles.results} id="textResults">
-                    <div className={styles.addressid}>
-                        <span>
-                            <AddressIcon /> Address
-                        </span>
-                        <div id="addressID">
-                            <Longtext
-                                text={addressID}
-                                category="addresses"
-                                isLink={false}
-                            />
-                        </div>
+                <div className={resultheaderstyle.btmborder}>
+                    <GoBack />
+                    <div className={resultheaderstyle.category}>
+                        <AddressIcon /> Address
                     </div>
-                    <div>
-                        <h1>Owned Objects</h1>
-                        <div>
-                            {<OwnedObjects id={addressID} byAddress={true} />}
-                        </div>
+                    <div className={resultheaderstyle.address} id="addressID">
+                        <Longtext
+                            text={addressID}
+                            category="addresses"
+                            isLink={false}
+                        />
                     </div>
+                </div>
+                <div>
+                    <h1>Owned Objects</h1>
                     <div>
-                        <h1>Transactions</h1>
-                        <TxForID id={addressID} category="address" />
+                        {<OwnedObjects id={addressID} byAddress={true} />}
                     </div>
                 </div>
+                <div>
+                    <h1>Transactions</h1>
+                    <TxForID id={addressID} category="address" />
+                </div>
             </>
         );
     } else {

diff --git a/explorer/client/src/pages/object-result/views/shared/ObjHeader.module.css b/explorer/client/src/pages/object-result/views/shared/ObjHeader.module.css
@@ -1,17 +1,7 @@
-.objheader {
-    @apply pb-[40px] mb-[30px];
-
-    border-bottom: 1px solid #f0f1f2;
-}
-
-.objtypes {
-    @apply text-sui-grey-85 font-semibold mt-10 text-lg mb-3;
-}
-
-.objaddress {
-    @apply text-offblack font-bold text-lg md:text-2xl font-mono break-all block items-center mb-2.5;
-}
-
 .objname {
     @apply text-sui-grey-75 font-semibold text-[1.125rem] leading-[1.125rem];
 }
+
+.objcontainer {
+    @apply pb-[40px] mb-[30px];
+}
diff --git a/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx b/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
@@ -1,8 +1,10 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
+
 import { ReactComponent as ObjIcon } from '../../../../assets/SVGIcons/Call.svg';
 import GoBack from '../../../../components/goback/GoBack';
 import Longtext from '../../../../components/longtext/Longtext';
+import resultheaderstyle from '../../../../styles/resultheader.module.css';
 
 import styles from './ObjHeader.module.css';
 
@@ -14,12 +16,14 @@ type ObjHeaderData = {
 
 function ObjAddressHeader({ data }: { data: ObjHeaderData }) {
     return (
-        <div className={styles.objheader}>
+        <div
+            className={`${resultheaderstyle.btmborder} ${styles.objcontainer}`}
+        >
             <GoBack />
-            <div className={styles.objtypes}>
+            <div className={resultheaderstyle.category}>
                 <ObjIcon /> {data.objKind}
             </div>
-            <div className={styles.objaddress}>
+            <div className={resultheaderstyle.address}>
                 <Longtext text={data.objId} category="objects" isLink={false} />
             </div>
             {data.objName && (

diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
@@ -8,14 +8,6 @@
     box-sizing: border-box;
 }
 
-.txtypes {
-    @apply text-sui-dark font-[500] mt-10 text-lg mb-2;
-}
-
-.txid {
-    @apply text-offblack font-[600] text-lg md:text-2xl font-mono break-all block items-center;
-}
-
 .txaddress {
     @apply block md:flex justify-start align-middle items-center;
 

diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as ContentFailedStatus } from '../../assets/SVGIcons/fai
 import { ReactComponent as ContentSuccessStatus } from '../../assets/SVGIcons/success.svg';
 import GoBack from '../../components/goback/GoBack';
 import Longtext from '../../components/longtext/Longtext';
+import resultheaderstyle from '../../styles/resultheader.module.css';
 
 import type { ExecutionStatusType, TransactionKindName } from '@mysten/sui.js';
 
@@ -45,11 +46,13 @@ function TxAddressHeader({ data }: { data: TxResultState }) {
     return (
         <div className={styles.txheader}>
             <GoBack />
-            <div className={styles.txtypes}>
+            <div className={resultheaderstyle.category}>
                 <Icon /> {TxKindName}
             </div>
-            <div className={styles.txid}>
-                <div className={styles.txaddress}>
+            <div>
+                <div
+                    className={cl(resultheaderstyle.address, styles.txaddress)}
+                >
                     <Longtext
                         text={data.txId}
                         category="addresses"

diff --git a/explorer/client/src/styles/resultheader.module.css b/explorer/client/src/styles/resultheader.module.css
@@ -0,0 +1,11 @@
+.btmborder {
+    border-bottom: 1px solid #f0f1f2;
+}
+
+.category {
+    @apply text-sui-grey-85 font-semibold mt-10 text-lg mb-3;
+}
+
+.address {
+    @apply text-offblack font-bold text-lg md:text-2xl font-mono break-all block items-center mb-2.5;
+}