fix: update network warning styling (#4767)

* init

* respond to cmcewen comments
This commit is contained in:
lynn 2022-09-30 13:51:58 -04:00 committed by GitHub
parent 8a9ade5f12
commit 7b6ac6cfaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -2,17 +2,25 @@ import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core'
import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
import { SupportedChainId } from 'constants/chains'
import { AlertOctagon } from 'react-feather'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { AlertOctagon, AlertTriangle } from 'react-feather'
import styled from 'styled-components/macro'
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
const BodyRow = styled.div`
color: ${({ theme }) => theme.deprecated_black};
const BodyRow = styled.div<{ $redesignFlag?: boolean }>`
color: ${({ theme, $redesignFlag }) => ($redesignFlag ? theme.textPrimary : theme.black)};
font-size: 12px;
font-weight: ${({ $redesignFlag }) => $redesignFlag && '400'};
font-size: ${({ $redesignFlag }) => ($redesignFlag ? '14px' : '12px')};
line-height: ${({ $redesignFlag }) => $redesignFlag && '20px'};
`
const CautionIcon = styled(AlertOctagon)`
const CautionOctagon = styled(AlertOctagon)`
color: ${({ theme }) => theme.deprecated_black};
`
const CautionTriangle = styled(AlertTriangle)`
color: ${({ theme }) => theme.accentWarning};
`
const Link = styled(ExternalLink)`
color: ${({ theme }) => theme.deprecated_black};
text-decoration: underline;
@ -23,21 +31,22 @@ const TitleRow = styled.div`
justify-content: flex-start;
margin-bottom: 8px;
`
const TitleText = styled.div`
color: black;
font-weight: 600;
const TitleText = styled.div<{ redesignFlag?: boolean }>`
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textPrimary : theme.black)};
font-weight: ${({ redesignFlag }) => (redesignFlag ? '500' : '600')};
font-size: 16px;
line-height: 20px;
line-height: ${({ redesignFlag }) => (redesignFlag ? '24px' : '20px')};
margin: 0px 12px;
`
const Wrapper = styled.div`
background-color: ${({ theme }) => theme.deprecated_yellow3};
const Wrapper = styled.div<{ redesignFlag?: boolean }>`
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_yellow3)};
border-radius: 12px;
border: 1px solid ${({ theme }) => theme.backgroundOutline};
bottom: 60px;
display: none;
max-width: 348px;
padding: 16px 20px;
position: absolute;
position: fixed;
right: 16px;
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium}px) {
display: block;
@ -48,20 +57,21 @@ export function ChainConnectivityWarning() {
const { chainId } = useWeb3React()
const info = getChainInfoOrDefault(chainId)
const label = info?.label
const redesignFlag = useRedesignFlag() === RedesignVariant.Enabled
return (
<Wrapper>
<Wrapper redesignFlag={redesignFlag}>
<TitleRow>
<CautionIcon />
<TitleText>
{redesignFlag ? <CautionTriangle /> : <CautionOctagon />}
<TitleText redesignFlag={redesignFlag}>
<Trans>Network Warning</Trans>
</TitleText>
</TitleRow>
<BodyRow>
<BodyRow $redesignFlag={redesignFlag}>
{chainId === SupportedChainId.MAINNET ? (
<Trans>You may have lost your network connection.</Trans>
) : (
<Trans>You may have lost your network connection, or {label} might be down right now.</Trans>
<Trans>{label} might be down right now, or you may have lost your network connection.</Trans>
)}{' '}
{(info as L2ChainInfo).statusPage !== undefined && (
<span>