From 1380f865a990bfb987efb113330dee38a9461e99 Mon Sep 17 00:00:00 2001 From: Moody Salem Date: Sat, 16 May 2020 10:44:26 -0400 Subject: [PATCH] Place tooltips better on smaller screens --- package.json | 2 ++ src/components/Question/index.tsx | 39 ++++++++++++++++++------------ src/components/TokenLogo/index.tsx | 10 +++----- src/pages/App.tsx | 5 ++-- yarn.lock | 25 +++++++++++++++++++ 5 files changed, 56 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 3695d9311c..d80e72d34d 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@ethersproject/units": "^5.0.0-beta.132", "@material-ui/core": "^4.9.5", "@mycrypto/eth-scan": "^2.1.0", + "@popperjs/core": "^2.4.0", "@reach/dialog": "^0.2.8", "@reach/tooltip": "^0.2.0", "@reduxjs/toolkit": "^1.3.5", @@ -42,6 +43,7 @@ "react-feather": "^2.0.8", "react-ga": "^2.5.7", "react-i18next": "^10.7.0", + "react-popper": "^2.2.3", "react-redux": "^7.2.0", "react-router-dom": "^5.0.0", "react-scripts": "^3.4.1", diff --git a/src/components/Question/index.tsx b/src/components/Question/index.tsx index f50463d6d0..1aa4fb3492 100644 --- a/src/components/Question/index.tsx +++ b/src/components/Question/index.tsx @@ -1,6 +1,8 @@ import React, { useState } from 'react' +import { createPortal } from 'react-dom' import styled, { keyframes } from 'styled-components' import { HelpCircle as Question } from 'react-feather' +import { usePopper } from 'react-popper' const Wrapper = styled.div` position: relative; @@ -36,14 +38,9 @@ const fadeIn = keyframes` ` const Popup = styled.div` - position: absolute; width: 228px; z-index: 9999; - left: 40px; - top: -10px; - display: flex; - flex-direction: column; - align-items: center; + margin: 0.4rem; padding: 0.6rem 1rem; line-height: 150%; background: ${({ theme }) => theme.bg1}; @@ -55,31 +52,43 @@ const Popup = styled.div` color: ${({ theme }) => theme.text2}; font-weight: 400; - - ${({ theme }) => theme.mediaWidth.upToSmall` - left: -20px; - `} ` export default function QuestionHelper({ text }: { text: string }) { - const [showPopup, setPopup] = useState(false) + const [showPopup, setShowPopup] = useState(false) + const [referenceElement, setReferenceElement] = useState(null) + const [popperElement, setPopperElement] = useState(null) + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: 'auto', + strategy: 'fixed' + }) + + const portal = createPortal( + showPopup && ( + + {text} + + ), + document.getElementById('popover-container') + ) return ( { - setPopup(!showPopup) + setShowPopup(true) }} onMouseEnter={() => { - setPopup(true) + setShowPopup(true) }} onMouseLeave={() => { - setPopup(false) + setShowPopup(false) }} + ref={setReferenceElement} > - {showPopup && {text}} + {portal} ) } diff --git a/src/components/TokenLogo/index.tsx b/src/components/TokenLogo/index.tsx index 3185c1296c..538ac101ca 100644 --- a/src/components/TokenLogo/index.tsx +++ b/src/components/TokenLogo/index.tsx @@ -31,6 +31,8 @@ const Emoji = styled.span<{ size?: string }>` const StyledEthereumLogo = styled(EthereumLogo)<{ size: string }>` width: ${({ size }) => size}; height: ${({ size }) => size}; + box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075); + border-radius: 24px; ` export default function TokenLogo({ @@ -53,13 +55,7 @@ export default function TokenLogo({ let path = '' // hard code to show ETH instead of WETH in UI if (address === WETH[chainId].address) { - return ( - - ) + return } else if (!error && !BAD_IMAGES[address] && isAddress(address)) { path = TOKEN_ICON_API(address) } else { diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 1e61459a4b..8ddfce56d0 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -51,9 +51,7 @@ const BodyWrapper = styled.div` } ${({ theme }) => theme.mediaWidth.upToExtraSmall` - padding-top: 16px; - padding-left: 16px; - padding-right: 16px; + padding: 16px; `}; z-index: 1; @@ -168,6 +166,7 @@ export default function App() { +
) diff --git a/yarn.lock b/yarn.lock index 0f771c0984..5d820f454a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2322,6 +2322,11 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@popperjs/core@^2.4.0": + version "2.4.0" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915" + integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA== + "@portis/eth-json-rpc-middleware@^4.1.2": version "4.1.2" resolved "https://registry.yarnpkg.com/@portis/eth-json-rpc-middleware/-/eth-json-rpc-middleware-4.1.2.tgz#391e392da03dea348c8111a8111ce4550aa24a02" @@ -14474,6 +14479,11 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== +react-fast-compare@^3.0.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900" + integrity sha512-SCsAORWK59BvauR2L1BTdjQbJcSGJJz03U0awektk2hshLKrITDDFTlgGCqIZpTDlPC/NFlZee6xTMzXPVLiHw== + react-feather@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.8.tgz#455baf1470f756a57e2ad6c72545444ce5925781" @@ -14509,6 +14519,14 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-i resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-popper@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97" + integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw== + dependencies: + react-fast-compare "^3.0.1" + warning "^4.0.2" + react-redux@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d" @@ -17442,6 +17460,13 @@ walletlink@^2.0.2: preact "^10.3.3" rxjs "^6.5.4" +warning@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@^1.6.0: version "1.6.1" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"