Public tags design updates (#2078)

* update styles of name tags

* update screenshots

* update screenshots

* fix tests

* update screenshot

icons/link_external.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.621 4.353 5.176 9.798a.69.69 0 1 1-.974-.974l5.444-5.446H5.108a.69.69 0 0 1 0-1.378H12v6.892a.69.69 0 1 1-1.379 0V4.353Z" fill="currentColor"/>
+</svg>

public/icons/name.d.ts

@@ -78,6 +78,7 @@
 	| "key"
 	| "lightning_navbar"
 	| "lightning"
+	| "link_external"
 	| "link"
 	| "lock"
 	| "minus"

theme/foundations/semanticTokens.ts

@@ -19,6 +19,10 @@ const semanticTokens = {
     link_hovered: {
       'default': 'blue.400',
     },
+    icon_link_external: {
+      'default': 'gray.300',
+      _dark: 'gray.500',
+    },
     icon_info: {
       'default': 'gray.400',
       _dark: 'gray.500',

ui/marketplace/MarketplaceAppIntegrationIcon.tsx

@@ -10,21 +10,24 @@ type Props = {
 }
 
 const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
-  const [ icon, iconColor, text ] = React.useMemo(() => {
+  const [ icon, iconColor, text, boxSize ] = React.useMemo(() => {
     let icon: IconName = 'integration/partial';
     let color = 'gray.400';
     let text = 'This app opens in Blockscout without Blockscout wallet functionality. Use your external web3 wallet to connect directly to this application';
+    let boxSize = 5;
 
     if (external) {
-      icon = 'arrows/north-east';
+      icon = 'link_external';
+      color = 'icon_link_external';
       text = 'This app opens in a separate tab';
+      boxSize = 4;
     } else if (internalWallet) {
       icon = 'integration/full';
       color = 'green.500';
       text = 'This app opens in Blockscout and your Blockscout wallet connects automatically';
     }
 
-    return [ icon, color, text ];
+    return [ icon, color, text, boxSize ];
   }, [ external, internalWallet ]);
 
   return (
@@ -37,7 +40,7 @@ const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
     >
       <IconSvg
         name={ icon }
-        boxSize={ 5 }
+        boxSize={ boxSize }
         color={ iconColor }
         position="relative"
         cursor="pointer"

ui/pages/Address.pw.tsx

@@ -17,6 +17,10 @@ const hooksConfig = {
   },
 };
 
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
 test.describe('fetched bytecode', () => {
   test('should refetch address query', async({ render, mockApiResponse, createSocket, page }) => {
     const addressApiUrl = await mockApiResponse('address', addressMock.validator, { pathParams: { hash: addressMock.hash } });

ui/pages/Marketplace.tsx

@@ -151,7 +151,7 @@ const Marketplace = () => {
                 <MenuItem key={ label } as="a" href={ href } target="_blank" py={ 2 } px={ 4 }>
                   <IconSvg name={ icon } boxSize={ 4 } mr={ 2.5 }/>
                   { label }
-                  <IconSvg name="arrows/north-east" boxSize={ 4 } color="gray.400" ml={ 2 }/>
+                  <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" ml={ 2 }/>
                 </MenuItem>
               )) }
             </MenuList>

ui/shared/EntityTags/EntityTagPopover.tsx

@@ -40,7 +40,7 @@ const EntityTagPopover = ({ data, children }: Props) => {
       <PopoverTrigger>
         { children }
       </PopoverTrigger>
-      <PopoverContent bgColor={ bgColor } borderRadius="sm" maxW="300px" w="fit-content">
+      <PopoverContent bgColor={ bgColor } borderRadius="sm" maxW="280px" w="fit-content">
         <PopoverArrow bgColor={ bgColor }/>
         <DarkMode>
           <PopoverBody color="white" p={ 2 } fontSize="sm" display="flex" flexDir="column" rowGap={ 2 }>

ui/shared/links/LinkExternal.tsx

@@ -30,7 +30,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant, iconColor
       return (
         <Skeleton className={ className } { ...styleProps } bgColor="inherit">
           { children }
-          <Box boxSize={ 4 } display="inline-block"/>
+          <Box boxSize={ 3 } display="inline-block"/>
         </Skeleton>
       );
     }
@@ -38,7 +38,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant, iconColor
     return (
       <Box className={ className } { ...styleProps }>
         { children }
-        <Skeleton boxSize={ 4 } verticalAlign="middle" display="inline-block"/>
+        <Skeleton boxSize={ 3 } verticalAlign="middle" display="inline-block"/>
       </Box>
     );
   }
@@ -46,7 +46,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant, iconColor
   return (
     <Link className={ className } { ...styleProps } target="_blank" href={ href } onClick={ onClick }>
       { children }
-      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color={ iconColor ?? 'gray.400' } flexShrink={ 0 }/>
+      <IconSvg name="link_external" boxSize={ 3 } verticalAlign="middle" color={ iconColor ?? 'icon_link_external' } flexShrink={ 0 }/>
     </Link>
   );
 };

ui/snippets/navigation/vertical/NavLink.tsx

@@ -69,7 +69,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
           <NavLinkIcon item={ item }/>
           <Text { ...styleProps.textProps } as="span" ml={ 3 }>
             <span>{ item.text }</span>
-            { !isInternalLink && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
+            { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
           </Text>
           { isHighlighted && (
             <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -42,7 +42,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" flexShrink={ 0 }/> }
+            { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
           </Flex>
           <Text
             variant="secondary"
@@ -81,7 +81,15 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary" flexShrink={ 0 }/> }
+        { data.external && (
+          <IconSvg
+            name="link_external"
+            color="icon_link_external"
+            boxSize={ 3 }
+            verticalAlign="middle"
+            flexShrink={ 0 }
+          />
+        ) }
       </Flex>
     );
   })();

ui/tokenInstance/TokenInstanceDetails.pw.tsx

@@ -39,12 +39,13 @@ test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
   await mockApiResponse('address', addressMock.contract, { pathParams: { hash } });
   await mockApiResponse('token_instance_transfers_count', { transfers_count: 42 }, { pathParams: { id: tokenInstanceMock.unique.id, hash } });
   await mockAssetResponse('http://localhost:3000/nft-marketplace-logo.png', './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(tokenInstanceMock.unique.image_url as string, './playwright/mocks/image_md.jpg');
 });
 
 test('base view +@dark-mode +@mobile', async({ render, page }) => {
   const component = await render(
     <MetadataUpdateProvider>
-      <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
+      <TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
     </MetadataUpdateProvider>,
   );
   await expect(component).toHaveScreenshot({