Merge pull request #909 from LiskHQ/880-styling-of-sign-message

Styling of sign message - Closes #880

i18n/locales/en/common.json

@@ -249,7 +249,6 @@
   "Sidechains will revolutionize the way decentralised apps are developed. Here you will be able to find hosts, and monitor your sidechains soon.": "Sidechains will revolutionize the way decentralised apps are developed. Here you will be able to find hosts, and monitor your sidechains soon.",
   "Sign a message": "Sign a message",
   "Sign in": "Sign in",
-  "Signing a message with this tool indicates ownership of a privateKey (secret) and provides a level of proof that you are the owner of the key.": "Signing a message with this tool indicates ownership of a privateKey (secret) and provides a level of proof that you are the owner of the key.",
   "Sorry": "Sorry",
   "Specify Amount": "Specify Amount",
   "Standby": "Standby",
@@ -272,6 +271,7 @@
   "This is not reversible.": "This is not reversible.",
   "This is your Lisk ID": "This is your Lisk ID",
   "This process should take only 10 seconds but may take up to 15 minutes.": "This process should take only 10 seconds but may take up to 15 minutes.",
+  "This signed message can prove that you are the owner of the account, since only your passphrase can produce it.": "This signed message can prove that you are the owner of the account, since only your passphrase can produce it.",
   "Timeout": "Timeout",
   "To recover you can": "To recover you can",
   "Toggle full screen": "Toggle full screen",
@@ -307,6 +307,7 @@
   "Votes submitted": "Votes submitted",
   "Voting": "Voting",
   "Wallet": "Wallet",
+  "We recommend including date & time or a specific keyword.": "We recommend including date & time or a specific keyword.",
   "Welcome to Lisk Hub": "Welcome to Lisk Hub",
   "What is Lisk ID?": "What is Lisk ID?",
   "What's New...": "What's New...",
@@ -322,6 +323,7 @@
   "You can now use Lisk Hub.<br": {
     " If you want to repeat the onboarding, navigate to \"Settings\" on the sidebar.": "You can now use Lisk Hub.<br> If you want to repeat the onboarding, navigate to \"Settings\" on the sidebar."
   },
+  "You can use your passphrase to sign a message. ": "You can use your passphrase to sign a message. ",
   "You have already registered as a delegate.": "You have already registered as a delegate.",
   "You only need to do this once for each Lisk ID.": "You only need to do this once for each Lisk ID.",
   "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.": "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.",

src/components/app/variables.css

@@ -107,6 +107,8 @@ or "warn/action" ineastd of "red/green"
   --color-grayscale-light: #ccd9e4;
   --color-grayscale-mobile-background: #f9fbfd;
   --color-grayscale-darker-mobile-background: #eff4f9;
+  --color-console-text: #9bf436;
+  --color-console-background: #06213b;
   --color-white: #fff;
   --color-error: #da1d00;
   --color-action-dark: #c80039;

src/components/signMessage/confirmMessage.css

@@ -6,7 +6,9 @@
 }
 
 .address {
-  padding: 15px 48px;
+  padding: 15px 32px;
+  font-family: var(--content-font);
+  font-weight: 600;
 }
 
 .wrapper {
@@ -29,6 +31,7 @@
   }
 
   & .copyBorder {
+    margin-top: 48px;
     min-height: 55px;
     width: 250px;
     max-width: 100%;
@@ -82,14 +85,14 @@
 }
 
 .result {
-  padding: 20px;
+  padding: 20px 180px;
   background-color: var(--color-form-bg);
 
   & textarea {
-    background: #333;
+    background: var(--color-console-background);
     border-radius: 5px;
     overflow: auto;
-    color: var(--color-white);
+    color: var(--color-console-text);
     font-family: monospace;
     padding: 12px 24px;
     height: 230px !important;

src/components/signMessage/signMessage.js

@@ -15,7 +15,9 @@ class SignMessage extends React.Component {
   render() {
     const { account, t, history } = this.props;
     const header = t('Sign a message');
-    const message = t('Signing a message with this tool indicates ownership of a privateKey (secret) and provides a level of proof that you are the owner of the key.');
+    const message = t('You can use your passphrase to sign a message. ') +
+      t('This signed message can prove that you are the owner of the account, since only your passphrase can produce it.') +
+      t('We recommend including date & time or a specific keyword.');
 
     return (
       <Box className={`${styles.hasPaddingTop} ${styles.signMessage}`}>