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 { useWeb3React } from '@web3-react/core'
import { ElementName, Event, EventName } from 'analytics/constants'
import { TraceEvent } from 'analytics/TraceEvent'
import { chainIdToBackendName } from 'graphql/data/util'
import { X } from 'react-feather'
import { Link } from 'react-router-dom'
import { useShowTokensPromoBanner } from 'state/user/hooks'
@ -11,27 +13,32 @@ import { Z_INDEX } from 'theme/zIndex'
import tokensPromoDark from '../../assets/images/tokensPromoDark.png'
import tokensPromoLight from '../../assets/images/tokensPromoLight.png'
const PopupContainer = styled(Link)<{ show: boolean }>`
position: fixed;
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};
const BackgroundColor = styled(Link)<{ show: boolean }>`
background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : '#FDF0F8')};
border: 1px solid ${({ theme }) => theme.backgroundOutline};
border-radius: 12px;
bottom: 48px;
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-size: cover;
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: ${({
theme: {
@ -40,8 +47,8 @@ const PopupContainer = styled(Link)<{ show: boolean }>`
}) => `${duration.slow} opacity ${timing.in}`};
`
const Header = styled.div`
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
`
const HeaderText = styled.span`
@ -60,34 +67,34 @@ const Description = styled.span`
export default function TokensBanner() {
const theme = useTheme()
const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner()
const closeBanner = () => {
setShowTokensPromoBanner(false)
}
const { chainId: connectedChainId } = useWeb3React()
const chainName = chainIdToBackendName(connectedChainId).toLowerCase()
return (
<TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
<PopupContainer show={showTokensPromoBanner} to="/tokens" onClick={closeBanner}>
<Header>
<HeaderText>
<Trans>Explore top tokens on Uniswap</Trans>
</HeaderText>
<X
size={20}
color={theme.textSecondary}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
closeBanner()
}}
style={{ cursor: 'pointer' }}
/>
</Header>
<BackgroundColor show={showTokensPromoBanner} to={`/tokens/${chainName}`}>
<TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
<PopupContainer>
<Header>
<HeaderText>
<Trans>Explore Top Tokens on Uniswap</Trans>
</HeaderText>
<X
size={20}
color={theme.textSecondary}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
setShowTokensPromoBanner(false)
}}
style={{ cursor: 'pointer' }}
/>
</Header>
<Description>
<Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
</Description>
</PopupContainer>
</TraceEvent>
<Description>
<Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
</Description>
</PopupContainer>
</TraceEvent>
</BackgroundColor>
)
}