Update tooltips, reduce font-size in annotation in load safe details step

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",

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 ? (
+const CopyBtn = ({ content, classes }: CopyBtnProps) => {
-  <div className={classes.container} title="Copy to clipboard">
+  if (!navigator.clipboard) {
-    <Img src={CopyIcon} height={20} alt="Copy to clipboard" onClick={() => copyToClipboard(content)} />
+    return null
-  </div>
+  }
-) : null)
+
+  const [clicked, setClicked] = useState<boolean>(false)
+
+  return (
+    <Tooltip
+      title={clicked ? 'Copied' : 'Copy to clipboard'}
+      placement="top"
+      onClose={() => {
+        // 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)
+      }}
+    >
+      <div className={classes.container}>
+        <Img
+          src={CopyIcon}
+          height={20}
+          alt="Copy to clipboard"
+          onClick={() => {
+            copyToClipboard(content)
+            setClicked(true)
+          }}
+        />
+      </div>
+    </Tooltip>
+  )
+}
 
 export default withStyles(styles)(CopyBtn)

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) => (
-  <a
+  <Tooltip title="Show details on Etherscan" placement="top">
-    className={classes.container}
+    <a
-    href={getEtherScanLink(type, value, currentNetwork)}
+      className={classes.container}
-    target="_blank"
+      href={getEtherScanLink(type, value, currentNetwork)}
-    rel="noopener noreferrer"
+      target="_blank"
-    title="Show Details on etherscan"
+      rel="noopener noreferrer"
-    aria-label="Show Details on etherscan"
+      aria-label="Show details on Etherscan"
-  >
+    >
-    <Img src={SearchIcon} height={20} alt="Etherscan" />
+      <Img src={SearchIcon} height={20} alt="Etherscan" />
-  </a>
+    </a>
+  </Tooltip>
 )
 
 const EtherscanBtnWithStyles = withStyles(styles)(EtherscanBtn)

src/routes/load/components/DetailsForm/index.jsx

@@ -98,7 +98,7 @@ export const safeFieldsValidation = async (values: Object) => {
 const Details = ({ classes, errors, form }: Props) => (
   <>
     <Block margin="md">
-      <Paragraph noMargin size="lg" color="primary">
+      <Paragraph noMargin size="md" color="primary">
         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.
         <br />

yarn.lock

@@ -1696,10 +1696,10 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@material-ui/core@4.4.1":
+"@material-ui/core@4.4.2":
-  version "4.4.1"
+  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.4.1.tgz#cc9b8e417ced1ab3145fdeda41a6aee657d3524b"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.4.2.tgz#66a9423e533833d2867827e6fdf526adbdceb7c0"
-  integrity sha512-LotIIGv8EDMj6mwXobsMF4WlCe+PtMjrXa34U2B0xFMdZLrNYwdOHFgkAIaE0m/ibMXTobNKWqhc5bhXLxvXoQ==
+  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:
+react-hot-loader@4.12.13:
-  version "4.12.12"
+  version "4.12.13"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.12.tgz#8b33f59efef8a34f64e01f0d9393230d4b4bc6d4"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.13.tgz#78dcb55f49f88ce3d4316c7c86a8c01fdd196cd2"
-  integrity sha512-Tkd412j5yPKHoTRsJzZb+5UJNFKkPszm7QGKGYvt+jnzTkDS+qK0u3AYPlB0MmBlwzUKVHICqq5KH9Srzda7XA==
+  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"