Merge pull request #2555 from LiskHQ/2412-fix-ux-issues-in-the-sign-i…

…n-page

Fix UX issues in the sign in page - closes #2412

i18n/locales/en/common.json

@@ -11,7 +11,6 @@
   "64 bytes left": "64 bytes left",
   "A bit more. Make sure to type at least 3 characters.": "A bit more. Make sure to type at least 3 characters.",
   "A great way to start is to top up your account with some {{value}} tokens.": "A great way to start is to top up your account with some {{value}} tokens.",
-  "A passphrase is a combination of a username and password. You saved your passphrase when registering your Lisk account.": "A passphrase is a combination of a username and password. You saved your passphrase when registering your Lisk account.",
   "About": "About",
   "Accept": "Accept",
   "Access your account by scanning the QR code below with the Lisk Mobile App:": "Access your account by scanning the QR code below with the Lisk Mobile App:",
@@ -105,7 +104,7 @@
   "Copy the address or scan the QR code, to easily request BTC tokens from Lisk Hub or Lisk Mobile users.": "Copy the address or scan the QR code, to easily request BTC tokens from Lisk Hub or Lisk Mobile users.",
   "Copy to clipboard": "Copy to clipboard",
   "Create an account": "Create an account",
-  "Create an account or sign in to manage your LSK, vote for who secures the network or become a delegate.": "Create an account or sign in to manage your LSK, vote for who secures the network or become a delegate.",
+  "Create it now": "Create it now",
   "Currency": "Currency",
   "Current version is up-to-date.": "Current version is up-to-date.",
   "Custom Node": "Custom Node",
@@ -133,10 +132,12 @@
   "Devnet": "Devnet",
   "Discord": "Discord",
   "Discreet Mode": "Discreet Mode",
-  "Discreet Mode Disabled": "Discreet Mode Disabled",
-  "Discreet Mode Enabled": "Discreet Mode Enabled",
   "Dive into the details": "Dive into the details",
   "Does the problem still persist?": "Does the problem still persist?",
+  "Don’t be a stranger! Connect with our worldwide community.": "Don’t be a stranger! Connect with our worldwide community.",
+  "Don’t feel like signing in now?": "Don’t feel like signing in now?",
+  "Don’t have a Lisk account yet? ": "Don’t have a Lisk account yet? ",
+  "Don’t worry, we’re here to help": "Don’t worry, we’re here to help",
   "Download": "Download",
   "Download started!": "Download started!",
   "Downvotes": "Downvotes",
@@ -150,6 +151,7 @@
   "Eg. {{value}}": "Eg. {{value}}",
   "Enable BTC": "Enable BTC",
   "Enable a network switcher that lets you select testnet or custom node when logging in.": "Enable a network switcher that lets you select testnet or custom node when logging in.",
+  "Enable discreet mode when signed in (optional)": "Enable discreet mode when signed in (optional)",
   "English": "English",
   "Enter URL of the *.js file with the extension": "Enter URL of the *.js file with the extension",
   "Enter the entire signature generated by Lisk Hub": "Enter the entire signature generated by Lisk Hub",
@@ -168,7 +170,6 @@
   "Filter by name or address...": "Filter by name or address...",
   "Filter by name...": "Filter by name...",
   "Filtered results: {{results}}": "Filtered results: {{results}}",
-  "For longer passphrases, simply paste them in the first input field.": "For longer passphrases, simply paste them in the first input field.",
   "Forged": "Forged",
   "Found several devices, choose the one you’d like to access": "Found several devices, choose the one you’d like to access",
   "Generated by": "Generated by",
@@ -183,19 +184,17 @@
   "Go to settings": "Go to settings",
   "Got it, thanks!": "Got it, thanks!",
   "Got the Lisk Mobile App?": "Got the Lisk Mobile App?",
-  "Guest mode": "Guest mode",
   "Height": "Height",
   "Help": "Help",
   "Help improve Lisk Hub by allowing Lisk to gather anonymous usage data used for analytical purposes.": "Help improve Lisk Hub by allowing Lisk to gather anonymous usage data used for analytical purposes.",
   "Here’s your address! You can now securely store and manage your LSK tokens.": "Here’s your address! You can now securely store and manage your LSK tokens.",
+  "Hide": "Hide",
   "Hide balance and transactions amounts": "Hide balance and transactions amounts",
-  "Hide passphrase": "Hide passphrase",
   "Hide the QR code": "Hide the QR code",
   "High": "High",
   "How is Lisk transparent?": "How is Lisk transparent?",
   "How we recommend to store it.": "How we recommend to store it.",
   "I have read and agree to the Terms of Use": "I have read and agree to the Terms of Use",
-  "If you are typing out your passphrase you can use tab or space to go to the next field.": "If you are typing out your passphrase you can use tab or space to go to the next field.",
   "If you see this field, you have registered a second passphrase in past and it is required to confirm transactions.": "If you see this field, you have registered a second passphrase in past and it is required to confirm transactions.",
   "If you would like to ensure the ownership of another account, you can send a message via Lisk Hub and request the recipient to sign it.": "If you would like to ensure the ownership of another account, you can send a message via Lisk Hub and request the recipient to sign it.",
   "If you’re not sure how to do this please follow the": "If you’re not sure how to do this please follow the",
