From add4b291debf4928b37a82bac6be9b61f4666f09 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Tue, 3 May 2022 13:35:17 +0100 Subject: [PATCH 1/5] Dropping gradients for gchain network alert component Using instead theme colors --- .../NetworkAlert/NetworkAlert.tsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx index 6e772eee93..6608624fea 100644 --- a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx +++ b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx @@ -9,6 +9,9 @@ import { ExternalLink, HideSmall } from 'theme' import { AutoRow } from 'components/Row' +// mod imports +import useTheme from 'hooks/useTheme' + const L2Icon = styled.img` width: 24px; height: 24px; @@ -47,11 +50,11 @@ const SHOULD_SHOW_ALERT = { type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT -const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: { +/* const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: { [darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string } } = { dark: { - /* [SupportedChainId.POLYGON]: + [SupportedChainId.POLYGON]: 'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)', [SupportedChainId.POLYGON_MUMBAI]: 'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)', @@ -62,13 +65,10 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: { [SupportedChainId.ARBITRUM_ONE]: 'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.01) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.05) 100%), hsla(0, 0%, 100%, 0.05)', [SupportedChainId.ARBITRUM_RINKEBY]: - 'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)', */ - // TODO: adjust colors - [SupportedChainId.XDAI]: - 'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)', + 'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)', }, light: { - /* [SupportedChainId.POLYGON]: + [SupportedChainId.POLYGON]: 'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)', [SupportedChainId.POLYGON_MUMBAI]: 'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)', @@ -79,15 +79,12 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: { [SupportedChainId.ARBITRUM_ONE]: 'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)', [SupportedChainId.ARBITRUM_RINKEBY]: - 'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)', */ - // TODO: adjust colors - [SupportedChainId.XDAI]: - 'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)', + 'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)', }, -} +} */ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boolean; logoUrl: string }>` - background: ${({ chainId, darkMode }) => BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID[darkMode ? 'dark' : 'light'][chainId]}; + background: ${({ theme }) => theme.bg1}; border-radius: 20px; display: flex; flex-direction: row; @@ -133,15 +130,14 @@ const StyledArrowUpRight = styled(ArrowUpRight)` height: 24px; ` -const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = { - /* [SupportedChainId.POLYGON]: 'rgba(130, 71, 229)', +/* const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = { + [SupportedChainId.POLYGON]: 'rgba(130, 71, 229)', [SupportedChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)', [SupportedChainId.OPTIMISM]: '#ff3856', [SupportedChainId.OPTIMISTIC_KOVAN]: '#ff3856', [SupportedChainId.ARBITRUM_ONE]: '#0490ed', - [SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed', */ - [SupportedChainId.XDAI]: '#0490ed', // TODO: adjust colors -} + [SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed', +} */ function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains { return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains]) @@ -151,12 +147,14 @@ export function NetworkAlert() { const { chainId } = useActiveWeb3React() const [darkMode] = useDarkModeManager() + const theme = useTheme() // mod + if (!shouldShowAlert(chainId)) { return null } const { label, logoUrl, bridge } = CHAIN_INFO[chainId] - const textColor = TEXT_COLORS[chainId] + const textColor = /*TEXT_COLORS[chainId] mod */ theme.text1 return bridge ? ( From b70d14033d6c9910b5abd6cf54319f539085badb Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Wed, 4 May 2022 10:40:16 +0100 Subject: [PATCH 2/5] Added text decoration underline on network alert hover --- .../components/NetworkAlert/NetworkAlert/NetworkAlert.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx index 6608624fea..6623ff704d 100644 --- a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx +++ b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx @@ -104,6 +104,11 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole width: 300px; z-index: -1; } + + // mod + :hover { + text-decoration: underline; + } ` const Header = styled.h2` font-weight: 600; From 40f74c8799b1ba989cf77df66858b00ff77d3e49 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Wed, 4 May 2022 10:53:03 +0100 Subject: [PATCH 3/5] Updating background color on hover as well --- src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx index 6623ff704d..8cec6cefaa 100644 --- a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx +++ b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx @@ -108,6 +108,7 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole // mod :hover { text-decoration: underline; + background-color: ${({ theme }) => theme.bg7}; } ` const Header = styled.h2` From ad489fcb85a34aad96145d9f1ffd111b4757c784 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Wed, 4 May 2022 11:12:41 +0100 Subject: [PATCH 4/5] Do not show network alert if there's no active network connected --- .../components/NetworkAlert/NetworkAlert/NetworkAlert.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx index 8cec6cefaa..0b34addaff 100644 --- a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx +++ b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx @@ -1,7 +1,7 @@ import { Trans } from '@lingui/macro' import { CHAIN_INFO } from 'constants/chainInfo' import { SupportedChainId } from 'constants/chains' -import useActiveWeb3React from 'hooks/useActiveWeb3React' +// import useActiveWeb3React from 'hooks/useActiveWeb3React' import { ArrowUpRight } from 'react-feather' import { useDarkModeManager } from '@src/state/user/hooks' import styled from 'styled-components/macro' @@ -11,6 +11,7 @@ import { AutoRow } from 'components/Row' // mod imports import useTheme from 'hooks/useTheme' +import { useWeb3React } from 'web3-react-core' const L2Icon = styled.img` width: 24px; @@ -150,12 +151,12 @@ function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertCh } export function NetworkAlert() { - const { chainId } = useActiveWeb3React() + const { active, chainId } = useWeb3React() // mod const [darkMode] = useDarkModeManager() const theme = useTheme() // mod - if (!shouldShowAlert(chainId)) { + if (!shouldShowAlert(chainId) || !active) { return null } From f0a4a432115f21445345dccb58f097ee6b8ec359 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Wed, 4 May 2022 13:48:32 +0100 Subject: [PATCH 5/5] Underline only when text is hovered and changing text color to primary1 --- .../components/NetworkAlert/NetworkAlert/NetworkAlert.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx index 0b34addaff..f9fded51c0 100644 --- a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx +++ b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx @@ -33,6 +33,12 @@ const BodyText = styled.div` justify-content: flex-start; margin: 8px; font-size: 14px; + + // mod + :hover { + text-decoration: underline; + color: ${({ theme }) => theme.primary1}; + } ` const RootWrapper = styled.div` position: relative; @@ -108,7 +114,6 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole // mod :hover { - text-decoration: underline; background-color: ${({ theme }) => theme.bg7}; } `