Skip to content

I
interface
Commit 8401a4b9 authored by Callil Capuozzo's avatar Callil Capuozzo
Browse files
Options

Update styles, change warning modals

parent 3b27ee94
Show whitespace changes
Inline Side-by-side
Showing with 73 additions and 100 deletions
src/components/Popover/index.tsx
View file @ 8401a4b9
......@@ -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)};
......
src/components/SearchModal/CurrencySearch.tsx
View file @ 8401a4b9
......@@ -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>
......
src/components/SearchModal/ImportToken.tsx
View file @ 8401a4b9
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>
)
}
src/components/WalletModal/index.tsx
View file @ 8401a4b9
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>
)
......
src/components/swap/AdvancedSwapDetails.tsx
View file @ 8401a4b9
......@@ -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>
......
src/components/swap/BetterTradeLink.tsx
View file @ 8401a4b9
......@@ -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;
......
src/components/swap/SwapRoute.tsx
View file @ 8401a4b9
......@@ -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} />
)}
......
src/pages/App.tsx
View file @ 8401a4b9
......@@ -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'
......
src/pages/Swap/index.tsx
View file @ 8401a4b9
......@@ -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>
)
......
src/theme/index.tsx
View file @ 8401a4b9
......@@ -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',
......@@ -198,7 +198,7 @@ export const ThemedBackground = styled.div<{ backgroundColor?: string | undefine
mix-blend-mode: color;
background: ${({ backgroundColor }) =>
`radial-gradient(50% 50% at 50% 50%, ${
backgroundColor ? backgroundColor : '#fc077d15'
backgroundColor ? backgroundColor : '#fc077d10'
} 0%, rgba(255, 255, 255, 0) 100%)`};
transform: translateY(-100vh);
will-change: background;
......
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