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}>⌛ 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}>⌛ Please Wait</span>; + icon = <div className={styles.copied}>⌛ 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}>✓ 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}>✓ Copied</span>; + icon = ( + <span className={styles.copied}> + <span>✓</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,