UI/UX tweaks (#740)

* Prepare for V2 testing * Bug fixes and tweaks * Add form link * Design tweaks * higher quality favicon * Favicon... again. * Start dark mode * Add dark toggle * New dark theme unicorn * fix connect wallet ui * Titles for fields && small UI/UX tweaks * Fix ts linter errors * UI/UX tweaks * rebass and change color names * v1/v2 toggle and color tweaks * Small header tweaks * fix account input mobile padding * remove unused imports * Fix header link * Theme toggle for mobile & fix * no acount? hide maxes * Use system theme unless toggled * Remove unused styles * Fix missing hooks dependencies * Fix linting errors * improve system dark mode listener * add listener * fix hook dependency Co-authored-by: Ian Lapham <ianlapham@gmail.com> Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

UI/UX tweaks (#740)
* Prepare for V2 testing * Bug fixes and tweaks * Add form link * Design tweaks * higher quality favicon * Favicon... again. * Start dark mode * Add dark toggle * New dark theme unicorn * fix connect wallet ui * Titles for fields && small UI/UX tweaks * Fix ts linter errors * UI/UX tweaks * rebass and change color names * v1/v2 toggle and color tweaks * Small header tweaks * fix account input mobile padding * remove unused imports * Fix header link * Theme toggle for mobile & fix * no acount? hide maxes * Use system theme unless toggled * Remove unused styles * Fix missing hooks dependencies * Fix linting errors * improve system dark mode listener * add listener * fix hook dependency Co-authored-by: Ian Lapham <ianlapham@gmail.com> Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>
dba6abad · Callil Capuozzo · GitHub · 4131268b · 4131268b · dba6abad
Commit dba6abad authored May 11, 2020 by Callil Capuozzo Committed by GitHub May 11, 2020
37 changed files
--- a/src/assets/svg/logo_white2.svg
+++ b/src/assets/svg/logo_white2.svg
-<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M6.20269 23.3208C6.62857 23.9594 6.75962 24.96 6.95456 25.3148C7.12588 26.0129 9.14748 25.6855 10.283 25.5968L14.9834 24.0376L17.5378 25.3148C17.928 26.6629 19.081 29.4337 20.5711 29.7317C22.0611 30.0297 23.9946 28.082 24.7751 27.0709C25.325 25.7583 26.5206 23.0053 26.9037 22.4944C27.2869 21.9835 26.9214 19.4256 26.9037 18.8225L26.0444 16.3584C25.6009 15.0635 24.2791 13.5222 23.9386 12.9688C23.5128 12.277 20.3582 12.4899 19.0278 11.9045C17.9635 11.4362 16.5621 9.29692 15.9945 8.28582C14.7351 7.22151 12.0566 5.36961 11.418 6.47649C10.7794 7.58338 11.684 10.1306 12.2162 11.2659L3.22266 1.42101C5.38676 5.27027 10.1096 12.9688 9.76902 12.9688C9.42844 12.9688 8.88977 14.5215 8.7656 15.1956C8.55273 16.118 7.85826 18.8184 6.53851 19.9679C4.88883 21.4047 5.67035 22.5225 6.20269 23.3208Z" fill="black"/>
-<path d="M14.9782 14.6996C15.5847 15.7722 14.2282 16.1047 13.5917 16.1659C12.627 16.2601 12.4273 15.7016 12.6158 15C12.6776 14.7488 12.8148 14.5228 13.0088 14.3527C13.2029 14.1825 13.4443 14.0764 13.7004 14.0488C13.9528 14.0256 14.2065 14.0743 14.4325 14.1894C14.6586 14.3045 14.8477 14.4814 14.9782 14.6996V14.6996Z" fill="#CED0D9"/>
-<path d="M18.7644 12.715C18.0594 18.1319 27.5636 17.0047 27.3826 21.316C28.3201 20.0917 28.7232 16.7655 25.9633 15.0534C23.5043 13.5268 20.3 14.3621 18.7644 12.715Z" fill="#CED0D9"/>
-<path d="M24.2388 10.6722C24.1769 10.6147 24.1131 10.5582 24.0513 10.5017C24.1141 10.5592 24.1769 10.6195 24.2388 10.6722Z" fill="black"/>
-<path d="M26.4475 14.6209L26.4419 14.6125C26.3561 14.4524 26.2584 14.299 26.1494 14.1538C25.829 13.7178 25.3694 13.4053 24.8473 13.2686C24.4997 13.1785 24.1443 13.1223 23.7861 13.101C23.4233 13.0746 23.0529 13.0595 22.6789 13.0397C21.9289 12.9983 21.1611 12.9211 20.4112 12.7064C20.2237 12.6527 20.0362 12.5943 19.8552 12.5237C19.7615 12.4898 19.6743 12.453 19.5815 12.4135C19.4887 12.3739 19.394 12.3287 19.3002 12.2807C18.9476 12.0866 18.6209 11.8484 18.3281 11.5716C17.7506 11.0319 17.2969 10.4198 16.8422 9.8265C16.4136 9.23092 15.9535 8.65877 15.4641 8.11252C14.9812 7.57738 14.4104 7.12951 13.7767 6.78842C13.1204 6.45638 12.4076 6.25189 11.6758 6.18571C12.435 6.1029 13.203 6.19699 13.9201 6.4607C14.6437 6.7429 15.3053 7.16492 15.8672 7.70286C16.2342 8.04853 16.5786 8.41751 16.8984 8.80753C19.2796 8.33666 21.2108 8.75479 22.6948 9.56658L22.7286 9.58353C23.2009 9.84088 23.6436 10.1498 24.0486 10.5046C24.1132 10.5611 24.177 10.6176 24.236 10.675C24.5521 10.9668 24.8464 11.2815 25.1163 11.6168L25.137 11.6441C26.0135 12.7591 26.4466 13.9184 26.4475 14.6209Z" fill="#CED0D9"/>
-<path d="M26.4464 14.6199L26.4409 14.6087L26.4464 14.6199Z" fill="black"/>
-<path d="M11.7967 6.88345C12.4042 6.97198 13.0239 7.21495 13.4232 7.67829C13.8226 8.14163 13.9698 8.74435 14.0851 9.31787C14.1788 9.76238 14.2529 10.2154 14.4273 10.6363C14.5117 10.8416 14.6354 11.0215 14.7385 11.2155C14.8238 11.3765 14.9794 11.5216 15.0394 11.6939C15.0502 11.7186 15.0542 11.7458 15.051 11.7726C15.0479 11.7994 15.0378 11.8249 15.0216 11.8465C14.8098 12.0819 14.2379 11.8201 14.0223 11.7146C13.6495 11.529 13.3157 11.2733 13.0389 10.9612C12.1736 9.99593 11.7264 8.60685 11.7536 7.34208C11.7596 7.18853 11.774 7.03542 11.7967 6.88345Z" fill="#CED0D9"/>
-<path d="M21.9569 17.7686C20.6444 21.448 26.5974 23.9164 24.3671 27.657C26.6555 26.7077 27.742 23.8401 26.7924 21.5648C25.9618 19.5674 23.5056 18.8394 21.9569 17.7686Z" fill="#CED0D9"/>
-<path d="M14.0835 22.5803C14.4412 22.3095 14.8322 22.0863 15.2469 21.9164C15.6665 21.7477 16.1017 21.6215 16.5462 21.5397C17.4284 21.3711 18.3012 21.3296 19.0343 21.033C19.3965 20.8909 19.7298 20.6835 20.0177 20.4209C20.2964 20.1608 20.5097 19.838 20.6402 19.4791C20.7739 19.1004 20.8281 18.698 20.7995 18.2972C20.7664 17.8667 20.6694 17.4436 20.5117 17.0419C20.8385 17.3833 21.0765 17.8004 21.2045 18.2562C21.3325 18.7121 21.3467 19.1926 21.2458 19.6552C21.1311 20.145 20.8835 20.5932 20.5305 20.9501C20.1811 21.2959 19.7597 21.5596 19.2968 21.7224C18.855 21.878 18.3943 21.9731 17.9271 22.0049C17.4771 22.0426 17.0422 22.0529 16.6147 22.0783C15.7504 22.1148 14.8967 22.284 14.0835 22.5803V22.5803Z" fill="#CED0D9"/>
-<path d="M22.4806 29.0481C22.3484 29.1536 22.2162 29.2656 22.0709 29.3636C21.9247 29.4604 21.7715 29.546 21.6125 29.6197C21.2815 29.7819 20.9176 29.8648 20.5494 29.8618C19.5519 29.8429 18.847 29.0971 18.4345 28.2542C18.1532 27.6797 17.9592 27.0591 17.6254 26.512C17.1483 25.7294 16.3317 25.0993 15.3755 25.2161C14.9855 25.2651 14.6199 25.4412 14.4033 25.7812C13.8334 26.6692 14.6518 27.9133 15.6952 27.7372C15.7839 27.7236 15.8708 27.6996 15.9539 27.6656C16.0368 27.6302 16.1141 27.5829 16.1836 27.5253C16.3293 27.4034 16.4392 27.2438 16.5014 27.0638C16.5699 26.8761 16.5852 26.673 16.5455 26.4771C16.5027 26.2724 16.3823 26.0924 16.2098 25.9752C16.4104 26.0695 16.5666 26.2383 16.6458 26.446C16.7278 26.6598 16.7489 26.8924 16.7067 27.1175C16.6657 27.3521 16.5628 27.5713 16.4086 27.7522C16.3267 27.8453 16.232 27.9262 16.1273 27.9924C16.0236 28.0578 15.9126 28.1106 15.7964 28.1497C15.5609 28.2305 15.3103 28.2566 15.0633 28.226C14.7166 28.1763 14.3895 28.0339 14.1165 27.8135C13.794 27.5573 13.554 27.222 13.2624 26.9339C12.9282 26.5816 12.5339 26.2923 12.0981 26.0797C11.7976 25.9471 11.4831 25.8492 11.1606 25.7878C10.9984 25.7539 10.8344 25.7294 10.6703 25.7087C10.5953 25.7011 10.2278 25.6192 10.1763 25.6672C10.6833 25.1983 11.2361 24.7818 11.8262 24.4241C12.4321 24.0629 13.0827 23.7833 13.7612 23.5925C14.4646 23.3936 15.2004 23.337 15.9258 23.4259C16.2992 23.4709 16.6649 23.5659 17.0133 23.7084C17.3782 23.8548 17.7151 24.0639 18.0088 24.3262C18.2996 24.6013 18.5345 24.9304 18.7007 25.2952C18.8507 25.6368 18.9627 25.994 19.0344 26.3603C19.2482 27.4556 19.1694 29.1536 20.5972 29.4041C20.6716 29.4186 20.7467 29.4293 20.8222 29.4361L21.0556 29.4417C21.2161 29.4303 21.3756 29.4073 21.5328 29.373C21.8585 29.296 22.176 29.1872 22.4806 29.0481V29.0481Z" fill="#CED0D9"/>
-<path d="M14.1844 27.8545L14.147 27.8251L14.1844 27.8545Z" fill="black"/>
-<path d="M12.9029 12.3965C12.8509 12.5972 12.7602 12.7857 12.6357 12.9512C12.4042 13.2531 12.0977 13.4885 11.747 13.634C11.4316 13.7705 11.0976 13.8587 10.7561 13.8958C10.6821 13.9052 10.6052 13.9108 10.5311 13.9165C10.3149 13.9247 10.1069 14.0023 9.93769 14.1379C9.76849 14.2735 9.64694 14.4599 9.59084 14.6699C9.56515 14.7743 9.54605 14.8804 9.53365 14.9872C9.49991 15.2641 9.49428 15.5523 9.46428 15.9007C9.39082 16.4937 9.22008 17.0703 8.95898 17.6072C8.61962 18.3248 8.23901 18.903 8.32713 19.7299C8.38525 20.2667 8.65899 20.6264 9.02273 20.9975C9.67896 21.6718 11.148 21.9731 10.8199 23.6344C10.6221 24.626 8.98523 25.6667 6.68468 26.0302C6.91342 25.9953 6.39124 25.111 6.35843 25.0545C6.11188 24.6665 5.84189 24.3011 5.64596 23.8802C5.26159 23.0637 5.08347 22.1191 5.24097 21.2244C5.4069 20.2827 6.10063 19.5613 6.67718 18.8418C7.36341 17.9858 8.08338 16.8641 8.24275 15.7529C8.28025 15.4835 8.3065 15.1464 8.3665 14.8111C8.4237 14.4397 8.53953 14.0798 8.70961 13.7451C8.82571 13.5255 8.97856 13.3277 9.16147 13.1603C9.25684 13.0713 9.31976 12.9529 9.34016 12.8238C9.36055 12.6947 9.33725 12.5625 9.27397 12.4483L5.60658 5.82215L10.8742 12.3522C10.9342 12.4279 11.0101 12.4894 11.0963 12.5323C11.1826 12.5752 11.2773 12.5986 11.3735 12.6006C11.4698 12.6027 11.5654 12.5835 11.6534 12.5443C11.7414 12.5051 11.8198 12.4469 11.883 12.3739C11.9497 12.2957 11.9875 12.1968 11.9901 12.0939C11.9926 11.9909 11.9598 11.8903 11.897 11.8088C11.553 11.3672 11.1892 10.917 10.8367 10.4744L9.51116 8.82633L6.85061 5.53586L3.22266 0.962891L7.19185 5.2411L10.024 8.38653L11.4367 9.96302C11.9055 10.4932 12.3742 11.0065 12.8429 11.564L12.9198 11.6582L12.9367 11.8041C12.9595 12.0021 12.9481 12.2025 12.9029 12.3965Z" fill="#CED0D9"/>
-<path d="M14.1174 27.8092C13.8629 27.6116 13.6364 27.38 13.4443 27.1208C13.6504 27.3676 13.8755 27.5978 14.1174 27.8092V27.8092Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect y="0.962891" width="32" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/components/AccountDetails/Transaction.tsx
+++ b/src/components/AccountDetails/Transaction.tsx
@@ -46,14 +46,14 @@ const rotate = keyframes`
 const TransactionState = styled.div<{ pending?: boolean }>`
  display: flex;
  background-color: ${({ pending, theme }) =>
-    pending ? transparentize(0.95, theme.blue1) : transparentize(0.95, theme.green1)};
+    pending ? transparentize(0.95, theme.primary1) : transparentize(0.95, theme.green1)};
  border-radius: 1.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  border: 1px solid;
  border-color: ${({ pending, theme }) =>
-    pending ? transparentize(0.75, theme.blue1) : transparentize(0.75, theme.green1)};
+    pending ? transparentize(0.75, theme.primary1) : transparentize(0.75, theme.green1)};
  #pending {
    animation: 2s ${rotate} linear infinite;
