Merge remote-tracking branch 'refs/remotes/origin/main'

2021-05-05 12:03:29 -04:00 · 2021-05-05 12:03:29 -04:00 · 02c21ef720
commit 02c21ef720
parent b39aeeb805 8401a4b9b4
13 changed files with 118 additions and 125 deletions
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@ -56,7 +56,7 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
  align-items: center;
  font-size: 24px;
  font-weight: 500;
-  background-color: ${({ selected, theme }) => (selected ? theme.bg2 : theme.primary1)};
+  background-color: ${({ selected, theme }) => (selected ? theme.bg0 : theme.primary1)};
  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
  border-radius: 16px;
  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
@ -72,7 +72,7 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
  margin-right: ${({ hideInput }) => (hideInput ? '0' : '12px')};
  :focus,
  :hover {
-    background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))};
+    background-color: ${({ selected, theme }) => (selected ? theme.bg2 : darken(0.05, theme.primary1))};
  }
 `

--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@ -31,7 +31,7 @@ import UniBalanceContent from './UniBalanceContent'

 const HeaderFrame = styled.div`
  display: grid;
-  grid-template-columns: 48px 1fr 120px;
+  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  justify-content: space-between;
  align-items: center;
@ -39,18 +39,20 @@ const HeaderFrame = styled.div`
  width: 100%;
  top: 0;
  position: relative;
-  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
-  padding: 0.5rem 1rem;
+  /* border-bottom: 1px solid ${({ theme }) => theme.bg2}; */
+  padding: 1rem;
  z-index: 21;
-  background-color: ${({ theme }) => theme.bg1};
+  /* background-color: ${({ theme }) => theme.bg1}; */
+  position: relative;

  ${({ theme }) => theme.mediaWidth.upToMedium`
-    display: flex;
-    padding: 0 1rem;
+    padding:  1rem;
+    grid-template-columns: 120px 1fr;
+
  `};

  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-        padding: 0.5rem 1rem;
+    padding: 1rem;
  `}
 `

@ -105,16 +107,15 @@ const HeaderRow = styled(RowFixed)`
 `

 const HeaderLinks = styled(Row)`
-  justify-content: center;
-  width: 100%;
-  ${({ theme }) => theme.mediaWidth.upToLarge`
-    padding: 1rem 0 1rem 1rem;
-    justify-content: flex-start;
-`};
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    padding: 1rem 0 1rem 1rem;
-    justify-content: flex-end;
-`};
+  justify-self: center;
+  background-color: ${({ theme }) => theme.bg0};
+  width: fit-content;
+  padding: 4px;
+  border-radius: 16px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 10px;
+  overflow: auto;
 `

 const AccountElement = styled.div<{ active: boolean }>`
@ -215,7 +216,6 @@ const StyledNavLink = styled(NavLink).attrs({
  color: ${({ theme }) => theme.text2};
  font-size: 1rem;
  width: fit-content;
-  margin: 0 6px;
  font-weight: 500;
  padding: 8px 12px;

@ -350,7 +350,7 @@ export default function Header() {
          Vote
        </StyledNavLink>
        <StyledExternalLink id={`stake-nav-link`} href={'https://info.uniswap.org'}>
-          Charts <span style={{ fontSize: '11px' }}>↗</span>
+          Charts <span style={{ fontSize: '11px', textDecoration: 'none !important' }}>↗</span>
        </StyledExternalLink>
      </HeaderLinks>
      <HeaderControls>
--- a/src/components/Popover/index.tsx
+++ b/src/components/Popover/index.tsx
@ -8,11 +8,9 @@ import Portal from '@reach/portal'

 const PopoverContainer = styled.div<{ show: boolean }>`
  z-index: 9999;
-
  visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
  opacity: ${(props) => (props.show ? 1 : 0)};
  transition: visibility 150ms linear, opacity 150ms linear;
-
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg3};
  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
