design complete

3 files changed, 102 insertions, 16 deletions

diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss
index df65cfbbb..6fa81d51f 100644
--- a/ui/app/components/modals/qr-scanner/index.scss
+++ b/ui/app/components/modals/qr-scanner/index.scss
@@ -39,9 +39,45 @@
     padding: 15px;
   }
 
-  &__status.error {
-    padding: 60px 45px 80px;
+  &__image {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0 0;
+    text-align: center;
+  }
+
+  &__error {
+    text-align: center;
     font-size: 16px;
+    padding: 15px;
+  }
+
+  &__footer {
+    padding: 20px;
+    flex-direction: row;
+    display: flex;
+
+    button {
+      margin-right: 15px;
+    }
+
+    button:last-of-type {
+      margin-right: 0;
+      background-color: #009eec;
+      border: none;
+      color: #fff;
+    }
+  }
+
+  &__close::after {
+    content: '\00D7';
+    font-size: 35px;
+    color: #9b9b9b;
+    position: absolute;
+    top: 4px;
+    right: 20px;
+    cursor: pointer;
+    font-weight: 300;
   }
 }
 
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
index e6ba146d6..5ca19ccd8 100644
--- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
@@ -9,6 +9,7 @@ export default class QrScanner extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     qrCodeDetected: PropTypes.func,
+    scanQrCode: PropTypes.func,
     error: PropTypes.bool,
     errorType: PropTypes.string,
   }
@@ -20,18 +21,9 @@ export default class QrScanner extends Component {
   constructor (props, context) {
     super(props)
 
-    let initialMsg = context.t('accessingYourCamera')
-    if (props.error) {
-      if (props.errorType === 'NO_WEBCAM_FOUND') {
-        initialMsg = context.t('noWebcamFound')
-      } else {
-        initialMsg = context.t('unknownCameraError')
-      }
-    }
-
     this.state = {
       ready: false,
-      msg: initialMsg,
+      msg: context.t('accessingYourCamera'),
     }
     this.codeReader = null
     this.permissionChecker = null
@@ -118,11 +110,22 @@ export default class QrScanner extends Component {
 
 
   stopAndClose = () => {
-    this.codeReader.reset()
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
     this.setState({ ready: false })
     this.props.hideModal()
   }
 
+  tryAgain = () => {
+    // close the modal
+    this.stopAndClose()
+    // wait for the animation and try again
+    setTimeout(_ => {
+      this.props.scanQrCode()
+    }, 1000)
+  }
+
   renderVideo () {
     return (
       <div className={'qr-scanner__content__video-wrapper'}>
@@ -137,18 +140,61 @@ export default class QrScanner extends Component {
     )
   }
 
+  renderErrorModal () {
+    let title, msg
+
+    if (this.props.error) {
+      if (this.props.errorType === 'NO_WEBCAM_FOUND') {
+        title = this.context.t('noWebcamFoundTitle')
+        msg = this.context.t('noWebcamFound')
+      } else {
+        title = this.context.t('unknownCameraErrorTitle')
+        msg = this.context.t('unknownCameraError')
+      }
+    }
+
+    return (
+      <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
+
+        <div className="qr-scanner__image">
+          <img src={'images/webcam.svg'} width={70} height={70} />
+        </div>
+        <div className="qr-scanner__title">
+          { title }
+        </div>
+        <div className={'qr-scanner__error'}>
+          {msg}
+        </div>
+        <div className={'qr-scanner__footer'}>
+          <button className="btn-default btn--large" onClick={this.stopAndClose}>
+            CANCEL
+          </button>
+          <button className="btn-primary btn--large" onClick={this.tryAgain}>
+            TRY AGAIN
+          </button>
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { t } = this.context
 
+    if (this.props.error) {
+      return this.renderErrorModal()
+    }
+
     return (
       <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
         <div className="qr-scanner__title">
           { `${t('scanQrCode')}` }
         </div>
         <div className="qr-scanner__content">
-          { !this.props.error ? this.renderVideo() : null}
+          { this.renderVideo() }
         </div>
-        <div className={`qr-scanner__status ${this.props.error ? 'error' : ''}`}>
+        <div className={'qr-scanner__status'}>
           {this.state.msg}
         </div>
       </div>
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
index d50abe0ae..d0a35e03b 100644
--- a/ui/app/components/modals/qr-scanner/qr-scanner.container.js
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
@@ -1,7 +1,10 @@
 import { connect } from 'react-redux'
 import QrScanner from './qr-scanner.component'
 
-const { hideModal, qrCodeDetected } = require('../../../actions')
+const { hideModal, qrCodeDetected, showQrScanner } = require('../../../actions')
+import {
+  SEND_ROUTE,
+} from '../../../routes'
 
 const mapStateToProps = state => {
   return {
@@ -14,6 +17,7 @@ const mapDispatchToProps = dispatch => {
   return {
     hideModal: () => dispatch(hideModal()),
     qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
   }
 }