@@ -272,7 +271,6 @@
   "Name is already taken!": "Name is already taken!",
   "Network switcher": "Network switcher",
   "New bookmark": "New bookmark",
-  "New to Lisk? ": "New to Lisk? ",
   "Next": "Next",
   "Nickname is too long.": "Nickname is too long.",
   "No Bookmarks added yet": "No Bookmarks added yet",
@@ -303,9 +301,10 @@
   "Pending...": "Pending...",
   "Personalize each transaction with a custom message. Look up its value in a fiat currency of your choice.": "Personalize each transaction with a custom message. Look up its value in a fiat currency of your choice.",
   "Please check the address": "Please check the address",
-  "Please check the highlighted words": "Please check the highlighted words",
+  "Please check the highlighted word and make sure it’s correct.": "Please check the highlighted word and make sure it’s correct.",
   "Please select the account you’d like to sign in to or": "Please select the account you’d like to sign in to or",
   "Please sign in": "Please sign in",
+  "Please type in or paste your passphrase below.": "Please type in or paste your passphrase below.",
   "Please use the last not-initialized account before creating a new one!": "Please use the last not-initialized account before creating a new one!",
   "Previous": "Previous",
   "Print it on paper and store it in a safe place": "Print it on paper and store it in a safe place",
@@ -374,14 +373,14 @@
   "Settings": "Settings",
   "Settings saved!": "Settings saved!",
   "Sharing link": "Sharing link",
-  "Show passphrase": "Show passphrase",
+  "Show": "Show",
   "Show the QR code": "Show the QR code",
   "Sign a message": "Sign a message",
   "Sign back in": "Sign back in",
   "Sign in": "Sign in",
   "Sign in to view recent transactions": "Sign in to view recent transactions",
+  "Sign in with a Passphrase": "Sign in with a Passphrase",
   "Sign in with a hardware wallet": "Sign in with a hardware wallet",
-  "Sign in with a passphrase": "Sign in with a passphrase",
   "Sign out": "Sign out",
   "Signature": "Signature",
   "Signed Message": "Signed Message",
@@ -475,7 +474,6 @@
   "Welcome to Lisk Delegates!": "Welcome to Lisk Delegates!",
   "Welcome to the Lisk Hub!": "Welcome to the Lisk Hub!",
   "What is a Lisk ID?": "What is a Lisk ID?",
-  "What is a passphrase?": "What is a passphrase?",
   "What is your second passphrase?": "What is your second passphrase?",
   "What's New...": "What's New...",
   "Whoops, that page is gone.": "Whoops, that page is gone.",
@@ -487,7 +485,6 @@
   "YYYY": "YYYY",
   "Yesterday": "Yesterday",
   "You are disconnected": "You are disconnected",
-  "You can explore Lisk network using Hub without signing in.": "You can explore Lisk network using Hub without signing in.",
   "You can learn more in our": "You can learn more in our",
   "You can print your passphrase and store it in a safe place. ": "You can print your passphrase and store it in a safe place. ",
   "You can share your Lisk ID with anyone you wish, but never reveal your passphrase to anyone as it would allow full access to your account.": "You can share your Lisk ID with anyone you wish, but never reveal your passphrase to anyone as it would allow full access to your account.",
@@ -499,7 +496,6 @@
   "You have cancelled the transaction on your hardware wallet. You can either continue or retry.": "You have cancelled the transaction on your hardware wallet. You can either continue or retry.",
   "You will be notified when your transaction is confirmed.": "You will be notified when your transaction is confirmed.",
   "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.": "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.",
-  "You won't be able to make any transactions and all the content will be in read-only mode.": "You won't be able to make any transactions and all the content will be in read-only mode.",
   "You'll find it in your Wallet and it will be confirmed in a matter of minutes.": "You'll find it in your Wallet and it will be confirmed in a matter of minutes.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
   "Your Lisk ID is how you recognize and interact with your unique Lisk account, think of it as your email.": "Your Lisk ID is how you recognize and interact with your unique Lisk account, think of it as your email.",
@@ -520,7 +516,6 @@
   "ie. 192.168.0.1": "ie. 192.168.0.1",
   "ie. Lisker123": "ie. Lisker123",
   "ie. peter_pan": "ie. peter_pan",
-  "or": "or",
   "secondPassphraseInfoParagraph": "After registration, your second passphrase will be <strong>required</strong> when <strong>confirming every transaction</strong> and every vote. You are responsible for safekeeping your second passphrase. No one can restore it, not even Lisk. Once activated a second passphrase <strong>can’t be turned off.</strong>",
   "to": "to",
   "{{deviceModel}} connected! Open the Lisk app on the device": "{{deviceModel}} connected! Open the Lisk app on the device",

src/app/index.test.js

@@ -7,7 +7,6 @@ import configureStore from 'redux-mock-store';
 import { I18nextProvider } from 'react-i18next';
 import i18n from '../i18n'; // initialized i18next instance
 import App from '.';
-import Splashscreen from '../components/screens/splashscreen/splashscreen';
 import Login from '../components/screens/login/login';
 import TransactionsDashboard from '../components/shared/transactionDashboard';
 import routes from '../constants/routes';
@@ -24,8 +23,7 @@ const addRouter = Component => (props, path) =>
   </Provider>);
 
 const publicComponent = [
-  { route: '/', component: Splashscreen },
-  { route: '/login', component: Login },
+  { route: '/', component: Login },
 ];
 
 const privateComponent = [

src/app/variables.css

@@ -112,7 +112,7 @@ or "warn/action" ineastd of "red/green"
   --overlay-color: rgba(255, 255, 255, 0.8);
   --dark-border-color: rgba(0, 0, 0, 0.08);
   --primary-background-color: color(var(--color-ultramarine-blue) a(8%));
-  --error-background-color: color(var(--color-burnt-sienna) a(8%));
+  --error-background-color: var(--color-burnt-sienna);
   --color-dialog-mask: color(var(--color-maastricht-blue) a(52%));
   --color-primary-standard: var(--color-ultramarine-blue);
   --color-primary-light: #9db8fa;

src/components/screens/hwWalletLogin/hwWalletLogin.js

@@ -38,7 +38,7 @@ class HardwareWalletLogin extends React.Component {
   }
 
   goBack() {
-    this.props.history.push(routes.splashscreen.path);
+    this.props.history.push(routes.login.path);
   }
 
   render() {

src/components/screens/hwWalletLogin/loading.js

@@ -27,7 +27,7 @@ class Loading extends React.Component {
         <p>{t('Lisk Hub currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets')}</p>
         <LoadingIcon />
         <p>{t('Looking for a device...')}</p>
-        <Link to={routes.splashscreen.path}>
+        <Link to={routes.login.path}>
           <TertiaryButton>
             {t('Go back')}
           </TertiaryButton>

src/components/screens/hwWalletLogin/requestPin.test.js

@@ -87,7 +87,7 @@ describe('Request PIN Component', () => {
     expect(PK).toEqual('');
   });
 
-  it('Should go to splashscreen if do click in Go Back', () => {
+  it('Should go to Sign In if do click in Go Back', () => {
     wrapper.find('button.tertiary-btn').simulate('click');
     expect(props.goBack).toBeCalled();
   });

src/components/screens/hwWalletLogin/selectDevice.js

@@ -59,7 +59,7 @@ class SelectDevice extends React.Component {
         }
         </div>
 
-        <Link to={routes.splashscreen.path}>
+        <Link to={routes.login.path}>
           <TertiaryButton>
             {t('Go back')}
           </TertiaryButton>

src/components/screens/login/login.css

@@ -26,10 +26,23 @@
     width: 100%;
   }
 
-  & .button {
+  & .button,
+  & .hwLink {
     @mixin contentLargest bold;
 
     width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    & .hwWalletIcon {
+      margin-right: 15px;
+    }
+  }
+
+  & .hwLink {
+    margin-top: 24px;
   }
 
   & .backButton {
@@ -54,14 +67,15 @@
 
     display: flex;
     justify-content: center;
-    margin: 0 0 20px;
+    margin: 0 0 10px;
   }
 
   & > p {
-    @mixin contentLarge;
+    @mixin contentLargest;
 
     color: var(--color-slate-gray);
     margin: 0;
+    letter-spacing: 1px;
 
     & > a {
       margin: 0;
@@ -87,7 +101,7 @@
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  margin: 48px auto 40px;
+  margin: 30px auto 40px;
   max-width: 665px;
   width: 100%;
 
@@ -109,12 +123,16 @@
   }
 
   & .inputLabel {
-    @mixin contentNormal bold;
+    @mixin contentLargest bold;
 
-    align-items: center;
     color: var(--color-maastricht-blue);
-    display: flex;
-    margin: 0 0 9px 0;
+  }
+
+  & .inputText {
+    @mixin contentLargest;
+
+    color: var(--color-slate-gray);
+    margin: 8px 0 16px;
   }
 
   & .addressInput {
@@ -145,16 +163,20 @@
   }
 }
 
-.tooltip {
-  & :global(.tooltip-window) {
-    max-width: 464px;
-  }
-
-  & .tooltipText {
-    margin-bottom: 8px;
-  }
+.discreetMode {
+  margin-top: 16px;
 }
 
-.discreetMode {
-  margin-top: 20px;
+.exploreAsGuest {
+  @mixin contentLargest;
+
+  position: absolute;
+  bottom: 0;
+  color: var(--color-slate-gray);
+  margin: 0 0 32px;
+  letter-spacing: 0px;
+
+  & > a {
+    margin: 0 0 0 5px;
+  }
 }