Style token modal and toggle switch (Uniswap#413)

Author: callil

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;
 

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 })
         <ModalHeader>
           <p>Select Token</p>
           <CloseIcon onClick={clearInputAndDismiss}>
-            <img src={close} alt={'close icon'} />
+            <CloseColor alt={'close icon'} />
           </CloseIcon>
         </ModalHeader>
         <SearchContainer>

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;
   }
 `
 

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)};
     }
   }
 `

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 }) => <AnimatedDialogOverlay {...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;

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)};
     }
   }

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

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%;
 

src/theme/index.js

@@ -40,8 +40,10 @@ const theme = darkMode => ({
   // for setting css on <html>
   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);

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"