fix: mobile tweaks (#4910)

* update manifest theme colors to magenta * text spacing and right positioning on very small screens

fix: mobile tweaks (#4910)
* update manifest theme colors to magenta * text spacing and right positioning on very small screens
a3a3e934 · Jordan Frankfurt · Connor McEwen · 8a4e07e6 · a3a3e934 · a3a3e934
Commit a3a3e934 authored Oct 13, 2022 by Jordan Frankfurt Committed by Connor McEwen Oct 13, 2022
Show whitespace changes
Inline Side-by-side

Showing with 98 additions and 103 deletions

index.html public/index.html +90 -98

manifest.json public/manifest.json +6 -3

TokensBanner.tsx src/components/Tokens/TokensBanner.tsx +2 -2

No files found.
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
 <html translate="no">
-  <head>
+
+<head>
  <meta charset="utf-8" />

  <title>Uniswap Interface</title>
@@ -15,7 +16,7 @@
  <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="theme-color" content="#ff007a" />
+  <meta name="theme-color" content="#FC72FF" />

  <!--
      manifest.json provides metadata used when the app is installed as a PWA.
@@ -94,33 +95,24 @@
        background-color: #212429;
      }
    }
+
    @media (prefers-color-scheme: light) {
      html {
        background-color: #f7f8fa;
      }
    }
  </style>
-  </head>
-  <body>
+</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>
+</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>
\ No newline at end of file
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,7 +2,10 @@
  "background_color": "#fff",
  "display": "standalone",
  "homepage_url": "https://app.uniswap.org",
-  "providedBy": { "name": "Uniswap", "url": "https://uniswap.org" },
+  "providedBy": {
+    "name": "Uniswap",
+    "url": "https://uniswap.org"
+  },
  "icons": [
    {
      "src": "./images/192x192_App_Icon.png",
@@ -23,5 +26,5 @@
  "iconPath": "./images/256x256_App_Icon_Pink.svg",
  "short_name": "Uniswap",
  "start_url": ".",
-  "theme_color": "#ff007a"
+  "theme_color": "#FC72FFs"
 }
\ No newline at end of file
--- a/src/components/Tokens/TokensBanner.tsx
+++ b/src/components/Tokens/TokensBanner.tsx
@@ -19,7 +19,7 @@ const PopupContainer = styled(Link)<{ show: boolean }>`
  padding: 12px 16px 12px 20px;
  gap: 8px;
  bottom: 48px;
-  right: 16px;
+  right: clamp(0px, 1vw, 16px);
  width: 320px;
  height: 88px;
  z-index: ${Z_INDEX.sticky};
@@ -54,7 +54,7 @@ const Description = styled.span`
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
-  width: 75%;
+  width: max(212px, calc(100% - 36px));
 `

 export default function TokensBanner() {