Add an image for QR code, fix some styling and translations bitshares…

…#444
murilob · Oct 11, 2017 · 38906a6 · 38906a6
1 parent 733e855
commit 38906a6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 42 deletions.
diff --git a/app/assets/locales/locale-cn.json b/app/assets/locales/locale-cn.json
@@ -1159,7 +1159,7 @@
     "qrcode":{
       "label":"二维码",
       "title":"私钥二维码",
-      "input_messate":"请输入用于加密二维码的密码，密码为空表示不加密"
+      "input_message":"请输入用于加密二维码的密码，密码为空表示不加密"
     }
   },
   "init_error": {

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
@@ -1191,7 +1191,7 @@
     "qrcode":{
       "label":"qrcode",
       "title":"Private key QR code",
-      "input_messate":"Please enter the password used to encrypt the QR code, the password is empty that does not encrypt."
+      "input_message":"Please enter a password used to encrypt the QR code.<br />An empty password will show an unencrypted QR code."
     }
   },
   "init_error": {

diff --git a/app/assets/qr.png b/app/assets/qr.png
diff --git a/app/components/Modal/QrcodeModal.jsx b/app/components/Modal/QrcodeModal.jsx
@@ -63,46 +63,48 @@ class QrcodeModal extends React.Component {
         if(this.state.isShowQrcode)pos = {textAlign: "center"};
         return (
             <BaseModal onClose={this.onClose} id={this.props.modalId} ref="modal" overlay={true} overlayClose={false}>
-                <h3>
-                    <Translate content="modal.qrcode.title"/>
-                </h3>
-                <form onSubmit={this.onPasswordEnter} noValidate>
-                    <div className="form-group">
-                        {this.state.isShowQrcode ?
-                            <section style={pos}>
-                                <QRCode size={256} value={this.state.keyString}/>
-                            </section>
-                            :
-                            <section>
-                                <label className="left-label"><Translate content="modal.qrcode.input_messate"/></label>
-                                <input
-                                    name="password"
-                                    type="text"
-                                    onFocus={() => {
-                                        this.refs.password_input.setAttribute("type", "password");
-                                    }}
-                                    ref="password_input"
-                                    autoComplete="off"
-                                    onKeyDown={this.onKeyDown}
-                                />
-                            </section>
-                        }
+                <div className="text-center">
+                    <div style={{margin: "1.5rem 0"}}>
+                        <Translate component="h4" content="modal.qrcode.title"/>
                     </div>
-                    <div style={pos}>
-                        <div className="button-group">
-                            {this.state.isShowQrcode == false ?
-                                <button className="button" data-place="bottom" data-html onClick={this.onPasswordEnter}>
-                                    <Translate content="modal.ok"/>
-                                </button>
+                    <form className="full-width" style={{margin: "0 3.5rem"}} onSubmit={this.onPasswordEnter} noValidate>
+                        <div className="form-group">
+                            {this.state.isShowQrcode ?
+                                <section style={pos}>
+                                    <QRCode size={256} value={this.state.keyString}/>
+                                </section>
                                 :
-                                null
+                                <section>
+                                    <label className="left-label"><Translate unsafe content="modal.qrcode.input_message"/></label>
+                                    <input
+                                        name="password"
+                                        type="text"
+                                        onFocus={() => {
+                                            this.refs.password_input.setAttribute("type", "password");
+                                        }}
+                                        ref="password_input"
+                                        autoComplete="off"
+                                        onKeyDown={this.onKeyDown}
+                                    />
+                                </section>
                             }
-                            <button className="button" data-place="bottom" data-html onClick={this.onCancel}>
-                                <Translate content="cancel"/>
-                            </button>
                         </div>
-                    </div>
-                </form>
+                        <div style={pos}>
+                            <div className="button-group">
+                                {this.state.isShowQrcode == false ?
+                                    <button className="button" data-place="bottom" data-html onClick={this.onPasswordEnter}>
+                                        <Translate content="modal.ok"/>
+                                    </button>
+                                    :
+                                    null
+                                }
+                                <button className="button" data-place="bottom" data-html onClick={this.onCancel}>
+                                    <Translate content="cancel"/>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
             </BaseModal>
         );
     }
@@ -116,4 +118,3 @@ QrcodeModal.defaultProps = {
     modalId: "qr_code_password_modal"
 };
 export default QrcodeModal;
-
diff --git a/app/components/PrivateKeyView.jsx b/app/components/PrivateKeyView.jsx
@@ -58,10 +58,15 @@ export default class PrivateKeyView extends Component {
                             <label><Translate content="account.perm.private" /></label>
                             <div>
                                 {this.state.wif ? <span>
-                                    {this.state.wif}
-                                    &nbsp;(<a onClick={this.onHide.bind(this)}>hide</a>,<a onClick={this.showQrCode.bind(this)}><Translate content="modal.qrcode.label" /></a>)
+                                    <p style={{fontWeight: 600}}>{this.state.wif}</p>
+                                    <div className="button-group">
+                                        <div className="button" onClick={this.onHide.bind(this)}>hide</div>
+                                        <div className="clickable" onClick={this.showQrCode.bind(this)}>
+                                            <img style={{height: 50}} src={require("assets/qr.png")} />
+                                        </div>
+                                    </div>
                                 </span>:<span>
-                                    (<a onClick={this.onShow.bind(this)}><Translate content="account.perm.show" /></a>)
+                                    <div className="button" onClick={this.onShow.bind(this)}><Translate content="account.perm.show" /></div>
                                 </span>}
                             </div>
                         </div>