From 785c2a67122d905fb7499814d48156510298a515 Mon Sep 17 00:00:00 2001 From: Charles Bachmeier Date: Fri, 18 Nov 2022 11:09:55 -0800 Subject: [PATCH] fix: Revert "feat: add glow on all pages" (#5315) Revert "feat: add glow on all pages (#5275)" This reverts commit 72c5e64f744265a1de46c3eb92dce0b8eef37341. --- public/index.html | 163 ++++++++++-------- .../Tokens/TokenTable/TokenTable.tsx | 23 +-- src/components/Widget/index.tsx | 20 +-- src/components/swap/styleds.tsx | 5 +- src/constants/chainInfo.ts | 16 ++ src/graphql/data/util.ts | 4 - src/index.tsx | 2 + .../components/details/AssetPriceDetails.tsx | 5 +- src/nft/components/details/InfoContainer.tsx | 11 +- src/nft/components/explore/Table.tsx | 15 +- src/pages/AddLiquidity/index.tsx | 2 +- src/pages/AddLiquidityV2/index.tsx | 6 +- src/pages/AppBody.tsx | 13 +- src/pages/CreateProposal/index.tsx | 6 +- src/pages/MigrateV2/MigrateV2Pair.tsx | 2 +- src/pages/MigrateV2/index.tsx | 2 +- src/pages/Pool/index.tsx | 13 +- src/pages/PoolFinder/index.tsx | 6 +- src/pages/RemoveLiquidity/V3.tsx | 6 +- src/pages/RemoveLiquidity/index.tsx | 6 +- src/pages/Swap/index.tsx | 2 +- src/pages/Tokens/index.tsx | 6 +- src/theme/colors.ts | 31 ++-- .../RadialGradientByChainUpdater.ts | 95 ++++++++++ src/theme/components/index.tsx | 5 + src/theme/index.tsx | 2 +- src/theme/{styles/index.ts => styles.ts} | 0 src/theme/styles/glow.tsx | 26 --- 28 files changed, 287 insertions(+), 206 deletions(-) create mode 100644 src/theme/components/RadialGradientByChainUpdater.ts rename src/theme/{styles/index.ts => styles.ts} (100%) delete mode 100644 src/theme/styles/glow.tsx diff --git a/public/index.html b/public/index.html index 5955f7dea8..677c91fd7d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,105 +1,120 @@ + + - - + Uniswap Interface + - Uniswap Interface - - - - - - + + + - - - + + + - - + - + - + - - - - + @media (prefers-color-scheme: dark) { + html { + background-color: #212429; + } + } -
- -
 
-
- + @media (prefers-color-scheme: light) { + html { + background-color: #f7f8fa; + } + } + + - \ No newline at end of file + + + +
+ +
 
+
+ +
+ + diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx index 6569f86f76..e06b2abf87 100644 --- a/src/components/Tokens/TokenTable/TokenTable.tsx +++ b/src/components/Tokens/TokenTable/TokenTable.tsx @@ -1,22 +1,21 @@ import { Trans } from '@lingui/macro' import { PAGE_SIZE, useTopTokens } from 'graphql/data/TopTokens' -import { chainBackendNameToId, validateUrlChainParam } from 'graphql/data/util' +import { validateUrlChainParam } from 'graphql/data/util' import { ReactNode } from 'react' import { AlertTriangle } from 'react-feather' import { useParams } from 'react-router-dom' import styled from 'styled-components/macro' -import { glowEffect } from 'theme/styles/glow' import { MAX_WIDTH_MEDIA_BREAKPOINT } from '../constants' import { HeaderRow, LoadedRow, LoadingRow } from './TokenRow' const GridContainer = styled.div` - ${glowEffect} - display: flex; flex-direction: column; max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}; background-color: ${({ theme }) => theme.backgroundSurface}; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), + 0px 24px 32px rgba(0, 0, 0, 0.01); margin-left: auto; margin-right: auto; border-radius: 12px; @@ -46,9 +45,9 @@ const NoTokenDisplay = styled.div` gap: 8px; ` -function NoTokensState({ chainId, message }: { chainId: number; message: ReactNode }) { +function NoTokensState({ message }: { message: ReactNode }) { return ( - + {message} @@ -65,9 +64,9 @@ const LoadingRows = ({ rowCount }: { rowCount: number }) => ( ) -export function LoadingTokenTable({ chainId, rowCount = PAGE_SIZE }: { chainId: number; rowCount?: number }) { +export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) { return ( - + @@ -78,18 +77,14 @@ export function LoadingTokenTable({ chainId, rowCount = PAGE_SIZE }: { chainId: export default function TokenTable({ setRowCount }: { setRowCount: (c: number) => void }) { // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s - // TODO: consider passing `chainId` and `chainName` from parent, where we already have it resolved const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName) const { tokens, sparklines } = useTopTokens(chainName) setRowCount(tokens?.length ?? PAGE_SIZE) - const chainId = chainBackendNameToId(chainName) - /* loading and error state */ if (!tokens) { return ( @@ -99,10 +94,10 @@ export default function TokenTable({ setRowCount }: { setRowCount: (c: number) = /> ) } else if (tokens?.length === 0) { - return No tokens found} /> + return No tokens found} /> } else { return ( - + {tokens.map( diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx index 367aeb4648..ccad941056 100644 --- a/src/components/Widget/index.tsx +++ b/src/components/Widget/index.tsx @@ -21,8 +21,6 @@ import { } from 'lib/utils/analytics' import { useCallback, useState } from 'react' import { useIsDarkMode } from 'state/user/hooks' -import styled from 'styled-components/macro' -import { glowEffect } from 'theme/styles/glow' import { computeRealizedPriceImpact } from 'utils/prices' import { switchChain } from 'utils/switchChain' @@ -39,10 +37,6 @@ function useWidgetTheme() { return useIsDarkMode() ? DARK_THEME : LIGHT_THEME } -const WidgetWrapper = styled.div` - ${glowEffect} -` - export interface WidgetProps { token?: Currency onTokenChange?: (token: Currency) => void @@ -50,7 +44,7 @@ export interface WidgetProps { } export default function Widget({ token, onTokenChange, onReviewSwapClick }: WidgetProps) { - const { connector, provider, chainId } = useWeb3React() + const { connector, provider } = useWeb3React() const locale = useActiveLocale() const theme = useWidgetTheme() const { inputs, tokenSelector } = useSyncWidgetInputs({ token, onTokenChange }) @@ -142,7 +136,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg } return ( - + <> {tokenSelector} - + ) } export function WidgetSkeleton() { const theme = useWidgetTheme() - const { chainId } = useWeb3React() - - return ( - - - - ) + return } diff --git a/src/components/swap/styleds.tsx b/src/components/swap/styleds.tsx index 00337537d8..ce2fcb7d85 100644 --- a/src/components/swap/styleds.tsx +++ b/src/components/swap/styleds.tsx @@ -4,7 +4,6 @@ import { ReactNode } from 'react' import { AlertTriangle } from 'react-feather' import { Text } from 'rebass' import styled, { css } from 'styled-components/macro' -import { glowEffect } from 'theme/styles/glow' import { Z_INDEX } from 'theme/zIndex' import { AutoColumn } from '../Column' @@ -24,9 +23,7 @@ export const PageWrapper = styled.div` ` // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility. -export const SwapWrapper = styled.main` - ${glowEffect} - +export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>` position: relative; background: ${({ theme }) => theme.backgroundSurface}; border-radius: 16px; diff --git a/src/constants/chainInfo.ts b/src/constants/chainInfo.ts index 6d921e52bb..9691134da9 100644 --- a/src/constants/chainInfo.ts +++ b/src/constants/chainInfo.ts @@ -6,6 +6,7 @@ import celoLogo from 'assets/svg/celo_logo.svg' import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg' import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg' import ms from 'ms.macro' +import { darkTheme } from 'theme/colors' import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains' import { ARBITRUM_LIST, CELO_LIST, OPTIMISM_LIST } from './lists' @@ -31,6 +32,8 @@ interface BaseChainInfo { symbol: string // e.g. 'gorETH', decimals: number // e.g. 18, } + readonly color?: string + readonly backgroundColor?: string } export interface L1ChainInfo extends BaseChainInfo { @@ -58,6 +61,7 @@ const CHAIN_INFO: ChainInfoMap = { label: 'Ethereum', logoUrl: ethereumLogoUrl, nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 }, + color: darkTheme.chain_1, }, [SupportedChainId.RINKEBY]: { networkType: NetworkType.L1, @@ -67,6 +71,7 @@ const CHAIN_INFO: ChainInfoMap = { label: 'Rinkeby', logoUrl: ethereumLogoUrl, nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 }, + color: darkTheme.chain_4, }, [SupportedChainId.ROPSTEN]: { networkType: NetworkType.L1, @@ -76,6 +81,7 @@ const CHAIN_INFO: ChainInfoMap = { label: 'Ropsten', logoUrl: ethereumLogoUrl, nativeCurrency: { name: 'Ropsten Ether', symbol: 'ropETH', decimals: 18 }, + color: darkTheme.chain_3, }, [SupportedChainId.KOVAN]: { networkType: NetworkType.L1, @@ -85,6 +91,7 @@ const CHAIN_INFO: ChainInfoMap = { label: 'Kovan', logoUrl: ethereumLogoUrl, nativeCurrency: { name: 'Kovan Ether', symbol: 'kovETH', decimals: 18 }, + color: darkTheme.chain_420, }, [SupportedChainId.GOERLI]: { networkType: NetworkType.L1, @@ -94,6 +101,7 @@ const CHAIN_INFO: ChainInfoMap = { label: 'Görli', logoUrl: ethereumLogoUrl, nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 }, + color: darkTheme.chain_5, }, [SupportedChainId.OPTIMISM]: { networkType: NetworkType.L2, @@ -110,6 +118,8 @@ const CHAIN_INFO: ChainInfoMap = { statusPage: 'https://optimism.io/status', helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ', nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 }, + color: darkTheme.chain_10, + backgroundColor: darkTheme.chain_10_background, }, [SupportedChainId.OPTIMISM_GOERLI]: { networkType: NetworkType.L2, @@ -124,6 +134,7 @@ const CHAIN_INFO: ChainInfoMap = { statusPage: 'https://optimism.io/status', helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ', nativeCurrency: { name: 'Optimism Goerli Ether', symbol: 'görOpETH', decimals: 18 }, + color: darkTheme.chain_420, }, [SupportedChainId.ARBITRUM_ONE]: { networkType: NetworkType.L2, @@ -138,6 +149,8 @@ const CHAIN_INFO: ChainInfoMap = { defaultListUrl: ARBITRUM_LIST, helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum', nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 }, + color: darkTheme.chain_42, + backgroundColor: darkTheme.chain_42161_background, }, [SupportedChainId.ARBITRUM_RINKEBY]: { networkType: NetworkType.L2, @@ -151,6 +164,7 @@ const CHAIN_INFO: ChainInfoMap = { defaultListUrl: ARBITRUM_LIST, helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum', nativeCurrency: { name: 'Rinkeby Arbitrum Ether', symbol: 'rinkArbETH', decimals: 18 }, + color: darkTheme.chain_421611, }, [SupportedChainId.POLYGON]: { networkType: NetworkType.L1, @@ -163,6 +177,8 @@ const CHAIN_INFO: ChainInfoMap = { logoUrl: polygonMaticLogo, circleLogoUrl: polygonCircleLogoUrl, nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 }, + color: darkTheme.chain_137, + backgroundColor: darkTheme.chain_137_background, }, [SupportedChainId.POLYGON_MUMBAI]: { networkType: NetworkType.L1, diff --git a/src/graphql/data/util.ts b/src/graphql/data/util.ts index 44ca8c868a..fcb07e820f 100644 --- a/src/graphql/data/util.ts +++ b/src/graphql/data/util.ts @@ -52,10 +52,6 @@ export function chainIdToBackendName(chainId: number | undefined) { : CHAIN_ID_TO_BACKEND_NAME[SupportedChainId.MAINNET] } -export function chainBackendNameToId(chain: string | undefined) { - return (chain && CHAIN_NAME_TO_CHAIN_ID[chain.toUpperCase()]) || SupportedChainId.MAINNET -} - export const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: Chain } = { ethereum: 'ETHEREUM', polygon: 'POLYGON', diff --git a/src/index.tsx b/src/index.tsx index 50d0578dd7..628c34847b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -25,6 +25,7 @@ import LogsUpdater from './state/logs/updater' import TransactionUpdater from './state/transactions/updater' import UserUpdater from './state/user/updater' import ThemeProvider, { ThemedGlobalStyle } from './theme' +import RadialGradientByChainUpdater from './theme/components/RadialGradientByChainUpdater' const queryClient = new QueryClient() @@ -35,6 +36,7 @@ if (!!window.ethereum) { function Updaters() { return ( <> + diff --git a/src/nft/components/details/AssetPriceDetails.tsx b/src/nft/components/details/AssetPriceDetails.tsx index 20e7a905c7..2248867f82 100644 --- a/src/nft/components/details/AssetPriceDetails.tsx +++ b/src/nft/components/details/AssetPriceDetails.tsx @@ -11,8 +11,7 @@ import { useMemo } from 'react' import { Upload } from 'react-feather' import { Link, useNavigate } from 'react-router-dom' import styled, { css, useTheme } from 'styled-components/macro' -import { ThemedText } from 'theme/components/text' -import { glowEffect } from 'theme/styles/glow' +import { ThemedText } from 'theme' interface AssetPriceDetailsProps { asset: GenieAsset @@ -56,8 +55,6 @@ const Container = styled.div` ` const BestPriceContainer = styled.div` - ${glowEffect} - display: flex; flex-direction: column; gap: 8px; diff --git a/src/nft/components/details/InfoContainer.tsx b/src/nft/components/details/InfoContainer.tsx index a7e8f09ac5..d38187ca18 100644 --- a/src/nft/components/details/InfoContainer.tsx +++ b/src/nft/components/details/InfoContainer.tsx @@ -1,12 +1,6 @@ import { useState } from 'react' import { ChevronDown, ChevronUp } from 'react-feather' import styled, { css } from 'styled-components/macro' -import { glowEffect } from 'theme/styles/glow' - -const HeaderContainer = styled.div` - ${glowEffect} - margin-top: 28px; -` const Header = styled.div<{ isOpen: boolean }>` display: flex; @@ -16,6 +10,7 @@ const Header = styled.div<{ isOpen: boolean }>` padding: 14px 20px; cursor: pointer; border: 1px solid ${({ theme }) => theme.backgroundOutline}; + margin-top: 28px; width: 100%; align-items: center; @@ -79,7 +74,7 @@ const InfoContainer = ({ const [isOpen, setIsOpen] = useState(!!defaultOpen) return ( - +
setIsOpen(!isOpen)}> {primaryHeader} {secondaryHeader} @@ -87,7 +82,7 @@ const InfoContainer = ({ {isOpen ? : }
{isOpen && {children}} - +
) } diff --git a/src/nft/components/explore/Table.tsx b/src/nft/components/explore/Table.tsx index 8995020d51..051a893d88 100644 --- a/src/nft/components/explore/Table.tsx +++ b/src/nft/components/explore/Table.tsx @@ -5,8 +5,7 @@ import { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table' import styled, { useTheme } from 'styled-components/macro' -import { ThemedText } from 'theme/components/text' -import { glowEffect } from 'theme/styles/glow' +import { GlowEffect, ThemedText } from 'theme' import { Box } from '../../components/Box' import { CollectionTableColumn } from '../../types' @@ -20,10 +19,6 @@ const CELL_WIDTH = '160px' const MOBILE_CELL_WIDTH = '240px' const DESKTOP_CELL_WIDTH = '360px' -const TableContainer = styled.div` - ${glowEffect} -` - const RankCellContainer = styled.div` display: flex; align-items: center; @@ -146,7 +141,7 @@ export function Table>({ } return ( - + {headerGroups.map((headerGroup) => ( @@ -223,7 +218,7 @@ export function Table>({ })}
- + ) } @@ -234,7 +229,7 @@ interface LoadingTableProps { function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) { return ( - + {headerGroups.map((headerGroup) => ( @@ -295,6 +290,6 @@ function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTablePr ))}
- + ) } diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 0d9cbdfd81..e7f86f882b 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -540,7 +540,7 @@ export default function AddLiquidity() { )} pendingText={pendingText} /> - + - + - + {!addIsUnsupported ? ( diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx index 15ec24ce17..d9899a597f 100644 --- a/src/pages/AppBody.tsx +++ b/src/pages/AppBody.tsx @@ -1,10 +1,8 @@ +import React from 'react' import styled from 'styled-components/macro' -import { glowEffect } from 'theme/styles/glow' import { Z_INDEX } from 'theme/zIndex' -export const BodyWrapper = styled.main<{ chainId?: number; margin?: string; maxWidth?: string }>` - ${glowEffect} - +export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>` position: relative; margin-top: ${({ margin }) => margin ?? '0px'}; max-width: ${({ maxWidth }) => maxWidth ?? '420px'}; @@ -18,3 +16,10 @@ export const BodyWrapper = styled.main<{ chainId?: number; margin?: string; maxW z-index: ${Z_INDEX.deprecated_content}; font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on; ` + +/** + * The styled container element that wraps the content of most pages and the tabs. + */ +export default function AppBody({ children, ...rest }: { children: React.ReactNode }) { + return {children} +} diff --git a/src/pages/CreateProposal/index.tsx b/src/pages/CreateProposal/index.tsx index eeb068fe89..8201ff703d 100644 --- a/src/pages/CreateProposal/index.tsx +++ b/src/pages/CreateProposal/index.tsx @@ -27,7 +27,7 @@ import { ExternalLink, ThemedText } from 'theme' import { CreateProposalTabs } from '../../components/NavigationTabs' import { LATEST_GOVERNOR_INDEX } from '../../constants/governance' import { UNI } from '../../constants/tokens' -import { BodyWrapper } from '../AppBody' +import AppBody from '../AppBody' import { ProposalActionDetail } from './ProposalActionDetail' import { ProposalAction, ProposalActionSelector, ProposalActionSelectorModal } from './ProposalActionSelector' import { ProposalEditor } from './ProposalEditor' @@ -241,7 +241,7 @@ ${bodyValue} return ( - + @@ -299,7 +299,7 @@ ${bodyValue} onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)} /> - + ) diff --git a/src/pages/MigrateV2/MigrateV2Pair.tsx b/src/pages/MigrateV2/MigrateV2Pair.tsx index a95b977944..e82af17dba 100644 --- a/src/pages/MigrateV2/MigrateV2Pair.tsx +++ b/src/pages/MigrateV2/MigrateV2Pair.tsx @@ -722,7 +722,7 @@ export default function MigrateV2Pair() { } return ( - + diff --git a/src/pages/MigrateV2/index.tsx b/src/pages/MigrateV2/index.tsx index 27d63cdcef..d3337edad1 100644 --- a/src/pages/MigrateV2/index.tsx +++ b/src/pages/MigrateV2/index.tsx @@ -113,7 +113,7 @@ export default function MigrateV2() { return ( <> - + diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index 031e93774a..a415767bb0 100644 --- a/src/pages/Pool/index.tsx +++ b/src/pages/Pool/index.tsx @@ -16,7 +16,6 @@ import { useToggleWalletModal } from 'state/application/hooks' import { useUserHideClosedPositions } from 'state/user/hooks' import styled, { css, useTheme } from 'styled-components/macro' import { HideSmall, ThemedText } from 'theme' -import { glowEffect } from 'theme/styles/glow' import { PositionDetails } from 'types/position' import { V2_FACTORY_ADDRESSES } from '../../constants/addresses' @@ -133,14 +132,14 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)` ` const MainContentWrapper = styled.main` - ${glowEffect} - background-color: ${({ theme }) => theme.deprecated_bg0}; border: 1px solid ${({ theme }) => theme.backgroundOutline}; padding: 0; border-radius: 16px; display: flex; flex-direction: column; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), + 0px 24px 32px rgba(0, 0, 0, 0.01); ` function PositionsLoadingPlaceholder() { @@ -162,7 +161,7 @@ function PositionsLoadingPlaceholder() { ) } -function WrongNetworkCard({ chainId }: { chainId?: number }) { +function WrongNetworkCard() { const theme = useTheme() return ( @@ -176,7 +175,7 @@ function WrongNetworkCard({ chainId }: { chainId?: number }) { - + @@ -204,7 +203,7 @@ export default function Pool() { const { positions, loading: positionsLoading } = useV3Positions(account) if (!isSupportedChain(chainId)) { - return + return } const [openPositions, closedPositions] = positions?.reduce<[PositionDetails[], PositionDetails[]]>( @@ -293,7 +292,7 @@ export default function Pool() { - + {positionsLoading ? ( ) : filteredPositions && closedPositions && filteredPositions.length > 0 ? ( diff --git a/src/pages/PoolFinder/index.tsx b/src/pages/PoolFinder/index.tsx index b0118a8ae5..51192f72ed 100644 --- a/src/pages/PoolFinder/index.tsx +++ b/src/pages/PoolFinder/index.tsx @@ -26,7 +26,7 @@ import { usePairAdder } from '../../state/user/hooks' import { StyledInternalLink } from '../../theme' import { ThemedText } from '../../theme' import { currencyId } from '../../utils/currencyId' -import { BodyWrapper } from '../AppBody' +import AppBody from '../AppBody' import { Dots } from '../Pool/styleds' enum Fields { @@ -99,7 +99,7 @@ export default function PoolFinder() { return ( <> - + @@ -229,7 +229,7 @@ export default function PoolFinder() { showCommonBases selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined} /> - + diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index 08e53d661d..1825d4978d 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/src/pages/RemoveLiquidity/V3.tsx @@ -37,7 +37,7 @@ import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens' import { TransactionType } from '../../state/transactions/types' import { calculateGasMargin } from '../../utils/calculateGasMargin' import { currencyId } from '../../utils/currencyId' -import { BodyWrapper } from '../AppBody' +import AppBody from '../AppBody' import { ResponsiveHeaderText, SmallMaxButton, Wrapper } from './styled' const DEFAULT_REMOVE_V3_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100) @@ -290,7 +290,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { )} pendingText={pendingText} /> - + )} - + ) } diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index 4c0f8c4753..da086651ac 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/src/pages/RemoveLiquidity/index.tsx @@ -8,7 +8,6 @@ import { Currency, Percent } from '@uniswap/sdk-core' import { useWeb3React } from '@web3-react/core' import { sendEvent } from 'components/analytics' import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit' -import { BodyWrapper } from 'pages/AppBody' import { useCallback, useMemo, useState } from 'react' import { ArrowDown, Plus } from 'react-feather' import { useNavigate, useParams } from 'react-router-dom' @@ -43,6 +42,7 @@ import { StyledInternalLink, ThemedText } from '../../theme' import { calculateGasMargin } from '../../utils/calculateGasMargin' import { calculateSlippageAmount } from '../../utils/calculateSlippageAmount' import { currencyId } from '../../utils/currencyId' +import AppBody from '../AppBody' import { ClickableText, MaxButton, Wrapper } from '../Pool/styleds' const DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100) @@ -430,7 +430,7 @@ export default function RemoveLiquidity() { return ( <> - + - + {pair ? ( diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index b01207ad1f..30a9d3a45d 100644 --- a/src/pages/Swap/index.tsx +++ b/src/pages/Swap/index.tsx @@ -509,7 +509,7 @@ export default function Swap() { showCancel={true} /> - + { } }) - const chainId = chainBackendNameToId(chainNameParam) - return ( @@ -112,7 +110,7 @@ const Tokens = () => { - }> + }> diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 419457bd2f..7887d9e2f1 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -86,9 +86,11 @@ export const colors = { // TODO: add all other vibrant variations networkEthereum: '#627EEA', networkOptimism: '#FF0420', + networkOptimismSoft: 'rgba(255, 4, 32, 0.16)', networkPolygon: '#A457FF', networkArbitrum: '#28A0F0', - networkCelo: '#35D07F', + networkPolygonSoft: 'rgba(164, 87, 255, 0.16)', + networkEthereumSoft: 'rgba(98, 126, 234, 0.16)', } export type Theme = typeof darkTheme @@ -97,6 +99,21 @@ const commonTheme = { white: colors.white, black: colors.black, + chain_1: colors.networkEthereum, + chain_3: colors.yellow400, + chain_4: colors.pink400, + chain_5: colors.green400, + chain_10: colors.networkOptimism, + chain_137: colors.networkPolygon, + chain_42: colors.networkArbitrum, + chain_420: colors.networkOptimism, + chain_42161: colors.networkEthereum, + chain_421611: colors.networkEthereum, + chain_80001: colors.networkPolygon, + chain_137_background: colors.purple900, + chain_10_background: colors.red900, + chain_42161_background: colors.blue900, + hoverState: opacify(24, colors.blue200), hoverDefault: opacify(8, colors.gray200), } @@ -144,11 +161,7 @@ export const darkTheme = { deepShadow: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32);', shallowShadow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12);', - networkDefaultShadow: `0px 40px 120px ${opacify(24, colors.blue400)}`, - networkPolygonShadow: `0px 40px 120px ${opacify(20, colors.networkPolygon)}`, - networkArbitrumShadow: `0px 40px 120px ${opacify(12, colors.networkArbitrum)}`, - networkOptimismShadow: `0px 40px 120px ${opacify(20, colors.networkOptimism)}`, - networkCeloShadow: `0px 20px 120px ${opacify(24, colors.networkCelo)}`, + networkDefaultShadow: `0px 40px 120px ${opacify(16, colors.blue400)}`, stateOverlayHover: opacify(8, colors.gray300), stateOverlayPressed: opacify(24, colors.gray200), @@ -159,7 +172,7 @@ export const lightTheme: Theme = { userThemeColor: colors.magentaVibrant, - background: '#FCFCFC', // INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL + background: '#faf9fa', //INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL backgroundBackdrop: colors.white, backgroundSurface: colors.white, backgroundModule: colors.gray50, @@ -200,10 +213,6 @@ export const lightTheme: Theme = { '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);', networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.pink400)}`, - networkPolygonShadow: `0px 40px 120px ${opacify(16, colors.networkPolygon)}`, - networkArbitrumShadow: `0px 40px 120px ${opacify(12, colors.networkArbitrum)}`, - networkOptimismShadow: `0px 40px 120px ${opacify(12, colors.networkOptimism)}`, - networkCeloShadow: `0px 20px 120px ${opacify(12, colors.networkCelo)}`, stateOverlayHover: opacify(8, colors.gray300), stateOverlayPressed: opacify(24, colors.gray200), diff --git a/src/theme/components/RadialGradientByChainUpdater.ts b/src/theme/components/RadialGradientByChainUpdater.ts new file mode 100644 index 0000000000..b02f84a901 --- /dev/null +++ b/src/theme/components/RadialGradientByChainUpdater.ts @@ -0,0 +1,95 @@ +import { useWeb3React } from '@web3-react/core' +import { useIsNftPage } from 'hooks/useIsNftPage' +import { useEffect } from 'react' +import { useDarkModeManager } from 'state/user/hooks' + +import { SupportedChainId } from '../../constants/chains' +import { darkTheme, lightTheme } from '../colors' + +const initialStyles = { + width: '200vw', + height: '200vh', + transform: 'translate(-50vw, -100vh)', +} +const backgroundResetStyles = { + width: '100vw', + height: '100vh', + transform: 'unset', +} + +type TargetBackgroundStyles = typeof initialStyles | typeof backgroundResetStyles + +const backgroundRadialGradientElement = document.getElementById('background-radial-gradient') +const setBackground = (newValues: TargetBackgroundStyles) => + Object.entries(newValues).forEach(([key, value]) => { + if (backgroundRadialGradientElement) { + backgroundRadialGradientElement.style[key as keyof typeof backgroundResetStyles] = value + } + }) + +export default function RadialGradientByChainUpdater(): null { + const { chainId } = useWeb3React() + const [darkMode] = useDarkModeManager() + const isNftPage = useIsNftPage() + + // manage background color + useEffect(() => { + if (!backgroundRadialGradientElement) { + return + } + + if (isNftPage) { + setBackground(initialStyles) + backgroundRadialGradientElement.style.background = darkMode + ? darkTheme.backgroundBackdrop + : lightTheme.backgroundBackdrop + return + } + + switch (chainId) { + case SupportedChainId.ARBITRUM_ONE: + case SupportedChainId.ARBITRUM_RINKEBY: + setBackground(backgroundResetStyles) + const arbitrumLightGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(205, 232, 251, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF' + const arbitrumDarkGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(10, 41, 75, 0.7) 0%, rgba(34, 30, 48, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%), #0D0E0E' + backgroundRadialGradientElement.style.background = darkMode ? arbitrumDarkGradient : arbitrumLightGradient + break + case SupportedChainId.OPTIMISM: + case SupportedChainId.OPTIMISM_GOERLI: + setBackground(backgroundResetStyles) + const optimismLightGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(255, 251, 242, 0.8) 0%, rgba(255, 244, 249, 0.6958) 50.52%, rgba(255, 255, 255, 0) 100%), #FFFFFF' + const optimismDarkGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(62, 46, 56, 0.8) 0%, rgba(44, 31, 45, 0.6958) 50.52%, rgba(31, 33, 40, 0) 100%), #0D0E0E' + backgroundRadialGradientElement.style.background = darkMode ? optimismDarkGradient : optimismLightGradient + break + case SupportedChainId.POLYGON: + case SupportedChainId.POLYGON_MUMBAI: + setBackground(backgroundResetStyles) + const polygonLightGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #FFFFFF' + const polygonDarkGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #0D0E0E' + backgroundRadialGradientElement.style.background = darkMode ? polygonDarkGradient : polygonLightGradient + break + case SupportedChainId.CELO: + case SupportedChainId.CELO_ALFAJORES: + setBackground(backgroundResetStyles) + const celoLightGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(186, 228, 210, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF' + const celoDarkGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(20, 49, 37, 0.29) 0%, rgba(12, 31, 23, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%, rgba(31, 33, 40, 0) 100%), #0D0E0E' + backgroundRadialGradientElement.style.background = darkMode ? celoDarkGradient : celoLightGradient + break + default: + setBackground(initialStyles) + const defaultLightGradient = + 'radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF' + const defaultDarkGradient = 'linear-gradient(180deg, #202738 0%, #070816 100%)' + backgroundRadialGradientElement.style.background = darkMode ? defaultDarkGradient : defaultLightGradient + } + }, [darkMode, chainId, isNftPage]) + return null +} diff --git a/src/theme/components/index.tsx b/src/theme/components/index.tsx index 7edf02aba1..33a7ef5385 100644 --- a/src/theme/components/index.tsx +++ b/src/theme/components/index.tsx @@ -477,3 +477,8 @@ export const Separator = styled.div` height: 1px; background-color: ${({ theme }) => theme.backgroundOutline}; ` + +export const GlowEffect = styled.div` + border-radius: 32px; + box-shadow: ${({ theme }) => theme.networkDefaultShadow}; +` diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 602c2e53aa..2cb8df32d4 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -99,7 +99,7 @@ export default function ThemeProvider({ children }: { children: React.ReactNode export const ThemedGlobalStyle = createGlobalStyle` html { color: ${({ theme }) => theme.deprecated_text1}; - background-color: ${({ theme }) => theme.background}; + background-color: ${({ theme }) => theme.background} !important; } a { diff --git a/src/theme/styles/index.ts b/src/theme/styles.ts similarity index 100% rename from src/theme/styles/index.ts rename to src/theme/styles.ts diff --git a/src/theme/styles/glow.tsx b/src/theme/styles/glow.tsx deleted file mode 100644 index 501e624071..0000000000 --- a/src/theme/styles/glow.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { SupportedChainId } from 'constants/chains' -import { css, DefaultTheme } from 'styled-components/macro' - -const getShadowForChainId = (theme: DefaultTheme, chainId?: SupportedChainId) => { - switch (chainId) { - case SupportedChainId.ARBITRUM_ONE: - case SupportedChainId.ARBITRUM_RINKEBY: - return theme.networkArbitrumShadow - case SupportedChainId.OPTIMISM: - case SupportedChainId.OPTIMISM_GOERLI: - return theme.networkOptimismShadow - case SupportedChainId.POLYGON: - case SupportedChainId.POLYGON_MUMBAI: - return theme.networkPolygonShadow - case SupportedChainId.CELO: - case SupportedChainId.CELO_ALFAJORES: - return theme.networkCeloShadow - default: - return theme.networkDefaultShadow - } -} - -export const glowEffect = css<{ chainId?: SupportedChainId }>` - border-radius: 16px; - box-shadow: ${({ theme, chainId }) => getShadowForChainId(theme, chainId)}; -`