stats and chart updates

ui/home/LatestBlocks.tsx

@@ -110,7 +110,7 @@ const LatestBlocks = () => {
 
   return (
     <>
-      <Heading as="h4" size="sm" mb={{ base: 4, lg: 7 }}>Latest Blocks</Heading>
+      <Heading as="h4" size="sm" mb={ 4 }>Latest Blocks</Heading>
       { content }
     </>
   );

ui/home/Stats.tsx

@@ -79,10 +79,10 @@ const Stats = () => {
 
   return (
     <Grid
-      gridTemplateColumns={{ lg: `repeat(${ itemsCount }, 1fr)`, base: 'none' }}
-      gridTemplateRows={{ lg: 'none', base: `repeat(${ itemsCount }, 1fr)` }}
+      gridTemplateColumns={{ lg: `repeat(${ itemsCount }, 1fr)`, base: '1fr 1fr' }}
+      gridTemplateRows={{ lg: 'none', base: undefined }}
       gridGap="10px"
-      marginTop="32px"
+      marginTop="24px"
     >
       { content }
     </Grid>

ui/home/StatsItem.tsx

-import { Flex, Icon, Center, Text, LightMode } from '@chakra-ui/react';
+import { Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -9,30 +9,21 @@ type Props = {
 
 const StatsItem = ({ icon, title, value }: Props) => {
   return (
-    <LightMode>
     <Flex
-        backgroundColor="blue.50"
-        padding={ 5 }
-        borderRadius="16px"
+      backgroundColor={ useColorModeValue('blue.50', 'blue.800') }
+      padding={ 3 }
+      borderRadius="md"
       flexDirection={{ base: 'row', lg: 'column', xl: 'row' }}
       alignItems="center"
+      columnGap={ 3 }
+      rowGap={ 2 }
     >
-        <Center
-          backgroundColor="green.100"
-          borderRadius="12px"
-          w={ 10 }
-          h={ 10 }
-          mr={{ base: 4, lg: 0, xl: 4 }}
-          mb={{ base: 0, lg: 2, xl: 0 }}
-        >
-          <Icon as={ icon } boxSize={ 7 } color="black"/>
-        </Center>
+      <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>
       </Flex>
     </Flex>
-    </LightMode>
   );
 };
 

ui/home/StatsItemSkeleton.tsx

@@ -7,16 +7,16 @@ const StatsItemSkeleton = () => {
   return (
     <Flex
       backgroundColor={ bgColor }
-      padding={ 5 }
-      borderRadius="16px"
+      padding={ 3 }
+      borderRadius="md"
       flexDirection={{ base: 'row', lg: 'column', xl: 'row' }}
       alignItems="center"
+      columnGap={ 3 }
+      rowGap={ 2 }
     >
       <Skeleton
         w="40px"
         h="40px"
-        mr={{ base: 4, lg: 0, xl: 4 }}
-        mb={{ base: 0, lg: 2, xl: 0 }}
       />
       <Flex flexDirection="column" alignItems={{ base: 'start', lg: 'center', xl: 'start' }}>
         <Skeleton w="69px" h="10px" mt="4px" mb="8px"/>

ui/home/indicators/ChainIndicatorItem.tsx

@@ -18,9 +18,12 @@ interface Props {
 }
 
 const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => {
-  const bgColor = useColorModeValue('white', 'black');
   const isMobile = useIsMobile();
 
+  const activeBgColorDesktop = useColorModeValue('white', 'gray.900');
+  const activeBgColorMobile = useColorModeValue('white', 'black');
+  const activeBgColor = isMobile ? activeBgColorMobile : activeBgColorDesktop;
+
   const handleClick = React.useCallback(() => {
     onClick(id);
   }, [ id, onClick ]);
@@ -58,11 +61,11 @@ const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats
       borderRadius="md"
       cursor="pointer"
       onClick={ handleClick }
-      bgColor={ isSelected ? bgColor : 'inherit' }
+      bgColor={ isSelected ? activeBgColor : 'inherit' }
       boxShadow={ isSelected ? 'lg' : 'none' }
       zIndex={ isSelected ? 1 : 'initial' }
       _hover={{
-        bgColor,
+        activeBgColor,
         zIndex: 1,
       }}
     >

ui/home/indicators/ChainIndicators.tsx

@@ -40,8 +40,10 @@ const ChainIndicators = () => {
     () => fetch('/node-api/stats'),
   );
 
-  const bgColor = useColorModeValue('white', 'black');
-  const listBgColor = useColorModeValue('gray.50', 'gray.900');
+  const bgColorDesktop = useColorModeValue('white', 'gray.900');
+  const bgColorMobile = useColorModeValue('white', 'black');
+  const listBgColorDesktop = useColorModeValue('gray.50', 'black');
+  const listBgColorMobile = useColorModeValue('gray.50', 'gray.900');
 
   if (indicators.length === 0) {
     return null;
@@ -68,7 +70,7 @@ const ChainIndicators = () => {
       p={{ base: 0, lg: 8 }}
       borderRadius={{ base: 'none', lg: 'lg' }}
       boxShadow={{ base: 'none', lg: 'xl' }}
-      bgColor={ bgColor }
+      bgColor={{ base: bgColorMobile, lg: bgColorDesktop }}
       columnGap={ 12 }
       rowGap={ 0 }
       flexDir={{ base: 'column', lg: 'row' }}
@@ -97,7 +99,7 @@ const ChainIndicators = () => {
           as="ul"
           p={ 3 }
           borderRadius="lg"
-          bgColor={ listBgColor }
+          bgColor={{ base: listBgColorMobile, lg: listBgColorDesktop }}
           rowGap={ 3 }
           order={{ base: 1, lg: 2 }}
         >