ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make background opaque (#4895)

Browse Source 
* fix: remove old background-color flash (#4890)

remove old background-color

* fix: make background opaque

* refactor to fix dismissal bug and improve code quality

* fix merge errors
This commit is contained in:
Jordan Frankfurt 2022-10-13 13:33:40 -05:00 committed by GitHub
parent 0faaa3f0c4
commit f6b08e8ed1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/Tokens/TokensBanner.tsx
View File

@ -1,6 +1,8 @@
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core'
import { ElementName, Event, EventName } from 'analytics/constants' import { ElementName, Event, EventName } from 'analytics/constants'
import { TraceEvent } from 'analytics/TraceEvent' import { TraceEvent } from 'analytics/TraceEvent'
import { chainIdToBackendName } from 'graphql/data/util'
import { X } from 'react-feather' import { X } from 'react-feather'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { useShowTokensPromoBanner } from 'state/user/hooks' import { useShowTokensPromoBanner } from 'state/user/hooks'
@ -11,27 +13,32 @@ import { Z_INDEX } from 'theme/zIndex'
import tokensPromoDark from '../../assets/images/tokensPromoDark.png' import tokensPromoDark from '../../assets/images/tokensPromoDark.png'
import tokensPromoLight from '../../assets/images/tokensPromoLight.png' import tokensPromoLight from '../../assets/images/tokensPromoLight.png'
const PopupContainer = styled(Link)<{ show: boolean }>` const BackgroundColor = styled(Link)<{ show: boolean }>`
position: fixed; background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : '#FDF0F8')};
display: ${({ show }) => (show ? 'flex' : 'none')};
text-decoration: none;
flex-direction: column;
padding: 12px 16px 12px 20px;
gap: 8px;
bottom: 48px;
right: clamp(0px, 1vw, 16px);
width: 320px;
height: 88px;
z-index: ${Z_INDEX.sticky};
background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : opacify(60, '#FDF0F8'))};
color: ${({ theme }) => theme.textPrimary};
border: 1px solid ${({ theme }) => theme.backgroundOutline}; border: 1px solid ${({ theme }) => theme.backgroundOutline};
border-radius: 12px; border-radius: 12px;
bottom: 48px;
box-shadow: ${({ theme }) => theme.deepShadow}; box-shadow: ${({ theme }) => theme.deepShadow};
display: ${({ show }) => (show ? 'block' : 'none')};
height: 88px;
position: fixed;
right: clamp(0px, 1vw, 16px);
text-decoration: none;
width: 320px;
z-index: ${Z_INDEX.sticky};
`
const PopupContainer = styled.div`
background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : opacify(60, '#FDF0F8'))};
background-image: url(${({ theme }) => (theme.darkMode ? `${tokensPromoDark}` : `${tokensPromoLight}`)}); background-image: url(${({ theme }) => (theme.darkMode ? `${tokensPromoDark}` : `${tokensPromoLight}`)});
background-size: cover; background-size: cover;
background-blend-mode: overlay; background-blend-mode: overlay;
border-radius: 12px;
color: ${({ theme }) => theme.textPrimary};
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
padding: 12px 16px 12px 20px;
transition: ${({ transition: ${({
theme: { theme: {
@ -40,8 +47,8 @@ const PopupContainer = styled(Link)<{ show: boolean }>`
}) => `${duration.slow} opacity ${timing.in}`}; }) => `${duration.slow} opacity ${timing.in}`};
` `
const Header = styled.div` const Header = styled.div`
display: flex;
align-items: center; align-items: center;
display: flex;
justify-content: space-between; justify-content: space-between;
` `
const HeaderText = styled.span` const HeaderText = styled.span`
@ -60,34 +67,34 @@ const Description = styled.span`
export default function TokensBanner() { export default function TokensBanner() {
const theme = useTheme() const theme = useTheme()
const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner() const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner()
const { chainId: connectedChainId } = useWeb3React()
const closeBanner = () => { const chainName = chainIdToBackendName(connectedChainId).toLowerCase()
setShowTokensPromoBanner(false)
}
return ( return (
<TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}> <BackgroundColor show={showTokensPromoBanner} to={`/tokens/${chainName}`}>
<PopupContainer show={showTokensPromoBanner} to="/tokens" onClick={closeBanner}> <TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
<Header> <PopupContainer>
<HeaderText> <Header>
<Trans>Explore top tokens on Uniswap</Trans> <HeaderText>
</HeaderText> <Trans>Explore Top Tokens on Uniswap</Trans>
<X </HeaderText>
size={20} <X
color={theme.textSecondary} size={20}
onClick={(e) => { color={theme.textSecondary}
e.preventDefault() onClick={(e) => {
e.stopPropagation() e.preventDefault()
closeBanner() e.stopPropagation()
}} setShowTokensPromoBanner(false)
style={{ cursor: 'pointer' }} }}
/> style={{ cursor: 'pointer' }}
</Header> />
</Header>
<Description> <Description>
<Trans>Sort and filter assets across networks on the new Tokens page.</Trans> <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
</Description> </Description>
</PopupContainer> </PopupContainer>
</TraceEvent> </TraceEvent>
</BackgroundColor>
) )
} }