Address title: second line updates

Fixes #1537
blockscout · Jan 25, 2024 · 7b2872c · 7b2872c
1 parent 652620a
commit 7b2872c
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 28 deletions.
diff --git a/icons/dots.svg b/icons/dots.svg
diff --git a/icons/vertical_dots.svg b/icons/vertical_dots.svg
diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts
@@ -27,6 +27,7 @@
 	| "discussions"
 	| "docs"
 	| "donate"
+	| "dots"
 	| "edit"
 	| "email-sent"
 	| "email"
@@ -126,7 +127,6 @@
 	| "verified_token"
 	| "verified"
 	| "verify-contract"
-	| "vertical_dots"
 	| "wallet"
 	| "wallets/coinbase"
 	| "wallets/metamask"

diff --git a/ui/address/SolidityscanReport.tsx b/ui/address/SolidityscanReport.tsx
@@ -112,7 +112,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton isLoaded={ !isPlaceholderData } borderRadius="base">
           <Button
             className={ className }
             color={ scoreColor }
@@ -122,7 +122,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
             onClick={ onToggle }
             aria-label="SolidityScan score"
             fontWeight={ 500 }
-            px={ 2 }
+            px="6px"
             h="32px"
             flexShrink={ 0 }
           >

diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx
@@ -1,4 +1,4 @@
-import { Button, chakra, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Button, chakra, Flex, Grid, Hide, Popover, PopoverBody, PopoverContent, PopoverTrigger, Show, Skeleton, useDisclosure } from '@chakra-ui/react';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
@@ -50,7 +50,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   }
 
   if (isPending) {
-    return <Skeleton h={ 8 } w={{ base: '60px', lg: '120px' }} borderRadius="base"/>;
+    return <Skeleton h={ 8 } w={{ base: '50px', xl: '120px' }} borderRadius="base"/>;
   }
 
   if (data.items.length === 0) {
@@ -102,8 +102,12 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
           flexShrink={ 0 }
         >
           <IconSvg name="ENS_slim" boxSize={ 5 }/>
-          <chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
-          <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
+          <Show above="xl">
+            <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
+          </Show>
+          <Hide above="xl">
+            <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
+          </Hide>
         </Button>
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '500px' }}>

diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
@@ -1,4 +1,4 @@
-import { Button, Menu, MenuButton, MenuList, Flex, Skeleton, chakra } from '@chakra-ui/react';
+import { IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -37,16 +37,14 @@ const AccountActionsMenu = ({ isLoading, className }: Props) => {
     <Menu>
       <Skeleton isLoaded={ !isLoading } borderRadius="base" className={ className }>
         <MenuButton
-          as={ Button }
+          as={ IconButton }
           size="sm"
           variant="outline"
+          colorScheme="gray"
+          px="6px"
           onClick={ handleButtonClick }
-        >
-          <Flex alignItems="center">
-            <span>More</span>
-            <IconSvg name="arrows/east-mini" transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
-          </Flex>
-        </MenuButton>
+          icon={ <IconSvg name="dots" boxSize={ 5 }/> }
+        />
       </Skeleton>
       <MenuList minWidth="180px" zIndex="popover">
         { isTokenPage && config.features.addressVerification.isEnabled &&

diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx
@@ -1,4 +1,4 @@
-import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure } from '@chakra-ui/react';
+import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Show, Hide } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
@@ -46,7 +46,12 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
           flexShrink={ 0 }
         >
           <IconSvg name="explorer" boxSize={ 5 }/>
-          <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
+          <Show above="xl">
+            <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
+          </Show>
+          <Hide above="xl">
+            <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
+          </Hide>
         </Button>
       </PopoverTrigger>
       <PopoverContent w="240px">

diff --git a/ui/shared/address/AddressAddToWallet.tsx b/ui/shared/address/AddressAddToWallet.tsx
@@ -96,7 +96,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico
           aria-label="Add token to wallet"
           variant="outline"
           size="sm"
-          px="6px"
+          px={ 1 }
           onClick={ handleClick }
           icon={ <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 6 }/> }
           flexShrink={ 0 }

diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx
@@ -207,7 +207,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                   <MenuButton
                     w="36px"
                     h="32px"
-                    icon={ <IconSvg name="vertical_dots" w={ 4 } h={ 4 }/> }
+                    icon={ <IconSvg name="dots" boxSize={ 4 } transform="rotate(-90deg)"/> }
                     colorScheme="gray"
                     variant="ghost"
                     as={ IconButton }

diff --git a/ui/token/TokenProjectInfo.tsx b/ui/token/TokenProjectInfo.tsx
@@ -27,7 +27,7 @@ const TokenProjectInfo = ({ data }: Props) => {
   if (isMobile) {
     return (
       <>
-        <TriggerButton isOpen={ isOpen } onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle }/>
         <Modal isOpen={ isOpen } onClose={ onClose } size="full">
           <ModalContent>
             <ModalCloseButton/>
@@ -41,7 +41,7 @@ const TokenProjectInfo = ({ data }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <TriggerButton isOpen={ isOpen } onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle }/>
       </PopoverTrigger>
       <PopoverContent w="500px">
         <PopoverBody px={ 6 } py={ 5 }>

diff --git a/ui/token/TokenProjectInfo/TriggerButton.tsx b/ui/token/TokenProjectInfo/TriggerButton.tsx
@@ -5,10 +5,9 @@ import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onClick: () => void;
-  isOpen: boolean;
 }
 
-const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   return (
     <Button
       ref={ ref }
@@ -23,7 +22,6 @@ const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLB
     >
       <IconSvg name="rocket" boxSize={ 5 } mr={ 1 }/>
       <span>Info</span>
-      <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 1 }/>
     </Button>
   );
 };

diff --git a/ui/token/TokenVerifiedInfo.tsx b/ui/token/TokenVerifiedInfo.tsx
@@ -28,7 +28,7 @@ const TokenVerifiedInfo = ({ verifiedInfoQuery }: Props) => {
         <>
           <Skeleton w="100px" h="30px" borderRadius="base"/>
           <Skeleton w="100px" h="30px" borderRadius="base"/>
-          <Skeleton w="80px" h="30px" borderRadius="base"/>
+          <Skeleton w="70px" h="30px" borderRadius="base"/>
         </>
       );
     }