From 3c1d2f07c740dcd8ab6b2cda05ae693e820b4f02 Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Thu, 12 Sep 2019 16:17:20 +0400 Subject: [PATCH] Update tooltips, reduce font-size in annotation in load safe details step --- package.json | 6 +-- src/components/CopyBtn/index.jsx | 43 ++++++++++++++++--- src/components/EtherscanBtn/index.jsx | 23 +++++----- .../load/components/DetailsForm/index.jsx | 2 +- yarn.lock | 38 ++++++++++++---- 5 files changed, 83 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 4708563d..599bc763 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "dependencies": { "@gnosis.pm/safe-contracts": "^1.0.0", "@gnosis.pm/util-contracts": "2.0.1", - "@material-ui/core": "4.4.1", + "@material-ui/core": "4.4.2", "@material-ui/icons": "4.4.1", "@testing-library/jest-dom": "4.1.0", "@welldone-software/why-did-you-render": "3.3.3", @@ -41,7 +41,7 @@ "date-fns": "2.1.0", "ethereum-ens": "0.7.8", "final-form": "4.18.5", - "history": "^4.7.2", + "history": "4.10.0", "immortal-db": "^1.0.2", "immutable": "^4.0.0-rc.9", "material-ui-search-bar": "^1.0.0-beta.13", @@ -51,7 +51,7 @@ "react-dom": "16.9.0", "react-final-form": "6.3.0", "react-final-form-listeners": "^1.0.2", - "react-hot-loader": "4.12.12", + "react-hot-loader": "4.12.13", "react-infinite-scroll-component": "4.5.3", "react-qr-reader": "^2.2.1", "react-redux": "7.1.1", diff --git a/src/components/CopyBtn/index.jsx b/src/components/CopyBtn/index.jsx index d3de19e1..8cba470f 100644 --- a/src/components/CopyBtn/index.jsx +++ b/src/components/CopyBtn/index.jsx @@ -1,5 +1,6 @@ // @flow -import React from 'react' +import React, { useState } from 'react' +import Tooltip from '@material-ui/core/Tooltip' import { withStyles } from '@material-ui/core/styles' import Img from '~/components/layout/Img' import { copyToClipboard } from '~/utils/clipboard' @@ -26,10 +27,40 @@ type CopyBtnProps = { classes: Object, } -const CopyBtn = ({ content, classes }: CopyBtnProps) => (navigator.clipboard ? ( -
- Copy to clipboard copyToClipboard(content)} /> -
-) : null) +const CopyBtn = ({ content, classes }: CopyBtnProps) => { + if (!navigator.clipboard) { + return null + } + + const [clicked, setClicked] = useState(false) + + return ( + { + // this is fired before tooltip is closed + // added setTimeout so the user doesn't see the text changing/jumping + setTimeout(() => { + if (clicked) { + setClicked(false) + } + }, 300) + }} + > +
+ Copy to clipboard { + copyToClipboard(content) + setClicked(true) + }} + /> +
+ + ) +} export default withStyles(styles)(CopyBtn) diff --git a/src/components/EtherscanBtn/index.jsx b/src/components/EtherscanBtn/index.jsx index ffae1448..7c8548b8 100644 --- a/src/components/EtherscanBtn/index.jsx +++ b/src/components/EtherscanBtn/index.jsx @@ -1,5 +1,6 @@ // @flow import React from 'react' +import Tooltip from '@material-ui/core/Tooltip' import { withStyles } from '@material-ui/core/styles' import { connect } from 'react-redux' import Img from '~/components/layout/Img' @@ -8,7 +9,6 @@ import { xs } from '~/theme/variables' import { networkSelector } from '~/logic/wallets/store/selectors' import SearchIcon from './search.svg' - const styles = () => ({ container: { display: 'flex', @@ -33,16 +33,17 @@ type EtherscanBtnProps = { const EtherscanBtn = ({ type, value, currentNetwork, classes, }: EtherscanBtnProps) => ( - - Etherscan - + + + Etherscan + + ) const EtherscanBtnWithStyles = withStyles(styles)(EtherscanBtn) diff --git a/src/routes/load/components/DetailsForm/index.jsx b/src/routes/load/components/DetailsForm/index.jsx index f8889afb..1e54cec9 100644 --- a/src/routes/load/components/DetailsForm/index.jsx +++ b/src/routes/load/components/DetailsForm/index.jsx @@ -98,7 +98,7 @@ export const safeFieldsValidation = async (values: Object) => { const Details = ({ classes, errors, form }: Props) => ( <> - + You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only stored locally and will never be shared with Gnosis or any third parties.
diff --git a/yarn.lock b/yarn.lock index 4de46b63..85f36102 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1696,10 +1696,10 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^13.0.0" -"@material-ui/core@4.4.1": - version "4.4.1" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.4.1.tgz#cc9b8e417ced1ab3145fdeda41a6aee657d3524b" - integrity sha512-LotIIGv8EDMj6mwXobsMF4WlCe+PtMjrXa34U2B0xFMdZLrNYwdOHFgkAIaE0m/ibMXTobNKWqhc5bhXLxvXoQ== +"@material-ui/core@4.4.2": + version "4.4.2" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.4.2.tgz#66a9423e533833d2867827e6fdf526adbdceb7c0" + integrity sha512-hnZ4SP/hWJ9sUoNMkStz/y/CL2c7j4JpVIB2py3+vpBFU9TgHL3noBk3Fr0gltRvvlYA9ekpiGsGZ2ukk1R7Eg== dependencies: "@babel/runtime" "^7.4.4" "@material-ui/styles" "^4.4.1" @@ -9398,6 +9398,18 @@ highlight.js@~9.12.0: resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4= +history@4.10.0: + version "4.10.0" + resolved "https://registry.yarnpkg.com/history/-/history-4.10.0.tgz#68301fedd6d3484e4a6adbc957551d6d238d4cb2" + integrity sha512-w5dPeWoxlMyl4zKMXWT3zRxSt1dSblRCtrOoxxinK1fhYQ4Fwm5TPef8hNUYTVVu5Hwxr2nS0uaCX3JJFUeabA== + dependencies: + "@babel/runtime" "^7.1.2" + loose-envify "^1.2.0" + resolve-pathname "^3.0.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + value-equal "^1.0.1" + history@^4.7.2, history@^4.9.0: version "4.9.0" resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca" @@ -14594,10 +14606,10 @@ react-helmet-async@^1.0.2: react-fast-compare "2.0.4" shallowequal "1.1.0" -react-hot-loader@4.12.12: - version "4.12.12" - resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.12.tgz#8b33f59efef8a34f64e01f0d9393230d4b4bc6d4" - integrity sha512-Tkd412j5yPKHoTRsJzZb+5UJNFKkPszm7QGKGYvt+jnzTkDS+qK0u3AYPlB0MmBlwzUKVHICqq5KH9Srzda7XA== +react-hot-loader@4.12.13: + version "4.12.13" + resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.13.tgz#78dcb55f49f88ce3d4316c7c86a8c01fdd196cd2" + integrity sha512-4Byk3aVQhcmTnVCBvDHOEOUnMFMj81r2yRKZQSfLOG2yd/4hm/A3oK15AnCZilQExqSFSsHcK64lIIU+dU2zQQ== dependencies: fast-levenshtein "^2.0.6" global "^4.3.0" @@ -15477,6 +15489,11 @@ resolve-pathname@^2.2.0: resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" integrity sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg== +resolve-pathname@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" + integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -18298,6 +18315,11 @@ value-equal@^0.4.0: resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" integrity sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw== +value-equal@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" + integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== + value-or-function@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"