Skip to content

I
interface
Commit a3a3e934 authored by Jordan Frankfurt's avatar Jordan Frankfurt Committed by Connor McEwen
Browse files
Options

fix: mobile tweaks (#4910) 

* update manifest theme colors to magenta

* text spacing and right positioning on very small screens
parent 8a4e07e6
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 103 deletions
public/index.html
View file @ a3a3e934
<!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,
body {
margin: 0;
padding: 0;
}
button {
user-select: none;
} }
}
html,
body {
margin: 0;
padding: 0;
}
button {
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">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<div id="background-radial-gradient"></div> <div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<!-- <div id="background-radial-gradient"></div>
This HTML file is a template. </body>
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. </html>
The build step will place the bundled scripts into the <body> tag. \ No newline at end of file
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
public/manifest.json
View file @ a3a3e934
...@@ -2,7 +2,10 @@ ...@@ -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 @@ ...@@ -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"
} }
\ No newline at end of file
src/components/Tokens/TokensBanner.tsx
View file @ a3a3e934
...@@ -19,7 +19,7 @@ const PopupContainer = styled(Link)<{ show: boolean }>` ...@@ -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` ...@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment