gray to black alpha for better transition

theme/components/Popover.ts

@@ -19,7 +19,7 @@ const baseStylePopper = defineStyle({
 
 const baseStyleContent = defineStyle((props) => {
   const bg = mode('white', 'gray.900')(props);
-  const shadowColor = mode('gray.200', 'whiteAlpha.300')(props);
+  const shadowColor = mode('blackAlpha.200', 'whiteAlpha.300')(props);
 
   return {
     [$popperBg.variable]: `colors.${ bg }`,

theme/components/Table.ts

@@ -15,7 +15,7 @@ const variantSimple = definePartsStyle((props) => {
   return {
     th: {
       border: 0,
-      color: mode('gray.600', 'whiteAlpha.700')(props),
+      color: mode('blackAlpha.700', 'whiteAlpha.700')(props),
       backgroundColor: mode('blackAlpha.100', 'whiteAlpha.200')(props),
       ...transitionProps,
     },

theme/utils/getOutlinedFieldStyles.ts

@@ -24,7 +24,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     },
     _disabled: {
       opacity: 1,
-      backgroundColor: mode('gray.200', 'whiteAlpha.200')(props),
+      backgroundColor: mode('blackAlpha.200', 'whiteAlpha.200')(props),
       borderColor: 'transparent',
       cursor: 'not-allowed',
       _hover: {

ui/home/LatestBlocksItem.tsx

@@ -36,7 +36,7 @@ const LatestBlocksItem = ({ block, h }: Props) => {
       transitionTimingFunction="linear"
       borderRadius="12px"
       border="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       p={ 6 }
       h={ `${ h }px` }
       minWidth={{ base: '100%', lg: '280px' }}

ui/home/LatestBlocksItemSkeleton.tsx

@@ -15,7 +15,7 @@ const LatestBlocksItemSkeleton = () => {
       minWidth={{ base: '100%', lg: '280px' }}
       borderRadius="12px"
       border="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       p={ 6 }
     >
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>

ui/home/LatestTxsItem.tsx

@@ -37,7 +37,7 @@ type Props = {
 }
 
 const LatestBlocksItem = ({ tx }: Props) => {
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const iconColor = useColorModeValue('blue.600', 'blue.300');
 
   const dataTo = tx.to ? tx.to : tx.created_contract;

ui/home/LatestTxsItemSkeleton.tsx

@@ -9,7 +9,7 @@ import {
 import React from 'react';
 
 const LatestTxsItemSkeleton = () => {
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <Box

ui/snippets/navigation/useColors.ts

@@ -12,7 +12,7 @@ export default function useColors() {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('gray.200', 'whiteAlpha.200'),
+      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/networkMenu/useColors.ts

@@ -7,7 +7,7 @@ export default function useColors({ hasIcon }: {hasIcon: boolean}) {
   return {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
-      active: useColorModeValue('gray.700', 'whiteAlpha.900'),
+      active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
       hover: useColorModeValue('blue.600', 'blue.400'),
     },
     icon: {
@@ -19,7 +19,7 @@ export default function useColors({ hasIcon }: {hasIcon: boolean}) {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('gray.200', 'whiteAlpha.200'),
+      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/profileMenu/ProfileMenuContent.tsx

@@ -12,8 +12,8 @@ type Props = UserInfo;
 
 const ProfileMenuContent = ({ name, nickname, email }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
-  const primaryTextColor = useColorModeValue('gray.600', 'whiteAlpha.800');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
   return (
     <Box>

ui/txs/TxAdditionalInfo.tsx

@@ -12,7 +12,7 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
-  const sectionBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const sectionBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const sectionProps = {
     borderBottom: '1px solid',
     borderColor: sectionBorderColor,

ui/txs/TxsFilters.tsx

@@ -72,7 +72,7 @@ const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
     onClose();
   }, [ onClose, onFiltersChange, typeFilter, methodFilter ]);
 
-  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>

ui/txs/TxsTableItem.tsx

@@ -68,7 +68,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
     </Address>
   );
 
-  const infoBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const infoBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   return (
     <Tr>
       <Td pl={ 4 }>