Merge pull request #936 from LiskHQ/844-network-switcher-new-design

Implement new design for network switcher - Closes #844
LiskHQ · Aug 13, 2018 · 6e814b5 · 6e814b5
2 parents 0f6406b + 992fa87
commit 6e814b5
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 52 deletions.
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
@@ -42,6 +42,7 @@
   "Check for updates...": "Check for updates...",
   "Check spelling – name does not exist on mainnet": "Check spelling – name does not exist on mainnet",
   "Choose": "Choose",
+  "Choose Network": "Choose Network",
   "Choose a name": "Choose a name",
   "Choose an ID": "Choose an ID",
   "Choose your name": "Choose your name",
@@ -94,6 +95,7 @@
   "Dowload started": "Dowload started",
   "Drag to reveal": "Drag to reveal",
   "Edit": "Edit",
+  "Enter IP or domain address of the node": "Enter IP or domain address of the node",
   "Enter a Lisk ID": "Enter a Lisk ID",
   "Enter your 1st passphrase to confirm": "Enter your 1st passphrase to confirm",
   "Enter your 2nd passphrase": "Enter your 2nd passphrase",
@@ -117,7 +119,6 @@
   "Get to your Dashboard": "Get to your Dashboard",
   "Go back to Dashboard": "Go back to Dashboard",
   "Go to \"Help\" on your Sidebar to start the onboarding whenever you need.": "Go to \"Help\" on your Sidebar to start the onboarding whenever you need.",
-  "Go to lisk.io": "Go to lisk.io",
   "Go to your Dashboard": "Go to your Dashboard",
   "Got it": "Got it",
   "Great!\nYou’re almost finished": "Great!\nYou’re almost finished",
@@ -181,13 +182,13 @@
   "Name is available": "Name is available",
   "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.",
+  "Network to connect to": "Network to connect to",
   "New to Hub? Take a tour": "New to Hub? Take a tour",
   "New version available": "New version available",
   "Next": "Next",
   "No Updates": "No Updates",
   "No activity yet": "No activity yet",
   "No results": "No results",
-  "Node address": "Node address",
   "Not enough LSK": "Not enough LSK",
   "Not voted": "Not voted",
   "Note: After registration completes,": "Note: After registration completes,",
@@ -255,7 +256,6 @@
   "See #help-desk channel": "See #help-desk channel",
   "See all transactions": "See all transactions",
   "See more": "See more",
-  "Select a network": "Select a network",
   "Select all": "Select all",
   "Select the missing words to confirm": "Select the missing words to confirm",
   "Selection": "Selection",

diff --git a/src/components/login/layout.css b/src/components/login/layout.css
@@ -27,8 +27,13 @@
   height: 100%;
 }
 
+header {
+  width: 100%;
+}
+
 .outTaken {
   position: absolute;
+  width: 100%;
 }
 
 .loading {

diff --git a/src/components/login/login.css b/src/components/login/login.css
@@ -48,7 +48,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    margin-top: 50px;
+    margin-top: 32px;
 
     & .forwardToLink {
       color: var(--color-primary-standard);
@@ -66,20 +66,6 @@
     }
   }
 
