♻️ Add styles for sign message components

LiskHQ · Jun 5, 2019 · b316ab9 · b316ab9
1 parent f7c382e
commit b316ab9
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/src/components/app/variablesV2.css b/src/components/app/variablesV2.css
@@ -101,6 +101,8 @@ or "warn/action" ineastd of "red/green"
   /*************************
       Other Colors
   *************************/
+  --color-console-background: #08223c;
+  --color-console-text: #9bf436;
   --light-border-color: rgba(255, 255, 255, 0.24);
   --dark-border-color: rgba(0, 0, 0, 0.08);
   --primary-background-color: color(var(--color-ultramarine-blue) a(8%));

diff --git a/src/components/signMessage/confirmMessage.js b/src/components/signMessage/confirmMessage.js
@@ -1,16 +1,29 @@
 import React from 'react';
 import Lisk from '@liskhq/lisk-client';
-import ToolBoxInput from '../toolbox/inputs/toolBoxInput';
-import CopyToClipboard from '../copyToClipboard';
+import CopyToClipboard from 'react-copy-to-clipboard';
 import styles from './signMessage.css';
+import { AutoresizeTextarea } from '../toolbox/inputsV2';
+import { SecondaryButtonV2 } from '../toolbox/buttons/button';
 
 class ConfirmMessage extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       result: props.account.passphrase ? this.sign() : '',
+      copied: false,
     };
+
+    this.copy = this.copy.bind(this);
+  }
+
+  copy() {
+    this.setState({ copied: true });
+    this.timeout = setTimeout(() => this.setState({ copied: false }), 3000);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
   sign() {
@@ -30,19 +43,25 @@ class ConfirmMessage extends React.Component {
 
   render() {
     const { t } = this.props;
+    const { copied, result } = this.state;
     return (
       <section>
         <div className={styles.header}>
-          <span className={styles.step}>{t('Step 2/2')}</span>
+          <span className={styles.step}>{t('Step 2 / 2')}</span>
           <h1>{t('Your signed message')}</h1>
         </div>
-        <div>
-          <ToolBoxInput multiline readOnly value={this.state.result} />
+        <div className={styles.result}>
+          <AutoresizeTextarea className={styles.textarea} readOnly value={result}/>
         </div>
         <div className={styles.buttonsHolder}>
           <CopyToClipboard
-            value={this.state.result}
-            text={t('Copy to Clipboard')}/>
+            onCopy={this.copy}
+            text={result}
+          >
+            <SecondaryButtonV2 disabled={copied}>
+              {copied ? t('Copied!') : t('Copy to Clipboard')}
+            </SecondaryButtonV2>
+          </CopyToClipboard>
         </div>
       </section>
     );

diff --git a/src/components/signMessage/signMessage.css b/src/components/signMessage/signMessage.css
@@ -16,7 +16,7 @@
   text-align: center;
 
   & > .step {
-    @mixin contentSmallest;
+    @mixin contentNormal semi-bold;
 
     color: var(--color-slate-gray);
     height: 18px;
@@ -35,13 +35,39 @@
   }
 
   & > p {
-    @mixin contentLarge;
+    @mixin contentLargest;
 
     color: var(--color-slate-gray);
     margin: 0;
   }
 }
 
+.fieldGroup {
+  display: block;
+  margin: 30px 0 40px;
+
+  & > span {
+    @mixin contentNormal bold;
+
+    color: var(--color-maastricht-blue);
+    display: block;
+    margin-bottom: 12px;
+  }
+}
+
+.result {
+  margin: 40px 0;
+
+  & .textarea {
+    background: var(--color-console-background) !important;
+    color: var(--color-console-text) !important;
+  }
+}
+
+.textarea {
+  resize: none;
+}
+
 .buttonsHolder {
   align-items: center;
   display: flex;

diff --git a/src/components/signMessage/signMessageInput.js b/src/components/signMessage/signMessageInput.js
@@ -39,14 +39,15 @@ class SignMessageInput extends React.Component {
     return (
       <section>
         <div className={styles.header}>
-          <span className={styles.step}>{t('Step 1/2')}</span>
+          <span className={styles.step}>{t('Step 1 / 2')}</span>
           <h1>{t('Sign a message')}</h1>
           <p>{t('You can use your passphrase to sign a message. This signed message can prove that you are the owner of the account, since only your passphrase can produce it. We reccomend including date & time or a specific keyword.')}</p>
         </div>
         <div>
           <label className={styles.fieldGroup}>
             <span>{t('Message')}</span>
             <AutoresizeTextarea
+              className={styles.textarea}
               name={'message'}
               onChange={this.handleChange}
               value={message.value} />