@@ -61,12 +61,12 @@ const TransactionState = styled.div<{ pending?: boolean }>`
  :hover {
    border-color: ${({ pending, theme }) =>
-      pending ? transparentize(0, theme.blue1) : transparentize(0, theme.green1)};
+      pending ? transparentize(0, theme.primary1) : transparentize(0, theme.green1)};
  }
 `
 const ButtonWrapper = styled.div<{ pending: boolean }>`
  a {
-    color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.green1)};
+    color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.green1)};
  }
 `

--- a/src/components/AccountDetails/index.tsx
+++ b/src/components/AccountDetails/index.tsx
@@ -23,7 +23,7 @@ const HeaderRow = styled.div`
  ${({ theme }) => theme.flexRowNoWrap};
  padding: 1rem 1rem;
  font-weight: 500;
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
  ${({ theme }) => theme.mediaWidth.upToMedium`
    padding: 1rem;
  `};
@@ -51,7 +51,6 @@ const UpperSection = styled.div`
 const InfoCard = styled.div`
  padding: 1rem;
-  /* border: 1px solid ${({ theme }) => theme.bg2}; */
  background-color: ${({ theme }) => theme.bg2};
  border-radius: 20px;
 `
@@ -69,7 +68,7 @@ const AccountGroupingRow = styled.div`
  }
  &:first-of-type {
-    margin-bottom: 20px;
+    margin-bottom: 8px;
  }
 `
@@ -141,8 +140,9 @@ const AccountControl = styled.div<{ hasENS: boolean; isENS: boolean }>`
    text-decoration: underline;
  }
-  a {
+  p {
    min-width: 0;
+    margin: 0.5rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -157,7 +157,7 @@ const ConnectButtonRow = styled.div`
 `
 const StyledLink = styled(Link)<{ hasENS: boolean; isENS: boolean }>`
-  color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.blue1 : theme.text3) : theme.blue1)};
+  color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.primary1 : theme.text3) : theme.primary1)};
 `
 const CloseIcon = styled.div`
