mobile view

ui/home/indicators/ChainIndicatorChartContainer.tsx

@@ -25,7 +25,7 @@ const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => {
     return <ChainIndicatorChart data={ data }/>;
   })();
 
-  return <Flex h={{ base: '130px', lg: '270px' }} alignItems="flex-start">{ content }</Flex>;
+  return <Flex h={{ base: '150px', lg: '270px' }} alignItems="flex-start">{ content }</Flex>;
 };
 
 export default React.memo(ChainIndicatorChartContainer);

ui/home/indicators/ChainIndicatorItem.tsx

@@ -5,6 +5,8 @@ import React from 'react';
 import type { ChainIndicatorId } from './types';
 import type { Stats } from 'types/api/stats';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
+
 interface Props {
   id: ChainIndicatorId;
   title: string;
@@ -17,12 +19,17 @@ interface Props {
 
 const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => {
   const bgColor = useColorModeValue('white', 'gray.900');
+  const isMobile = useIsMobile();
 
   const handleClick = React.useCallback(() => {
     onClick(id);
   }, [ id, onClick ]);
 
   const valueContent = (() => {
+    if (isMobile) {
+      return null;
+    }
+
     if (stats.isLoading) {
       return <Skeleton h={ 3 } w="70px" my={ 1.5 }/>;
     }

ui/home/indicators/ChainIndicators.tsx

@@ -65,17 +65,17 @@ const ChainIndicators = () => {
 
   return (
     <Flex
-      p={ 8 }
-      borderRadius="lg"
-      boxShadow="xl"
+      p={{ base: 0, lg: 8 }}
+      borderRadius={{ base: 'none', lg: 'lg' }}
+      boxShadow={{ base: 'none', lg: 'xl' }}
       bgColor={ bgColor }
       columnGap={ 12 }
-      rowGap={ 12 }
+      rowGap={ 0 }
       flexDir={{ base: 'column', lg: 'row' }}
       w="100%"
       alignItems="stretch"
     >
-      <Flex flexGrow={ 1 } flexDir="column">
+      <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
         <Flex alignItems="center">
           <Text fontWeight={ 500 } fontFamily="heading" fontSize="lg">{ indicator?.title }</Text>
           { indicator?.hint && (
@@ -90,7 +90,7 @@ const ChainIndicators = () => {
         <ChainIndicatorChartContainer { ...queryResult }/>
       </Flex>
       { indicators.length > 1 && (
-        <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 }>
+        <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 } order={{ base: 1, lg: 2 }}>
           { indicators.map((indicator) => (
             <ChainIndicatorItem
               key={ indicator.id }