Dark theme (Uniswap#380)

rupiah-token · Jul 31, 2019 · 80da6e0 · 80da6e0
1 parent c8f8d83
commit 80da6e0
Show file tree

Hide file tree

Showing 19 changed files with 232 additions and 134 deletions.
diff --git a/src/assets/svg/SVGArrowDown.js b/src/assets/svg/SVGArrowDown.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const SVGArrowDown = props => (
+  <svg width="1em" height="1em" viewBox="0 0 9 10" fill="currentColor" {...props}>
+    <path
+      d="M5.298 0H4.24v7.911h-.075L1.256 4.932l-.717.735L4.769 10 9 5.667l-.718-.735-2.908 2.979h-.076V0z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default SVGArrowDown
diff --git a/src/components/AddressInputPanel/index.js b/src/components/AddressInputPanel/index.js
@@ -2,17 +2,17 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useWeb3Context } from 'web3-react'
-import { lighten } from 'polished'
+import { transparentize } from 'polished'
 
 import { isAddress } from '../../utils'
 import { useDebounce } from '../../hooks'
 
 const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
-  box-shadow: 0 4px 8px 0 ${({ theme }) => lighten(0.9, theme.royalBlue)};
+  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${({ theme }) => theme.white};
+  background-color: ${({ theme }) => theme.inputBackground};
   z-index: 1;
 `
 
@@ -21,9 +21,10 @@ const ContainerRow = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 1px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
-  background-color: ${({ theme }) => theme.white};
-  transition: box-shadow 200ms ease-in-out;
+  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`
@@ -59,13 +60,15 @@ const Input = styled.input`
   border: none;
   flex: 1 1 auto;
   width: 0;
+  background-color: ${({ theme }) => theme.inputBackground};
+
   color: ${({ error, theme }) => (error ? theme.salmonRed : theme.royalBlue)};
-  transition: color 200ms ease-in-out;
+  transition: color 125ms ease-in-out;
   overflow: hidden;
   text-overflow: ellipsis;
 
   ::placeholder {
-    color: ${({ theme }) => theme.chaliceGray};
+    color: ${({ theme }) => theme.placeholderGray};
   }
 `
 
@@ -93,8 +96,9 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
     let stale = false
 
     if (isAddress(debouncedInput)) {
-      try {
-        library.lookupAddress(debouncedInput).then(name => {
+      library
+        .lookupAddress(debouncedInput)
+        .then(name => {
           if (!stale) {
             // if an ENS name exists, set it as the destination
             if (name) {
@@ -105,14 +109,15 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
             }
           }
         })
-      } catch {
-        setData({ address: debouncedInput, name: '' })
-        setError(null)
-      }
+        .catch(() => {
+          setData({ address: debouncedInput, name: '' })
+          setError(null)
+        })
     } else {
       if (debouncedInput !== '') {
-        try {
-          library.resolveName(debouncedInput).then(address => {
+        library
+          .resolveName(debouncedInput)
+          .then(address => {
             if (!stale) {
               // if the debounced input name resolves to an address
               if (address) {
@@ -123,9 +128,9 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
               }
             }
           })
-        } catch {
-          setError(true)
-        }
+          .catch(() => {
+            setError(true)
+          })
       }
     }
 

diff --git a/src/components/ContextualInfo/index.js b/src/components/ContextualInfo/index.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import DropdownBlue from '../../assets/images/dropdown-blue.svg'
-import DropupBlue from '../../assets/images/dropup-blue.svg'
+import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
+import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
 
 const SummaryWrapper = styled.div`
   color: ${({ error, theme }) => (error ? theme.salmonRed : theme.doveGray)};
@@ -14,7 +14,7 @@ const SummaryWrapper = styled.div`
 `
 
 const Details = styled.div`
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.doveGray};
   padding: 1.5rem;
   border-radius: 1rem;
   font-size: 0.75rem;
@@ -42,6 +42,20 @@ const SummaryWrapperContainer = styled.div`
   }
 `
 
+const WrappedDropup = ({ isError, highSlippageWarning, ...rest }) => <Dropup {...rest} />
+const ColoredDropup = styled(WrappedDropup)`
+  path {
+    stroke: ${({ theme }) => theme.royalBlue};
+  }
+`
+
+const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
+const ColoredDropdown = styled(WrappedDropdown)`
+  path {
+    stroke: ${({ theme }) => theme.royalBlue};
+  }
+`
+
 class ContextualInfo extends Component {
   static propTypes = {
     openDetailsText: PropTypes.string,
@@ -89,12 +103,12 @@ class ContextualInfo extends Component {
           {!this.state.showDetails ? (
             <>
               <span>{openDetailsText}</span>
-              <img src={DropdownBlue} alt="dropdown" />
+              <ColoredDropup />
             </>
           ) : (
             <>
               <span>{closeDetailsText}</span>
-              <img src={DropupBlue} alt="dropup" />
+              <ColoredDropdown />
             </>
           )}
         </SummaryWrapperContainer>

diff --git a/src/components/ContextualInfoNew/index.js b/src/components/ContextualInfoNew/index.js
@@ -61,7 +61,7 @@ const ErrorSpan = styled.span`
 const WrappedDropup = ({ isError, highSlippageWarning, ...rest }) => <Dropup {...rest} />
 const ColoredDropup = styled(WrappedDropup)`
   path {
-    stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+    stroke: ${({ isError, theme }) => (isError ? theme.salmonRed : theme.royalBlue)};
 
     ${({ highSlippageWarning, theme }) =>
       highSlippageWarning &&
@@ -74,7 +74,7 @@ const ColoredDropup = styled(WrappedDropup)`
 const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
 const ColoredDropdown = styled(WrappedDropdown)`
   path {
-    stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+    stroke: ${({ isError, theme }) => (isError ? theme.salmonRed : theme.royalBlue)};
 
     ${({ highSlippageWarning, theme }) =>
       highSlippageWarning &&

diff --git a/src/components/CurrencyInputPanel/index.js b/src/components/CurrencyInputPanel/index.js
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { ethers } from 'ethers'
 import styled from 'styled-components'
 import escapeStringRegex from 'escape-string-regexp'
-import { lighten, darken } from 'polished'
+import { darken } from 'polished'
 import Tooltip from '@reach/tooltip'
 import '@reach/tooltip/styles.css'
 import { isMobile } from 'react-device-detect'
@@ -18,6 +18,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 { transparentize } from 'polished'
 
 const GAS_MARGIN = ethers.utils.bigNumberify(1000)
 
@@ -40,12 +41,14 @@ const SubCurrencySelect = styled.button`
 const InputRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
+
   padding: 0.25rem 0.85rem 0.75rem;
 `
 
 const Input = styled(BorderlessInput)`
   font-size: 1.5rem;
   color: ${({ error, theme }) => error && theme.salmonRed};
+  background-color: ${({ theme }) => theme.inputBackground};
 `
 
 const StyledBorderlessInput = styled(BorderlessInput)`
@@ -56,7 +59,7 @@ const StyledBorderlessInput = styled(BorderlessInput)`
 const CurrencySelect = styled.button`
   align-items: center;
   font-size: 1rem;
-  color: ${({ selected, theme }) => (selected ? theme.black : theme.royalBlue)};
+  color: ${({ selected, theme }) => (selected ? theme.textColor : theme.royalBlue)};
   height: 2rem;
   border: 1px solid ${({ selected, theme }) => (selected ? theme.mercuryGray : theme.royalBlue)};
   border-radius: 2.5rem;
@@ -90,27 +93,28 @@ const StyledDropDown = styled(DropDown)`
   height: 35%;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.black : theme.royalBlue)};
+    stroke: ${({ selected, theme }) => (selected ? theme.textColor : theme.royalBlue)};
   }
 `
 
 const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
-  box-shadow: 0 4px 8px 0 ${({ theme }) => lighten(0.9, theme.royalBlue)};
+  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${({ theme }) => theme.white};
+  background-color: ${({ theme }) => theme.inputBackground};
   z-index: 1;
 `
 
 const Container = styled.div`
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 1px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
-  background-color: ${({ theme }) => theme.white};
-  transition: box-shadow 200ms ease-in-out;
+  border: 1px solid ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+
+  background-color: ${({ theme }) => theme.inputBackground};
+  transition: box-shadow 150ms ease-out;
 
   :focus-within {
-    box-shadow: 0 0 1px 1px ${({ theme }) => theme.malibuBlue};
+    border: 1px solid ${({ theme }) => theme.malibuBlue};
   }
 `
 
@@ -145,7 +149,6 @@ const ErrorSpan = styled.span`
 
 const TokenModal = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
-  background-color: ${({ theme }) => theme.white};
   width: 100%;
 `
 

diff --git a/src/components/ExchangePage/index.jsx b/src/components/ExchangePage/index.jsx
@@ -10,8 +10,7 @@ import CurrencyInputPanel from '../CurrencyInputPanel'
 import AddressInputPanel from '../AddressInputPanel'
 import OversizedPanel from '../OversizedPanel'
 import TransactionDetails from '../TransactionDetails'
-import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg'
-import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg'
+import ArrowDown from '../../assets/svg/SVGArrowDown'
 import { amountFormatter, calculateGasMargin } from '../../utils'
 import { useExchangeContract } from '../../hooks'
 import { useTokenDetails } from '../../contexts/Tokens'
@@ -42,7 +41,9 @@ const DownArrowBackground = styled.div`
   align-items: center;
 `
 
-const DownArrow = styled.img`
+const WrappedArrowDown = ({ clickable, active, ...rest }) => <ArrowDown {...rest} />
+const DownArrow = styled(WrappedArrowDown)`
+  color: ${({ theme, active }) => (active ? theme.royalBlue : theme.chaliceGray)};
   width: 0.625rem;
   height: 0.625rem;
   position: relative;
@@ -61,7 +62,7 @@ const ExchangeRateWrapper = styled.div`
 const ExchangeRate = styled.span`
   flex: 1 1 auto;
   width: 0;
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.doveGray};
 `
 
 const Flex = styled.div`
@@ -619,7 +620,7 @@ export default function ExchangePage({ initialCurrency, sending }) {
             }}
             clickable
             alt="swap"
-            src={isValid ? ArrowDownBlue : ArrowDownGrey}
+            active={isValid}
           />
         </DownArrowBackground>
       </OversizedPanel>
@@ -643,7 +644,7 @@ export default function ExchangePage({ initialCurrency, sending }) {
         <>
           <OversizedPanel>
             <DownArrowBackground>
-              <DownArrow src={isValid ? ArrowDownBlue : ArrowDownGrey} alt="arrow" />
+              <DownArrow active={isValid} alt="arrow" />
             </DownArrowBackground>
           </OversizedPanel>
           <AddressInputPanel onChange={setRecipient} onError={setRecipientError} />

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Link } from '../../theme'
 import Web3Status from '../Web3Status'
 import { darken } from 'polished'
+import { useDarkModeManager } from '../../contexts/LocalStorage'
 
 const HeaderElement = styled.div`
   margin: 1.25rem;
@@ -15,9 +16,19 @@ const Title = styled.div`
   display: flex;
   align-items: center;
 
+  :hover {
+    cursor: pointer;
+  }
+
   #image {
     font-size: 1.5rem;
     margin-right: 1rem;
+    transform: rotate(0deg);
+    transition: transform 150ms ease-out;
+
+    :hover {
+      transform: rotate(-10deg);
+    }
   }
 
   #link {
@@ -36,11 +47,13 @@ const Title = styled.div`
 `
 
 export default function Header() {
+  const [, toggleDarkMode] = useDarkModeManager()
+
   return (
     <>
       <HeaderElement>
         <Title>
-          <span id="image" role="img" aria-label="Unicorn Emoji">
+          <span onClick={toggleDarkMode} id="image" role="img" aria-label="Unicorn Emoji">
             🦄
           </span>
 

diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -21,8 +21,10 @@ const FilteredDialogContent = ({ minHeight, ...rest }) => <DialogContent {...res
 const StyledDialogContent = styled(FilteredDialogContent)`
   &[data-reach-dialog-content] {
     margin: 0 0 2rem 0;
-    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`}
-    padding: 0;
+    border: 1px solid ${({ theme }) => theme.concreteGray};
+    background-color: ${({ theme }) => theme.inputBackground};
+    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`};
+    padding: 0px;
     width: 50vw;
     max-width: 650px;
     ${({ theme }) => theme.mediaWidth.upToMedium`width: 65vw;`}
@@ -51,7 +53,7 @@ const HiddenCloseButton = styled.button`
 
 export default function Modal({ isOpen, onDismiss, minHeight = false, initialFocusRef, children }) {
   const transitions = useTransition(isOpen, null, {
-    config: { duration: 125 },
+    config: { duration: 150 },
     from: { opacity: 0 },
     enter: { opacity: 1 },
     leave: { opacity: 0 }