@@ -210,7 +210,7 @@ const WalletAction = styled.div`
 `
 const MainWalletAction = styled(WalletAction)`
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
 `
 function renderTransactions(transactions, pending) {
@@ -327,19 +327,36 @@ export default function AccountDetails({
              </AccountGroupingRow>
              <AccountGroupingRow>
                {ENSName ? (
+                  <>
                    <AccountControl hasENS={!!ENSName} isENS={true}>
+                      <p>{ENSName}</p> <Copy toCopy={account} />
+                    </AccountControl>
+                  </>
+                ) : (
+                  <>
+                    <AccountControl hasENS={!!ENSName} isENS={false}>
+                      <p>{account}</p> <Copy toCopy={account} />
+                    </AccountControl>
+                  </>
+                )}
+              </AccountGroupingRow>
+              <AccountGroupingRow>
+                {ENSName ? (
+                  <>
+                    <AccountControl hasENS={!!ENSName} isENS={false}>
                      <StyledLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
-                      {ENSName} ↗{' '}
+                        View on Etherscan ↗{' '}
                      </StyledLink>
-                    <Copy toCopy={ENSName} />
                    </AccountControl>
+                  </>
                ) : (
+                  <>
                    <AccountControl hasENS={!!ENSName} isENS={false}>
                      <StyledLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(chainId, account, 'address')}>
-                      {account} ↗{' '}
+                        View on Etherscan ↗{' '}
                      </StyledLink>
-                    <Copy toCopy={account} />
                    </AccountControl>
+                  </>
                )}
              </AccountGroupingRow>
            </InfoCard>

--- a/src/components/AddressInputPanel/index.tsx
+++ b/src/components/AddressInputPanel/index.tsx
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
-import styled from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 // import QR from '../../assets/svg/QR.svg'
 import { isAddress } from '../../utils'
 import { useWeb3React, useDebounce } from '../../hooks'
+import { Link, TYPE } from '../../theme'
+import { AutoColumn } from '../Column'
+import { RowBetween } from '../Row'
+import { getEtherscanLink } from '../../utils'
 const InputPanel = styled.div`
  ${({ theme }) => theme.flexColumnNoWrap}
@@ -12,7 +16,6 @@ const InputPanel = styled.div`
  background-color: ${({ theme }) => theme.bg1};
  z-index: 1;
  width: 100%;
-  height: 60px;
 `
 const ContainerRow = styled.div<{ error: boolean }>`
@@ -20,33 +23,41 @@ const ContainerRow = styled.div<{ error: boolean }>`
  justify-content: center;
  align-items: center;
  border-radius: 1.25rem;
-  height: 60px;
+  border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg2)};
-  border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg3)};
  background-color: ${({ theme }) => theme.bg1};
 `
 const InputContainer = styled.div`
  flex: 1;
+  padding: 1rem;
 `
-const InputRow = styled.div`
+const Input = styled.input<{ error?: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap}
+  font-size: 1.25rem;
-  align-items: center;
-  padding: 0.75rem;
-`
-const Input = styled.input<{ error: boolean }>`
-  font-size: 1rem;
  outline: none;
  border: none;
  flex: 1 1 auto;
  width: 0;
  background-color: ${({ theme }) => theme.bg1};
-  font-size: 20px;
+  color: ${({ error, theme }) => (error ? theme.red1 : theme.primary1)};
-  color: ${({ error, theme }) => (error ? theme.red1 : theme.blue1)};
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
+  width: 100%;
+  ::placeholder {
+    color: ${({ theme }) => theme.text4};
+  }
+  padding: 0px;
+  -webkit-appearance: textfield;
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
  ::placeholder {
    color: ${({ theme }) => theme.text4};
@@ -72,7 +83,8 @@ export default function AddressInputPanel({
  onChange: (val: { address: string; name?: string }) => void
  onError: (error: boolean, input: string) => void
 }) {
-  const { library } = useWeb3React()
+  const { chainId, library } = useWeb3React()
+  const theme = useContext(ThemeContext)
  const [input, setInput] = useState(initialInput ? initialInput : '')
@@ -173,14 +185,29 @@ export default function AddressInputPanel({
    <InputPanel>
      <ContainerRow error={input !== '' && error}>
        <InputContainer>
-          <InputRow>
+          <AutoColumn gap="md">
+            <RowBetween>
+              <TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
+                Recipient
+              </TYPE.black>
+              {data.name ? (
+                <Link href={getEtherscanLink(chainId, data.name, 'address')} style={{ fontSize: '14px' }}>
+                  (View on Etherscan)
+                </Link>
+              ) : (
+                <Link href={getEtherscanLink(chainId, data.address, 'address')} style={{ fontSize: '14px' }}>
+                  (View on Etherscan)
+                </Link>
+              )}
+            </RowBetween>
            <Input
              type="text"
              autoComplete="off"
              autoCorrect="off"
              autoCapitalize="off"
              spellCheck="false"
-              placeholder="Recipient Address"
+              placeholder="Wallet Address or ENS name"
              error={input !== '' && error}
              onChange={onInput}
              value={input}
@@ -188,7 +215,7 @@ export default function AddressInputPanel({
            {/* <QRWrapper>
              <img src={QR} alt="" />
            </QRWrapper> */}
-          </InputRow>
+          </AutoColumn>
        </InputContainer>
      </ContainerRow>
    </InputPanel>

--- a/src/components/AdvancedSettings/index.tsx
+++ b/src/components/AdvancedSettings/index.tsx
@@ -17,7 +17,7 @@ const InputWrapper = styled(RowBetween)<{ active?: boolean; error?: boolean }>`
  padding: 4px 8px;
  border: 1px solid transparent;
  border: ${({ active, error, theme }) =>
-    error ? '1px solid ' + theme.red1 : active ? '1px solid ' + theme.blue1 : ''};
+    error ? '1px solid ' + theme.red1 : active ? '1px solid ' + theme.primary1 : ''};
 `
 const SLIPPAGE_INDEX = {

--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -31,18 +31,18 @@ const Base = styled(RebassButton)<{ padding?: string; width?: string; borderRadi
 `
 export const ButtonPrimary = styled(Base)`
-  background-color: ${({ theme }) => theme.blue1};
+  background-color: ${({ theme }) => theme.primary1};
  color: white;
  &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.05, theme.blue1)};
+    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.blue1)};
+    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.blue1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.1, theme.blue1)};
+    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
  }
  &:disabled {
    background-color: ${({ theme }) => theme.bg3};
@@ -53,20 +53,20 @@ export const ButtonPrimary = styled(Base)`
 `
 export const ButtonLight = styled(Base)`
-  background-color: ${({ theme }) => theme.blue5};
+  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.buttonSecondaryText};
+  color: ${({ theme }) => theme.primaryText1};
  font-size: 16px;
  font-weight: 500;
  &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.blue5)};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.blue5)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
  }
  &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.blue5)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
  }
  &:active {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.primary5)};
  }
 `
@@ -89,47 +89,47 @@ export const ButtonGray = styled(Base)`
 `
 export const ButtonSecondary = styled(Base)`
-  background-color: ${({ theme }) => theme.blue5};
+  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.buttonSecondaryText};
+  color: ${({ theme }) => theme.primaryText1};
  font-size: 16px;
  border-radius: 8px;
-  padding: 10px;
+  padding: ${({ padding }) => (padding ? padding : '10px')};
  &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.03, theme.blue5)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
-    background-color: ${({ theme }) => darken(0.03, theme.blue5)};
+    background-color: ${({ theme }) => theme.primary4};
  }
  &:hover {
-    background-color: ${({ theme }) => darken(0.03, theme.blue5)};
+    background-color: ${({ theme }) => theme.primary4};
  }
  &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue5)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
-    background-color: ${({ theme }) => darken(0.05, theme.blue5)};
+    background-color: ${({ theme }) => theme.primary4};
  }
  &:disabled {
-    background-color: ${({ theme }) => theme.blue5};
+    background-color: ${({ theme }) => theme.primary5};
    opacity: 50%;
    cursor: auto;
  }
 `
 export const ButtonPink = styled(Base)`
-  background-color: ${({ theme }) => theme.pink2};
+  background-color: ${({ theme }) => theme.primary1};
  color: white;
  &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.pink2)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.05, theme.pink2)};
+    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.pink2)};
+    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.pink2)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.1, theme.pink2)};
+    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
  }
  &:disabled {
-    background-color: ${({ theme }) => theme.pink2};
+    background-color: ${({ theme }) => theme.primary1};
    opacity: 50%;
    cursor: auto;
  }
