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,6 +20,7 @@ const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
   }
 
   return (
+    <DarkMode>
       <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
         { data.gas_price_updated_at && (
           <>
@@ -32,9 +33,10 @@ const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
           </>
         ) }
         <GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
-      <GasInfoRow name="Average" info={ data.gas_prices.average }/>
+        <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,7 +79,6 @@ 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 }
@@ -98,7 +97,6 @@ const TopBarStats = () => {
               { data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
             </Link>
           </Tooltip>
-          </LightMode>
         </Skeleton>
       ) }
     </Flex>