From e88a8effef0b566aba4860485e06972d8a10f4ca Mon Sep 17 00:00:00 2001 From: Callil Capuozzo Date: Tue, 4 May 2021 20:52:25 -0400 Subject: [PATCH 1/2] style tweaks - bring back gradient background - improve header - improve light mode --- src/components/CurrencyInputPanel/index.tsx | 4 +-- src/components/Header/index.tsx | 38 ++++++++++----------- src/hooks/useColor.ts | 2 +- src/pages/App.tsx | 3 +- src/theme/index.tsx | 25 ++++++++++++-- 5 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 01282e5715..1af60a81f4 100644 --- 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))}; } ` diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 46cb4e3fc3..d144a54b2a 100644 --- 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 - Charts ↗ + Charts ↗ diff --git a/src/hooks/useColor.ts b/src/hooks/useColor.ts index 56a243ffe4..5d1575435f 100644 --- a/src/hooks/useColor.ts +++ b/src/hooks/useColor.ts @@ -22,7 +22,7 @@ async function getColorFromToken(token: Token): Promise { detectedHex = shade(0.005, detectedHex) AAscore = hex(detectedHex, '#FFF') } - return detectedHex + return detectedHex + '20' } return null }) diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 2175fd08ac..5a88eb1f99 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -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() { -
+ diff --git a/src/theme/index.tsx b/src/theme/index.tsx index a0f1bcfd3f..0b6b89c5bf 100644 --- 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', @@ -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 : '#fc077d15' + } 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; From 8401a4b9b41e56adcd0408ca04a1663b94dd911d Mon Sep 17 00:00:00 2001 From: Callil Capuozzo Date: Wed, 5 May 2021 11:43:47 -0400 Subject: [PATCH 2/2] Update styles, change warning modals --- src/components/Popover/index.tsx | 2 - src/components/SearchModal/CurrencySearch.tsx | 2 +- src/components/SearchModal/ImportToken.tsx | 92 +++++++------------ src/components/WalletModal/index.tsx | 43 +++++---- src/components/swap/AdvancedSwapDetails.tsx | 6 +- src/components/swap/BetterTradeLink.tsx | 4 +- src/components/swap/SwapRoute.tsx | 6 +- src/pages/App.tsx | 2 +- src/pages/Swap/index.tsx | 8 +- src/theme/index.tsx | 8 +- 10 files changed, 73 insertions(+), 100 deletions(-) diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index 933b1d87ab..f9a34b965d 100644 --- 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)}; diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx index dcf723d314..cb77facd38 100644 --- a/src/components/SearchModal/CurrencySearch.tsx +++ b/src/components/SearchModal/CurrencySearch.tsx @@ -226,7 +226,7 @@ export function CurrencySearch({ - Manage + Manage Token Lists diff --git a/src/components/SearchModal/ImportToken.tsx b/src/components/SearchModal/ImportToken.tsx index 79421941d4..a6a8832ed8 100644 --- 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 ( @@ -73,35 +66,51 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }: - + + + + + { + "This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade." + } + + {tokens.map((token) => { const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list return ( - - - - - + + + + + + {token.symbol} - {token.name} - + + {token.name} + + {chainId && ( - {token.address} + {token.address} )} {list !== undefined ? ( - {list.logoURI && } - - via {list.name} + {list.logoURI && } + + via {list.name} token list ) : ( - + Unknown Source @@ -113,40 +122,7 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }: ) })} - - - - - Trade at your own risk! - - - - - - Anyone can create a token, including creating fake versions of existing tokens that claim to represent - projects. - - - If you purchase this token, you may not be able to sell it back. - - - setConfirmed(!confirmed)}> - setConfirmed(!confirmed)} - /> - - I understand - - - Import - + ) } diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index 00329afc2e..72ead63805 100644 --- 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({ Connect to a wallet )} + + + + + By connecting a wallet, you agree to Uniswap Labs’ Terms of Service{' '} + and acknowledge that you have read and understand the{' '} + Uniswap protocol disclaimer. + + + {walletView === WALLET_VIEWS.PENDING ? ( {getOptions()} )} - {walletView !== WALLET_VIEWS.PENDING && ( - - New to Ethereum?  {' '} - Learn more about wallets - - )} ) diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx index 6f86baa4f7..9de5305713 100644 --- a/src/components/swap/AdvancedSwapDetails.tsx +++ b/src/components/swap/AdvancedSwapDetails.tsx @@ -29,7 +29,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) { Liquidity Provider Fee - + {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'} @@ -40,7 +40,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) { Route - + @@ -51,7 +51,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) { Execution price vs. spot price - + diff --git a/src/components/swap/BetterTradeLink.tsx b/src/components/swap/BetterTradeLink.tsx index 7d9f4c3654..492db99dc2 100644 --- 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; diff --git a/src/components/swap/SwapRoute.tsx b/src/components/swap/SwapRoute.tsx index e2dc664dc3..5e339bc855 100644 --- 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 + return } export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade }) { @@ -25,12 +25,12 @@ export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade }) return ( - + {currency.symbol} {isLastItem ? null : trade instanceof V2Trade ? ( - + ) : ( )} diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 5a88eb1f99..323704a1e8 100644 --- 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' diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index a16204836b..674eddb48a 100644 --- 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', }} > -   +   - Routed via V2 + Back to V3 ) diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 0b6b89c5bf..46e08722ef 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -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;