@@ -157,19 +157,19 @@ export const ButtonOutlined = styled(Base)`
 export const ButtonEmpty = styled(Base)`
  background-color: transparent;
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
  display: flex;
  justify-content: center;
  align-items: center;
  &:focus {
-    background-color: ${({ theme }) => theme.bg3};
+    background-color: ${({ theme }) => theme.advancedBG};
  }
  &:hover {
-    background-color: ${({ theme }) => theme.bg3};
+    background-color: ${({ theme }) => theme.advancedBG};
  }
  &:active {
-    background-color: ${({ theme }) => theme.bg3};
+    background-color: ${({ theme }) => theme.advancedBG};
  }
  &:disabled {
    opacity: 50%;

--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -15,6 +15,7 @@ export default Card
 export const LightCard = styled(Card)`
  border: 1px solid ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.bg1};
 `
 export const GreyCard = styled(Card)`
@@ -33,13 +34,13 @@ export const YellowCard = styled(Card)`
 export const PinkCard = styled(Card)`
  background-color: rgba(255, 0, 122, 0.03);
-  color: ${({ theme }) => theme.pink2};
+  color: ${({ theme }) => theme.primary1};
  font-weight: 500;
 `
 const BlueCardStyled = styled(Card)`
-  background-color: ${({ theme }) => theme.blue5};
+  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
  border-radius: 12px;
  width: fit-content;
 `

--- a/src/components/Column/index.tsx
+++ b/src/components/Column/index.tsx
@@ -12,7 +12,7 @@ export const ColumnCenter = styled(Column)`
 export const AutoColumn = styled.div<{
  gap?: 'sm' | 'md' | 'lg' | string
-  justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end'
+  justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'space-between'
 }>`
  display: grid;
  grid-auto-rows: auto;

--- a/src/components/ConfirmationModal/index.tsx
+++ b/src/components/ConfirmationModal/index.tsx
-import React, { useCallback } from 'react'
+import React, { useCallback, useContext } from 'react'
-import styled from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import Modal from '../Modal'
@@ -57,6 +57,7 @@ function ConfirmationModal({
  title = ''
 }: ConfirmationModalProps) {
  const { chainId } = useWeb3React()
+  const theme = useContext(ThemeContext)
  const dismissAndReturn = useCallback(() => {
    if (history.location.pathname.match('/add') || history.location.pathname.match('/remove')) {
@@ -91,7 +92,7 @@ function ConfirmationModal({
              {pendingConfirmation ? (
                <Loader size="90px" />
              ) : (
-                <ArrowUpCircle strokeWidth={0.5} size={90} color="#ff007a" />
+                <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
              )}
            </ConfirmedIcon>
            <AutoColumn gap="12px" justify={'center'}>
@@ -99,14 +100,14 @@ function ConfirmationModal({
                {!pendingConfirmation ? 'Transaction Submitted' : 'Waiting For Confirmation'}
              </Text>
              <AutoColumn gap="12px" justify={'center'}>
-                <Text fontWeight={600} fontSize={14} color="" textAlign="center" style={{ width: '70%' }}>
+                <Text fontWeight={600} fontSize={14} color="" textAlign="center">
                  {pendingText}
                </Text>
              </AutoColumn>
              {!pendingConfirmation && (
                <>
                  <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
-                    <Text fontWeight={500} fontSize={14} color="#ff007a">
+                    <Text fontWeight={500} fontSize={14} color={theme.primary1}>
                      View on Etherscan
                    </Text>
                  </Link>
@@ -117,7 +118,6 @@ function ConfirmationModal({
                  </ButtonPrimary>
                </>
              )}
-              {/* {pendingConfirmation && <div style={{ height: '138px' }} />} */}
              <Text fontSize={12} color="#565A69" textAlign="center">
                {pendingConfirmation
                  ? 'Confirm this transaction in your wallet'

--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -28,19 +28,19 @@ const CurrencySelect = styled.button<{ selected: boolean }>`
  font-size: 20px;
  font-family: 'Inter';
  font-weight: 500;
-  background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.blue1)};
+  background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)};
  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
  border-radius: 12px;
  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
-  /* padding: 0px; */
  outline: none;
  cursor: pointer;
  user-select: none;
  border: none;
+  padding: 0 0.5rem;
  :focus,
  :hover {
-    background-color: ${({ selected, theme }) => (selected ? theme.bg2 : darken(0.05, theme.blue1))};
+    background-color: ${({ selected, theme }) => (selected ? theme.bg2 : darken(0.05, theme.primary1))};
  }
 `
@@ -51,7 +51,7 @@ const LabelRow = styled.div`
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.75rem 1rem 0 1rem;
-  height: 20px
+  height: 20px;
  span:hover {
    cursor: pointer;
    color: ${({ theme }) => darken(0.2, theme.text2)};
@@ -95,43 +95,28 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 `
 const StyledBalanceMax = styled.button`
-  height: 32px;
+  height: 28px;
-  background-color: ${({ theme }) => theme.blue5};
+  background-color: ${({ theme }) => theme.primary5};
-  border: 1px solid ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.primary5};
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: 0.5rem;
-  color: ${({ theme }) => theme.buttonSecondaryText};
+  color: ${({ theme }) => theme.primaryText1};
  :hover {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
  }
  :focus {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
    outline: none;
  }
-`
-// const StyledBalanceMaxMini = styled.button`
-//   height: 24px;
-//   background-color: ${({ theme, active }) => (active ? theme.blue5 : theme.bg2)};
-//   border: 1px solid ${({ theme }) => theme.blue5};
-//   border-radius: 0.5rem;
-//   font-size: 0.875rem;
-//   font-weight: 500;
-//   cursor: pointer;
-//   pointer-events: ${({ active }) => (active ? 'initial' : 'none')};
-//   color: ${({ theme, active }) => (active ? theme.blue1 : theme.text4)};
-//   :hover {
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-//     border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
+    margin-right: 0.5rem;
-//   }
+  `};
-//   :focus {
+`
-//     border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
-//     outline: none;
-//   }
-// `
 interface CurrencyInputPanelProps {
  value: string
@@ -191,6 +176,7 @@ export default function CurrencyInputPanel({
                {label}
              </TYPE.body>
+              {account && (
                <Hover>
                  <TYPE.body
                    onClick={onMax}
@@ -204,6 +190,7 @@ export default function CurrencyInputPanel({
                      : ' -'}
                  </TYPE.body>
                </Hover>
+              )}
            </RowBetween>
          </LabelRow>
        )}
@@ -217,7 +204,7 @@ export default function CurrencyInputPanel({
                  onUserInput(field, val)
                }}
              />
-              {!advanced && !!token?.address && !atMax && label !== 'To' && (
+              {account && !advanced && !!token?.address && !atMax && label !== 'To' && (
                <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>
              )}
            </>

--- a/src/components/ExchangePage/index.tsx
+++ b/src/components/ExchangePage/index.tsx
--- a/src/components/ExchangePage/styleds.ts
+++ b/src/components/ExchangePage/styleds.ts
@@ -79,49 +79,47 @@ export const StyledNumerical = styled(NumericalInput)`
 export const MaxButton = styled.button`
  position: absolute;
  right: 70px;
-  padding: 0.5rem 0.5rem;
+  padding: 0.25rem 0.35rem;
-  background-color: ${({ theme }) => theme.blue5};
+  background-color: ${({ theme }) => theme.primary5};
-  border: 1px solid ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.primary5};
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 0.5rem;
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primaryText1};
  :hover {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
  }
  :focus {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
    outline: none;
  }
 `
 export const StyledBalanceMaxMini = styled.button<{ active?: boolean }>`
-  height: 24px;
+  height: 22px;
+  width: 22px;
  background-color: ${({ theme }) => theme.bg2};
  border: none;
-  border-radius: 0.5rem;
+  border-radius: 50%;
+  padding: 0.2rem;
  font-size: 0.875rem;
  font-weight: 400;
-  margin-left: 6px;
+  margin-left: 0.4rem;
  cursor: pointer;
  color: ${({ theme }) => theme.text2};
  display: flex;
  justify-content: center;
  align-items: center;
-  width: fit-content;
  float: right;
  :hover {
    background-color: ${({ theme }) => theme.bg3};
-    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
  }
  :focus {
    background-color: ${({ theme }) => theme.bg3};
-    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
    outline: none;
  }
 `

--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
 import React from 'react'
+import { Link as HistoryLink } from 'react-router-dom'
 import styled from 'styled-components'
 import Row from '../Row'
@@ -9,14 +11,14 @@ import { Link } from '../../theme'
 import { Text } from 'rebass'
 import { WETH } from '@uniswap/sdk'
 import { isMobile } from 'react-device-detect'
-import { YellowCard, GreyCard } from '../Card'
+import { YellowCard } from '../Card'
 import { useWeb3React } from '../../hooks'
 import { useAddressBalance } from '../../contexts/Balances'
 import { useDarkModeManager } from '../../contexts/LocalStorage'
 import Logo from '../../assets/svg/logo.svg'
 import Wordmark from '../../assets/svg/wordmark.svg'
-import LogoDark from '../../assets/svg/logo_white2.svg'
+import LogoDark from '../../assets/svg/logo_white.svg'
 import WordmarkDark from '../../assets/svg/wordmark_white.svg'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
@@ -31,10 +33,9 @@ const HeaderFrame = styled.div`
  position: absolute;
  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    padding: 10px;
+    padding: 12px 0 0 0;
-    width: calc(100% - 12px);
+    width: calc(100%);
    position: relative;
  `};
  z-index: 2;
 `
@@ -69,7 +70,6 @@ const AccountElement = styled.div<{ active: boolean }>`
  flex-direction: row;
  align-items: center;
  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
-  /* border: 1px solid ${({ theme }) => theme.bg1}; */
  border-radius: 12px;
  padding-left: ${({ active }) => (active ? '8px' : 0)};
  white-space: nowrap;
@@ -95,18 +95,8 @@ const NetworkCard = styled(YellowCard)`
  border-radius: 12px;
  padding: 8px 12px;
 `
-const Alpha = styled(GreyCard)`
-  width: fit-content;
-  margin-right: 10px;
-  border-radius: 12px;
-  padding: 3px 7px;
-  background-color: ${({ theme }) => theme.pink2};
-  color: ${({ theme }) => theme.white};
-  font-size: 12px;
-  font-weight: 600;
-`
-const UniIcon = styled.div<{ href: string }>`
+const UniIcon = styled(HistoryLink)<{ to: string }>`
  transition: transform 0.3s ease;
  :hover {
    transform: rotate(-5deg);
@@ -118,12 +108,12 @@ const MigrateBanner = styled(AutoColumn)`
  padding: 12px 0;
  display: flex;
  justify-content: center;
-  background-color: ${({ theme }) => theme.pink3};
+  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.pink2};
+  color: ${({ theme }) => theme.primaryText1};
-  font-weight: 500;
+  font-weight: 400;
  text-align: center;
  a {
-    color: ${({ theme }) => theme.pink2};
+    color: ${({ theme }) => theme.primaryText1};
  }
  ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -132,6 +122,33 @@ const MigrateBanner = styled(AutoColumn)`
  `};
 `
+const VersionLabel = styled.span<{ isV2?: boolean }>`
+  padding: ${({ isV2 }) => (isV2 ? '0.15rem 0.5rem 0.16rem 0.45rem' : '0.15rem 0.5rem 0.16rem 0.35rem')};
+  border-radius: 14px;
+  background: ${({ theme, isV2 }) => (isV2 ? theme.primary1 : 'none')};
+  color: ${({ theme, isV2 }) => (isV2 ? theme.white : theme.primary1)};
+  font-size: 0.825rem;
+  font-weight: 400;
+  :hover {
+    user-select: ${({ isV2 }) => (isV2 ? 'none' : 'initial')};
+    background: ${({ theme, isV2 }) => (isV2 ? theme.primary1 : 'none')};
+    color: ${({ theme, isV2 }) => (isV2 ? theme.white : theme.primary3)};
+  }
+`
+const VersionToggle = styled.a`
+  border-radius: 16px;
+  border: 1px solid ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.primary1};
+  display: flex;
+  width: fit-content;
+  cursor: pointer;
+  text-decoration: none;
+  :hover {
+    text-decoration: none;
+  }
+`
 export default function Header() {
  const { account, chainId } = useWeb3React()
@@ -154,22 +171,29 @@ export default function Header() {
      <RowBetween padding="1rem">
        <HeaderElement>
          <Title>
-            <UniIcon id="link" href="/">
+            <UniIcon id="link" to="/">
              <img src={isDark ? LogoDark : Logo} alt="logo" />
            </UniIcon>
            {!isMobile && (
              <TitleText>
-                <Link id="link" href="/">
+                <HistoryLink id="link" to="/">
                  <img
                    style={{ marginLeft: '4px', marginTop: '4px' }}
                    src={isDark ? WordmarkDark : Wordmark}
                    alt="logo"
                  />
-                </Link>
+                </HistoryLink>
              </TitleText>
            )}
          </Title>
-          <TestnetWrapper>{!isMobile && <Alpha>V2</Alpha>}</TestnetWrapper>
+          <TestnetWrapper>
+            {!isMobile && (
+              <VersionToggle target="_self" href="https://v1.uniswap.exchange">
+                <VersionLabel isV2={true}>V2</VersionLabel>
+                <VersionLabel isV2={false}>V1</VersionLabel>
+              </VersionToggle>
+            )}
+          </TestnetWrapper>
        </HeaderElement>
        <HeaderElement>
          <TestnetWrapper>

--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
 import React, { useRef, useEffect } from 'react'
 import styled from 'styled-components'
+import { useDarkModeManager } from '../../contexts/LocalStorage'
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { Link } from '../../theme'
-import { darken } from 'polished'
 import { useToggle } from '../../hooks'
 const StyledMenuIcon = styled(MenuIcon)`
@@ -23,22 +22,19 @@ const StyledMenuButton = styled.button`
  padding: 0;
  height: 35px;
  background-color: ${({ theme }) => theme.bg3};
-  border: 1px solid ${({ theme }) => theme.bg3};
  padding: 0.15rem 0.5rem;
  border-radius: 0.5rem;
-  :hover, :focus {
+  :hover,
-    /* background-color: ${({ theme }) => darken(0.2, theme.bg1)}; */
+  :focus {
-    border: 1px solid ${({ theme }) => darken(0.2, theme.bg1)};
    cursor: pointer;
    outline: none;
+    background-color: ${({ theme }) => theme.bg4};
  }
  svg {
    margin-top: 2px;
-    /* width: 25px;
-    height: 24px; */
  }
 `
@@ -55,8 +51,9 @@ const StyledMenu = styled.div`
 const MenuFlyout = styled.span`
  min-width: 8.125rem;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.bg3};
-  border: 1px solid ${({ theme }) => theme.bg3};
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
@@ -86,6 +83,8 @@ export default function Menu() {
  const node = useRef<HTMLDivElement>()
  const [open, toggle] = useToggle(false)
+  const [darkMode, toggleDarkMode] = useDarkModeManager()
  useEffect(() => {
    const handleClickOutside = e => {
      if (node.current?.contains(e.target) ?? false) {
@@ -124,6 +123,7 @@ export default function Menu() {
          <MenuItem id="link" href="https://uniswap.info/">
            Analytics
          </MenuItem>
+          <MenuItem onClick={toggleDarkMode}>{darkMode ? 'Light theme' : 'Dark theme'}</MenuItem>
        </MenuFlyout>
      ) : (
        ''

--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -33,7 +33,6 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
      left: 0;
      bottom: 0;
      right: 0;
-      /* position: absolute; */
      position: fixed;
      z-index: -1;
    }

--- a/src/components/NavigationTabs/index.tsx
+++ b/src/components/NavigationTabs/index.tsx
@@ -33,7 +33,6 @@ const Tabs = styled.div`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: center;
  border-radius: 3rem;
-  margin-bottom: 20px;
 `
 const activeClassName = 'ACTIVE'
@@ -105,7 +104,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
    <>
      {adding || removing ? (
        <Tabs>
-          <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
+          <RowBetween style={{ padding: '1rem' }}>
            <Hover onClick={() => history.push('/pool')}>
              <ArrowLink />
            </Hover>
@@ -113,7 +112,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
            <QuestionHelper
              text={
                adding
-                  ? 'When you add liqudiity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
+                  ? 'When you add liquidity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
                  : 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts you receive.'
              }
            />
@@ -140,7 +139,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
          </RowBetween>
        </Tabs>
      ) : (
-        <Tabs>
+        <Tabs style={{ marginBottom: '20px' }}>
          {tabOrder.map(({ path, textKey, regex }) => (
            <StyledNavLink
              id={`${textKey}-navLink`}

--- a/src/components/PoolFinder/index.tsx
+++ b/src/components/PoolFinder/index.tsx
@@ -151,7 +151,7 @@ function PoolFinder({ history }: RouteComponentProps) {
              token0={token0}
              token1={token1}
              minimal={true}
-              border="1px solid #EDEEF2"
+              border="1px solid #CED0D9"
            />
          ) : (
            <LightCard padding="45px 10px">

--- a/src/components/Popups/index.tsx
+++ b/src/components/Popups/index.tsx
-import React from 'react'
+import React, { useContext } from 'react'
-import styled from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import { useMediaLayout } from 'use-media'
 import { X } from 'react-feather'
@@ -41,7 +41,7 @@ const FixedPopupColumn = styled(AutoColumn)`
  position: absolute;
  top: 112px;
  right: 1rem;
-  width: 355px;
+  width: 220px;
  ${({ theme }) => theme.mediaWidth.upToSmall`
    display: none;
@@ -53,7 +53,7 @@ const Popup = styled.div`
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
-  background-color: white;
+  background-color: ${({ theme }) => theme.advancedBG};
  position: relative;
  border-radius: 10px;
  padding: 20px;
@@ -67,6 +67,7 @@ const Popup = styled.div`
 `
 export default function App() {
+  const theme = useContext(ThemeContext)
  // get all popups
  const [activePopups, , removePopup] = usePopups()
@@ -79,7 +80,7 @@ export default function App() {
        {activePopups.map(item => {
          return (
            <Popup key={item.key}>
-              <StyledClose color="#888D9B" onClick={() => removePopup(item.key)} />
+              <StyledClose color={theme.text2} onClick={() => removePopup(item.key)} />
              {React.cloneElement(item.content, { popKey: item.key })}
            </Popup>
          )
@@ -98,7 +99,7 @@ export default function App() {
            .map(item => {
              return (
                <Popup key={item.key}>
-                  <StyledClose color="#888D9B" onClick={() => removePopup(item.key)} />
+                  <StyledClose color={theme.text2} onClick={() => removePopup(item.key)} />
                  {React.cloneElement(item.content, { popKey: item.key })}
                </Popup>
              )

--- a/src/components/PositionCard/index.tsx
+++ b/src/components/PositionCard/index.tsx
@@ -8,12 +8,11 @@ import { useWeb3React } from '@web3-react/core'
 import { useAllBalances } from '../../contexts/Balances'
 import { useTotalSupply } from '../../contexts/Pairs'
-import Card from '../Card'
+import Card, { GreyCard } from '../Card'
 import TokenLogo from '../TokenLogo'
 import DoubleLogo from '../DoubleLogo'
 import { Text } from 'rebass'
 import { Link } from '../../theme/components'
-import { GreyCard } from '../../components/Card'
 import { AutoColumn } from '../Column'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { ButtonSecondary } from '../Button'
@@ -24,9 +23,9 @@ const FixedHeightRow = styled(RowBetween)`
 `
 const HoverCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.bg2};
  :hover {
-    border: 1px solid ${({ theme }) => darken(0.06, theme.bg3)};
+    border: 1px solid ${({ theme }) => darken(0.06, theme.bg2)};
  }
 `

--- a/src/components/Question/index.tsx
+++ b/src/components/Question/index.tsx
@@ -55,7 +55,6 @@ const Popup = styled.div`
  color: ${({ theme }) => theme.text2};
  font-weight: 400;
-  /* font-style: italic; */
  ${({ theme }) => theme.mediaWidth.upToSmall`
    left: -20px;

--- a/src/components/Row/index.tsx
+++ b/src/components/Row/index.tsx
@@ -12,7 +12,7 @@ const Row = styled(Box)<{ align?: string; padding?: string; border?: string; bor
  border-radius: ${({ borderRadius }) => borderRadius};
 `
-export const RowBetween = styled(Row)`
+export const RowBetween = styled(Row)<{ align?: string; padding?: string; border?: string; borderRadius?: string }>`
  justify-content: space-between;
 `
@@ -31,8 +31,9 @@ export const AutoRow = styled(Row)<{ gap?: string; justify?: string }>`
  }
 `
-export const RowFixed = styled(Row)`
+export const RowFixed = styled(Row)<{ gap?: string; justify?: string }>`
  width: fit-content;
+  margin: ${({ gap }) => gap && `-${gap}`};
 `
 export default Row
--- a/src/components/SearchModal/index.tsx
+++ b/src/components/SearchModal/index.tsx
@@ -16,10 +16,9 @@ import DoubleTokenLogo from '../DoubleLogo'
 import Column, { AutoColumn } from '../Column'
 import { Text } from 'rebass'
 import { Hover } from '../../theme'
-import { ArrowLeft, X } from 'react-feather'
+import { ArrowLeft } from 'react-feather'
 import { CloseIcon } from '../../theme/components'
-import { ColumnCenter } from '../Column'
+import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
-import { ButtonPrimary } from '../../components/Button'
 import { Spinner, TYPE } from '../../theme'
 import { RowBetween, RowFixed, AutoRow } from '../Row'
@@ -49,8 +48,8 @@ const ItemList = styled.div`
  -webkit-overflow-scrolling: touch;
 `
-const FadedSpan = styled.span`
+const FadedSpan = styled(RowFixed)`
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
  font-size: 14px;
 `
@@ -75,10 +74,13 @@ const Input = styled.input`
  background: none;
  border: none;
  outline: none;
-  border: 1px solid ${({ theme }) => theme.bg2};
  box-sizing: border-box;
  border-radius: 20px;
  color: ${({ theme }) => theme.text1};
+  border-style: solid;
+  border: 1px solid ${({ theme }) => theme.bg3};
+  -webkit-appearance: none;
  font-size: 18px;
  ::placeholder {
@@ -384,9 +386,7 @@ function SearchModal({
              <DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true} />
              <Text fontWeight={500} fontSize={16}>{`${token0?.symbol}/${token1?.symbol}`}</Text>
            </RowFixed>
-            {/* <Text fontWeight={500} fontSize={16}>
-              {balance ? balance.toString() : '-'}
-            </Text> */}
            <ButtonPrimary
              padding={'6px 8px'}
              width={'fit-content'}
@@ -396,7 +396,7 @@ function SearchModal({
                onDismiss()
              }}
            >
-              {balance ? (zeroBalance ? 'Join' : 'Manage') : 'Join'}
+              {balance ? (zeroBalance ? 'Join' : 'Add Liquidity') : 'Join'}
            </ButtonPrimary>
          </MenuItem>
        )
@@ -485,10 +485,11 @@ function SearchModal({
                    {otherSelectedTokenAddress === address && <GreySpan> ({otherSelectedText})</GreySpan>}
                  </Text>
                  <FadedSpan>
-                    {urlAdded && '(Added by URL)'} {customAdded && '(Added by user)'}
+                    <TYPE.blue fontWeight={500}>
+                      {urlAdded && '(Added by URL)'} {customAdded && 'Added by user'}
+                    </TYPE.blue>
                    {customAdded && (
-                      <X
+                      <div
-                        style={{ transform: 'scale(0.8)' }}
                        onClick={event => {
                          event.stopPropagation()
                          if (searchQuery === address) {
@@ -496,7 +497,9 @@ function SearchModal({
                          }
                          removeTokenByAddress(chainId, address)
                        }}
-                      />
+                      >
+                        <StyledLink style={{ marginLeft: '4px', fontWeight: 400 }}>(Remove)</StyledLink>
+                      </div>
                    )}
                  </FadedSpan>
                </Column>
@@ -505,11 +508,11 @@ function SearchModal({
                {balance ? (
                  <Text>
                    {zeroBalance && showSendWithSwap ? (
-                      <ColumnCenter style={{ backgroundColor: theme.bg2, padding: '8px', borderRadius: '12px' }}>
+                      <ButtonSecondary padding={'4px 8px'}>
-                        <Text textAlign="center" fontWeight={500} color={theme.blue1}>
+                        <Text textAlign="center" fontWeight={500} fontSize={14} color={theme.primary1}>
                          Send With Swap
                        </Text>
-                      </ColumnCenter>
+                      </ButtonSecondary>
                    ) : balance ? (
                      balance.toSignificant(6)
                    ) : (

--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -5,16 +5,17 @@ import { useDebounce } from '../../hooks'
 const StyledSlider = withStyles({
  root: {
-    width: '95%',
+    width: '90%',
-    color: '#ff007a',
+    color: '#565A69',
    height: 4,
    marginLeft: '15px',
+    marginRight: '15px',
    padding: '15px 0'
  },
  thumb: {
    height: 28,
    width: 28,
-    backgroundColor: '#ff007a',
+    backgroundColor: '#565A69',
    marginTop: -14,
    marginLeft: -14,
    '&:focus,&:hover,&$active': {
@@ -31,10 +32,10 @@ const StyledSlider = withStyles({
  rail: {
    height: 2,
    opacity: 0.5,
-    backgroundColor: '#bfbfbf'
+    backgroundColor: '#C3C5CB'
  },
  mark: {
-    backgroundColor: '#bfbfbf',
+    backgroundColor: '#C3C5CB',
    height: 12,
    width: 2,
    marginTop: -4

--- a/src/components/SlippageTabs/index.tsx
+++ b/src/components/SlippageTabs/index.tsx
@@ -33,7 +33,7 @@ const FancyButton = styled.button`
    border: 1px solid ${({ theme }) => theme.bg4};
  }
  :focus {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
  }
 `
@@ -42,7 +42,7 @@ const Option = styled(FancyButton)<{ active: boolean }>`
  :hover {
    cursor: pointer;
  }
-  background-color: ${({ active, theme }) => active && theme.blue1};
+  background-color: ${({ active, theme }) => active && theme.primary1};
  color: ${({ active, theme }) => (active ? theme.white : theme.text1)};
 `
@@ -90,10 +90,10 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
  height: 2rem;
  position: relative;
  padding: 0 0.75rem;
-  border: ${({ theme, active, warning }) => active && `1px solid ${warning ? theme.red1 : theme.blue1}`};
+  border: ${({ theme, active, warning }) => active && `1px solid ${warning ? theme.red1 : theme.primary1}`};
  :hover {
    border: ${({ theme, active, warning }) =>
-      active && `1px solid ${warning ? darken(0.1, theme.red1) : darken(0.1, theme.blue1)}`};
+      active && `1px solid ${warning ? darken(0.1, theme.red1) : darken(0.1, theme.primary1)}`};
  }
  input {

--- a/src/components/WalletModal/Option.tsx
+++ b/src/components/WalletModal/Option.tsx
@@ -10,7 +10,7 @@ const InfoCard = styled.button<{ active?: boolean }>`
  border-radius: 12px;
  width: 100% !important;
  &:focus {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.blue1};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.primary1};
  }
  border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg3)};
 `
@@ -34,7 +34,7 @@ const OptionCardClickable = styled(OptionCard)<{ clickable?: boolean }>`
  margin-top: 0;
  &:hover {
    cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
-    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.blue1}` : ``)};
+    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.primary1}` : ``)};
  }
  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `
@@ -62,7 +62,7 @@ const CircleWrapper = styled.div`
 const HeaderText = styled.div`
  ${({ theme }) => theme.flexRowNoWrap};
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : ({ theme }) => theme.text1)};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.primary1 : ({ theme }) => theme.text1)};
  font-size: 1rem;
  font-weight: 500;
 `

--- a/src/components/WalletModal/index.tsx
+++ b/src/components/WalletModal/index.tsx
@@ -45,7 +45,7 @@ const HeaderRow = styled.div`
  ${({ theme }) => theme.flexRowNoWrap};
  padding: 1rem 1rem;
  font-weight: 500;
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
  ${({ theme }) => theme.mediaWidth.upToMedium`
    padding: 1rem;
  `};
@@ -94,7 +94,6 @@ const Blurb = styled.div`
 const OptionGrid = styled.div`
  display: grid;
-  /* grid-template-columns: 1fr 1fr; */
  grid-gap: 10px;
  ${({ theme }) => theme.mediaWidth.upToMedium`
    grid-template-columns: 1fr;

--- a/src/components/Web3ReactManager/index.tsx
+++ b/src/components/Web3ReactManager/index.tsx
@@ -17,7 +17,7 @@ const MessageWrapper = styled.div`
 `
 const Message = styled.h2`
-  color: ${({ theme }) => theme.pink1};
+  color: ${({ theme }) => theme.secondary1};
 `
 const SpinnerWrapper = styled(Spinner)`
@@ -25,7 +25,7 @@ const SpinnerWrapper = styled(Spinner)`
  svg {
    path {
-      color: ${({ theme }) => theme.pink1};
+      color: ${({ theme }) => theme.secondary1};
    }
  }
 `

--- a/src/components/Web3Status/index.tsx
+++ b/src/components/Web3Status/index.tsx
@@ -8,10 +8,10 @@ import { Activity } from 'react-feather'
 import Identicon from '../Identicon'
 import PortisIcon from '../../assets/images/portisIcon.png'
 import WalletModal from '../WalletModal'
+import { ButtonSecondary } from '../Button'
 import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
-import { ButtonSecondary } from '../Button'
 import { Spinner } from '../../theme'
 import LightCircle from '../../assets/svg/lightcircle.svg'
@@ -41,7 +41,6 @@ const IconWrapper = styled.div<{ size?: number }>`
 const Web3StatusGeneric = styled(ButtonSecondary)`
  ${({ theme }) => theme.flexRowNoWrap}
  width: 100%;
-  /* font-size: 0.9rem; */
  align-items: center;
  padding: 0.5rem;
  border-radius: 12px;
@@ -64,42 +63,42 @@ const Web3StatusError = styled(Web3StatusGeneric)`
 `
 const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
-  background-color: ${({ theme }) => theme.blue4};
+  background-color: ${({ theme }) => theme.primary4};
  border: none;
-  color: ${({ theme }) => theme.buttonSecondaryText};
+  color: ${({ theme }) => theme.primaryText1};
  font-weight: 500;
  :hover,
  :focus {
-    border: 1px solid ${({ theme }) => darken(0.05, theme.blue4)};
+    border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
-    color: ${({ theme }) => theme.buttonSecondaryText};
+    color: ${({ theme }) => theme.primaryText1};
  }
  ${({ faded }) =>
    faded &&
    css`
-      background-color: ${({ theme }) => theme.blue5};
+      background-color: ${({ theme }) => theme.primary5};
-      border: 1px solid ${({ theme }) => theme.blue5};
+      border: 1px solid ${({ theme }) => theme.primary5};
-      color: ${({ theme }) => theme.buttonSecondaryText};
+      color: ${({ theme }) => theme.primaryText1};
      :hover,
      :focus {
-        border: 1px solid ${({ theme }) => darken(0.05, theme.blue4)};
+        border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
-        color: ${({ theme }) => darken(0.05, theme.buttonSecondaryText)};
+        color: ${({ theme }) => darken(0.05, theme.primaryText1)};
      }
    `}
 `
 const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
-  background-color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.bg2)};
+  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
-  border: 1px solid ${({ pending, theme }) => (pending ? theme.blue1 : theme.bg3)};
+  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
  font-weight: 500;
  :hover {
-    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.blue1) : lighten(0.05, theme.bg2))};
+    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};
    :focus {
-      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.blue1) : darken(0.1, theme.bg3))};
+      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
    }
  }
 `

--- a/src/contexts/LocalStorage.tsx
+++ b/src/contexts/LocalStorage.tsx
@@ -84,7 +84,11 @@ export default function Provider({ children }: { children: React.ReactNode }) {
    LocalStorageKeys.MIGRATION_MESSAGE_DISMISSED,
    false
  )
-  const [darkMode, setDarkMode] = useLocalStorage<boolean>(LocalStorageKeys.DARK_MODE, true)
+  const [darkMode, setDarkMode] = useLocalStorage<boolean>(
+    LocalStorageKeys.DARK_MODE,
+    window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? true : false
+  )
  const [tokens, setTokens] = useLocalStorage<Token[], ReturnType<typeof serializeTokens>>(
    LocalStorageKeys.TOKENS,
    [],
@@ -114,6 +118,7 @@ export default function Provider({ children }: { children: React.ReactNode }) {
          betaMessageDismissed,
          migrationMessageDismissed,
          darkMode,
          tokens,
          setVersion,
          setLastSaved,
@@ -129,6 +134,33 @@ export default function Provider({ children }: { children: React.ReactNode }) {
  )
 }
+export function Updater() {
+  const [, { setDarkMode }] = useLocalStorageContext()
+  useEffect(() => {
+    const darkHandler = (match: MediaQueryListEvent) => {
+      if (match.matches) {
+        setDarkMode(true)
+      }
+    }
+    const lightHandler = (match: MediaQueryListEvent) => {
+      if (match.matches) {
+        setDarkMode(false)
+      }
+    }
+    window?.matchMedia('(prefers-color-scheme: dark)')?.addListener(darkHandler)
+    window?.matchMedia('(prefers-color-scheme: light)')?.addListener(lightHandler)
+    return () => {
+      window?.matchMedia('(prefers-color-scheme: dark)')?.removeListener(darkHandler)
+      window?.matchMedia('(prefers-color-scheme: light)')?.removeListener(lightHandler)
+    }
+  }, [setDarkMode])
+  return null
+}
 export function useBetaMessageManager() {
  const [{ betaMessageDismissed }, { setBetaMessageDismissed }] = useLocalStorageContext()

--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,7 @@ import { Web3Provider } from '@ethersproject/providers'
 import { NetworkContextName } from './constants'
 import { isMobile } from 'react-device-detect'
-import LocalStorageContextProvider from './contexts/LocalStorage'
+import LocalStorageContextProvider, { Updater as LocalStorageContextUpdater } from './contexts/LocalStorage'
 import ApplicationContextProvider, { Updater as ApplicationContextUpdater } from './contexts/Application'
 import TransactionContextProvider, { Updater as TransactionContextUpdater } from './contexts/Transactions'
 import BalancesContextProvider, { Updater as BalancesContextUpdater } from './contexts/Balances'
@@ -54,6 +54,7 @@ function ContextProviders({ children }: { children: React.ReactNode }) {
 function Updaters() {
  return (
    <>
+      <LocalStorageContextUpdater />
      <ApplicationContextUpdater />
      <TransactionContextUpdater />
      <BalancesContextUpdater />

--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -37,7 +37,6 @@ const BodyWrapper = styled.div`
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
-  /* justify-content: center; */
  padding-top: 160px;
  align-items: center;
  flex: 1;
@@ -76,7 +75,7 @@ const Body = styled.div`
 const StyledRed = styled.div`
  width: 100%;
  height: 200vh;
-  background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.pink2} 0%, ${theme.bg1} 100%)`};
+  background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.primary1} 0%, ${theme.bg1} 100%)`};
  position: absolute;
  top: 0px;
  left: 0px;

--- a/src/pages/Pool/AddLiquidity.tsx
+++ b/src/pages/Pool/AddLiquidity.tsx
-import React, { useReducer, useState, useCallback, useEffect } from 'react'
+import React, { useReducer, useState, useCallback, useEffect, useContext } from 'react'
-import styled from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { parseUnits, parseEther } from '@ethersproject/units'
 import { MaxUint256, Zero } from '@ethersproject/constants'
@@ -15,7 +15,7 @@ import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import { Text } from 'rebass'
 import { TYPE } from '../../theme'
 import { Plus } from 'react-feather'
-import { BlueCard, LightCard } from '../../components/Card'
+import { BlueCard, GreyCard, LightCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import { ButtonPrimary, ButtonLight } from '../../components/Button'
 import Row, { AutoRow, RowBetween, RowFlat, RowFixed } from '../../components/Row'
@@ -166,6 +166,7 @@ interface AddLiquidityProps extends RouteComponentProps<{}> {
 function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
  const { account, chainId, library } = useWeb3React()
+  const theme = useContext(ThemeContext)
  // modal states
  const [showSearch, setShowSearch] = useState<boolean>(false)
@@ -679,16 +680,17 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
  const PriceBar = () => {
    return (
+      <AutoColumn gap="md" justify="space-between">
        <AutoRow justify="space-between">
          <AutoColumn justify="center">
            <TYPE.black>{displayPriceInput}</TYPE.black>
-          <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
+            <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
              {tokens[Field.OUTPUT]?.symbol} per {tokens[Field.INPUT]?.symbol}
            </Text>
          </AutoColumn>
          <AutoColumn justify="center">
            <TYPE.black>{displayPriceOutput}</TYPE.black>
-          <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
+            <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
              {tokens[Field.INPUT]?.symbol} per {tokens[Field.OUTPUT]?.symbol}
            </Text>
          </AutoColumn>
@@ -697,11 +699,12 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
              {noLiquidity && derivedPrice ? '100' : poolTokenPercentage ? poolTokenPercentage?.toFixed(2) : '0.0'}
              {'%'}
            </TYPE.black>
-          <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
+            <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
              Pool Share
            </Text>
          </AutoColumn>
        </AutoRow>
+      </AutoColumn>
    )
  }
@@ -737,9 +740,9 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
          <ColumnCenter>
            <BlueCard>
              <AutoColumn gap="10px">
-                <TYPE.blue fontWeight={600}>You are the first liquidity provider.</TYPE.blue>
+                <TYPE.link fontWeight={600}>You are the first liquidity provider.</TYPE.link>
-                <TYPE.blue fontWeight={400}>The ratio of tokens you add will set the price of this pool.</TYPE.blue>
+                <TYPE.link fontWeight={400}>The ratio of tokens you add will set the price of this pool.</TYPE.link>
-                <TYPE.blue fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.blue>
+                <TYPE.link fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.link>
              </AutoColumn>
            </BlueCard>
          </ColumnCenter>
@@ -759,7 +762,7 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
          inputId="addLiquidityInput"
        />
        <ColumnCenter>
-          <Plus size="16" color="#888D9B" />
+          <Plus size="16" color={theme.text2} />
        </ColumnCenter>
        <CurrencyInputPanel
          field={Field.OUTPUT}
@@ -775,9 +778,18 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
          inputId="addLiquidityOutput"
        />
        {tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
+          <>
+            <GreyCard padding="0px" borderRadius={'20px'}>
+              <RowBetween padding="1rem">
+                <TYPE.subHeader fontWeight={500} fontSize={14}>
+                  {noLiquidity ? 'Initial prices' : 'Prices'} and pool share
+                </TYPE.subHeader>
+              </RowBetween>{' '}
              <LightCard padding="1rem" borderRadius={'20px'}>
                <PriceBar />
              </LightCard>
+            </GreyCard>
+          </>
        )}
        {showOutputApprove ? (
          <ButtonLight

--- a/src/pages/Pool/RemoveLiquidity.tsx
+++ b/src/pages/Pool/RemoveLiquidity.tsx
-import React, { useReducer, useState, useCallback, useEffect } from 'react'
+import React, { useReducer, useState, useCallback, useEffect, useContext } from 'react'
-import styled from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import { parseUnits } from '@ethersproject/units'
 import { Zero } from '@ethersproject/constants'
 import { Contract } from '@ethersproject/contracts'
@@ -49,7 +49,7 @@ const ClickableText = styled(Text)`
  :hover {
    cursor: pointer;
  }
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
 `
 // const CustomNumericalInput = styled(NumericalInput)`
@@ -59,19 +59,19 @@ const ClickableText = styled(Text)`
 const MaxButton = styled.button<{ width: string }>`
  padding: 0.5rem 1rem;
-  background-color: ${({ theme }) => theme.blue5};
+  background-color: ${({ theme }) => theme.primary5};
-  border: 1px solid ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.primary5};
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: 0.5rem;
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
  :hover {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
  }
  :focus {
-    border: 1px solid ${({ theme }) => theme.blue1};
+    border: 1px solid ${({ theme }) => theme.primary1};
    outline: none;
  }
 `
@@ -151,6 +151,7 @@ const ConfirmedText = styled(Text)<{ confirmed?: boolean }>`
 export default function RemoveLiquidity({ token0, token1 }: { token0: string; token1: string }) {
  const { account, chainId, library } = useWeb3React()
+  const theme = useContext(ThemeContext)
  const [showConfirm, setShowConfirm] = useState<boolean>(false)
  const [showAdvanced, setShowAdvanced] = useState<boolean>(false)
@@ -508,12 +509,12 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
  function modalHeader() {
    return (
-      <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
+      <AutoColumn gap={'md'} style={{ marginTop: '20px' }}>
        <RowBetween align="flex-end">
          <Text fontSize={24} fontWeight={500}>
            {!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(6)}
          </Text>
-          <RowFixed>
+          <RowFixed gap="4px">
            <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'} />
            <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
              {tokens[Field.TOKEN0]?.symbol || ''}
@@ -521,13 +522,13 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
          </RowFixed>
        </RowBetween>
        <RowFixed>
-          <Plus size="16" color={'#888D9B'} />
+          <Plus size="16" color={theme.text2} />
        </RowFixed>
        <RowBetween align="flex-end">
          <Text fontSize={24} fontWeight={600}>
            {!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(6)}
          </Text>
-          <RowFixed>
+          <RowFixed gap="4px">
            <TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'} />
            <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
              {tokens[Field.TOKEN1]?.symbol || ''}
@@ -535,7 +536,7 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
          </RowFixed>
        </RowBetween>
-        <TYPE.italic fontSize={12} color="#565A69" textAlign="left" padding={'20px 0 0 0'}>
+        <TYPE.italic fontSize={12} color={theme.text2} textAlign="left" padding={'12px 0 0 0'}>
          {`Output is estimated. You will receive at least ${parsedAmounts[Field.TOKEN0]?.toFixed(6)} ${
            tokens[Field.TOKEN0]?.symbol
          } and at least ${parsedAmounts[Field.TOKEN1]?.toFixed(6)} ${
@@ -550,7 +551,7 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
    return (
      <>
        <RowBetween>
-          <Text color="#565A69" fontWeight={500} fontSize={16}>
+          <Text color={theme.text2} fontWeight={500} fontSize={16}>
            {'UNI ' + tokens[Field.TOKEN0]?.symbol + ':' + tokens[Field.TOKEN1]?.symbol} Burned
          </Text>
          <RowFixed>
@@ -565,10 +566,10 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
          </RowFixed>
        </RowBetween>
        <RowBetween>
-          <Text color="#565A69" fontWeight={500} fontSize={16}>
+          <Text color={theme.text2} fontWeight={500} fontSize={16}>
            Price
          </Text>
-          <Text fontWeight={500} fontSize={16}>
+          <Text fontWeight={500} fontSize={16} color={theme.text1}>
            {`1 ${tokens[Field.TOKEN0]?.symbol} = ${route?.midPrice && route.midPrice.adjusted.toFixed(8)} ${
              tokens[Field.TOKEN1]?.symbol
            }`}
@@ -631,7 +632,6 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
              </ClickableText>
            </RowBetween>
            <Row style={{ alignItems: 'flex-end' }}>
-              {/* <CustomNumericalInput value={percentageInput} onUserInput={input => handlePresetPercentage(input)} /> */}
              <Text fontSize={72} fontWeight={500}>
                {derivedPerecent ? (parseInt(derivedPerecent) < 1 ? '<1' : derivedPerecent) : '0'}%
              </Text>
@@ -660,7 +660,7 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
        {!showAdvanced && (
          <>
            <ColumnCenter>
-              <ArrowDown size="16" color="#888D9B" />
+              <ArrowDown size="16" color={theme.text2} />
            </ColumnCenter>{' '}
            <LightCard>
              <AutoColumn gap="10px">
@@ -706,7 +706,7 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
              inputId="liquidityAmount"
            />
            <ColumnCenter>
-              <ArrowDown size="16" color="#888D9B" />
+              <ArrowDown size="16" color={theme.text2} />
            </ColumnCenter>
            <CurrencyInputPanel
              field={Field.TOKEN0}
@@ -720,7 +720,7 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
              inputId="removeLiquidityToken0"
            />
            <ColumnCenter>
-              <Plus size="16" color="#888D9B" />
+              <Plus size="16" color={theme.text2} />
            </ColumnCenter>
            <CurrencyInputPanel
              field={Field.TOKEN1}

--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@@ -93,7 +93,7 @@ function Supply({ history }: RouteComponentProps) {
            </LightCard>
          )}
          {filteredExchangeList}
-          <Text textAlign="center" style={{ padding: '.5rem 0 .5rem 0' }}>
+          <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
            {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
            <Link
              id="import-pool-link"

--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -3,7 +3,7 @@ import { darken } from 'polished'
 import { X } from 'react-feather'
 export const Button = styled.button.attrs<{ warning: boolean }, { backgroundColor: string }>(({ warning, theme }) => ({
-  backgroundColor: warning ? theme.red1 : theme.blue1
+  backgroundColor: warning ? theme.red1 : theme.primary1
 }))`
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 3rem;
@@ -42,7 +42,7 @@ export const Link = styled.a.attrs({
 })`
  text-decoration: none;
  cursor: pointer;
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.primary1};
  font-weight: 500;
  :hover {

--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -43,10 +43,10 @@ export function colors(darkMode: boolean): Colors {
    // text
    text1: darkMode ? '#FFFFFF' : '#000000',
-    text2: darkMode ? '#CED0D9' : '#565A69',
+    text2: darkMode ? '#C3C5CB' : '#565A69',
    text3: darkMode ? '#6C7284' : '#888D9B',
    text4: darkMode ? '#565A69' : '#C3C5CB',
-    text5: '#EDEEF2',
+    text5: darkMode ? '#2C2F36' : '#EDEEF2',
    // backgrounds / greys
    bg1: darkMode ? '#212429' : '#FFFFFF',
@@ -55,35 +55,34 @@ export function colors(darkMode: boolean): Colors {
    bg4: darkMode ? '#565A69' : '#CED0D9',
    bg5: darkMode ? '#565A69' : '#888D9B',
+    //specialty colors
    modalBG: darkMode ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.6)',
-    advancedBG: darkMode ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.6)',
+    advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)',
-    //blues
+    //primary colors
-    blue1: darkMode ? '#2172E5' : '#ff007a',
+    primary1: darkMode ? '#2172E5' : '#ff007a',
-    blue2: darkMode ? '#3680E7' : '#1966D2',
+    primary2: darkMode ? '#3680E7' : '#FF8CC3',
-    blue3: darkMode ? '#4D8FEA' : '#165BBB',
+    primary3: darkMode ? '#4D8FEA' : '#FF99C9',
-    // blue4: darkMode ? '#153d6f70' : '#C4D9F8',
+    primary4: darkMode ? '#376bad70' : '#F6DDE8',
-    // blue5: darkMode ? '#153d6f70' : '#EBF4FF',
+    primary5: darkMode ? '#153d6f70' : '#FDEAF1',
-    blue4: darkMode ? '#153d6f70' : '#F6DDE8',
-    blue5: darkMode ? '#153d6f70' : '#FDEAF1',
-    buttonSecondaryText: darkMode ? '#6da8ff' : '#ff007a',
-    // blue1: '#ff007a',
+    // color text
-    // blue4: '#F6DDE8',
+    primaryText1: darkMode ? '#6da8ff' : '#ff007a',
-    // blue5: '#FDEAF1',
-    // pinks
+    // secondary colors
-    pink1: '#DC6BE5',
+    secondary1: darkMode ? '#2172E5' : '#ff007a',
-    pink2: darkMode ? '#2172E5' : '#ff007a',
+    secondary2: darkMode ? '#17000b26' : '#F6DDE8',
-    pink3: darkMode ? '#17000b26' : '#F6DDE8',
+    secondary3: darkMode ? '#17000b26' : '#FDEAF1',
-    pink4: darkMode ? '#17000b26' : '#FDEAF1',
    // other
    red1: '#FF6871',
    green1: '#27AE60',
    yellow1: '#FFE270',
    yellow2: '#F3841E'
+    // dont wanna forget these blue yet
+    // blue4: darkMode ? '#153d6f70' : '#C4D9F8',
+    // blue5: darkMode ? '#153d6f70' : '#EBF4FF',
  }
 }
@@ -125,20 +124,25 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
      ? false
      : darkMode
    : darkMode
  useEffect(() => {
-    toggleDarkMode(themeToRender)
+    themeURL && toggleDarkMode(themeToRender)
-  }, [toggleDarkMode, themeToRender])
+  }, [toggleDarkMode, themeToRender, themeURL])
  return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider>
 }
 const TextWrapper = styled(Text)<{ color: keyof Colors }>`
-  color = ${({ color, theme }) => theme[color]}
+  color: ${({ color, theme }) => theme[color]};
 `
 export const TYPE = {
  main(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text2'} {...props} />
  },
+  link(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
+  },
  black(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
  },
@@ -155,7 +159,7 @@ export const TYPE = {
    return <TextWrapper fontWeight={400} fontSize={14} {...props} />
  },
  blue(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'blue1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
  },
  yellow(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'yellow1'} {...props} />

--- a/src/theme/styled.d.ts
+++ b/src/theme/styled.d.ts
@@ -24,19 +24,18 @@ export interface Colors {
  advancedBG: Color
  //blues
-  blue1: Color
+  primary1: Color
-  blue2: Color
+  primary2: Color
-  blue3: Color
+  primary3: Color
-  blue4: Color
+  primary4: Color
-  blue5: Color
+  primary5: Color
-  buttonSecondaryText: Color
+  primaryText1: Color
  // pinks
-  pink1: Color
+  secondary1: Color
-  pink2: Color
+  secondary2: Color
-  pink3: Color
+  secondary3: Color
-  pink4: Color
  // other
  red1: Color