Code formatting, small UI fix & Mirror video

react/src/components/dashboard/qrModal/qrModal.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
 import Store from '../../../store';
 import { translate } from '../../../translate/translate';
 import QrReader from 'react-qr-reader'
@@ -10,62 +9,58 @@ import {
 } from './qrModal.render';
 
 class QRModal extends React.Component {
- constructor(props) {
+  constructor(props) {
     super(props);
-
     this.state = {
       modalIsOpen: false,
-      error: ""
+      error: ''
     };
-
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
-
     this.handleScan = this.handleScan.bind(this);
     this.handleError = this.handleError.bind(this);
-    
     document.body.addEventListener('click', this.closeModal);
-
-    }
+  }
   
-  handleScan(data){
-    if(data!==null) {
-       if(this.props.mode==="scan") {
+  handleScan(data) {
+    if(data !== null) {
+      if(this.props.mode === 'scan') {
         this.props.setRecieverFromScan(data)
-       }
+      }
       this.closeModal();
     }
-    return data;
   }
-  handleError(err){
+
+  handleError(err) {
     this.setState({error: err});
   }
+
   openModal() {
     this.setState({modalIsOpen: true});
-    if(this.props.mode==="scan") {
-        ReactDOM.render(<QrReader
-                    delay={500}
-                    style={{ height: 281, width: 500, }}
-                    onError={this.handleError}
-                    onScan={this.handleScan}
-                    />, document.getElementById('webcam'));
+    if(this.props.mode === 'scan') {
+      ReactDOM.render(
+        <QrReader 
+          delay={50} 
+          style={{ height: 281, width: 500, transform: 'scaleX(-1)' }} 
+          onError={this.handleError} 
+          onScan={this.handleScan} />, document.getElementById('webcam'));
     }
   }
+
   closeModal() {
     this.setState({modalIsOpen: false});
-    if(this.props.mode==="scan") {
+    if(this.props.mode === 'scan') {
       ReactDOM.unmountComponentAtNode(document.getElementById('webcam'));
     }
   }
+
   render() {
-    if(this.props.mode==="scan") {
-        return QRModalReaderRender.call(this);
+    if(this.props.mode === 'scan') {
+      return QRModalReaderRender.call(this);
     } else {
-        return QRModalRender.call(this);
+      return QRModalRender.call(this);
     }
-  
-   
   }
 }
 
-export default QRModal;
+export default QRModal;

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -3,10 +3,9 @@ import { translate } from '../../../translate/translate';
 import QRCode from 'qrcode.react';
 
 export const QRModalRender = function () {
-     return (
-     <span>
-      <span
-        className="label label-default margin-left-10 action"
+  return (
+    <span>
+      <span className="label label-default margin-left-10 action"
         title={ translate('INDEX.QRCODE') }
         onClick={this.openModal}>
         <i className="icon fa-qrcode" aria-hidden="true"></i>
@@ -31,67 +30,63 @@ export const QRModalRender = function () {
               <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QR_CODE') }</h4>
             </div>
             <div className="modal-body">
-             <div className="animsition vertical-align fade-in">
-                  <div className="page-content vertical-align-middle">
-                          <QRCode 
-                            value={this.props.content}
-                            size={198}
-                          />
-                  </div>
+              <div className="animsition vertical-align fade-in">
+                <div className="page-content vertical-align-middle">
+                  <QRCode 
+                    value={this.props.content}
+                    size={198}
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
-    </div>
-   <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
-  </span>
+      </div>
+      <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
+    </span>
   );
 };
 
-
 export const QRModalReaderRender = function () {
-     return (
-     <span>
+  return (
+    <span>
       <button type="button"
         className="btn btn-default"
         onClick={this.openModal}>
         <i className="icon fa-qrcode" aria-hidden="true"></i>
         { translate('INDEX.SCAN_QRCODE_WEBCAM') }
       </button>
-      <div
-        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+      <div className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
         id="QRReadModal"
         aria-hidden="true"
         aria-labelledby="QRReadModal"
         role="dialog"
         tabIndex="-1">
-        <div className="modal-dialog modal-center modal-md">
-          <div className="modal-content">
-            <div className="modal-header bg-orange-a400 wallet-send-header">
-              <button
-                type="button"
-                className="close white"
-                aria-label="Close"
-                onClick={ this.closeModal }>
-                <span aria-hidden="true">×</span>
-              </button>
-              <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QRCODE_WEBCAM') }</h4>
-            </div>
-            <div className="modal-body">
-             <div className="animsition vertical-align fade-in">
+          <div className="modal-dialog modal-center modal-md">
+            <div className="modal-content">
+              <div className="modal-header bg-orange-a400 wallet-send-header">
+                <button
+                  type="button"
+                  className="close white"
+                  aria-label="Close"
+                  onClick={ this.closeModal }>
+                  <span aria-hidden="true">×</span>
+                </button>
+                <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QRCODE_WEBCAM') }</h4>
+              </div>
+              <div className="modal-body">
+                <div className="animsition vertical-align fade-in">
                   <div className="page-content vertical-align-middle">
                     <div id="webcam">
                       {this.state.error}
                     </div>
                   </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-    </div>
-   <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
-  </span>
+      <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
+    </span>
   );
-};
-
-
+};

react/src/components/dashboard/sendCoin/sendCoin.render.js

@@ -139,7 +139,7 @@ export const OASendUIRender = function () {
 export const SendApiTypeSelectorRender = function () {
   return (
     <div className="row">
-      <div className="col-lg-9 margin-bottom-10">
+      <div className="col-lg-8 margin-bottom-10">
         <span className="pointer">
           <label className="switch">
             <input
@@ -156,11 +156,11 @@ export const SendApiTypeSelectorRender = function () {
           </div>
         </span>
       </div>
-      <div className="col-lg-3 text-right">
-          <QRModal
-              mode="scan"
-              setRecieverFromScan={this.setRecieverFromScan}
-          />
+      <div className="col-lg-4 text-right">
+        <QRModal
+          mode="scan"
+          setRecieverFromScan={this.setRecieverFromScan}
+        />
       </div>
     </div>
   );