Merge pull request #389 from blockscout/home-fixes

homepage fixes

ui/home/LatestBlocks.tsx

@@ -23,7 +23,7 @@ const BLOCK_MARGIN = 24;
 
 const LatestBlocks = () => {
   const isMobile = useIsMobile();
-  const blocksMaxCount = isMobile ? 2 : 4;
+  const blocksMaxCount = isMobile ? 2 : 3;
   const fetch = useFetch();
   const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Block>>(
     [ QueryKeys.indexBlocks ],
@@ -87,7 +87,7 @@ const LatestBlocks = () => {
           <Skeleton h="24px" w="170px" mb={{ base: 6, lg: 9 }}/>
         ) }
         { statsQueryResult.data?.network_utilization_percentage !== undefined && (
-          <Box mb={{ base: 6, lg: 9 }}>
+          <Box mb={{ base: 6, lg: 3 }}>
             <Text as="span" fontSize="sm">
               Network utilization:{ nbsp }
             </Text>
@@ -96,7 +96,7 @@ const LatestBlocks = () => {
             </Text>
           </Box>
         ) }
-        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 6 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
+        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 4 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
           <AnimatePresence initial={ false } >
             { dataToShow.map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) }
           </AnimatePresence>
@@ -110,7 +110,7 @@ const LatestBlocks = () => {
 
   return (
     <Box width={{ base: '100%', lg: '280px' }}>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest Blocks</Heading>
+      <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
       { content }
     </Box>
   );

ui/home/LatestTxs.tsx

@@ -27,7 +27,7 @@ const LatestTransactions = () => {
   if (isLoading) {
     content = (
       <>
-        <Skeleton h="56px" w="100%" borderBottomLeftRadius={ 0 } borderBottomRightRadius={ 0 }/>
+        <Skeleton h="32px" w="100%" borderBottomLeftRadius={ 0 } borderBottomRightRadius={ 0 }/>
         { Array.from(Array(txsCount)).map((item, index) => <LatestTxsItemSkeleton key={ index }/>) }
       </>
     );
@@ -42,7 +42,7 @@ const LatestTransactions = () => {
     content = (
       <>
         <TxsNewItemNotice borderBottomRadius={ 0 } url={ link('txs') }/>
-        <Box mb={{ base: 3, lg: 6 }}>
+        <Box mb={{ base: 3, lg: 4 }}>
           { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
         </Box>
         <Flex justifyContent="center">

ui/home/LatestTxsItem.tsx

@@ -51,7 +51,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
       width="100%"
       borderTop="1px solid"
       borderColor={ borderColor }
-      py={{ base: 4, lg: 6 }}
+      py={ 4 }
       px={{ base: 0, lg: 4 }}
       _last={{ borderBottom: '1px solid', borderColor }}
     >

ui/home/LatestTxsItemSkeleton.tsx

@@ -16,7 +16,7 @@ const LatestTxsItemSkeleton = () => {
       width="100%"
       borderTop="1px solid"
       borderColor={ borderColor }
-      py={{ base: 4, lg: 6 }}
+      py={ 4 }
       px={{ base: 0, lg: 4 }}
       _last={{ borderBottom: '1px solid', borderColor }}
     >

ui/home/Stats.tsx

@@ -41,6 +41,8 @@ const Stats = () => {
     content = Array.from(Array(itemsCount)).map((item, index) => <StatsItemSkeleton key={ index }/>);
   }
 
+  const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
+
   if (data) {
     content = (
       <>
@@ -65,12 +67,14 @@ const Stats = () => {
           icon={ walletIcon }
           title="Wallet addresses"
           value={ Number(data.total_addresses).toLocaleString() }
+          _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
         />
         { hasGasTracker && (
           <StatsItem
             icon={ gasIcon }
             title="Gas tracker"
             value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` }
+            _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
           />
         ) }
       </>

ui/home/StatsItem.tsx

-import { Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Icon, Text, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
   icon: React.FC<React.SVGAttributes<SVGElement>>;
   title: string;
   value: string;
+  className?: string;
 }
 
-const StatsItem = ({ icon, title, value }: Props) => {
+const StatsItem = ({ icon, title, value, className }: Props) => {
   return (
     <Flex
       backgroundColor={ useColorModeValue('blue.50', 'blue.800') }
@@ -17,14 +18,16 @@ const StatsItem = ({ icon, title, value }: Props) => {
       alignItems="center"
       columnGap={ 3 }
       rowGap={ 2 }
+      className={ className }
+      color={ useColorModeValue('black', 'white') }
     >
       <Icon as={ icon } boxSize={ 7 }/>
       <Flex flexDirection="column" alignItems={{ base: 'start', lg: 'center', xl: 'start' }}>
         <Text variant="secondary" fontSize="xs" lineHeight="16px">{ title }</Text>
-        <Text fontWeight={ 500 } fontSize="md">{ value }</Text>
+        <Text fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') }>{ value }</Text>
       </Flex>
     </Flex>
   );
 };
 
-export default StatsItem;
+export default chakra(StatsItem);

ui/pages/Home.tsx

@@ -47,7 +47,7 @@ const Home = () => {
       </Box>
       <Stats/>
       <ChainIndicators/>
-      <Flex mt={ 12 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
+      <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
         <LatestBlocks/>
         <LatestTxs/>
       </Flex>

ui/snippets/searchBar/SearchBarDesktop.tsx

@@ -32,6 +32,7 @@ const SearchBarDesktop = ({ onChange, onSubmit, isHomepage }: Props) => {
           onChange={ onChange }
           border={ isHomepage ? 'none' : '2px solid' }
           borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
+          _focusWithin={{ _placeholder: { color: 'gray.300' } }}
           color={ useColorModeValue('black', 'white') }
         />
       </InputGroup>

ui/txs/TxsNewItemNotice.tsx

@@ -44,6 +44,7 @@ const TxsNewItemNotice = ({ children, className, url }: Props) => {
       fontWeight={ 400 }
       fontSize="sm"
       bgColor={ useColorModeValue('orange.50', transparentize('orange.200', 0.16)(theme)) }
+      color={ useColorModeValue('blackAlpha.800', 'whiteAlpha.800') }
     >
       { alertContent }
     </Alert>