fix: text color in token list

protofire · Sep 27, 2024 · 347bdee · 347bdee
1 parent e4e554c
commit 347bdee
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx
@@ -62,7 +62,7 @@ const TokenSelectItem = ({ data }: Props) => {
       _hover={{
         bgColor: useColorModeValue('blue.50', 'gray.800'),
       }}
-      color="initial"
+      color={ useColorModeValue('gray.900', 'gray.50') }
       fontSize="sm"
       href={ url }
     >

diff --git a/ui/address/tokenSelect/TokenSelectMenu.tsx b/ui/address/tokenSelect/TokenSelectMenu.tsx
@@ -24,7 +24,7 @@ interface Props {
 const TokenSelectMenu = ({ erc20sort, erc1155sort, filteredData, onInputChange, onSortClick, searchTerm }: Props) => {
   const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
   const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
-
+  const textColor = useColorModeValue('gray.900', 'gray.50');
   const hasFilteredResult = _sumBy(Object.values(filteredData), ({ items }) => items.length) > 0;
 
   return (
@@ -68,9 +68,14 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, filteredData, onInputChange,
           return (
             <Box key={ type }>
               <Flex justifyContent="space-between">
-                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">{ type } tokens ({ numPrefix }{ tokenInfo.items.length })</Text>
+                <Text mb={ 3 } fontWeight={ 600 } fontSize="sm">{ type } tokens ({ numPrefix }{ tokenInfo.items.length })</Text>
                 { hasSort && (
-                  <Link data-type={ type } onClick={ onSortClick } aria-label={ `Sort ${ type } tokens` }>
+                  <Link
+                    data-type={ type }
+                    color={ textColor }
+                    onClick={ onSortClick }
+                    aria-label={ `Sort ${ type } tokens` }
+                  >
                     <IconSvg name="arrows/east" boxSize={ 5 } transform={ arrowTransform } transitionDuration="faster"/>
                   </Link>
                 ) }