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
Show 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>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Uniswap Interface</title> <title>Uniswap Interface</title>
...@@ -15,7 +16,7 @@ ...@@ -15,7 +16,7 @@
<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.
...@@ -94,33 +95,24 @@ ...@@ -94,33 +95,24 @@
background-color: #212429; background-color: #212429;
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background-color: #f7f8fa; background-color: #f7f8fa;
} }
} }
</style> </style>
</head> </head>
<body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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>
<!--
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> </html>
\ No newline at end of file
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