--- a/src/components/SearchModal/CurrencySearch.tsx
+++ b/src/components/SearchModal/CurrencySearch.tsx
@ -226,7 +226,7 @@ export function CurrencySearch({
              <IconWrapper size="16px" marginRight="6px">
                <Edit />
              </IconWrapper>
-              <TYPE.main color={theme.blue1}>Manage</TYPE.main>
+              <TYPE.main color={theme.blue1}>Manage Token Lists</TYPE.main>
            </RowFixed>
          </ButtonText>
        </Row>
--- a/src/components/SearchModal/ImportToken.tsx
+++ b/src/components/SearchModal/ImportToken.tsx
@ -1,12 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Token, Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { RowBetween, RowFixed, AutoRow } from 'components/Row'
+import { RowBetween, RowFixed } from 'components/Row'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { ArrowLeft, AlertTriangle } from 'react-feather'
+import { ArrowLeft, AlertCircle } from 'react-feather'
 import { transparentize } from 'polished'
 import useTheme from 'hooks/useTheme'
 import { ButtonPrimary } from 'components/Button'
@ -17,7 +17,7 @@ import { useActiveWeb3React } from 'hooks'
 import { ExternalLink } from '../../theme/components'
 import { useCombinedInactiveList } from 'state/lists/hooks'
 import ListLogo from 'components/ListLogo'
-import { PaddedColumn, Checkbox } from './styleds'
+import { PaddedColumn } from './styleds'

 const Wrapper = styled.div`
  position: relative;
@ -51,18 +51,11 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:

  const { chainId } = useActiveWeb3React()

-  const [confirmed, setConfirmed] = useState(false)
-
  const addToken = useAddUserToken()

  // use for showing import source on inactive tokens
  const inactiveTokenList = useCombinedInactiveList()

-  // higher warning severity if either is not on a list
-  const fromLists =
-    (chainId && inactiveTokenList?.[chainId]?.[tokens[0]?.address]?.list) ||
-    (chainId && inactiveTokenList?.[chainId]?.[tokens[1]?.address]?.list)
-
  return (
    <Wrapper>
      <PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
@ -73,35 +66,51 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
        </RowBetween>
      </PaddedColumn>
      <SectionBreak />
-      <PaddedColumn gap="md">
+      <AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
+        <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
+          <AlertCircle size={48} stroke={theme.text2} strokeWidth={1} />
+          <TYPE.body fontWeight={400} fontSize={16}>
+            {
+              "This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade."
+            }
+          </TYPE.body>
+        </AutoColumn>
        {tokens.map((token) => {
          const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list
          return (
-            <Card backgroundColor={theme.bg2} key={'import' + token.address} className=".token-warning-container">
-              <AutoColumn gap="10px">
-                <AutoRow align="center">
-                  <CurrencyLogo currency={token} size={'24px'} />
-                  <TYPE.body ml="8px" mr="8px" fontWeight={500}>
+            <Card
+              backgroundColor={theme.bg2}
+              key={'import' + token.address}
+              className=".token-warning-container"
+              padding="2rem"
+            >
+              <AutoColumn gap="10px" justify="center">
+                <CurrencyLogo currency={token} size={'32px'} />
+
+                <AutoColumn gap="4px" justify="center">
+                  <TYPE.body ml="8px" mr="8px" fontWeight={500} fontSize={20}>
                    {token.symbol}
                  </TYPE.body>
-                  <TYPE.darkGray fontWeight={300}>{token.name}</TYPE.darkGray>
-                </AutoRow>
+                  <TYPE.darkGray fontWeight={400} fontSize={14}>
+                    {token.name}
+                  </TYPE.darkGray>
+                </AutoColumn>
                {chainId && (
                  <ExternalLink href={getEtherscanLink(chainId, token.address, 'address')}>
-                    <AddressText>{token.address}</AddressText>
+                    <AddressText fontSize={12}>{token.address}</AddressText>
                  </ExternalLink>
                )}
                {list !== undefined ? (
                  <RowFixed>
-                    {list.logoURI && <ListLogo logoURI={list.logoURI} size="12px" />}
-                    <TYPE.small ml="6px" color={theme.text3}>
-                      via {list.name}
+                    {list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
+                    <TYPE.small ml="6px" fontSize={14} color={theme.text3}>
+                      via {list.name} token list
                    </TYPE.small>
                  </RowFixed>
                ) : (
                  <WarningWrapper borderRadius="4px" padding="4px" highWarning={true}>
                    <RowFixed>
-                      <AlertTriangle stroke={theme.red1} size="10px" />
+                      <AlertCircle stroke={theme.red1} size="10px" />
                      <TYPE.body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
                        Unknown Source
                      </TYPE.body>
@ -113,40 +122,7 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
          )
        })}

-        <Card
-          style={{ backgroundColor: fromLists ? transparentize(0.8, theme.yellow2) : transparentize(0.8, theme.red1) }}
-        >
-          <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-            <AlertTriangle stroke={fromLists ? theme.yellow2 : theme.red1} size={32} />
-            <TYPE.body fontWeight={600} fontSize={20} color={fromLists ? theme.yellow2 : theme.red1}>
-              Trade at your own risk!
-            </TYPE.body>
-          </AutoColumn>
-
-          <AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-            <TYPE.body fontWeight={400} color={fromLists ? theme.yellow2 : theme.red1}>
-              Anyone can create a token, including creating fake versions of existing tokens that claim to represent
-              projects.
-            </TYPE.body>
-            <TYPE.body fontWeight={600} color={fromLists ? theme.yellow2 : theme.red1}>
-              If you purchase this token, you may not be able to sell it back.
-            </TYPE.body>
-          </AutoColumn>
-          <AutoRow justify="center" style={{ cursor: 'pointer' }} onClick={() => setConfirmed(!confirmed)}>
-            <Checkbox
-              className=".understand-checkbox"
-              name="confirmed"
-              type="checkbox"
-              checked={confirmed}
-              onChange={() => setConfirmed(!confirmed)}
-            />
-            <TYPE.body ml="10px" fontSize="16px" color={fromLists ? theme.yellow2 : theme.red1} fontWeight={500}>
-              I understand
-            </TYPE.body>
-          </AutoRow>
-        </Card>
        <ButtonPrimary
-          disabled={!confirmed}
          altDisabledStyle={true}
          borderRadius="20px"
          padding="10px 1rem"
@ -158,7 +134,7 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
        >
          Import
        </ButtonPrimary>
-      </PaddedColumn>
+      </AutoColumn>
    </Wrapper>
  )
 }
--- a/src/components/WalletModal/index.tsx
+++ b/src/components/WalletModal/index.tsx
@ -1,6 +1,7 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+import { AutoRow } from 'components/Row'
 import React, { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
@ -13,12 +14,13 @@ import { SUPPORTED_WALLETS } from '../../constants'
 import usePrevious from '../../hooks/usePrevious'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
-import { ExternalLink } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import AccountDetails from '../AccountDetails'

 import Modal from '../Modal'
 import Option from './Option'
 import PendingView from './PendingView'
+import { LightCard } from '../Card'

 const CloseIcon = styled.div`
  position: absolute;
@ -54,12 +56,12 @@ const HeaderRow = styled.div`
 `

 const ContentWrapper = styled.div`
-  background-color: ${({ theme }) => theme.bg2};
-  padding: 2rem;
+  background-color: ${({ theme }) => theme.bg0};
+  padding: 0 1rem 1rem 1rem;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;

-  ${({ theme }) => theme.mediaWidth.upToMedium`padding: 1rem`};
+  ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0 1rem 1rem 1rem`};
 `

 const UpperSection = styled.div`
@ -82,18 +84,6 @@ const UpperSection = styled.div`
  }
 `

-const Blurb = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 2rem;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    margin: 1rem;
-    font-size: 12px;
-  `};
-`
-
 const OptionGrid = styled.div`
  display: grid;
  grid-gap: 10px;
@ -104,6 +94,11 @@ const OptionGrid = styled.div`
 `

 const HoverText = styled.div`
+  text-decoration: none;
+  color: ${({ theme }) => theme.text1};
+  display: flex;
+  align-items: center;
+
  :hover {
    cursor: pointer;
  }
@ -338,7 +333,17 @@ export default function WalletModal({
            <HoverText>Connect to a wallet</HoverText>
          </HeaderRow>
        )}
+
        <ContentWrapper>
+          <LightCard style={{ marginBottom: '16px' }}>
+            <AutoRow style={{ flexWrap: 'nowrap' }}>
+              <TYPE.main fontSize={14}>
+                By connecting a wallet, you agree to Uniswap Labs’ <ExternalLink href="">Terms of Service</ExternalLink>{' '}
+                and acknowledge that you have read and understand the{' '}
+                <ExternalLink href="">Uniswap protocol disclaimer</ExternalLink>.
+              </TYPE.main>
+            </AutoRow>
+          </LightCard>
          {walletView === WALLET_VIEWS.PENDING ? (
            <PendingView
              connector={pendingWallet}
@ -349,12 +354,6 @@ export default function WalletModal({
          ) : (
            <OptionGrid>{getOptions()}</OptionGrid>
          )}
-          {walletView !== WALLET_VIEWS.PENDING && (
-            <Blurb>
-              <span>New to Ethereum? &nbsp;</span>{' '}
-              <ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
-            </Blurb>
-          )}
        </ContentWrapper>
      </UpperSection>
    )
--- a/src/components/swap/AdvancedSwapDetails.tsx
+++ b/src/components/swap/AdvancedSwapDetails.tsx
@ -29,7 +29,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
            Liquidity Provider Fee
          </TYPE.black>
        </RowFixed>
-        <TYPE.black fontSize={12} color={theme.text1}>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
          {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
        </TYPE.black>
      </RowBetween>
@ -40,7 +40,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
            Route
          </TYPE.black>
        </RowFixed>
-        <TYPE.black fontSize={12} color={theme.text1}>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
          <SwapRoute trade={trade} />
        </TYPE.black>
      </RowBetween>
@ -51,7 +51,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
            Execution price vs. spot price
          </TYPE.black>
        </RowFixed>
-        <TYPE.black fontSize={12} color={theme.text1}>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
          <FormattedPriceImpact priceImpact={computePriceImpactWithMaximumSlippage(trade, allowedSlippage)} />
        </TYPE.black>
      </RowBetween>
--- a/src/components/swap/BetterTradeLink.tsx
+++ b/src/components/swap/BetterTradeLink.tsx
@ -13,9 +13,9 @@ import { Zap } from 'react-feather'
 const ResponsiveButton = styled(ButtonPrimary)`
  width: fit-content;
  padding: 0.2rem 0.5rem;
-  wordbreak: keep-all;
+  word-break: keep-all;
  height: 24px;
-  marginleft: 0.25rem;
+  margin-left: 0.75rem;
  ${({ theme }) => theme.mediaWidth.upToSmall`
     padding: 4px;
    border-radius: 8px;
--- a/src/components/swap/SwapRoute.tsx
+++ b/src/components/swap/SwapRoute.tsx
@ -11,7 +11,7 @@ function LabeledArrow({}: { fee: FeeAmount }) {
  const theme = useContext(ThemeContext)

  // todo: render the fee in the label
-  return <ChevronRight size={12} color={theme.text2} />
+  return <ChevronRight size={14} color={theme.text2} />
 }

 export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade }) {
@ -25,12 +25,12 @@ export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade })
        return (
          <Fragment key={i}>
            <Flex alignItems="end">
-              <TYPE.black fontSize={12} color={theme.text1} ml="0.125rem" mr="0.125rem">
+              <TYPE.black fontSize={14} color={theme.text1} ml="0.145rem" mr="0.145rem">
                {currency.symbol}
              </TYPE.black>
            </Flex>
            {isLastItem ? null : trade instanceof V2Trade ? (
-              <ChevronRight size={12} color={theme.text2} />
+              <ChevronRight size={14} color={theme.text2} />
            ) : (
              <LabeledArrow fee={trade.route.pools[i].fee} />
            )}
--- a/src/hooks/useColor.ts
+++ b/src/hooks/useColor.ts
@ -22,7 +22,7 @@ async function getColorFromToken(token: Token): Promise<string | null> {
          detectedHex = shade(0.005, detectedHex)
          AAscore = hex(detectedHex, '#FFF')
        }
-        return detectedHex
+        return detectedHex + '20'
      }
      return null
    })
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@ -5,7 +5,7 @@ import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsRepo
 import AddressClaimModal from '../components/claim/AddressClaimModal'
 import Header from '../components/Header'
 import Polling from '../components/Header/Polling'
-import URLWarning from '../components/Header/URLWarning'
+// import URLWarning from '../components/Header/URLWarning'
 import Popups from '../components/Popups'
 import Web3ReactManager from '../components/Web3ReactManager'
 import { ApplicationModal } from '../state/application/actions'
@ -28,6 +28,7 @@ import VotePage from './Vote/VotePage'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import { PositionPage } from './Pool/PositionPage'
 import AddLiquidity from './AddLiquidity'
+import { ThemedBackground } from '../theme'

 const AppWrapper = styled.div`
  display: flex;
@ -75,11 +76,11 @@ export default function App() {
      <Route component={GoogleAnalyticsReporter} />
      <Route component={DarkModeQueryParamReader} />
      <AppWrapper>
-        <URLWarning />
        <HeaderWrapper>
          <Header />
        </HeaderWrapper>
        <BodyWrapper>
+          <ThemedBackground />
          <Popups />
          <Polling />
          <TopLevelModals />
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@ -6,7 +6,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import { MouseoverTooltip, MouseoverTooltipContent } from 'components/Tooltip'
 import JSBI from 'jsbi'
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { ArrowDown, CheckCircle, HelpCircle, Info, X } from 'react-feather'
+import { ArrowDown, CheckCircle, HelpCircle, Info, ArrowLeft } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
@ -419,12 +419,12 @@ export default function Swap({ history }: RouteComponentProps) {
                          height: '24px',
                          opacity: 0.8,
                          lineHeight: '120%',
-                          marginLeft: '0.25rem',
+                          marginLeft: '0.75rem',
                        }}
                      >
-                        <X color={theme.text3} size={12} /> &nbsp;
+                        <ArrowLeft color={theme.text3} size={12} /> &nbsp;
                        <TYPE.main style={{ lineHeight: '120%' }} fontSize={12}>
-                          Routed via V2
+                          Back to V3
                        </TYPE.main>
                      </ButtonGray>
                    )
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@ -47,9 +47,9 @@ export function colors(darkMode: boolean): Colors {
    text5: darkMode ? '#2C2F36' : '#EDEEF2',

    // backgrounds / greys
-    bg0: darkMode ? '#191B1F' : '#F7F8FA',
-    bg1: darkMode ? '#212429' : '#EDEEF2',
-    bg2: darkMode ? '#2C2F36' : '#F0F0F0',
+    bg0: darkMode ? '#191B1F' : '#FFF',
+    bg1: darkMode ? '#212429' : '#F7F8FA',
+    bg2: darkMode ? '#2C2F36' : '#EDEEF2',
    bg3: darkMode ? '#40444F' : '#CED0D9',
    bg4: darkMode ? '#565A69' : '#888D9B',
    bg5: darkMode ? '#6C7284' : '#888D9B',
@ -79,15 +79,15 @@ export function colors(darkMode: boolean): Colors {
    red2: '#F82D3A',
    red3: '#D60000',
    green1: '#27AE60',
-    yellow1: '#FFE270',
-    yellow2: '#F3841E',
+    yellow1: '#e3a507',
+    yellow2: '#ff8f00',
    yellow3: '#F3B71E',
    blue1: '#2172E5',
    blue2: '#5199FF',

    error: '#FD4040',
    success: '#27AE60',
-    warning: '#F3B71E',
+    warning: '#ff8f00',

    // dont wanna forget these blue yet
    // blue4: darkMode ? '#153d6f70' : '#C4D9F8',
@ -186,6 +186,25 @@ export const TYPE = {
  },
 }

+export const ThemedBackground = styled.div<{ backgroundColor?: string | undefined }>`
+  position: fixed;
+  top: 0;
+  left: calc(-100vw / 2);
+  right: 0;
+  pointer-events: none;
+  /* max-width: 100vw !important; */
+  width: 200vw;
+  height: 200vh;
+  mix-blend-mode: color;
+  background: ${({ backgroundColor }) =>
+    `radial-gradient(50% 50% at 50% 50%, ${
+      backgroundColor ? backgroundColor : '#fc077d10'
+    } 0%, rgba(255, 255, 255, 0) 100%)`};
+  transform: translateY(-100vh);
+  will-change: background;
+  transition: background 450ms ease;
+`
+
 export const FixedGlobalStyle = createGlobalStyle`
 html, input, textarea, button {
  font-family: 'Inter', sans-serif;