status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Mikhail Mikheev 2019-09-12 16:17:20 +04:00
parent ca9d228eb0
commit 3c1d2f07c7
5 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

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

41
src/components/CopyBtn/index.jsx
View File

@ -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 ? (
<div className={classes.container} title="Copy to clipboard">
<Img src={CopyIcon} height={20} alt="Copy to clipboard" onClick={() => copyToClipboard(content)} />
const CopyBtn = ({ content, classes }: CopyBtnProps) => {
if (!navigator.clipboard) {
return 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>
) : null)
</Tooltip>
)
}
export default withStyles(styles)(CopyBtn)

7
src/components/EtherscanBtn/index.jsx
View File

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

2
src/routes/load/components/DetailsForm/index.jsx
View File

@ -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 />

38
yarn.lock
View File

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