-  /* @todo remove these with #3 */
-
-  & .outTaken {
-    top: 100px;
-
-    & + .outTaken {
-      top: 150px;
-
-      & + .outTaken {
-        top: 200px;
-      }
-    }
-  }
-
   &.focused {
     transform: translateZ(0);
 

diff --git a/src/components/login/login.js b/src/components/login/login.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
-import Dropdown from 'react-toolbox/lib/dropdown';
 import i18next from 'i18next';
-import { FontIcon } from '../fontIcon';
+import Dropdown from '../toolbox/dropdown/dropdown';
 import Input from '../toolbox/inputs/input';
 import { PrimaryButton } from '../toolbox/buttons/button';
 import { extractAddress } from '../../utils/account';
@@ -150,44 +149,41 @@ class Login extends React.Component {
   }
 
   render() {
+    const networkList = [{ label: this.props.t('Choose Network'), disabled: true }, ...this.networks];
     return (this.props.account.loading ?
       <div className={styles.loadingWrapper}></div> :
       <Box className={styles.wrapper}>
         <section className={`${styles.login} ${styles[this.state.passInputState]}`}>
           <section className={styles.table}>
             <header>
-              <a className={styles.forwardToLink} href='https://lisk.io' target='_blank' rel='noopener noreferrer'>
-                <span className={styles.label}>{this.props.t('Go to lisk.io')}</span>
-                <FontIcon className={styles.icon}>arrow-right</FontIcon>
-              </a>
-            </header>
-            <div className={`${styles.tableCell} text-left`}>
-              <h2>{this.props.t('Sign in')}</h2>
-              <form onSubmit={this.onFormSubmit.bind(this)}>
-                {this.showNetworkOptions()
-                  ? <div className={styles.outTaken}>
+              {this.showNetworkOptions()
+                ? <div>
                     <Dropdown
                       auto={false}
-                      source={this.networks}
+                      source={networkList}
                       onChange={this.changeHandler.bind(this, 'network')}
-                      label={this.props.t('Select a network')}
+                      label={this.props.t('Network to connect to')}
                       value={this.state.network}
                       className='network'
                     />
                     {
                       this.state.network === networks.customNode.code &&
                       <Input type='text'
-                        label={this.props.t('Node address')}
-                        name='address'
-                        className={`address ${styles.outTaken}`}
-                        theme={styles}
-                        value={this.state.address}
-                        error={this.state.addressValidity}
-                        onChange={this.changeHandler.bind(this, 'address')}/>
+                             label={this.props.t('Enter IP or domain address of the node')}
+                             name='address'
+                             className={`address ${styles.outTaken}`}
+                             theme={styles}
+                             value={this.state.address}
+                             error={this.state.addressValidity}
+                             onChange={this.changeHandler.bind(this, 'address')}/>
                     }
-                  </div>
-                  : ''
-                }
+                </div>
+                : null
+              }
+            </header>
+            <div className={`${styles.tableCell} text-left`}>
+              <h2>{this.props.t('Sign in')}</h2>
+              <form onSubmit={this.onFormSubmit.bind(this)}>
                 <PassphraseInput label={this.props.t('Enter your passphrase')}
                   className='passphrase'
                   onFocus={this.passFocused.bind(this)}

diff --git a/src/components/toolbox/dropdown/dropdown.css b/src/components/toolbox/dropdown/dropdown.css
@@ -0,0 +1,73 @@
+@import '../../app/variables.css';
+
+:root {
+  --dropdown-box-shadow: 0 8px 16px 0 rgba(29, 72, 119, 0.16);
+  --dropdown-list-hover-color: rgba(204, 217, 228, 0.2);
+}
+
+.dropdown {
+  & ul {
+    box-shadow: var(--dropdown-box-shadow) !important;
+    width: 160px;
+    margin-left: 2px;
+  }
+
+  & li,
+  & .selected {
+    padding: 12px;
+    color: var(--color-primary-standard);
+    font-weight: var(--font-weight-semi-bold);
+  }
+
+  & .values {
+    & li:hover:not(:first-child) {
+      background-color: var(--dropdown-list-hover-color) !important;
+    }
+  }
+
+  & .inputLabel {
+    color: var(--color-grayscale-dark) !important;
+    font-weight: var(--font-weight-semi-bold);
+  }
+
+  & .inputFilled {
+    margin-top: 10px;
+    color: var(--color-primary-standard) !important;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  & .value {
+    padding-bottom: 0px;
+
+    &::after {
+      border: none;
+    }
+  }
+
+  & .disabled {
+    cursor: default !important;
+    color: var(--color-primary-standard) !important;
+    font-size: 12px;
+    font-weight: var(--font-weight-bold);
+    line-height: 27px;
+  }
+}
+
+.dropdown.active {
+  & .value {
+    opacity: 0;
+  }
+}
+
+.arrow {
+  position: absolute;
+  left: 95px;
+  top: 35px;
+  color: var(--color-primary-standard);
+  cursor: pointer;
+}
+
+input:-webkit-autofill {
+  box-shadow: inset 0 0 0px 9999px var(--color-white);
+}
diff --git a/src/components/toolbox/dropdown/dropdown.js b/src/components/toolbox/dropdown/dropdown.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Dropdown from 'react-toolbox/lib/dropdown';
+import { themr } from 'react-css-themr';
+import { FontIcon } from '../../fontIcon';
+import theme from './dropdown.css';
+
+class ToolBoxDropdown extends React.Component {
+  render() {
+    return (
+        <Dropdown
+          {...this.props}
+          theme={this.props.theme}
+          innerRef={(ref) => { this.dropdownEl = ref; }}>
+            <FontIcon
+              className={theme.arrow}
+               onClick={/* istanbul ignore next */ () => {
+                 this.dropdownEl.open({ target: this.dropdownEl.inputNode.inputNode });
+               }}
+              value='arrow-down'/>
+        </Dropdown>
+    );
+  }
+}
+
+export default themr('TBDropdown', theme)(ToolBoxDropdown);
diff --git a/src/components/toolbox/inputs/input.css b/src/components/toolbox/inputs/input.css
@@ -30,6 +30,10 @@
   color: var(--input-color);
 }
 
+.inputElement {
+  margin-top: 1px;
+}
+
 .label {
   color: var(--input-color);
   font-size: var(--input-font-size);

diff --git a/test/e2e/login.feature b/test/e2e/login.feature
@@ -5,7 +5,7 @@ Feature: Login
     Then I should see no "network"
     When I'm on login page
     And I fill in passphrase of "genesis" to "passphrase" field
-    And I select option no. 1 from "network" select
+    And I select option no. 2 from "network" select
     And I click "login button"
     Then I should be logged in as "genesis" account
     And I should see no "peer network"
@@ -22,7 +22,7 @@ Feature: Login
     Then I should see no "network"
     When I'm on login page
     Then I fill in passphrase of "genesis" to "passphrase" field
-    And I select option no. 2 from "network" select
+    And I select option no. 3 from "network" select
     And I click "login button"
     Then I should be logged in as "genesis" account
     And I should see text "testnet" in "peer network" element
@@ -36,7 +36,7 @@ Feature: Login
     Then I should see no "network"
     When I'm on login page
     Then I fill in passphrase of "genesis" to "passphrase" field
-    And I select option no. 3 from "network" select
+    And I select option no. 4 from "network" select
     When I fill in "https://testnet.lisk.io" to "address" field
     And I click "login button"
     Then I should be logged in as "genesis" account

diff --git a/test/e2e/savedAccounts.feature b/test/e2e/savedAccounts.feature
@@ -30,7 +30,6 @@ Feature: Saved Accounts
     When I click "saved accounts" in main menu
     And I click "add lisk id card"
     And I select option no. 3 from "network" select
-    When I fill in "https://testnet.lisk.io" to "address" field
     Then I fill in passphrase of "empty account" to "passphrase" field
     And I click "login button"
     And I click "saved accounts" in main menu
@@ -53,28 +52,24 @@ Feature: Saved Accounts
   Scenario: should save accounts only once
     When I go to "/"
     And I select option no. 3 from "network" select
-    When I fill in "https://testnet.lisk.io" to "address" field
     Then I fill in passphrase of "empty account" to "passphrase" field
     And I click "login button"
     Then I should be logged in as "empty account" account
     When I click "saved accounts" in main menu
     And I click "add lisk id card"
     And I select option no. 3 from "network" select
-    When I fill in "https://testnet.lisk.io" to "address" field
     Then I fill in passphrase of "genesis" to "passphrase" field
     And I click "login button"
     And I click "saved accounts" in main menu
     Then I should see 2 instances of "saved account card"
     When I click "add lisk id card"
     And I select option no. 3 from "network" select
-    When I fill in "https://testnet.lisk.io" to "address" field
     Then I fill in passphrase of "empty account" to "passphrase" field
     And I click "login button"
     When I click "saved accounts" in main menu
     Then I should see 2 instances of "saved account card"
     And I click "add lisk id card"
     And I select option no. 3 from "network" select
-    When I fill in "https://testnet.lisk.io" to "address" field
     Then I fill in passphrase of "genesis" to "passphrase" field
     And I click "login button"
     And I click "saved accounts" in main menu

diff --git a/test/e2e/step_definitions/generic.step.js b/test/e2e/step_definitions/generic.step.js
@@ -159,7 +159,7 @@ defineSupportCode(({
     const passphrase = browser.params.useTestnetPassphrase
       ? browser.params.testnetPassphrase
       : accounts[accountName].passphrase;
-    const networkIndex = browser.params.network === 'customNode' ? 3 : 2;
+    const networkIndex = browser.params.network === 'customNode' ? 4 : 3;
     browser.sleep(100);
 
     const checkImLoggedIn = () => {

diff --git a/test/integration/login.test.js b/test/integration/login.test.js
@@ -154,7 +154,7 @@ describe('@integration: Login', () => {
   describe('Scenario: should show toast when trying to connect to an unavailable custom node', () => {
     step('Given I\'m on login page', () => setupStep(stubApisScenarioInvalidNode));
     step(`When I fill "${passphrase}" into "passphrase" field`, () => helper.fillInputField(passphrase, 'passphrase'));
-    step('And I select option no. 3 from "network" select', () => helper.selectOptionItem(3, 'network'));
+    step('And I select option no. 3 from "network" select', () => helper.selectOptionItem(4, 'network'));
     step('And I clear "address" field', () => helper.fillInputField('', 'address'));
     step(`And I fill in "${localhostUrl}" to "address" field`, () => helper.fillInputField(localhostUrl, 'address'));
     step('And I click "login button"', () => helper.submitForm());