Update info icon color (#2088)

* Icon info color

Fixes #2045

* fix test

* more test fixes

theme/foundations/semanticTokens.ts

@@ -19,6 +19,10 @@ const semanticTokens = {
     link_hovered: {
       'default': 'blue.400',
     },
+    icon_info: {
+      'default': 'gray.400',
+      _dark: 'gray.500',
+    },
     error: {
       'default': 'red.500',
       _dark: 'red.500',

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -105,7 +105,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
         <Popover trigger="hover" isLazy placement={ isMobile ? 'bottom-end' : 'right-start' } offset={ [ -8, 8 ] }>
           <PopoverTrigger>
             <chakra.span display="inline-block" ml={ 1 } cursor="pointer" verticalAlign="middle" h="22px">
-              <IconSvg name="info" boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/>
+              <IconSvg name="info" boxSize={ 5 } color="icon_info" _hover={{ color: 'link_hovered' }}/>
             </chakra.span>
           </PopoverTrigger>
           <Portal>

ui/home/Stats.tsx

@@ -74,6 +74,7 @@ const Stats = () => {
           boxSize={ 5 }
           flexShrink={ 0 }
           cursor="pointer"
+          color="icon_info"
           _hover={{ color: 'link_hovered' }}
         />
       </GasInfoTooltip>

ui/home/indicators/ChainIndicatorItem.tsx

@@ -52,7 +52,7 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC
     return (
       <Skeleton isLoaded={ !stats.isPlaceholderData } ml={ 1 } display="flex" alignItems="center" color={ diffColor }>
         <span>{ diff >= 0 ? '+' : '-' }</span>
-        <Text color={ diffColor } fontWeight={ 600 }>{ diff }%</Text>
+        <Text color={ diffColor } fontWeight={ 600 }>{ Math.abs(diff) }%</Text>
       </Skeleton>
     );
   })();

ui/home/indicators/ChainIndicators.pw.tsx

@@ -22,6 +22,9 @@ test.describe('daily txs chart', () => {
     await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
     await mockAssetResponse(statsMock.withSecondaryCoin.coin_image as string, './playwright/mocks/image_svg.svg');
     component = await render(<ChainIndicators/>);
+    await page.waitForFunction(() => {
+      return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
+    });
     await page.hover('.ChartOverlay', { position: { x: 50, y: 50 } });
   });
 
@@ -38,19 +41,23 @@ test.describe('daily txs chart', () => {
   });
 });
 
-test('partial data', async({ page, mockApiResponse, render }) => {
+test('partial data', async({ page, mockApiResponse, mockAssetResponse, render }) => {
   await mockApiResponse('stats', statsMock.base);
   await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData);
+  await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+
   const component = await render(<ChainIndicators/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
   });
   await expect(component).toHaveScreenshot();
 });
 
-test('no data', async({ mockApiResponse, render }) => {
+test('no data', async({ mockApiResponse, mockAssetResponse, render }) => {
   await mockApiResponse('stats', statsMock.noChartData);
   await mockApiResponse('stats_charts_txs', dailyTxsMock.noData);
+  await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+
   const component = await render(<ChainIndicators/>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/AdditionalInfoButton.tsx

@@ -42,7 +42,7 @@ const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props,
       <IconSvg
         name="info"
         boxSize={ 5 }
-        color="link"
+        color={ isOpen ? 'link_hovered' : 'icon_info' }
         _hover={{ color: 'link_hovered' }}
       />
     </Button>

ui/shared/Hint.tsx

@@ -35,7 +35,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
       <IconButton
         colorScheme="none"
         aria-label="hint"
-        icon={ <IconSvg name="info" w="100%" h="100%"/> }
+        icon={ <IconSvg name="info" w="100%" h="100%" color="icon_info" _hover={{ color: 'link_hovered' }}/> }
         boxSize={ 5 }
         variant="simple"
         display="inline-block"

ui/stats/ChartsWidgetsList.tsx

@@ -76,7 +76,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                 </Heading>
                 { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
                   <GasInfoTooltip data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }>
-                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" _hover={{ color: 'link_hovered' }}/>
+                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" color="icon_info" _hover={{ color: 'link_hovered' }}/>
                   </GasInfoTooltip>
                 ) }
               </Skeleton>