Commit d3cbcc76 authored by lynn's avatar lynn Committed by GitHub

fix: remove radial gradient background effect from nft pages (#5057)

init
parent ab43800d
import { useWeb3React } from '@web3-react/core'
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useDarkModeManager } from 'state/user/hooks'
import { SupportedChainId } from '../constants/chains'
import { colorsDark, colorsLight } from './colors'
const initialStyles = {
width: '200vw',
......@@ -27,12 +29,23 @@ const setBackground = (newValues: TargetBackgroundStyles) =>
export default function RadialGradientByChainUpdater(): null {
const { chainId } = useWeb3React()
const [darkMode] = useDarkModeManager()
const { pathname } = useLocation()
const isNftPage = pathname.startsWith('/nfts') || pathname.startsWith('/profile')
// manage background color
useEffect(() => {
if (!backgroundRadialGradientElement) {
return
}
if (isNftPage) {
setBackground(initialStyles)
backgroundRadialGradientElement.style.background = darkMode
? colorsDark.backgroundBackdrop
: colorsLight.backgroundBackdrop
return
}
switch (chainId) {
case SupportedChainId.ARBITRUM_ONE:
case SupportedChainId.ARBITRUM_RINKEBY:
......@@ -77,6 +90,6 @@ export default function RadialGradientByChainUpdater(): null {
const defaultDarkGradient = 'linear-gradient(180deg, #202738 0%, #070816 100%)'
backgroundRadialGradientElement.style.background = darkMode ? defaultDarkGradient : defaultLightGradient
}
}, [darkMode, chainId])
}, [darkMode, chainId, isNftPage])
return null
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment