diff --git a/package.json b/package.json
index 3a3660fdc5f..4185b852fef 100644
--- a/package.json
+++ b/package.json
@@ -83,8 +83,8 @@
"@walletconnect/web3-provider": "1.1.1-alpha.0"
},
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start": "react-scripts --openssl-legacy-provider start",
+ "build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
@@ -106,4 +106,4 @@
]
},
"license": "GPL-3.0-or-later"
-}
+}
\ No newline at end of file
diff --git a/public/favicon.png b/public/favicon.png
index f86c9f4566b..44a785f8764 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/images/192x192_App_Icon.png b/public/images/192x192_App_Icon.png
index 75eaaf8cb41..5e88cb552ca 100644
Binary files a/public/images/192x192_App_Icon.png and b/public/images/192x192_App_Icon.png differ
diff --git a/public/images/512x512_App_Icon.png b/public/images/512x512_App_Icon.png
index f24aada72a1..1c28757deff 100644
Binary files a/public/images/512x512_App_Icon.png and b/public/images/512x512_App_Icon.png differ
diff --git a/src/assets/fonts/SF-Pro-Rounded-Bold.woff2 b/src/assets/fonts/SF-Pro-Rounded-Bold.woff2
new file mode 100644
index 00000000000..c8030feceec
Binary files /dev/null and b/src/assets/fonts/SF-Pro-Rounded-Bold.woff2 differ
diff --git a/src/assets/fonts/SF-Pro-Rounded-Medium.woff2 b/src/assets/fonts/SF-Pro-Rounded-Medium.woff2
new file mode 100644
index 00000000000..c9f3ac029b8
Binary files /dev/null and b/src/assets/fonts/SF-Pro-Rounded-Medium.woff2 differ
diff --git a/src/assets/fonts/SF-Pro-Rounded-Regular.woff2 b/src/assets/fonts/SF-Pro-Rounded-Regular.woff2
new file mode 100644
index 00000000000..2b8f262fde3
Binary files /dev/null and b/src/assets/fonts/SF-Pro-Rounded-Regular.woff2 differ
diff --git a/src/assets/fonts/SF-Pro-Rounded-Semibold.woff2 b/src/assets/fonts/SF-Pro-Rounded-Semibold.woff2
new file mode 100644
index 00000000000..94fafd05e15
Binary files /dev/null and b/src/assets/fonts/SF-Pro-Rounded-Semibold.woff2 differ
diff --git a/src/assets/svg/swap_logo.svg b/src/assets/svg/swap_logo.svg
new file mode 100644
index 00000000000..acac765d4ea
--- /dev/null
+++ b/src/assets/svg/swap_logo.svg
@@ -0,0 +1,46 @@
+
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index da6ccb212c3..de085a006f3 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -5,30 +5,26 @@ import { Text } from 'rebass'
import styled from 'styled-components'
-import Logo from '../../assets/svg/logo.svg'
+import Logo from '../../assets/svg/swap_logo.svg'
import LogoDark from '../../assets/svg/logo_white.svg'
-import Wordmark from '../../assets/svg/wordmark.svg'
-import WordmarkDark from '../../assets/svg/wordmark_white.svg'
import { useActiveWeb3React } from '../../hooks'
import { useDarkModeManager } from '../../state/user/hooks'
import { useETHBalances } from '../../state/wallet/hooks'
import { YellowCard } from '../Card'
-import Settings from '../Settings'
-import Menu from '../Menu'
+/* import Settings from '../Settings' */
+/* import Menu from '../Menu' */
-import Row, { RowBetween } from '../Row'
+import { RowBetween } from '../Row'
import Web3Status from '../Web3Status'
-import VersionSwitch from './VersionSwitch'
const HeaderFrame = styled.div`
+ width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
- width: 100%;
- top: 0;
- position: absolute;
+ margin-bottom: 50px;
z-index: 2;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding: 12px 0 0 0;
@@ -61,14 +57,6 @@ const Title = styled.a`
}
`
-const TitleText = styled(Row)`
- width: fit-content;
- white-space: nowrap;
- ${({ theme }) => theme.mediaWidth.upToExtraSmall`
- display: none;
- `};
-`
-
const AccountElement = styled.div<{ active: boolean }>`
display: flex;
flex-direction: row;
@@ -99,12 +87,10 @@ const NetworkCard = styled(YellowCard)`
const UniIcon = styled.div`
transition: transform 0.3s ease;
- :hover {
- transform: rotate(-5deg);
- }
${({ theme }) => theme.mediaWidth.upToSmall`
img {
- width: 4.5rem;
+ width: 6.25rem;
+ height: auto;
}
`};
`
@@ -148,9 +134,6 @@ export default function Header() {
-
-
-
@@ -168,9 +151,8 @@ export default function Header() {
-
-
-
+ {/* */}
+ {/* */}
diff --git a/src/components/swap/AdvancedSwapDetailsDropdown.tsx b/src/components/swap/AdvancedSwapDetailsDropdown.tsx
index 4529ba34003..350079997b8 100644
--- a/src/components/swap/AdvancedSwapDetailsDropdown.tsx
+++ b/src/components/swap/AdvancedSwapDetailsDropdown.tsx
@@ -12,7 +12,7 @@ const AdvancedDetailsFooter = styled.div<{ show: boolean }>`
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
color: ${({ theme }) => theme.text2};
- background-color: ${({ theme }) => theme.advancedBG};
+ background-color: ${({ theme }) => theme.bg2};
z-index: -1;
transform: ${({ show }) => (show ? 'translateY(0%)' : 'translateY(-100%)')};
diff --git a/src/fonts.css b/src/fonts.css
new file mode 100644
index 00000000000..ab5ffb2e6ce
--- /dev/null
+++ b/src/fonts.css
@@ -0,0 +1,24 @@
+@font-face {
+ font-family: 'SF Pro Rounded';
+ src: url('./assets/fonts/SF-Pro-Rounded-Bold.woff2') format('woff2');
+ font-weight: 700;
+}
+@font-face {
+ font-family: 'SF Pro Rounded';
+ src: url('./assets/fonts/SF-Pro-Rounded-Semibold.woff2') format('woff2');
+ font-weight: 600;
+}
+@font-face {
+ font-family: 'SF Pro Rounded';
+ src: url('./assets/fonts/SF-Pro-Rounded-Medium.woff2') format('woff2');
+ font-weight: 500;
+}
+@font-face {
+ font-family: 'SF Pro Rounded';
+ src: url('./assets/fonts/SF-Pro-Rounded-Regular.woff2') format('woff2');
+ font-weight: normal;
+}
+
+* {
+ font-family: 'SF Pro Rounded' !important;
+}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index b669aaa4e1b..8b73f2f23ce 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -22,6 +22,8 @@ import { RedirectOldRemoveLiquidityPathStructure } from './RemoveLiquidity/redir
import Swap from './Swap'
import { RedirectPathToSwapOnly, RedirectToSwap } from './Swap/redirects'
+import '../fonts.css'
+
const AppWrapper = styled.div`
display: flex;
flex-flow: column;
@@ -39,12 +41,10 @@ const BodyWrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
- padding-top: 160px;
align-items: center;
flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
z-index: 10;
+ padding-bottom: 2rem;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding: 16px;
@@ -53,10 +53,6 @@ const BodyWrapper = styled.div`
z-index: 1;
`
-const Marginer = styled.div`
- margin-top: 5rem;
-`
-
export default function App() {
return (
@@ -88,7 +84,6 @@ export default function App() {
-
diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx
index 2e9c4a368ed..ac43be4e0c7 100644
--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@@ -3,13 +3,12 @@ import styled from 'styled-components'
export const BodyWrapper = styled.div`
position: relative;
- max-width: 420px;
+ max-width: 460px;
width: 100%;
background: ${({ theme }) => theme.bg1};
- 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: 30px;
+ border-radius: 15px;
padding: 1rem;
+ border: 1px solid ${({ theme }) => theme.border};
`
/**
diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx
index 601eb97bda8..6d82ac41143 100644
--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@@ -12,7 +12,7 @@ import { StyledInternalLink, TYPE } from '../../theme'
import { Text } from 'rebass'
import { LightCard } from '../../components/Card'
import { RowBetween } from '../../components/Row'
-import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
+import { ButtonPrimary /* ButtonSecondary */ } from '../../components/Button'
import { AutoColumn } from '../../components/Column'
import { useActiveWeb3React } from '../../hooks'
@@ -113,11 +113,11 @@ export default function Pool() {
-
+ {/*
Migrate V1 Liquidity
-
+