ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile tweaks (#4910)

Browse Source 
* update manifest theme colors to magenta

* text spacing and right positioning on very small screens
This commit is contained in:
Jordan Frankfurt 2022-10-13 09:56:19 -05:00 committed by Connor McEwen
parent 8a4e07e6b2
commit a3a3e934a1
3 changed files with 94 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
public/index.html
View File

@ -1,126 +1,118 @@
<!DOCTYPE html> <!DOCTYPE html>
<html translate="no"> <html translate="no">
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title> <head>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" /> <meta charset="utf-8" />
<!-- <title>Uniswap Interface</title>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<!--
%PUBLIC_URL% will be replaced with the URL of the `public` folder during build. %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
--> -->
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" /> <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" /> <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" /> <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#ff007a" /> <meta name="theme-color" content="#FC72FF" />
<!-- <!--
manifest.json provides metadata used when the app is installed as a PWA. manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/ See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://www.google-analytics.com/" /> <link rel="preconnect" href="https://www.google-analytics.com/" />
<link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
<style> <style>
* { * {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
box-sizing: border-box; box-sizing: border-box;
} }
/** /**
Explicitly load Inter var from public/ so it does not block LCP's critical path. Explicitly load Inter var from public/ so it does not block LCP's critical path.
*/ */
@font-face { @font-face {
font-family: 'Inter custom'; font-family: 'Inter custom';
font-weight: 100 900; font-weight: 100 900;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'), src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'), url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2'); url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
} }
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
* { * {
font-family: 'Inter custom', sans-serif; font-family: 'Inter custom', sans-serif;
}
} }
}
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
button { button {
user-select: none; user-select: none;
} }
html {
font-size: 16px;
font-variant: none;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#background-radial-gradient {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
}
html {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html { html {
font-size: 16px; background-color: #212429;
font-variant: none;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#background-radial-gradient {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
} }
}
@media (prefers-color-scheme: light) {
html { html {
min-height: 100%; background-color: #f7f8fa;
} }
}
</style>
</head>
@media (prefers-color-scheme: dark) { <body>
html { <noscript>You need to enable JavaScript to run this app.</noscript>
background-color: #212429;
}
}
@media (prefers-color-scheme: light) {
html {
background-color: #f7f8fa;
}
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- The root is the container of the app --> <div id="root">
<div id="root"> <!-- Triggers the font to load immediately and then is replaced by the app -->
<!-- Triggers the font to load immediately and then is replaced by the app --> <div>&emsp;</div>
<div>&emsp;</div> </div>
</div>
<div id="background-radial-gradient"></div> <div id="background-radial-gradient"></div>
</body>
<!-- </html>
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

9
public/manifest.json
View File

@ -2,7 +2,10 @@
"background_color": "#fff", "background_color": "#fff",
"display": "standalone", "display": "standalone",
"homepage_url": "https://app.uniswap.org", "homepage_url": "https://app.uniswap.org",
"providedBy": { "name": "Uniswap", "url": "https://uniswap.org" }, "providedBy": {
"name": "Uniswap",
"url": "https://uniswap.org"
},
"icons": [ "icons": [
{ {
"src": "./images/192x192_App_Icon.png", "src": "./images/192x192_App_Icon.png",
@ -23,5 +26,5 @@
"iconPath": "./images/256x256_App_Icon_Pink.svg", "iconPath": "./images/256x256_App_Icon_Pink.svg",
"short_name": "Uniswap", "short_name": "Uniswap",
"start_url": ".", "start_url": ".",
"theme_color": "#ff007a" "theme_color": "#FC72FFs"
} }

4
src/components/Tokens/TokensBanner.tsx
View File

@ -19,7 +19,7 @@ const PopupContainer = styled(Link)<{ show: boolean }>`
padding: 12px 16px 12px 20px; padding: 12px 16px 12px 20px;
gap: 8px; gap: 8px;
bottom: 48px; bottom: 48px;
right: 16px; right: clamp(0px, 1vw, 16px);
width: 320px; width: 320px;
height: 88px; height: 88px;
z-index: ${Z_INDEX.sticky}; z-index: ${Z_INDEX.sticky};
@ -54,7 +54,7 @@ const Description = styled.span`
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
width: 75%; width: max(212px, calc(100% - 36px));
` `
export default function TokensBanner() { export default function TokensBanner() {