From 0fb3565cb80a448945df9f6d5628cc491fa88c09 Mon Sep 17 00:00:00 2001 From: Noah Zinsmeister Date: Tue, 13 Aug 2019 10:32:18 -0700 Subject: [PATCH 1/4] fix pull request template --- .github/{PULL_REQUEST_TEMPLATE => }/pull_request_template.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/{PULL_REQUEST_TEMPLATE => }/pull_request_template.md (100%) diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/pull_request_template.md similarity index 100% rename from .github/PULL_REQUEST_TEMPLATE/pull_request_template.md rename to .github/pull_request_template.md From 1c6fa1761f8f8119270975caec1405a94403ee34 Mon Sep 17 00:00:00 2001 From: Ian Lapham Date: Tue, 13 Aug 2019 13:34:14 -0400 Subject: [PATCH 2/4] set night mode to default (#412) --- src/contexts/LocalStorage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/contexts/LocalStorage.js b/src/contexts/LocalStorage.js index 51ac796fc4..67d5c3f16d 100644 --- a/src/contexts/LocalStorage.js +++ b/src/contexts/LocalStorage.js @@ -42,7 +42,7 @@ function init() { const defaultLocalStorage = { [VERSION]: CURRENT_VERSION, [BETA_MESSAGE_DISMISSED]: false, - [DARK_MODE]: false + [DARK_MODE]: true } try { From da22c6d69a47fbb2330f440b5db6a30b28aa170d Mon Sep 17 00:00:00 2001 From: Callil Capuozzo Date: Tue, 13 Aug 2019 14:42:32 -0400 Subject: [PATCH 3/4] Style token modal and toggle switch (#413) --- src/components/AddressInputPanel/index.js | 4 +--- src/components/CurrencyInputPanel/index.js | 26 ++++++++++++++-------- src/components/Footer/index.js | 5 +++-- src/components/Header/index.js | 2 +- src/components/Modal/index.js | 3 +++ src/components/NavigationTabs/index.js | 4 ++-- src/components/Web3Status/index.js | 6 ++--- src/theme/components.js | 1 - src/theme/index.js | 4 +++- yarn.lock | 22 +++++++++--------- 10 files changed, 44 insertions(+), 33 deletions(-) diff --git a/src/components/AddressInputPanel/index.js b/src/components/AddressInputPanel/index.js index 0afc44d1cb..c3dad6cd57 100644 --- a/src/components/AddressInputPanel/index.js +++ b/src/components/AddressInputPanel/index.js @@ -9,7 +9,7 @@ import { useDebounce } from '../../hooks' const InputPanel = styled.div` ${({ theme }) => theme.flexColumnNoWrap} - box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)}; + box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)}; position: relative; border-radius: 1.25rem; background-color: ${({ theme }) => theme.inputBackground}; @@ -24,7 +24,6 @@ const ContainerRow = styled.div` border: 1px solid ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)}; background-color: ${({ theme }) => theme.inputBackground}; - transition: box-shadow 125ms ease-in-out; ` const InputContainer = styled.div` @@ -63,7 +62,6 @@ const Input = styled.input` background-color: ${({ theme }) => theme.inputBackground}; color: ${({ error, theme }) => (error ? theme.salmonRed : theme.royalBlue)}; - transition: color 125ms ease-in-out; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/CurrencyInputPanel/index.js b/src/components/CurrencyInputPanel/index.js index 7147d1066d..6005eace7b 100644 --- a/src/components/CurrencyInputPanel/index.js +++ b/src/components/CurrencyInputPanel/index.js @@ -19,7 +19,7 @@ import TokenLogo from '../TokenLogo' import SearchIcon from '../../assets/images/magnifying-glass.svg' import { useTransactionAdder, usePendingApproval } from '../../contexts/Transactions' import { useTokenDetails, useAllTokenDetails } from '../../contexts/Tokens' -import close from '../../assets/images/x.svg' +import { ReactComponent as Close } from '../../assets/images/x.svg' import { transparentize } from 'polished' import { Spinner } from '../../theme' import Circle from '../../assets/images/circle-grey.svg' @@ -30,6 +30,7 @@ const GAS_MARGIN = ethers.utils.bigNumberify(1000) const SubCurrencySelect = styled.button` ${({ theme }) => theme.flexRowNoWrap} background: ${({ theme }) => theme.zumthorBlue}; + border: 1px solid ${({ theme }) => theme.royalBlue}; color: ${({ theme }) => theme.royalBlue}; line-height: 0; @@ -106,7 +107,7 @@ const StyledDropDown = styled(DropDown)` const InputPanel = styled.div` ${({ theme }) => theme.flexColumnNoWrap} - box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)}; + box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)}; position: relative; border-radius: 1.25rem; background-color: ${({ theme }) => theme.inputBackground}; @@ -118,8 +119,6 @@ const Container = styled.div` border: 1px solid ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)}; background-color: ${({ theme }) => theme.inputBackground}; - transition: box-shadow 150ms ease-out; - :focus-within { border: 1px solid ${({ theme }) => theme.malibuBlue}; } @@ -164,21 +163,30 @@ const ModalHeader = styled.div` display: flex; flex-direction: row; align-items: center; - padding: 0 2rem; + padding: 0px 0px 0px 1rem; height: 60px; ` +const CloseColor = styled(Close)` + path { + stroke: ${({ theme }) => theme.textColor}; + } +` + const CloseIcon = styled.div` position: absolute; - right: 1.4rem; + right: 1rem; + top: 14px; &:hover { cursor: pointer; + opacity: 0.6; } ` const SearchContainer = styled.div` ${({ theme }) => theme.flexRowNoWrap} - padding: 0.5rem 2rem; + justify-content: flex-start; + padding: 0.5rem 1.5rem; background-color: ${({ theme }) => theme.concreteGray}; ` @@ -202,7 +210,7 @@ const TokenModalRow = styled.div` ${({ theme }) => theme.flexRowNoWrap} align-items: center; justify-content: space-between; - padding: 0.8rem 2rem; + padding: 1rem; cursor: pointer; user-select: none; @@ -580,7 +588,7 @@ function CurrencySelectModal({ isOpen, onDismiss, onTokenSelect, allBalances })

Select Token

- {'close + diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index bec0e69494..9bb10f92a0 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -49,15 +49,16 @@ const StyledToggle = styled(Toggle)` margin-right: 24px; .react-switch-bg[style] { - background-color: ${({ theme }) => theme.inputBackground} !important; + background-color: ${({ theme }) => darken(0.05, theme.inputBackground)} !important; border: 1px solid ${({ theme }) => theme.concreteGray} !important; } .react-switch-handle[style] { background-color: ${({ theme }) => theme.inputBackground}; - box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.royalBlue)}; + box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadowColor)}; border: 1px solid ${({ theme }) => theme.mercuryGray}; border-color: ${({ theme }) => theme.mercuryGray} !important; + top: 2px !important; } ` diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 9530ac6b8d..d3b1334253 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -47,7 +47,7 @@ const Title = styled.div` font-weight: 500; color: ${({ theme }) => theme.wisteriaPurple}; :hover { - color: ${({ theme }) => darken(0.2, theme.wisteriaPurple)}; + color: ${({ theme }) => darken(0.1, theme.wisteriaPurple)}; } } ` diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js index 487a46a2f9..ae1ea3add3 100644 --- a/src/components/Modal/index.js +++ b/src/components/Modal/index.js @@ -3,6 +3,7 @@ import styled, { css } from 'styled-components' import { animated, useTransition } from 'react-spring' import { DialogOverlay, DialogContent } from '@reach/dialog' import '@reach/dialog/styles.css' +import { transparentize } from 'polished' const AnimatedDialogOverlay = animated(DialogOverlay) const WrappedDialogOverlay = ({ suppressClassNameWarning, ...rest }) => @@ -14,6 +15,7 @@ const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({ display: flex; align-items: center; justify-content: center; + background-color: ${({ theme }) => theme.modalBackground}; } ` @@ -23,6 +25,7 @@ const StyledDialogContent = styled(FilteredDialogContent)` margin: 0 0 2rem 0; border: 1px solid ${({ theme }) => theme.concreteGray}; background-color: ${({ theme }) => theme.inputBackground}; + box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)}; ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`}; padding: 0px; width: 50vw; diff --git a/src/components/NavigationTabs/index.js b/src/components/NavigationTabs/index.js index 028ffa5f42..34750b0299 100644 --- a/src/components/NavigationTabs/index.js +++ b/src/components/NavigationTabs/index.js @@ -87,12 +87,12 @@ const StyledNavLink = styled(NavLink).attrs({ background-color: ${({ theme }) => theme.inputBackground}; border-radius: 3rem; border: 1px solid ${({ theme }) => theme.mercuryGray}; - box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)}; + box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)}; box-sizing: border-box; font-weight: 500; color: ${({ theme }) => theme.royalBlue}; :hover { - border: 1px solid ${({ theme }) => darken(0.1, theme.mercuryGray)}; + /* border: 1px solid ${({ theme }) => darken(0.1, theme.mercuryGray)}; */ background-color: ${({ theme }) => darken(0.01, theme.inputBackground)}; } } diff --git a/src/components/Web3Status/index.js b/src/components/Web3Status/index.js index 0463251a6b..58a3fd989b 100644 --- a/src/components/Web3Status/index.js +++ b/src/components/Web3Status/index.js @@ -60,11 +60,11 @@ const Web3StatusConnected = styled(Web3StatusGeneric)` font-weight: 400; :hover { - > P { + /* > P { color: ${({ theme }) => theme.uniswapPink}; - } + } */ background-color: ${({ pending, theme }) => - pending ? transparentize(0.9, theme.royalBlue) : transparentize(0.9, theme.mercuryGray)}; + pending ? transparentize(0.9, theme.royalBlue) : darken(0.05, theme.inputBackground)}; :focus { border: 1px solid diff --git a/src/theme/components.js b/src/theme/components.js index 0a85abc116..adcb254d26 100644 --- a/src/theme/components.js +++ b/src/theme/components.js @@ -12,7 +12,6 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({ border: none; outline: none; background-color: ${({ backgroundColor }) => backgroundColor}; - transition: background-color 150ms ease-out; color: ${({ theme }) => theme.white}; width: 100%; diff --git a/src/theme/index.js b/src/theme/index.js index a0118ddb89..b3229f8c5b 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -40,8 +40,10 @@ const theme = darkMode => ({ // for setting css on backgroundColor: darkMode ? '#333639' : white, + modalBackground: darkMode ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.3)', inputBackground: darkMode ? '#202124' : white, placeholderGray: darkMode ? '#5F5F5F' : '#E1E1E1', + shadowColor: darkMode ? '#000' : '#2F80ED', // grays concreteGray: darkMode ? '#292C2F' : '#FAFAFA', @@ -59,6 +61,7 @@ const theme = darkMode => ({ malibuBlue: darkMode ? '#E67AEF' : '#5CA2FF', royalBlue: darkMode ? '#DC6BE5' : '#2F80ED', loadingBlue: darkMode ? '#e4f0ff' : '#e4f0ff', + // purples wisteriaPurple: '#DC6BE5', // reds @@ -114,7 +117,6 @@ export const GlobalStyle = createGlobalStyle` font-variant: none; color: ${({ theme }) => theme.textColor}; background-color: ${({ theme }) => theme.backgroundColor}; - transition: color 150ms ease-out, background-color 150ms ease-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); diff --git a/yarn.lock b/yarn.lock index 18008f9790..01407d2f41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4831,9 +4831,9 @@ ee-first@1.1.1: integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= electron-to-chromium@^1.3.191, electron-to-chromium@^1.3.47: - version "1.3.224" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.224.tgz#511abb2829a58c5ddb36c319094fe936bc82e3cd" - integrity sha512-vTH9UcMbi53x/pZKQrEcD83obE8agqQwUIx/G03/mpE1vzLm0KA3cHwuZXCysvxI1gXfNjV7Nu7Vjtp89kDzmg== + version "1.3.225" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.225.tgz#c6786475b5eb5f491ade01a78b82ba2c5bfdf72b" + integrity sha512-7W/L3jw7HYE+tUPbcVOGBmnSrlUmyZ/Uyg24QS7Vx0a9KodtNrN0r0Q/LyGHrcYMtw2rv7E49F/vTXwlV/fuaA== elliptic@6.3.3: version "6.3.3" @@ -5032,9 +5032,9 @@ escape-string-regexp@^2.0.0: integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== escodegen@^1.11.0, escodegen@^1.9.1: - version "1.11.1" - resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.1.tgz#c485ff8d6b4cdb89e27f4a856e91f118401ca510" - integrity sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw== + version "1.12.0" + resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541" + integrity sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg== dependencies: esprima "^3.1.3" estraverse "^4.2.0" @@ -5168,9 +5168,9 @@ eslint-utils@^1.3.1: eslint-visitor-keys "^1.0.0" eslint-visitor-keys@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d" - integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ== + version "1.1.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2" + integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A== eslint@^6.1.0: version "6.1.0" @@ -5434,8 +5434,8 @@ ethereumjs-abi@0.6.7: ethereumjs-util "^6.0.0" "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git": - version "0.6.7" - resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#d700d091f79c06f4e27872f4a1d7b153986cc3dd" + version "0.6.8" + resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#1cfbb13862f90f0b391d8a699544d5fe4dfb8c7b" dependencies: bn.js "^4.11.8" ethereumjs-util "^6.0.0" From 54ef65180646af0d7275d822c3dd994e3370a4d0 Mon Sep 17 00:00:00 2001 From: Noah Zinsmeister Date: Tue, 13 Aug 2019 15:07:42 -0700 Subject: [PATCH 4/4] fix re-render bug --- src/contexts/AllBalances.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/contexts/AllBalances.js b/src/contexts/AllBalances.js index 7fcb42c48f..51394b479c 100644 --- a/src/contexts/AllBalances.js +++ b/src/contexts/AllBalances.js @@ -96,7 +96,7 @@ export function useFetchAllBalances() { } } - useMemo(getData, [account, state]) + useMemo(getData, [account]) return allBalanceData }