error color, token balance border radius and gas tooltop fixes

theme/foundations/semanticTokens.ts

@@ -20,8 +20,8 @@ const semanticTokens = {
       'default': 'blue.400',
     },
     error: {
-      'default': 'red.400',
-      _dark: 'red.300',
+      'default': 'red.500',
+      _dark: 'red.500',
     },
     dialog_bg: {
       'default': 'white',

ui/address/tokens/TokenBalancesItem.tsx

@@ -14,7 +14,7 @@ const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Pro
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="16px">
+    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="base">
       <Text variant="secondary" fontSize="xs">{ name }</Text>
       <Flex alignItems="center">
         { icon }

ui/shared/gas/GasInfoTooltip.tsx

-import { Box, DarkMode, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useColorModeValue } from '@chakra-ui/react';
+import type {
+  PlacementWithLogical } from '@chakra-ui/react';
+import {
+  Box,
+  DarkMode,
+  Flex,
+  Grid,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { HomeStats } from 'types/api/stats';
@@ -17,12 +30,13 @@ interface Props {
   data: HomeStats;
   dataUpdatedAt: number;
   isOpen?: boolean; // for testing purposes only; the tests were flaky, i couldn't find a better way
+  placement?: PlacementWithLogical;
 }
 
 const POPOVER_OFFSET: [ number, number ] = [ 0, 10 ];
 const feature = config.features.gasTracker;
 
-const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen }: Props) => {
+const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => {
   const tooltipBg = useColorModeValue('gray.700', 'gray.900');
 
   if (!data.gas_prices) {
@@ -36,7 +50,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen }: Props) => {
       3 : 2;
 
   return (
-    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen }>
+    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen } placement={ placement }>
       <PopoverTrigger>
         { children }
       </PopoverTrigger>

ui/snippets/topBar/TopBarStats.tsx

@@ -78,7 +78,7 @@ const TopBarStats = () => {
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
         <Skeleton isLoaded={ !isPlaceholderData }>
           <chakra.span color="text_secondary">Gas </chakra.span>
-          <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } >
+          <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
             <Link>
               <GasPrice data={ data.gas_prices.average }/>
             </Link>