diff --git a/ui/addresses/AddressesListItem.tsx b/ui/addresses/AddressesListItem.tsx index f50a5909fa..9f867f91e9 100644 --- a/ui/addresses/AddressesListItem.tsx +++ b/ui/addresses/AddressesListItem.tsx @@ -43,9 +43,9 @@ const AddressesListItem = ({ { item.public_tags !== null && item.public_tags.length > 0 && item.public_tags.map(tag => ( { tag.display_name } )) } - - { `Balance ${ currencyUnits.ether }` } - + + { `Balance ${ currencyUnits.ether }` } + { addressBalance.dp(8).toFormat() } diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx index 05f2f0ce0a..6210fd0134 100644 --- a/ui/addresses/AddressesTableItem.tsx +++ b/ui/addresses/AddressesTableItem.tsx @@ -34,11 +34,12 @@ const AddressesTableItem = ({ { index } - + @@ -47,7 +48,7 @@ const AddressesTableItem = ({ )) : null } - + { addressBalanceChunks[0] } { addressBalanceChunks[1] && . } { addressBalanceChunks[1] } diff --git a/ui/pages/NameDomain.tsx b/ui/pages/NameDomain.tsx index 4491ec7ed7..cf3977e8c5 100644 --- a/ui/pages/NameDomain.tsx +++ b/ui/pages/NameDomain.tsx @@ -9,7 +9,6 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; -import useIsMobile from 'lib/hooks/useIsMobile'; import getQueryParamString from 'lib/router/getQueryParamString'; import { ENS_DOMAIN } from 'stubs/ENS'; import NameDomainDetails from 'ui/nameDomain/NameDomainDetails'; @@ -25,7 +24,6 @@ import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton'; import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery'; const NameDomain = () => { - const isMobile = useIsMobile(); const router = useRouter(); const domainName = getQueryParamString(router.query.name); @@ -48,31 +46,38 @@ const NameDomain = () => { const isLoading = infoQuery.isPlaceholderData; const titleSecondRow = ( - + { infoQuery.data?.resolved_address && ( - - ) } - { infoQuery.data?.resolved_address && ( - - - - - + + + + + + + + ) } ); diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png index fba7f96f1c..65c323970c 100644 Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png differ diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png index 3dc8d5da0b..68ccc7dba0 100644 Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png differ diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png index 23c4f99ea9..aefac3d659 100644 Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png differ diff --git a/ui/shared/layout/LayoutHome.tsx b/ui/shared/layout/LayoutHome.tsx index 44562b3dbd..6274afeeea 100644 --- a/ui/shared/layout/LayoutHome.tsx +++ b/ui/shared/layout/LayoutHome.tsx @@ -16,7 +16,7 @@ const LayoutHome = ({ children }: Props) => { diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png index 20b78fb238..aeef08c036 100644 Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png index 7d6a662434..d7ce8e6860 100644 Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png index f80dcddd6d..67ab4e360c 100644 Binary files a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png index 0f98a41799..163711c697 100644 Binary files a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png index d90af58a2a..524992497d 100644 Binary files a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png index af8c052e3e..b433ff9b54 100644 Binary files a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/layout/components/MainColumn.tsx b/ui/shared/layout/components/MainColumn.tsx index 4129cd16e9..57e9caeeec 100644 --- a/ui/shared/layout/components/MainColumn.tsx +++ b/ui/shared/layout/components/MainColumn.tsx @@ -14,7 +14,7 @@ const MainColumn = ({ children, className }: Props) => { flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }} paddingX={{ base: 4, lg: 12 }} - paddingTop={{ base: `${ 32 + 60 }px`, lg: 9 }} // 32px is top padding of content area, 60px is search bar height + paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height paddingBottom={ 10 } > { children } diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx index 9901d8b9f9..570e0d157c 100644 --- a/ui/snippets/header/HeaderMobile.tsx +++ b/ui/snippets/header/HeaderMobile.tsx @@ -11,6 +11,10 @@ import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile'; import Burger from './Burger'; +const LOGO_IMAGE_PROPS = { + margin: '0 auto', +}; + type Props = { isHomePage?: boolean; renderSearchBar?: () => React.ReactNode; @@ -47,7 +51,7 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => { boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' } > - + { config.features.account.isEnabled ? : } { config.features.blockchainInteraction.isEnabled && } diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx index d2157651d4..c89029e58a 100644 --- a/ui/snippets/networkMenu/NetworkLogo.tsx +++ b/ui/snippets/networkMenu/NetworkLogo.tsx @@ -1,3 +1,4 @@ +import type { StyleProps } from '@chakra-ui/react'; import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react'; import React from 'react'; @@ -9,9 +10,10 @@ import IconSvg from 'ui/shared/IconSvg'; interface Props { isCollapsed?: boolean; onClick?: (event: React.SyntheticEvent) => void; + imageProps?: StyleProps; } -const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => { +const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: boolean; isSmall?: boolean; imageProps?: StyleProps }) => { const field = isSmall ? 'icon' : 'logo'; const logoColor = useColorModeValue('blue.600', 'white'); @@ -36,11 +38,12 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall height="100%" color={ logoColor } display={ display } + { ...imageProps } /> ); }; -const NetworkLogo = ({ isCollapsed, onClick }: Props) => { +const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => { const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default); const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default); @@ -66,9 +69,10 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => { h="100%" src={ logoSrc } alt={ `${ config.chain.name } network logo` } - fallback={ } + fallback={ } display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }} style={ logoStyle } + { ...imageProps } /> { /* small logo */ } { h="100%" src={ iconSrc } alt={ `${ config.chain.name } network logo` } - fallback={ } + fallback={ } display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }} style={ iconStyle } + { ...imageProps } /> ); diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx index f8b07afe1e..362f2e7639 100644 --- a/ui/snippets/searchBar/SearchBar.tsx +++ b/ui/snippets/searchBar/SearchBar.tsx @@ -111,7 +111,7 @@ const SearchBar = ({ isHomepage }: Props) => { autoFocus={ false } onClose={ onClose } placement="bottom-start" - offset={ isMobile && !isHomepage ? [ 16, -12 ] : undefined } + offset={ isMobile && !isHomepage ? [ 16, -4 ] : undefined } isLazy > diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx index c8c9d30265..d1eb066474 100644 --- a/ui/snippets/searchBar/SearchBarInput.tsx +++ b/ui/snippets/searchBar/SearchBarInput.tsx @@ -77,7 +77,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid zIndex={{ base: isHomepage ? 'auto' : '-1', lg: 'auto' }} paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }} paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }} - paddingBottom={{ base: isHomepage ? 0 : 4, lg: 0 }} + paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }} boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' } transform={{ base: isHomepage ? 'none' : transformMobile, lg: 'none' }} transitionProperty="transform,box-shadow,background-color,color,border-color" diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png index 708f222e24..9cf179adb7 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-address-hash-mobile-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png index 40bcacf30b..bc1ada4ad3 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-block-hash-mobile-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png index 8fe800b4e2..c49ce5f4bb 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-token-name-mobile-dark-mode-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png index 583e0ca7dd..4b15fdec32 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tx-hash-mobile-1.png differ