average -> normal

ui/shared/GasInfoTooltipContent/GasInfoRow.tsx

-import { GridItem, chakra, useColorModeValue } from '@chakra-ui/react';
+import { GridItem, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { GasPriceInfo } from 'types/api/stats';
@@ -11,8 +11,6 @@ interface Props {
 }
 
 const GasInfoRow = ({ name, info }: Props) => {
-  const labelColor = useColorModeValue('blue.100', 'blue.600');
-
   const content = (() => {
     if (!info || info.price === null) {
       return 'N/A';
@@ -32,8 +30,8 @@ const GasInfoRow = ({ name, info }: Props) => {
 
   return (
     <>
-      <GridItem color={ labelColor }>{ name }</GridItem>
-      <GridItem textAlign="right">{ content }</GridItem>
+      <GridItem color="blue.100">{ name }</GridItem>
+      <GridItem color="text" textAlign="right">{ content }</GridItem>
     </>
   );
 };

ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx

-import { Grid, GridItem } from '@chakra-ui/react';
+import { DarkMode, Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
 import type { HomeStats } from 'types/api/stats';
@@ -20,21 +20,23 @@ const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
   }
 
   return (
-    <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
-      { data.gas_price_updated_at && (
-        <>
-          <GridItem color="text_secondary">Last update</GridItem>
-          <GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
-            { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
-            { data.gas_prices_update_in !== 0 &&
+    <DarkMode>
+      <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
+        { data.gas_price_updated_at && (
+          <>
+            <GridItem color="text_secondary">Last update</GridItem>
+            <GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
+              { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
+              { data.gas_prices_update_in !== 0 &&
               <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
-          </GridItem>
-        </>
-      ) }
-      <GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
-      <GasInfoRow name="Average" info={ data.gas_prices.average }/>
-      <GasInfoRow name="Fast" info={ data.gas_prices.fast }/>
-    </Grid>
+            </GridItem>
+          </>
+        ) }
+        <GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
+        <GasInfoRow name="Normal" info={ data.gas_prices.average }/>
+        <GasInfoRow name="Fast" info={ data.gas_prices.fast }/>
+      </Grid>
+    </DarkMode>
   );
 };
 

ui/snippets/topBar/TopBarStats.tsx

-import { Flex, LightMode, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
+import { Flex, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -79,26 +79,24 @@ const TopBarStats = () => {
       { data?.gas_prices && data.gas_prices.average !== null && config.UI.homepage.showGasTracker && (
         <Skeleton isLoaded={ !isPlaceholderData }>
           <chakra.span color="text_secondary">Gas </chakra.span>
-          <LightMode>
-            <Tooltip
-              label={ <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> }
-              hasArrow={ false }
-              borderRadius="md"
-              offset={ [ 0, 16 ] }
-              bgColor="blackAlpha.900"
-              p={ 0 }
-              isOpen={ isOpen }
+          <Tooltip
+            label={ <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> }
+            hasArrow={ false }
+            borderRadius="md"
+            offset={ [ 0, 16 ] }
+            bgColor="blackAlpha.900"
+            p={ 0 }
+            isOpen={ isOpen }
+          >
+            <Link
+              _hover={{ textDecoration: 'none', color: 'link_hovered' }}
+              onClick={ handleClick }
+              onMouseEnter={ onOpen }
+              onMouseLeave={ onClose }
             >
-              <Link
-                _hover={{ textDecoration: 'none', color: 'link_hovered' }}
-                onClick={ handleClick }
-                onMouseEnter={ onOpen }
-                onMouseLeave={ onClose }
-              >
-                { data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
-              </Link>
-            </Tooltip>
-          </LightMode>
+              { data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
+            </Link>
+          </Tooltip>
         </Skeleton>
       ) }
     </Flex>