fix: colors in token warnings (#5787)

src/components/TokenSafety/TokenSafetyLabel.tsx

@@ -1,14 +1,14 @@
 import { WARNING_LEVEL } from 'constants/tokenSafety'
-import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
+import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWarningColor'
 import { ReactNode } from 'react'
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 
-const Label = styled.div<{ color: string }>`
+const Label = styled.div<{ color: string; backgroundColor: string }>`
   padding: 4px 4px;
   font-size: 12px;
-  background-color: ${({ color }) => color + '1F'};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   border-radius: 8px;
   color: ${({ color }) => color};
   display: inline-flex;
@@ -28,7 +28,7 @@ type TokenWarningLabelProps = {
 }
 export default function TokenSafetyLabel({ level, canProceed, children }: TokenWarningLabelProps) {
   return (
-    <Label color={useTokenWarningColor(level)}>
+    <Label color={useTokenWarningTextColor(level)} backgroundColor={useTokenWarningColor(level)}>
       <Title marginRight="5px">{children}</Title>
       {canProceed ? <AlertTriangle strokeWidth={2.5} size="14px" /> : <Slash strokeWidth={2.5} size="14px" />}
     </Label>

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -1,15 +1,15 @@
 import { Trans } from '@lingui/macro'
 import { getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning } from 'constants/tokenSafety'
-import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
+import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWarningColor'
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
 
-const Label = styled.div<{ color: string }>`
+const Label = styled.div<{ color: string; backgroundColor: string }>`
   width: 100%;
   padding: 12px 20px 16px;
-  background-color: ${({ color }) => color + '1F'};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   border-radius: 16px;
   color: ${({ color }) => color};
 `
@@ -39,17 +39,18 @@ const StyledLink = styled(ExternalLink)`
   font-weight: 700;
 `
 
-type TokenWarningMessageProps = {
+type TokenSafetyMessageProps = {
   warning: Warning
   tokenAddress: string
 }
 
-export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarningMessageProps) {
-  const color = useTokenWarningColor(warning.level)
+export default function TokenSafetyMessage({ warning, tokenAddress }: TokenSafetyMessageProps) {
+  const backgroundColor = useTokenWarningColor(warning.level)
+  const textColor = useTokenWarningTextColor(warning.level)
   const { heading, description } = getWarningCopy(warning)
 
   return (
-    <Label color={color}>
+    <Label color={textColor} backgroundColor={backgroundColor}>
       <TitleRow>
         {warning.canProceed ? <AlertTriangle size="16px" /> : <Slash size="16px" />}
         <Title marginLeft="7px">{warning.message}</Title>

src/hooks/useTokenWarningColor.test.ts

@@ -0,0 +1,41 @@
+import { WARNING_LEVEL } from 'constants/tokenSafety'
+import { renderHook } from 'test-utils'
+import { lightTheme } from 'theme/colors'
+
+import { useTokenWarningColor, useTokenWarningTextColor } from './useTokenWarningColor'
+
+describe('Token Warning Colors', () => {
+  describe('useTokenWarningColor', () => {
+    it('medium', () => {
+      const { result } = renderHook(() => useTokenWarningColor(WARNING_LEVEL.MEDIUM))
+      expect(result.current).toEqual(lightTheme.accentWarningSoft)
+    })
+
+    it('strong', () => {
+      const { result } = renderHook(() => useTokenWarningColor(WARNING_LEVEL.UNKNOWN))
+      expect(result.current).toEqual(lightTheme.accentFailureSoft)
+    })
+
+    it('blocked', () => {
+      const { result } = renderHook(() => useTokenWarningColor(WARNING_LEVEL.BLOCKED))
+      expect(result.current).toEqual(lightTheme.backgroundFloating)
+    })
+  })
+
+  describe('useTokenWarningTextColor', () => {
+    it('medium', () => {
+      const { result } = renderHook(() => useTokenWarningTextColor(WARNING_LEVEL.MEDIUM))
+      expect(result.current).toEqual(lightTheme.accentWarning)
+    })
+
+    it('strong', () => {
+      const { result } = renderHook(() => useTokenWarningTextColor(WARNING_LEVEL.UNKNOWN))
+      expect(result.current).toEqual(lightTheme.accentFailure)
+    })
+
+    it('blocked', () => {
+      const { result } = renderHook(() => useTokenWarningTextColor(WARNING_LEVEL.BLOCKED))
+      expect(result.current).toEqual(lightTheme.textSecondary)
+    })
+  })
+})

src/hooks/useTokenWarningColor.ts

@@ -1,21 +1,28 @@
 import { WARNING_LEVEL } from 'constants/tokenSafety'
-import { useEffect, useState } from 'react'
 import { useTheme } from 'styled-components/macro'
 
-export const useTokenWarningColor = (level: WARNING_LEVEL) => {
-  const [color, setColor] = useState('')
+export const useTokenWarningTextColor = (level: WARNING_LEVEL) => {
   const theme = useTheme()
 
-  useEffect(() => {
-    switch (level) {
-      case WARNING_LEVEL.MEDIUM:
-        return setColor(theme.accentWarning)
-      case WARNING_LEVEL.UNKNOWN:
-        return setColor(theme.accentFailure)
-      case WARNING_LEVEL.BLOCKED:
-        return setColor(theme.textSecondary)
-    }
-  }, [level, theme])
-
-  return color
+  switch (level) {
+    case WARNING_LEVEL.MEDIUM:
+      return theme.accentWarning
+    case WARNING_LEVEL.UNKNOWN:
+      return theme.accentFailure
+    case WARNING_LEVEL.BLOCKED:
+      return theme.textSecondary
+  }
+}
+
+export const useTokenWarningColor = (level: WARNING_LEVEL) => {
+  const theme = useTheme()
+
+  switch (level) {
+    case WARNING_LEVEL.MEDIUM:
+      return theme.accentWarningSoft
+    case WARNING_LEVEL.UNKNOWN:
+      return theme.accentFailureSoft
+    case WARNING_LEVEL.BLOCKED:
+      return theme.backgroundFloating
+  }
 }

src/test-utils.tsx

@@ -1,6 +1,6 @@
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
-import { render } from '@testing-library/react'
+import { render, renderHook } from '@testing-library/react'
 import Web3Provider from 'components/Web3Provider'
 import { DEFAULT_LOCALE } from 'constants/locales'
 import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
@@ -44,6 +44,9 @@ const WithProviders = ({ children }: { children?: ReactNode }) => {
 }
 
 const customRender = (ui: ReactElement) => render(ui, { wrapper: WithProviders })
+const customRenderHook = <Result, Props>(hook: (initialProps: Props) => Result) =>
+  renderHook(hook, { wrapper: WithProviders })
 
 export * from '@testing-library/react'
 export { customRender as render }
+export { customRenderHook as renderHook }

src/theme/colors.ts

@@ -150,7 +150,7 @@ export const darkTheme = {
   accentActiveSoft: opacify(24, colors.blue400),
   accentSuccessSoft: opacify(24, colors.green400),
   accentWarningSoft: opacify(24, colors.gold200),
-  accentFailureSoft: opacify(12, colors.red400),
+  accentFailureSoft: opacify(12, colors.red300),
 
   accentTextDarkPrimary: opacify(80, colors.gray900),
   accentTextDarkSecondary: opacify(60, colors.gray900),
@@ -200,7 +200,7 @@ export const lightTheme: Theme = {
 
   accentActionSoft: opacify(24, colors.pink400),
   accentActiveSoft: opacify(24, colors.blue400),
-  accentSuccessSoft: opacify(24, colors.green400),
+  accentSuccessSoft: opacify(24, colors.green300),
   accentWarningSoft: opacify(24, colors.gold200),
   accentFailureSoft: opacify(12, colors.red400),
 
@@ -209,7 +209,7 @@ export const lightTheme: Theme = {
   accentTextDarkTertiary: opacify(24, colors.gray900),
 
   accentTextLightPrimary: colors.gray50,
-  accentTextLightSecondary: opacify(60, colors.gray50),
+  accentTextLightSecondary: opacify(72, colors.gray50),
   accentTextLightTertiary: opacify(12, colors.gray50),
 
   deepShadow: