fix: info labels for extended list tokens (#6678)

* fix: info labels for extended list tokens

* test: update warning tests for new changes

* fix: function for label and padding

* fix: use warning check function

* fix: update displayWarningLabel

src/components/TokenSafety/TokenSafetyMessage.tsx

 import { Trans } from '@lingui/macro'
-import { getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning } from 'constants/tokenSafety'
+import { displayWarningLabel, getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning } from 'constants/tokenSafety'
 import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWarningColor'
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
@@ -11,6 +11,7 @@ const Label = styled.div<{ color: string; backgroundColor: string }>`
   padding: 12px 20px 16px;
   background-color: ${({ backgroundColor }) => backgroundColor};
   border-radius: 16px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   color: ${({ color }) => color};
 `
 
@@ -35,7 +36,8 @@ const DetailsRow = styled.div`
 `
 
 const StyledLink = styled(ExternalLink)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.accentAction};
+
   font-weight: 700;
 `
 
@@ -51,10 +53,12 @@ export default function TokenSafetyMessage({ warning, tokenAddress }: TokenSafet
 
   return (
     <Label data-cy="token-safety-message" color={textColor} backgroundColor={backgroundColor}>
-      <TitleRow>
-        {warning.canProceed ? <AlertTriangle size="16px" /> : <Slash size="16px" />}
-        <Title marginLeft="7px">{warning.message}</Title>
-      </TitleRow>
+      {displayWarningLabel(warning) && (
+        <TitleRow>
+          {warning.canProceed ? <AlertTriangle size="16px" /> : <Slash size="16px" />}
+          <Title marginLeft="7px">{warning.message}</Title>
+        </TitleRow>
+      )}
 
       <DetailsRow>
         {heading}

src/components/TokenSafety/index.tsx

@@ -4,7 +4,14 @@ import { ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import TokenSafetyLabel from 'components/TokenSafety/TokenSafetyLabel'
-import { checkWarning, getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning, WARNING_LEVEL } from 'constants/tokenSafety'
+import {
+  checkWarning,
+  displayWarningLabel,
+  getWarningCopy,
+  NotFoundWarning,
+  TOKEN_SAFETY_ARTICLE,
+  Warning,
+} from 'constants/tokenSafety'
 import { useToken } from 'hooks/Tokens'
 import { ExternalLink as LinkIconFeather } from 'react-feather'
 import { Text } from 'rebass'
@@ -23,7 +30,7 @@ const Wrapper = styled.div`
 
 const Container = styled.div`
   width: 100%;
-  padding: 32px 50px;
+  padding: 32px 40px;
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -85,7 +92,7 @@ const Buttons = ({
   return warning.canProceed ? (
     <>
       <StyledButton onClick={onContinue}>
-        <Trans>I understand</Trans>
+        {!displayWarningLabel(warning) ? <Trans>Continue</Trans> : <Trans>I understand</Trans>}
       </StyledButton>
       {showCancel && <StyledCancelButton onClick={onCancel}>Cancel</StyledCancelButton>}
     </>
@@ -183,7 +190,7 @@ function ExplorerView({ token }: { token: Token }) {
 }
 
 const StyledExternalLink = styled(ExternalLink)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.accentAction};
   stroke: currentColor;
   font-weight: 600;
 `
@@ -251,11 +258,6 @@ export default function TokenSafety({
       <Trans>Learn more</Trans>
     </StyledExternalLink>
   )
-  const tokenNotFoundWarning = {
-    level: WARNING_LEVEL.UNKNOWN,
-    message: <Trans>Token not found</Trans>,
-    canProceed: false,
-  }
 
   return displayWarning ? (
     <Wrapper data-testid="TokenSafetyWrapper">
@@ -263,9 +265,11 @@ export default function TokenSafety({
         <AutoColumn>
           <LogoContainer>{logos}</LogoContainer>
         </AutoColumn>
-        <ShortColumn>
-          <SafetyLabel warning={displayWarning} />
-        </ShortColumn>
+        {displayWarningLabel(displayWarning) && (
+          <ShortColumn>
+            <SafetyLabel warning={displayWarning} />
+          </ShortColumn>
+        )}
         <ShortColumn>
           <InfoText>
             {heading} {description} {learnMoreUrl}
@@ -285,14 +289,14 @@ export default function TokenSafety({
     <Wrapper>
       <Container>
         <ShortColumn>
-          <SafetyLabel warning={tokenNotFoundWarning} />
+          <SafetyLabel warning={NotFoundWarning} />
         </ShortColumn>
         <ShortColumn>
           <InfoText>
             {heading} {description} {learnMoreUrl}
           </InfoText>
         </ShortColumn>
-        <Buttons warning={tokenNotFoundWarning} onCancel={onCancel} showCancel={true} />
+        <Buttons warning={NotFoundWarning} onCancel={onCancel} showCancel={true} />
       </Container>
     </Wrapper>
   )

src/constants/tokenSafety.tsx

@@ -78,6 +78,12 @@ const BlockedWarning: Warning = {
   canProceed: false,
 }
 
+export const NotFoundWarning: Warning = {
+  level: WARNING_LEVEL.UNKNOWN,
+  message: <Trans>Token not found</Trans>,
+  canProceed: false,
+}
+
 export function checkWarning(tokenAddress: string) {
   if (tokenAddress === NATIVE_CHAIN_ID || tokenAddress === ZERO_ADDRESS) {
     return null
@@ -103,3 +109,7 @@ export function checkSearchTokenWarning(token: SearchToken) {
   }
   return checkWarning(token.address)
 }
+
+export function displayWarningLabel(warning: Warning | null) {
+  return warning && warning.level !== WARNING_LEVEL.MEDIUM
+}

src/hooks/useTokenWarningColor.test.ts

@@ -8,7 +8,7 @@ describe('Token Warning Colors', () => {
   describe('useTokenWarningColor', () => {
     it('medium', () => {
       const { result } = renderHook(() => useTokenWarningColor(WARNING_LEVEL.MEDIUM))
-      expect(result.current).toEqual(lightTheme.accentWarningSoft)
+      expect(result.current).toEqual(lightTheme.backgroundFloating)
     })
 
     it('strong', () => {

src/hooks/useTokenWarningColor.ts

@@ -19,7 +19,7 @@ export const useTokenWarningColor = (level: WARNING_LEVEL) => {
 
   switch (level) {
     case WARNING_LEVEL.MEDIUM:
-      return theme.accentWarningSoft
+      return theme.backgroundFloating
     case WARNING_LEVEL.UNKNOWN:
       return theme.accentFailureSoft
     case WARNING_LEVEL.BLOCKED: