Various NFT UI fixes (#17153)

* Various NFT UI fixes

* Addressing review feedback

* Using ButtonIcon component for copy icon

* Using button for collectible item

ui/components/app/collectible-default-image/collectible-default-image.js

@@ -11,8 +11,10 @@ export default function CollectibleDefaultImage({
   handleImageClick,
 }) {
   const t = useI18nContext();
+  const Tag = handleImageClick ? 'button' : 'div';
   return (
-    <div
+    <Tag
+      tabIndex={0}
       className={classnames('collectible-default', {
         'collectible-default--clickable': handleImageClick,
       })}
@@ -21,7 +23,7 @@ export default function CollectibleDefaultImage({
       <Typography variant={TYPOGRAPHY.H6} className="collectible-default__text">
         {name ?? t('unknownCollection')} <br /> #{tokenId}
       </Typography>
-    </div>
+    </Tag>
   );
 }
 

ui/components/app/collectible-details/collectible-details.js

@@ -7,6 +7,7 @@ import { isEqual } from 'lodash';
 import Box from '../../ui/box';
 import Card from '../../ui/card';
 import Typography from '../../ui/typography/typography';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
 import {
   COLORS,
   TYPOGRAPHY,
@@ -26,7 +27,6 @@ import {
   getSelectedIdentity,
 } from '../../../selectors';
 import AssetNavigation from '../../../pages/asset/components/asset-navigation';
-import Copy from '../../ui/icon/copy-icon.component';
 import { getCollectibleContracts } from '../../../ducks/metamask/metamask';
 import { DEFAULT_ROUTE, SEND_ROUTE } from '../../../helpers/constants/routes';
 import {
@@ -67,7 +67,8 @@ export default function CollectibleDetails({ collectible }) {
   const ipfsGateway = useSelector(getIpfsGateway);
   const collectibleContracts = useSelector(getCollectibleContracts);
   const currentNetwork = useSelector(getCurrentChainId);
-  const [copied, handleCopy] = useCopyToClipboard();
+  const [sourceCopied, handleSourceCopy] = useCopyToClipboard();
+  const [addressCopied, handleAddressCopy] = useCopyToClipboard();
 
   const collectibleContractName = collectibleContracts.find(
     ({ address: contractAddress }) =>
@@ -80,6 +81,7 @@ export default function CollectibleDetails({ collectible }) {
     imageOriginal ?? image,
     ipfsGateway,
   );
+  const isDataURI = collectibleImageURL.startsWith('data:');
 
   const onRemove = () => {
     dispatch(removeAndIgnoreNft(address, tokenId));
@@ -239,23 +241,39 @@ export default function CollectibleDetails({ collectible }) {
               {t('source')}
             </Typography>
             <Typography
-              color={COLORS.PRIMARY_DEFAULT}
               variant={TYPOGRAPHY.H6}
               boxProps={{
                 margin: 0,
                 marginBottom: 4,
               }}
-              className="collectible-details__image-link"
+              className="collectible-details__image-source"
+              color={isDataURI ? COLORS.TEXT_DEFAULT : COLORS.PRIMARY_DEFAULT}
             >
-              <a
+              {isDataURI ? (
-                target="_blank"
+                <>{collectibleImageURL}</>
-                rel="noopener noreferrer"
+              ) : (
-                href={collectibleImageURL}
+                <a
-                title={collectibleImageURL}
+                  target="_blank"
-              >
+                  rel="noopener noreferrer"
-                {collectibleImageURL}
+                  href={collectibleImageURL}
-              </a>
+                  title={collectibleImageURL}
+                >
+                  {collectibleImageURL}
+                </a>
+              )}
             </Typography>
+            <ButtonIcon
+              ariaLabel="copy"
+              className="collectible-details__contract-copy-button"
+              onClick={() => {
+                handleSourceCopy(collectibleImageURL);
+              }}
+              iconName={
+                sourceCopied
+                  ? ICON_NAMES.COPY_SUCCESS_FILLED
+                  : ICON_NAMES.COPY_FILLED
+              }
+            />
           </Box>
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
             <Typography
@@ -301,18 +319,18 @@ export default function CollectibleDetails({ collectible }) {
                   {inPopUp ? shortenAddress(address) : address}
                 </a>
               </Typography>
-              <button
+              <ButtonIcon
+                ariaLabel="copy"
                 className="collectible-details__contract-copy-button"
                 onClick={() => {
-                  handleCopy(address);
+                  handleAddressCopy(address);
                 }}
-              >
+                iconName={
-                {copied ? (
+                  addressCopied
-                  t('copiedExclamation')
+                    ? ICON_NAMES.COPY_SUCCESS_FILLED
-                ) : (
+                    : ICON_NAMES.COPY_FILLED
-                  <Copy size={15} color="var(--color-icon-alternative)" />
+                }
-                )}
+              />
-              </button>
             </Box>
           </Box>
           {inPopUp ? renderSendButton() : null}

ui/components/app/collectible-details/index.scss

@@ -68,6 +68,7 @@ $spacer-break-small: 16px;
     cursor: pointer;
     color: var(--color-text-alternative);
     border: 0;
+    margin-top: -4px;
 
     &:active {
       transform: scale(0.97);
@@ -78,13 +79,14 @@ $spacer-break-small: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    width: 332px;
   }
 
-  &__image-link {
+  &__image-source {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 332px;
+    width: 332px;
   }
 
   &__link-title {

ui/components/app/collectibles-items/collectibles-items.js

@@ -164,8 +164,7 @@ export default function CollectiblesItems({
               <Typography
                 color={COLORS.TEXT_DEFAULT}
                 variant={TYPOGRAPHY.H5}
-                marginTop={0}
+                margin={2}
-                marginBottom={2}
               >
                 {`${collectionName ?? t('unknownCollection')} (${
                   collectibles.length
@@ -203,18 +202,18 @@ export default function CollectiblesItems({
                     className="collectibles-items__item-wrapper__card"
                   >
                     {collectibleImage ? (
-                      <div
+                      <button
                         className="collectibles-items__item"
                         style={{
                           backgroundColor,
                         }}
+                        onClick={handleImageClick}
                       >
                         <img
-                          onClick={handleImageClick}
                           className="collectibles-items__item-image"
                           src={collectibleImage}
                         />
-                      </div>
+                      </button>
                     ) : (
                       <CollectibleDefaultImage
                         name={name}

ui/components/app/collectibles-items/index.scss

@@ -42,12 +42,12 @@
   }
 
   &__item {
-    border-radius: 4px;
     width: 100%;
     display: flex;
     justify-content: center;
     cursor: pointer;
     align-self: center;
+    padding: 0;
 
     &-image {
       border-radius: 4px;

ui/components/ui/form-field/form-field.js

@@ -54,7 +54,7 @@ export default function FormField({
           <Box
             className="form-field__heading-title"
             display={DISPLAY.FLEX}
-            alignItems={ALIGN_ITEMS.CENTER}
+            alignItems={ALIGN_ITEMS.BASELINE}
           >
             {TitleTextCustomComponent ||
               (titleText && (