diff --git a/packages/fether-react/src/Scanner/Scanner.js b/packages/fether-react/src/Scanner/Scanner.js index a56e50cbf..edbb801b6 100644 --- a/packages/fether-react/src/Scanner/Scanner.js +++ b/packages/fether-react/src/Scanner/Scanner.js @@ -5,6 +5,7 @@ import React from 'react'; import QrSigner from '@parity/qr-signer'; +import { ExternalLink } from 'fether-ui'; import loading from '../assets/img/icons/loading.svg'; @@ -46,18 +47,17 @@ export default class Scanner extends React.PureComponent { switch (e.name) { case 'NotAllowedError': case 'SecurityError': - errorMessage = 'Access to the webcam was refused.'; + errorMessage = 'Webcam access was refused.'; break; case 'NotFoundError': case 'OverconstrainedError': - errorMessage = 'No webcam found on the device.'; + errorMessage = 'Webcam not found on the device.'; break; case 'NotReadableError': - errorMessage = - 'Webcam hardware error. Try restarting your computer'; + errorMessage = 'Webcam permissions or hardware error.'; break; default: - errorMessage = 'Unknown error.'; + errorMessage = 'Webcam unknown error.'; } this.setState({ webcamError: errorMessage, @@ -77,7 +77,16 @@ export default class Scanner extends React.PureComponent { {isLoading ? ( loading ) : webcamError ? ( -

{webcamError}

+
+

+ {webcamError} Visit the  + +  for help troubleshooting this issue. +

+
) : (

{label}

diff --git a/packages/fether-react/src/assets/sass/shared/_basics.scss b/packages/fether-react/src/assets/sass/shared/_basics.scss index e3265ee8a..7f10e9898 100644 --- a/packages/fether-react/src/assets/sass/shared/_basics.scss +++ b/packages/fether-react/src/assets/sass/shared/_basics.scss @@ -32,6 +32,10 @@ a:visited { } } +.external-link { + color: $blue !important; +} + button, input[type='text'], input[type='number'], diff --git a/packages/fether-ui/src/ExternalLink/ExternalLink.js b/packages/fether-ui/src/ExternalLink/ExternalLink.js new file mode 100644 index 000000000..9485a0895 --- /dev/null +++ b/packages/fether-ui/src/ExternalLink/ExternalLink.js @@ -0,0 +1,17 @@ +// Copyright 2015-2019 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import React from 'react'; + +export const ExternalLink = ({ name, href }) => ( + + {name} + +); diff --git a/packages/fether-ui/src/ExternalLink/index.js b/packages/fether-ui/src/ExternalLink/index.js new file mode 100644 index 000000000..950b54df1 --- /dev/null +++ b/packages/fether-ui/src/ExternalLink/index.js @@ -0,0 +1,6 @@ +// Copyright 2015-2019 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +export * from './ExternalLink'; diff --git a/packages/fether-ui/src/index.js b/packages/fether-ui/src/index.js index 195646e20..64d43d200 100644 --- a/packages/fether-ui/src/index.js +++ b/packages/fether-ui/src/index.js @@ -9,6 +9,7 @@ export * from './AddressShort'; export * from './Card'; export * from './Clickable'; export * from './ClickToCopy'; +export * from './ExternalLink'; export * from './Form'; export * from './Header'; export * from './Modal';