From 10769feb1e72bcd8e95f8ed442565d0f8c7463b3 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Wed, 7 Sep 2022 11:34:37 +0100
Subject: [PATCH 01/12] sets default copy icon size at 14px

---
 explorer/client/src/assets/SVGIcons/Copy.svg                | 2 +-
 explorer/client/src/components/longtext/Longtext.module.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/explorer/client/src/assets/SVGIcons/Copy.svg b/explorer/client/src/assets/SVGIcons/Copy.svg
index 00c727a2ce632..c8e50c5e914d2 100644
--- a/explorer/client/src/assets/SVGIcons/Copy.svg
+++ b/explorer/client/src/assets/SVGIcons/Copy.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 16 18" height="14" preserveAspectRatio="xMaxYMax meet" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M4 3H2.93103C1.86455 3 1 3.86455 1 4.93103V15.069C1 16.1354 1.86455 17 2.93103 17H13.069C14.1354 17 15 16.1354 15 15.069V4.93103C15 3.86455 14.1354 3 13.069 3H12" stroke="#A0B6C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M4 2.5C4 1.67157 4.67157 1 5.5 1H10.5C11.3284 1 12 1.67157 12 2.5V3.5C12 4.32843 11.3284 5 10.5 5H5.5C4.67157 5 4 4.32843 4 3.5V2.5Z" stroke="#A0B6C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index c15ee7ed52dec..a1329c2b53b3e 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,7 +1,7 @@
 .copy {
     @apply cursor-pointer mr-2;
 
-    /* fix some wiered vertical spacing svg with copy 16px is the high of svg */
+    /* fix some weird vertical spacing svg with copy 16px is the high of svg */
     font-size: 16px !important;
     vertical-align: middle;
     line-height: 100%;

From c7fb112921de1250bae13d66080c8497ae36d9a1 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Wed, 7 Sep 2022 11:48:03 +0100
Subject: [PATCH 02/12] enlarges the copy icon for IDs at the top of results
 pages

---
 explorer/client/src/styles/resultheader.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/explorer/client/src/styles/resultheader.module.css b/explorer/client/src/styles/resultheader.module.css
index 0e206e6c75c22..48fd05a8b24b6 100644
--- a/explorer/client/src/styles/resultheader.module.css
+++ b/explorer/client/src/styles/resultheader.module.css
@@ -9,3 +9,7 @@
 .address {
     @apply text-offblack font-bold text-lg md:text-2xl font-mono break-all block items-center mb-2.5;
 }
+
+.address svg {
+    @apply h-[18px];
+}

From 39b9456e5c24b75d4d23e565e47f058141c9acd5 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 14:58:54 +0100
Subject: [PATCH 03/12] splits copy button into 2 entities and makes no copy
 button the default

---
 explorer/client/src/assets/SVGIcons/16px/Copy.svg |  4 ++++
 explorer/client/src/assets/SVGIcons/24px/Copy.svg |  4 ++++
 explorer/client/src/assets/SVGIcons/Copy.svg      |  4 ----
 .../src/components/longtext/Longtext.module.css   |  2 ++
 .../client/src/components/longtext/Longtext.tsx   | 15 ++++++++++-----
 .../ownedobjects/views/OwnedCoinView.tsx          |  1 -
 .../ownedobjects/views/OwnedNFTView.tsx           |  1 -
 .../client/src/components/table/TableCard.tsx     |  2 +-
 .../src/components/top-groups/TopGroups.tsx       |  1 -
 .../top-validators-card/TopValidatorsCard.tsx     |  2 --
 .../src/pages/address-result/AddressResult.tsx    |  1 +
 .../src/pages/object-result/views/PkgView.tsx     |  2 --
 .../src/pages/object-result/views/TokenView.tsx   |  3 ---
 .../object-result/views/shared/ObjHeader.tsx      |  7 ++++++-
 .../pages/transaction-result/SendReceiveView.tsx  |  2 --
 .../pages/transaction-result/TransactionView.tsx  |  8 ++------
 .../src/pages/transaction-result/TxLinks.tsx      |  1 +
 .../pages/transaction-result/TxResultHeader.tsx   |  1 +
 .../client/src/pages/validators/Validators.tsx    |  2 --
 .../client/src/styles/resultheader.module.css     |  4 ----
 20 files changed, 32 insertions(+), 35 deletions(-)
 create mode 100644 explorer/client/src/assets/SVGIcons/16px/Copy.svg
 create mode 100644 explorer/client/src/assets/SVGIcons/24px/Copy.svg
 delete mode 100644 explorer/client/src/assets/SVGIcons/Copy.svg

diff --git a/explorer/client/src/assets/SVGIcons/16px/Copy.svg b/explorer/client/src/assets/SVGIcons/16px/Copy.svg
new file mode 100644
index 0000000000000..9838dca2630b2
--- /dev/null
+++ b/explorer/client/src/assets/SVGIcons/16px/Copy.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33337 4H4.62073C3.90974 4 3.33337 4.57637 3.33337 5.28736V12.046C3.33337 12.757 3.90974 13.3333 4.62073 13.3333H11.3794C12.0903 13.3333 12.6667 12.757 12.6667 12.046V5.28736C12.6667 4.57637 12.0903 4 11.3794 4H10.6667" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33337 3.66666C5.33337 3.11437 5.78109 2.66666 6.33337 2.66666H9.66671C10.219 2.66666 10.6667 3.11437 10.6667 3.66666V4.33332C10.6667 4.88561 10.219 5.33332 9.66671 5.33332H6.33337C5.78109 5.33332 5.33337 4.88561 5.33337 4.33332V3.66666Z" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/explorer/client/src/assets/SVGIcons/24px/Copy.svg b/explorer/client/src/assets/SVGIcons/24px/Copy.svg
new file mode 100644
index 0000000000000..a71ba4ec11a42
--- /dev/null
+++ b/explorer/client/src/assets/SVGIcons/24px/Copy.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6H6.93103C5.86455 6 5 6.86455 5 7.93103V18.069C5 19.1354 5.86455 20 6.93103 20H17.069C18.1354 20 19 19.1354 19 18.069V7.93103C19 6.86455 18.1354 6 17.069 6H16" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.5C8 4.67157 8.67157 4 9.5 4H14.5C15.3284 4 16 4.67157 16 5.5V6.5C16 7.32843 15.3284 8 14.5 8H9.5C8.67157 8 8 7.32843 8 6.5V5.5Z" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/explorer/client/src/assets/SVGIcons/Copy.svg b/explorer/client/src/assets/SVGIcons/Copy.svg
deleted file mode 100644
index c8e50c5e914d2..0000000000000
--- a/explorer/client/src/assets/SVGIcons/Copy.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 16 18" height="14" preserveAspectRatio="xMaxYMax meet" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 3H2.93103C1.86455 3 1 3.86455 1 4.93103V15.069C1 16.1354 1.86455 17 2.93103 17H13.069C14.1354 17 15 16.1354 15 15.069V4.93103C15 3.86455 14.1354 3 13.069 3H12" stroke="#A0B6C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 2.5C4 1.67157 4.67157 1 5.5 1H10.5C11.3284 1 12 1.67157 12 2.5V3.5C12 4.32843 11.3284 5 10.5 5H5.5C4.67157 5 4 4.32843 4 3.5V2.5Z" stroke="#A0B6C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index a1329c2b53b3e..89111ef72146e 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -23,3 +23,5 @@
 .longtextwrapper {
     @apply inline md:block min-w-fit;
 }
+
+
diff --git a/explorer/client/src/components/longtext/Longtext.tsx b/explorer/client/src/components/longtext/Longtext.tsx
index 146385865cf10..bddbcfdeb1eac 100644
--- a/explorer/client/src/components/longtext/Longtext.tsx
+++ b/explorer/client/src/components/longtext/Longtext.tsx
@@ -4,7 +4,8 @@
 import { useCallback, useState, useContext } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
-import { ReactComponent as ContentCopyIcon } from '../../assets/SVGIcons/Copy.svg';
+import { ReactComponent as ContentCopyIcon16 } from '../../assets/SVGIcons/16px/Copy.svg';
+import { ReactComponent as ContentCopyIcon24 } from '../../assets/SVGIcons/24px/Copy.svg';
 import { ReactComponent as ContentForwardArrowDark } from '../../assets/SVGIcons/forward-arrow-dark.svg';
 import { NetworkContext } from '../../context';
 import { navigateWithUnknown } from '../../utils/searchUtil';
@@ -17,7 +18,7 @@ function Longtext({
     category = 'unknown',
     isLink = true,
     alttext = '',
-    isCopyButton = true,
+    copyButton = 'none',
     showIconButton = false,
 }: {
     text: string;
@@ -30,7 +31,7 @@ function Longtext({
         | 'unknown';
     isLink?: boolean;
     alttext?: string;
-    isCopyButton?: boolean;
+    copyButton?: '16' | '24' | 'none';
     showIconButton?: boolean;
 }) {
     const [isCopyIcon, setCopyIcon] = useState(true);
@@ -48,13 +49,17 @@ function Longtext({
     let icon;
     let iconButton = <></>;
 
-    if (isCopyButton) {
+    if (copyButton !== 'none') {
         if (pleaseWait) {
             icon = <span className={styles.copied}>&#8987; Please Wait</span>;
         } else if (isCopyIcon) {
             icon = (
                 <span className={styles.copy} onClick={handleCopyEvent}>
-                    <ContentCopyIcon />
+                    {copyButton === '16' ? (
+                        <ContentCopyIcon16 />
+                    ) : (
+                        <ContentCopyIcon24 />
+                    )}
                 </span>
             );
         } else {
diff --git a/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx b/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx
index cebb7759a98c2..4549325f999dc 100644
--- a/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx
+++ b/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx
@@ -65,7 +65,6 @@ function SingleCoinView({
                                     <Longtext
                                         text={subObj.id}
                                         category="objects"
-                                        isCopyButton={false}
                                     />
                                 </div>
                                 <div />
diff --git a/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx b/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx
index a4970237b0bd1..95c48d4a8e103 100644
--- a/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx
+++ b/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx
@@ -23,7 +23,6 @@ export default function OwnedNFTView({ results }: { results: DataType }) {
                             <Longtext
                                 text={entryObj.id}
                                 category="objects"
-                                isCopyButton={false}
                                 alttext={alttextgen(entryObj.id)}
                             />
                         </div>
diff --git a/explorer/client/src/components/table/TableCard.tsx b/explorer/client/src/components/table/TableCard.tsx
index 995389b0c29e7..12fdc79861b5a 100644
--- a/explorer/client/src/components/table/TableCard.tsx
+++ b/explorer/client/src/components/table/TableCard.tsx
@@ -66,7 +66,7 @@ export function TxAddresses({ content }: { content: LinkObj[] }) {
                         alttext={itm.name}
                         category={(itm.category as Category) || 'unknown'}
                         isLink={itm?.isLink}
-                        isCopyButton={itm?.copy}
+                        copyButton={itm?.copy ? '16' : 'none'}
                     />
                     {idx !== content.length - 1 && <ContentForwardArrow />}
                 </div>
diff --git a/explorer/client/src/components/top-groups/TopGroups.tsx b/explorer/client/src/components/top-groups/TopGroups.tsx
index 52d61c05ca91c..bcaec42cd9e0d 100644
--- a/explorer/client/src/components/top-groups/TopGroups.tsx
+++ b/explorer/client/src/components/top-groups/TopGroups.tsx
@@ -125,7 +125,6 @@ function TopGroupsCard() {
                             text=""
                             category="transactions"
                             isLink={true}
-                            isCopyButton={false}
                             showIconButton={true}
                             alttext="More NFT Collections"
                         />
diff --git a/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx b/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
index 6f43f363f0d96..119a36877ac3c 100644
--- a/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
+++ b/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -98,7 +98,6 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
                     alttext={truncate(validator.address, 14)}
                     category={'addresses'}
                     isLink={true}
-                    isCopyButton={false}
                 />
             ),
             pubkeyBytes: (
@@ -107,7 +106,6 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
                     alttext={truncate(validator.pubkeyBytes, 14)}
                     category={'addresses'}
                     isLink={false}
-                    isCopyButton={false}
                 />
             ),
         })),
diff --git a/explorer/client/src/pages/address-result/AddressResult.tsx b/explorer/client/src/pages/address-result/AddressResult.tsx
index a5fab48038e85..dc4a4ff110c7f 100644
--- a/explorer/client/src/pages/address-result/AddressResult.tsx
+++ b/explorer/client/src/pages/address-result/AddressResult.tsx
@@ -39,6 +39,7 @@ function AddressResult() {
                             text={addressID}
                             category="addresses"
                             isLink={false}
+                            copyButton="24"
                         />
                     </div>
                 </div>
diff --git a/explorer/client/src/pages/object-result/views/PkgView.tsx b/explorer/client/src/pages/object-result/views/PkgView.tsx
index 0fc7bb5e277a5..cb0e96a903174 100644
--- a/explorer/client/src/pages/object-result/views/PkgView.tsx
+++ b/explorer/client/src/pages/object-result/views/PkgView.tsx
@@ -48,7 +48,6 @@ function PkgView({ data }: { data: DataType }) {
                                         text={viewedData.id}
                                         category="objects"
                                         isLink={false}
-                                        isCopyButton={false}
                                     />
                                 </td>
                             </tr>
@@ -66,7 +65,6 @@ function PkgView({ data }: { data: DataType }) {
                                             text={viewedData.publisherAddress}
                                             category="addresses"
                                             isLink={!isPublisherGenesis}
-                                            isCopyButton={false}
                                         />
                                     </td>
                                 </tr>
diff --git a/explorer/client/src/pages/object-result/views/TokenView.tsx b/explorer/client/src/pages/object-result/views/TokenView.tsx
index a688fccc0f19b..7d77234d20af7 100644
--- a/explorer/client/src/pages/object-result/views/TokenView.tsx
+++ b/explorer/client/src/pages/object-result/views/TokenView.tsx
@@ -100,7 +100,6 @@ function TokenView({ data }: { data: DataType }) {
                                         text={viewedData.id}
                                         category="objects"
                                         isLink={false}
-                                        isCopyButton={false}
                                     />
                                 </td>
                             </tr>
@@ -113,7 +112,6 @@ function TokenView({ data }: { data: DataType }) {
                                             text={viewedData.tx_digest}
                                             category="transactions"
                                             isLink={true}
-                                            isCopyButton={false}
                                         />
                                     </td>
                                 </tr>
@@ -138,7 +136,6 @@ function TokenView({ data }: { data: DataType }) {
                                             viewedData.owner !== 'Immutable' &&
                                             viewedData.owner !== 'Shared'
                                         }
-                                        isCopyButton={false}
                                     />
                                 </td>
                             </tr>
diff --git a/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx b/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
index 2c51252ae1d89..201529d75d5ae 100644
--- a/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
+++ b/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
@@ -22,7 +22,12 @@ function ObjAddressHeader({ data }: { data: ObjHeaderData }) {
                 <ObjIcon /> {data.objKind}
             </div>
             <div className={resultheaderstyle.address}>
-                <Longtext text={data.objId} category="objects" isLink={false} />
+                <Longtext
+                    text={data.objId}
+                    category="objects"
+                    isLink={false}
+                    copyButton="24"
+                />
             </div>
             {data.objName && (
                 <div className={styles.objname}>{data.objName}</div>
diff --git a/explorer/client/src/pages/transaction-result/SendReceiveView.tsx b/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
index 402755760eb41..d351ce712e5b3 100644
--- a/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
+++ b/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
@@ -32,7 +32,6 @@ function SendRecieveView({ data }: { data: TxAddress }) {
                 <Longtext
                     text={data.sender}
                     category="addresses"
-                    isCopyButton={false}
                     isLink={true}
                 />
                 {data.recipient && (
@@ -43,7 +42,6 @@ function SendRecieveView({ data }: { data: TxAddress }) {
                                     text={add}
                                     category="addresses"
                                     isLink={true}
-                                    isCopyButton={false}
                                     alttext={add}
                                 />
                             </li>
diff --git a/explorer/client/src/pages/transaction-result/TransactionView.tsx b/explorer/client/src/pages/transaction-result/TransactionView.tsx
index a7d527c940028..3413df3c75899 100644
--- a/explorer/client/src/pages/transaction-result/TransactionView.tsx
+++ b/explorer/client/src/pages/transaction-result/TransactionView.tsx
@@ -212,6 +212,7 @@ function ItemView({ data }: { data: TxItemView }) {
                                         text={item.value as string}
                                         category={item.category as Category}
                                         isLink={true}
+                                        copyButton="16"
                                     />
                                 ) : item.href ? (
                                     <Link
@@ -267,12 +268,7 @@ function TransactionView({ txdata }: { txdata: DataType }) {
 
     let eventTitlesDisplay = eventTitles.map((et) => (
         <div key={et} className={styles.eventtitle}>
-            <Longtext
-                text={et}
-                category={'unknown'}
-                isCopyButton={false}
-                isLink={false}
-            />
+            <Longtext text={et} category={'unknown'} isLink={false} />
         </div>
     ));
 
diff --git a/explorer/client/src/pages/transaction-result/TxLinks.tsx b/explorer/client/src/pages/transaction-result/TxLinks.tsx
index 0df37d92cb16e..07a09525d6808 100644
--- a/explorer/client/src/pages/transaction-result/TxLinks.tsx
+++ b/explorer/client/src/pages/transaction-result/TxLinks.tsx
@@ -39,6 +39,7 @@ function TxLinks({ data }: { data: Addresslist }) {
                                     text={objId}
                                     category={data?.category as Category}
                                     isLink={true}
+                                    copyButton="16"
                                 />
                             </li>
                         ))}
diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
index aa2d150c25e5b..dd490d0bf6b90 100644
--- a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
+++ b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
@@ -56,6 +56,7 @@ function TxAddressHeader({ data }: { data: TxResultState }) {
                         text={data.txId}
                         category="addresses"
                         isLink={false}
+                        copyButton="24"
                     />
                     <div
                         className={cl([
diff --git a/explorer/client/src/pages/validators/Validators.tsx b/explorer/client/src/pages/validators/Validators.tsx
index 225d2043325e5..abeea64fa1d1c 100644
--- a/explorer/client/src/pages/validators/Validators.tsx
+++ b/explorer/client/src/pages/validators/Validators.tsx
@@ -185,7 +185,6 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
                         alttext={truncate(validator.pubkeyBytes, 14)}
                         category={'addresses'}
                         isLink={false}
-                        isCopyButton={false}
                     />
                 ),
             };
@@ -222,7 +221,6 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
                             text=""
                             category="validators"
                             isLink={false}
-                            isCopyButton={false}
                             alttext=""
                         />
                     </TabFooter>
diff --git a/explorer/client/src/styles/resultheader.module.css b/explorer/client/src/styles/resultheader.module.css
index 48fd05a8b24b6..0e206e6c75c22 100644
--- a/explorer/client/src/styles/resultheader.module.css
+++ b/explorer/client/src/styles/resultheader.module.css
@@ -9,7 +9,3 @@
 .address {
     @apply text-offblack font-bold text-lg md:text-2xl font-mono break-all block items-center mb-2.5;
 }
-
-.address svg {
-    @apply h-[18px];
-}

From 3ebbe2eee99f16fb48f67ae3da1cb61693a8c34f Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 15:06:20 +0100
Subject: [PATCH 04/12] set stroke colour

---
 explorer/client/src/assets/SVGIcons/16px/Copy.svg           | 4 ++--
 explorer/client/src/assets/SVGIcons/24px/Copy.svg           | 4 ++--
 explorer/client/src/components/longtext/Longtext.module.css | 4 +---
 explorer/client/tailwind.config.js                          | 3 +++
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/explorer/client/src/assets/SVGIcons/16px/Copy.svg b/explorer/client/src/assets/SVGIcons/16px/Copy.svg
index 9838dca2630b2..a6fd25805cba2 100644
--- a/explorer/client/src/assets/SVGIcons/16px/Copy.svg
+++ b/explorer/client/src/assets/SVGIcons/16px/Copy.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.33337 4H4.62073C3.90974 4 3.33337 4.57637 3.33337 5.28736V12.046C3.33337 12.757 3.90974 13.3333 4.62073 13.3333H11.3794C12.0903 13.3333 12.6667 12.757 12.6667 12.046V5.28736C12.6667 4.57637 12.0903 4 11.3794 4H10.6667" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.33337 3.66666C5.33337 3.11437 5.78109 2.66666 6.33337 2.66666H9.66671C10.219 2.66666 10.6667 3.11437 10.6667 3.66666V4.33332C10.6667 4.88561 10.219 5.33332 9.66671 5.33332H6.33337C5.78109 5.33332 5.33337 4.88561 5.33337 4.33332V3.66666Z" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33337 4H4.62073C3.90974 4 3.33337 4.57637 3.33337 5.28736V12.046C3.33337 12.757 3.90974 13.3333 4.62073 13.3333H11.3794C12.0903 13.3333 12.6667 12.757 12.6667 12.046V5.28736C12.6667 4.57637 12.0903 4 11.3794 4H10.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33337 3.66666C5.33337 3.11437 5.78109 2.66666 6.33337 2.66666H9.66671C10.219 2.66666 10.6667 3.11437 10.6667 3.66666V4.33332C10.6667 4.88561 10.219 5.33332 9.66671 5.33332H6.33337C5.78109 5.33332 5.33337 4.88561 5.33337 4.33332V3.66666Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/explorer/client/src/assets/SVGIcons/24px/Copy.svg b/explorer/client/src/assets/SVGIcons/24px/Copy.svg
index a71ba4ec11a42..442083987945d 100644
--- a/explorer/client/src/assets/SVGIcons/24px/Copy.svg
+++ b/explorer/client/src/assets/SVGIcons/24px/Copy.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 6H6.93103C5.86455 6 5 6.86455 5 7.93103V18.069C5 19.1354 5.86455 20 6.93103 20H17.069C18.1354 20 19 19.1354 19 18.069V7.93103C19 6.86455 18.1354 6 17.069 6H16" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 5.5C8 4.67157 8.67157 4 9.5 4H14.5C15.3284 4 16 4.67157 16 5.5V6.5C16 7.32843 15.3284 8 14.5 8H9.5C8.67157 8 8 7.32843 8 6.5V5.5Z" stroke="#3D444D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 6H6.93103C5.86455 6 5 6.86455 5 7.93103V18.069C5 19.1354 5.86455 20 6.93103 20H17.069C18.1354 20 19 19.1354 19 18.069V7.93103C19 6.86455 18.1354 6 17.069 6H16" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.5C8 4.67157 8.67157 4 9.5 4H14.5C15.3284 4 16 4.67157 16 5.5V6.5C16 7.32843 15.3284 8 14.5 8H9.5C8.67157 8 8 7.32843 8 6.5V5.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index 89111ef72146e..82b5a46b5893f 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,5 +1,5 @@
 .copy {
-    @apply cursor-pointer mr-2;
+    @apply cursor-pointer mr-2 stroke-sui-blue-steel;
 
     /* fix some weird vertical spacing svg with copy 16px is the high of svg */
     font-size: 16px !important;
@@ -23,5 +23,3 @@
 .longtextwrapper {
     @apply inline md:block min-w-fit;
 }
-
-
diff --git a/explorer/client/tailwind.config.js b/explorer/client/tailwind.config.js
index 5b4b87f5af6c3..4b5d6a207ac4a 100644
--- a/explorer/client/tailwind.config.js
+++ b/explorer/client/tailwind.config.js
@@ -32,6 +32,9 @@ module.exports = {
                         40: '#F7F8F8',
                         35: '#FEFEFE',
                     },
+                    blue: {
+                        steel: '#A0B6C3',
+                    },
                 },
                 issue: {
                     dark: '#EB5A29',

From 03e0d476553403faca875f6488b2d9fba77494e3 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 18:28:32 +0100
Subject: [PATCH 05/12] the smaller copy icon disappears on mobile

---
 .../components/longtext/Longtext.module.css   | 14 ++++-----
 .../src/components/longtext/Longtext.tsx      | 31 ++++++++++++-------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index 82b5a46b5893f..1464cd2de0f3a 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,10 +1,10 @@
-.copy {
-    @apply cursor-pointer mr-2 stroke-sui-blue-steel;
+.copy16,
+.copy24 {
+    @apply cursor-pointer mr-2 stroke-sui-blue-steel leading-[100%];
+}
 
-    /* fix some weird vertical spacing svg with copy 16px is the high of svg */
-    font-size: 16px !important;
-    vertical-align: middle;
-    line-height: 100%;
+.copy16 {
+    @apply hidden sm:block;
 }
 
 .copied {
@@ -21,5 +21,5 @@
 }
 
 .longtextwrapper {
-    @apply inline md:block min-w-fit;
+    @apply flex items-center min-w-fit;
 }
diff --git a/explorer/client/src/components/longtext/Longtext.tsx b/explorer/client/src/components/longtext/Longtext.tsx
index bddbcfdeb1eac..9d36b08c09fe6 100644
--- a/explorer/client/src/components/longtext/Longtext.tsx
+++ b/explorer/client/src/components/longtext/Longtext.tsx
@@ -51,16 +51,21 @@ function Longtext({
 
     if (copyButton !== 'none') {
         if (pleaseWait) {
-            icon = <span className={styles.copied}>&#8987; Please Wait</span>;
+            icon = <div className={styles.copied}>&#8987; Please Wait</div>;
         } else if (isCopyIcon) {
             icon = (
-                <span className={styles.copy} onClick={handleCopyEvent}>
+                <div
+                    className={
+                        copyButton === '16' ? styles.copy16 : styles.copy24
+                    }
+                    onClick={handleCopyEvent}
+                >
                     {copyButton === '16' ? (
                         <ContentCopyIcon16 />
                     ) : (
                         <ContentCopyIcon24 />
                     )}
-                </span>
+                </div>
             );
         } else {
             icon = <span className={styles.copied}>&#10003; Copied</span>;
@@ -93,9 +98,9 @@ function Longtext({
     if (isLink) {
         if (category === 'unknown') {
             textComponent = (
-                <span className={styles.longtext} onClick={navigateUnknown}>
+                <div className={styles.longtext} onClick={navigateUnknown}>
                     {alttext ? alttext : text}
-                </span>
+                </div>
             );
         } else if (category === 'ethAddress') {
             textComponent = (
@@ -107,17 +112,19 @@ function Longtext({
             );
         } else {
             textComponent = (
-                <Link
-                    className={styles.longtext}
-                    to={`/${category}/${encodeURIComponent(text)}`}
-                >
-                    {alttext ? alttext : text} {iconButton}
-                </Link>
+                <div>
+                    <Link
+                        className={styles.longtext}
+                        to={`/${category}/${encodeURIComponent(text)}`}
+                    >
+                        {alttext ? alttext : text} {iconButton}
+                    </Link>
+                </div>
             );
         }
     } else {
         textComponent = (
-            <span className={styles.linktext}>{alttext ? alttext : text}</span>
+            <div className={styles.linktext}>{alttext ? alttext : text}</div>
         );
     }
 

From 34bd92ed02599563d6b3f7d36c0ad6689384ecc9 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 18:33:01 +0100
Subject: [PATCH 06/12] modify copied text for mobile

---
 explorer/client/src/components/longtext/Longtext.module.css | 4 ++++
 explorer/client/src/components/longtext/Longtext.tsx        | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index 1464cd2de0f3a..e222f65bc8dda 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -11,6 +11,10 @@
     @apply text-green-600 ml-1 text-sm;
 }
 
+.copied span {
+    @apply block sm:inline w-[20vw] text-center;
+}
+
 .longtext,
 .longtext > a {
     @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline mr-2;
diff --git a/explorer/client/src/components/longtext/Longtext.tsx b/explorer/client/src/components/longtext/Longtext.tsx
index 9d36b08c09fe6..0d03438fb890e 100644
--- a/explorer/client/src/components/longtext/Longtext.tsx
+++ b/explorer/client/src/components/longtext/Longtext.tsx
@@ -68,7 +68,11 @@ function Longtext({
                 </div>
             );
         } else {
-            icon = <span className={styles.copied}>&#10003; Copied</span>;
+            icon = (
+                <span className={styles.copied}>
+                    <span>&#10003;</span> <span>Copied</span>
+                </span>
+            );
         }
     } else {
         icon = <></>;

From cae0329874255934a87bcf339313e46b999bf3bf Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 19:03:42 +0100
Subject: [PATCH 07/12] use gap

---
 .../client/src/components/longtext/Longtext.module.css    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index e222f65bc8dda..d3142c472ec62 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,6 +1,6 @@
 .copy16,
 .copy24 {
-    @apply cursor-pointer mr-2 stroke-sui-blue-steel leading-[100%];
+    @apply cursor-pointer stroke-sui-blue-steel leading-[100%];
 }
 
 .copy16 {
@@ -8,7 +8,7 @@
 }
 
 .copied {
-    @apply text-green-600 ml-1 text-sm;
+    @apply text-green-600 text-sm;
 }
 
 .copied span {
@@ -17,7 +17,7 @@
 
 .longtext,
 .longtext > a {
-    @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline mr-2;
+    @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline;
 }
 
 .linktext {
@@ -25,5 +25,5 @@
 }
 
 .longtextwrapper {
-    @apply flex items-center min-w-fit;
+    @apply flex items-center gap-[6px] min-w-fit mr-2;
 }

From 3d63396acab9a6537be3d7bef47c1f124b22fc10 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 19:15:14 +0100
Subject: [PATCH 08/12] lower copy icon

---
 explorer/client/src/components/longtext/Longtext.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index d3142c472ec62..335ac14728620 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,6 +1,6 @@
 .copy16,
 .copy24 {
-    @apply cursor-pointer stroke-sui-blue-steel leading-[100%];
+    @apply cursor-pointer stroke-sui-blue-steel leading-[100%] self-end;
 }
 
 .copy16 {

From d1f4270c8bf27a4ee8192a0924c177bd369f95ac Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 19:18:16 +0100
Subject: [PATCH 09/12] adjustments for mobile

---
 explorer/client/src/components/longtext/Longtext.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index 335ac14728620..ede05868b49c0 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,6 +1,6 @@
 .copy16,
 .copy24 {
-    @apply cursor-pointer stroke-sui-blue-steel leading-[100%] self-end;
+    @apply cursor-pointer stroke-sui-blue-steel leading-[100%] self-start sm:self-end;
 }
 
 .copy16 {
@@ -8,7 +8,7 @@
 }
 
 .copied {
-    @apply text-green-600 text-sm;
+    @apply text-green-600 text-sm self-start sm:self-center;
 }
 
 .copied span {

From f8a39a36d4a53235935a402fc2b0b6fe19b7cf93 Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Thu, 8 Sep 2022 19:42:33 +0100
Subject: [PATCH 10/12] updates tests

---
 explorer/client/cypress/e2e/static/e2e.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/client/cypress/e2e/static/e2e.cy.ts b/explorer/client/cypress/e2e/static/e2e.cy.ts
index 029d80ff45b32..794e20aeee710 100644
--- a/explorer/client/cypress/e2e/static/e2e.cy.ts
+++ b/explorer/client/cypress/e2e/static/e2e.cy.ts
@@ -6,7 +6,7 @@ Cypress.config('baseUrl', 'http://localhost:8080');
 // Standardized CSS Selectors
 const mainBodyCSS = 'main > section > div';
 const nftObject = (num: number) => `div#ownedObjects > div:nth-child(${num}) a`;
-const ownerButton = 'td#owner span:first-child';
+const ownerButton = 'td#owner > div > div';
 
 // Standardized expectations:
 const expectHome = () => {

From 0138882b0592eb162712480337fadda2a278f32c Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Fri, 9 Sep 2022 14:30:35 +0100
Subject: [PATCH 11/12] reduces x gap to 6px

---
 explorer/client/src/components/longtext/Longtext.module.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index ede05868b49c0..7134d1a80e8fe 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -20,10 +20,6 @@
     @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline;
 }
 
-.linktext {
-    @apply mr-2;
-}
-
 .longtextwrapper {
-    @apply flex items-center gap-[6px] min-w-fit mr-2;
+    @apply flex items-center gap-[6px] min-w-fit;
 }

From 83813555f9187cc952d76bf9e197b64cd1b23c6c Mon Sep 17 00:00:00 2001
From: Andrew Burnie <apburnie@hotmail.co.uk>
Date: Fri, 9 Sep 2022 14:42:43 +0100
Subject: [PATCH 12/12] adds 1px to bottom of badge

---
 .../src/pages/transaction-result/TxResultHeader.module.css      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
index a47c52720264a..acd30a7f89652 100644
--- a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
+++ b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
@@ -12,7 +12,7 @@
 }
 
 .txresulttype {
-    @apply capitalize py-[4px] px-[8px] flex items-center gap-[6px] mt-[8px] lg:ml-[6px] lg:mt-0  rounded-[6px] w-fit;
+    @apply capitalize pt-[4px] pb-[5px] px-[8px] flex items-center gap-[6px] mt-[8px] lg:ml-[6px] lg:mt-0  rounded-[6px] w-fit;
 }
 
 .explain > span,