list item theming

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -18,21 +18,21 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
         { item.tokenBalance && (
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
-            <Text>{ `xDAI balance:${ nbsp }` + item.tokenBalance }</Text>
-            <Text color="gray.500">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
+            <Text color={ mainTextColor }>{ `xDAI balance:${ nbsp }` + item.tokenBalance }</Text>
+            <Text color={ secondaryTextColor }>{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.tokensAmount && (
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/>
-            <Text>{ `Tokens:${ nbsp }` + item.tokensAmount }</Text>
-            <Text color="gray.500">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
+            <Text color={ mainTextColor }>{ `Tokens:${ nbsp }` + item.tokensAmount }</Text>
+            <Text color={ secondaryTextColor }>{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.totalUSD && (
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Icon as={ WalletIcon } marginRight="10px" w="16px" h="16px"/>
-            <Text>{ `Net worth:${ nbsp }` }</Text>
+            <Text color={ mainTextColor }>{ `Net worth:${ nbsp }` }</Text>
             <Link href="#">{ `$${ item.totalUSD } USD` }</Link>
           </HStack>
         ) }