From 77fa067d4be1af8b184fcfb0c646e58a698cc7b4 Mon Sep 17 00:00:00 2001 From: michaeltomasik Date: Tue, 12 Jun 2018 09:13:18 +0200 Subject: [PATCH 1/4] :nail_care: Apply correct styles and texts to signedMessage --- i18n/locales/en/common.json | 2 +- src/components/signMessage/confirmMessage.css | 7 +++++-- src/components/signMessage/confirmMessage.js | 2 +- src/components/signMessage/signMessage.js | 4 +++- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index dde1ae8daf..5347ad0376 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -249,7 +249,7 @@ "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.", + "Sign in with the passphrase to encrypt with": "Sign in with the passphrase to encrypt with", "Sorry": "Sorry", "Specify Amount": "Specify Amount", "Standby": "Standby", diff --git a/src/components/signMessage/confirmMessage.css b/src/components/signMessage/confirmMessage.css index b83ddf44ad..11ecfad26b 100644 --- a/src/components/signMessage/confirmMessage.css +++ b/src/components/signMessage/confirmMessage.css @@ -6,7 +6,9 @@ } .address { - padding: 15px 48px; + padding: 15px 32px; + font-family: 'Open Sans'; + font-weight: 600; } .wrapper { @@ -29,6 +31,7 @@ } & .copyBorder { + margin-top: 48px; min-height: 55px; width: 250px; max-width: 100%; @@ -82,7 +85,7 @@ } .result { - padding: 20px; + padding: 20px 180px; background-color: var(--color-form-bg); & textarea { diff --git a/src/components/signMessage/confirmMessage.js b/src/components/signMessage/confirmMessage.js index da6a11fd94..bf7df62978 100644 --- a/src/components/signMessage/confirmMessage.js +++ b/src/components/signMessage/confirmMessage.js @@ -65,7 +65,7 @@ class ConfirmMessage extends React.Component {
-

{this.props.t('Please sign in with your passphrase')}

+

{this.props.t('Sign in with the passphrase to encrypt with')}

{this.props.t('Your signed message')}

diff --git a/src/components/signMessage/signMessage.js b/src/components/signMessage/signMessage.js index f7e4946139..f1abdfb7e2 100644 --- a/src/components/signMessage/signMessage.js +++ b/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 encrypt a message. ' + + 'This encrypted message can prove that you are the owner of the account, ' + + 'since only your passphrase can produce it. We recommend including date & time or a specific keyword.'); return ( From bb040503ca49083631da5e9d811e1c08395ce4d9 Mon Sep 17 00:00:00 2001 From: michaeltomasik Date: Wed, 13 Jun 2018 10:19:25 +0200 Subject: [PATCH 2/4] :recycle: Refactor of signedMessage --- i18n/locales/en/common.json | 5 ++++- src/components/signMessage/confirmMessage.css | 6 +++--- src/components/signMessage/confirmMessage.js | 2 +- src/components/signMessage/signMessage.js | 6 +++--- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 5347ad0376..9a90716360 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -164,6 +164,7 @@ "Name too long": "Name too long", "Names are unique. Once you register the name, it can't be changed.": "Names are unique. Once you register the name, it can't be changed.", "New version available": "New version available", + "NewsFeed": "NewsFeed", "Next": "Next", "No Updates": "No Updates", "No activity yet": "No activity yet", @@ -249,7 +250,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", - "Sign in with the passphrase to encrypt with": "Sign in with the passphrase to encrypt with", "Sorry": "Sorry", "Specify Amount": "Specify Amount", "Standby": "Standby", @@ -272,6 +272,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, ": "This signed message can prove that you are the owner of the account, ", "Timeout": "Timeout", "To recover you can": "To recover you can", "Toggle full screen": "Toggle full screen", @@ -322,6 +323,7 @@ "You can now use Lisk Hub. 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.", @@ -345,6 +347,7 @@ "checking availability": "checking availability", "if the problem persists": "if the problem persists", "missed": "missed", + "since only your passphrase can produce it. We recommend including date & time or a specific keyword.": "since only your passphrase can produce it. We recommend including date & time or a specific keyword.", "with a 2nd passphrase": "with a 2nd passphrase", "{{count}} delegate(s) selected to unvote": "{{count}} delegate selected to unvote", "{{count}} delegate(s) selected to unvote_plural": "{{count}} delegates selected to unvote", diff --git a/src/components/signMessage/confirmMessage.css b/src/components/signMessage/confirmMessage.css index 11ecfad26b..719f0fdcf6 100644 --- a/src/components/signMessage/confirmMessage.css +++ b/src/components/signMessage/confirmMessage.css @@ -7,7 +7,7 @@ .address { padding: 15px 32px; - font-family: 'Open Sans'; + font-family: var(--content-font); font-weight: 600; } @@ -89,10 +89,10 @@ background-color: var(--color-form-bg); & textarea { - background: #333; + background: #06213b; border-radius: 5px; overflow: auto; - color: var(--color-white); + color: #9bf436; font-family: monospace; padding: 12px 24px; height: 230px !important; diff --git a/src/components/signMessage/confirmMessage.js b/src/components/signMessage/confirmMessage.js index bf7df62978..da6a11fd94 100644 --- a/src/components/signMessage/confirmMessage.js +++ b/src/components/signMessage/confirmMessage.js @@ -65,7 +65,7 @@ class ConfirmMessage extends React.Component {
-

{this.props.t('Sign in with the passphrase to encrypt with')}

+

{this.props.t('Please sign in with your passphrase')}

{this.props.t('Your signed message')}

diff --git a/src/components/signMessage/signMessage.js b/src/components/signMessage/signMessage.js index f1abdfb7e2..a399681183 100644 --- a/src/components/signMessage/signMessage.js +++ b/src/components/signMessage/signMessage.js @@ -15,9 +15,9 @@ class SignMessage extends React.Component { render() { const { account, t, history } = this.props; const header = t('Sign a message'); - const message = t('You can use your passphrase to encrypt a message. ' + - 'This encrypted message can prove that you are the owner of the account, ' + - 'since only your passphrase can produce it. We recommend including date & time or a specific keyword.'); + 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, ') + + t('since only your passphrase can produce it. We recommend including date & time or a specific keyword.'); return ( From 06c06c77f6525210575a5e4a0fb0789232510c18 Mon Sep 17 00:00:00 2001 From: michaeltomasik Date: Mon, 18 Jun 2018 08:19:14 +0200 Subject: [PATCH 3/4] :recycle: Split string into sentences in signMessage & put color to variable --- i18n/locales/en/common.json | 5 ++--- src/components/app/variables.css | 1 + src/components/signMessage/confirmMessage.css | 2 +- src/components/signMessage/signMessage.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 9a90716360..29b5e80414 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -164,7 +164,6 @@ "Name too long": "Name too long", "Names are unique. Once you register the name, it can't be changed.": "Names are unique. Once you register the name, it can't be changed.", "New version available": "New version available", - "NewsFeed": "NewsFeed", "Next": "Next", "No Updates": "No Updates", "No activity yet": "No activity yet", @@ -272,7 +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, ": "This signed message can prove that you are the owner of the account, ", + "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", @@ -308,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...", @@ -347,7 +347,6 @@ "checking availability": "checking availability", "if the problem persists": "if the problem persists", "missed": "missed", - "since only your passphrase can produce it. We recommend including date & time or a specific keyword.": "since only your passphrase can produce it. We recommend including date & time or a specific keyword.", "with a 2nd passphrase": "with a 2nd passphrase", "{{count}} delegate(s) selected to unvote": "{{count}} delegate selected to unvote", "{{count}} delegate(s) selected to unvote_plural": "{{count}} delegates selected to unvote", diff --git a/src/components/app/variables.css b/src/components/app/variables.css index 71a8c09083..749caaa979 100644 --- a/src/components/app/variables.css +++ b/src/components/app/variables.css @@ -107,6 +107,7 @@ or "warn/action" ineastd of "red/green" --color-grayscale-light: #ccd9e4; --color-grayscale-mobile-background: #f9fbfd; --color-grayscale-darker-mobile-background: #eff4f9; + --color-signMessage-console: #9bf436; --color-white: #fff; --color-error: #da1d00; --color-action-dark: #c80039; diff --git a/src/components/signMessage/confirmMessage.css b/src/components/signMessage/confirmMessage.css index 719f0fdcf6..70cbdbd959 100644 --- a/src/components/signMessage/confirmMessage.css +++ b/src/components/signMessage/confirmMessage.css @@ -92,7 +92,7 @@ background: #06213b; border-radius: 5px; overflow: auto; - color: #9bf436; + color: var(--color-signMessage-console); font-family: monospace; padding: 12px 24px; height: 230px !important; diff --git a/src/components/signMessage/signMessage.js b/src/components/signMessage/signMessage.js index a399681183..5a8ec8ac3c 100644 --- a/src/components/signMessage/signMessage.js +++ b/src/components/signMessage/signMessage.js @@ -16,8 +16,8 @@ class SignMessage extends React.Component { const { account, t, history } = this.props; const header = t('Sign a message'); 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, ') + - t('since only your passphrase can produce it. We recommend including date & time or a specific keyword.'); + 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 ( From 4a68b73b1b38edb34b58d2ae2ee0a97ee2fe430c Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Mon, 18 Jun 2018 08:43:05 +0200 Subject: [PATCH 4/4] Use css variables for console text and background --- src/components/app/variables.css | 3 ++- src/components/signMessage/confirmMessage.css | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/app/variables.css b/src/components/app/variables.css index 749caaa979..d7e8896286 100644 --- a/src/components/app/variables.css +++ b/src/components/app/variables.css @@ -107,7 +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-signMessage-console: #9bf436; + --color-console-text: #9bf436; + --color-console-background: #06213b; --color-white: #fff; --color-error: #da1d00; --color-action-dark: #c80039; diff --git a/src/components/signMessage/confirmMessage.css b/src/components/signMessage/confirmMessage.css index 70cbdbd959..c6d030b32f 100644 --- a/src/components/signMessage/confirmMessage.css +++ b/src/components/signMessage/confirmMessage.css @@ -89,10 +89,10 @@ background-color: var(--color-form-bg); & textarea { - background: #06213b; + background: var(--color-console-background); border-radius: 5px; overflow: auto; - color: var(--color-signMessage-console); + color: var(--color-console-text); font-family: monospace; padding: 12px 24px; height: 230px !important;