Merge branch '0.1.0' into development

i18n/locales/en/common.json

@@ -88,19 +88,18 @@
   "LSK/BTC": "LSK/BTC",
   "Language": "Language",
   "Last 24 hours": "Last 24 hours",
+  "Last searches": "Last searches",
   "Last {{count}} days": "Last {{count}} day",
   "Last {{count}} days_plural": "Last {{count}} days",
   "Later": "Later",
   "Latest activity": "Latest activity",
-  "Latest search": "Latest search",
   "Learn how voting works": "Learn how voting works",
   "Learn more about Lisk sidechains": "Learn more about Lisk sidechains",
   "Lisk Chat": "Lisk Chat",
   "Lisk Explorer": "Lisk Explorer",
   "Lisk Forum": "Lisk Forum",
   "Lisk Hub": "Lisk Hub",
   "Lisk ID": "Lisk ID",
-  "Lisk IDs": "Lisk IDs",
   "Lisk Website": "Lisk Website",
   "Lock ID’s automatically after 10 minutes.": "Lock ID’s automatically after 10 minutes.",
   "Log in": "Log in",
@@ -132,6 +131,7 @@
   "Passphrase should have 12 words, entered passphrase has {{length}}": "Passphrase should have 12 words, entered passphrase has {{length}}",
   "Password": "Password",
   "Paste": "Paste",
+  "Pending": "Pending",
   "Perfect! You’re all set.": "Perfect! You’re all set.",
   "Please check the highlighted words": "Please check the highlighted words",
   "Please click Next, then move around your mouse randomly to generate a random passphrase.": "Please click Next, then move around your mouse randomly to generate a random passphrase.",
@@ -235,7 +235,7 @@
   "You have not forged any blocks yet": "You have not forged any blocks yet",
   "You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.": "You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
-  "Your favorite": "Your favorite",
+  "Your favorite Lisk IDs": "Your favorite Lisk IDs",
   "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.": "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.",
   "Zero not allowed": "Zero not allowed",
   "more": "more",

src/components/accountVisual/index.js

@@ -172,7 +172,7 @@ const getHashChunks = (address) => {
 class AccountVisual extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { isSBreakpoint: window.innerWidth < breakpoints.s };
+    this.state = { isSBreakpoint: window.innerWidth <= breakpoints.s };
   }
 
   shouldComponentUpdate(nextProps, state) {
@@ -181,7 +181,7 @@ class AccountVisual extends React.Component {
   }
 
   resizeWindow() {
-    this.setState({ isSBreakpoint: window.innerWidth < breakpoints.s });
+    this.setState({ isSBreakpoint: window.innerWidth <= breakpoints.s });
   }
 
   componentDidMount() {

src/components/app/index.js

@@ -59,7 +59,7 @@ class App extends React.Component {
                     <Route path={`${match.url}${routes.transaction.short}/:id`} component={SingleTransaction} />
                   </main>
                 )} />
-                <Route exact path={routes.register.url} component={Register} />
+                <Route path={`${routes.register.url}:dialog?`} component={Register} />
                 <Route path={`${routes.addAccount.url}:dialog?`} component={Login} />
                 <Route exact path={routes.login.url} component={Login} />
                 <Route path='*' component={NotFound} />

src/components/app/variables.css

@@ -66,7 +66,7 @@ or "warn/action" ineastd of "red/green"
   --font-size-h5-m: 16px;
 
   /* Font s breakpoint */
-  --font-size-h2-s: 25px;
+  --font-size-h2-s: 24px;
   --font-size-h5-s: 16px;
 
   /*************************
@@ -135,6 +135,9 @@ or "warn/action" ineastd of "red/green"
   *************************/
   --box-padding: 16px;
   --box-padding-top: 50px;
+  --box-padding-left-XL: 48px;
+  --box-padding-left-L: 32px;
+  --box-padding-left-M: 19px;
 
   /*************************
         Box props

src/components/dashboard/currencyGraph.css

@@ -4,10 +4,6 @@
   height: 100%;
   min-height: 200px;
   position: relative;
-
-  & h2 {
-    margin: 45px 32px 20px;
-  }
 }
 
 .chartWrapper {
@@ -44,9 +40,30 @@
   }
 }
 
+@media (--xLarge-viewport) {
+  .wrapper {
+    & h2 {
+      margin: 45px var(--box-padding-left-L) 20px;
+    }
+  }
+}
+
+@media (--large-viewport) {
+  .wrapper {
+    & h2 {
+      margin: 45px var(--box-padding-left-L) 20px;
+    }
+  }
+}
+
 @media (--medium-viewport) {
   .wrapper {
     min-height: 300px;
+
+    & h2 {
+      font-size: 28px;
+      margin: 45px var(--box-padding-left-M) 20px;
+    }
   }
 
   .chartWrapper {

src/components/dashboard/currencyGraph.js

@@ -1,5 +1,6 @@
 import { Line as LineChart, Chart } from 'react-chartjs-2';
 import { translate } from 'react-i18next';
+import BigNumber from 'bignumber.js';
 import moment from 'moment';
 import React from 'react';
 
@@ -157,7 +158,7 @@ class CurrencyGraph extends React.Component {
       const { candles } = response;
       const data = candles.slice(Math.max(candles.length - step.length, 1)).map(c => ({
         x: new Date(c.date),
-        y: (parseFloat(c.high) + parseFloat(c.low)) / 2,
+        y: new BigNumber(c.high).plus(new BigNumber(c.low)).dividedBy(2),
       }));
       this.setState({ data });
     }).catch((error) => {

src/components/dashboard/styles.css

@@ -27,10 +27,23 @@
 .latestActivity {
   height: 40%;
   margin: 0px;
+}
 
-  & h2 {
-    margin: 40px 32px 20px;
-    font-size: 28px;
+@media (--xLarge-viewport) {
+  .latestActivity {
+    & h2 {
+      font-size: var(--font-size-h2-xl);
+      margin: 45px var(--box-padding-left-L) 20px;
+    }
+  }
+}
+
+@media (--large-viewport) {
+  .latestActivity {
+    & h2 {
+      font-size: var(--font-size-h2-l);
+      margin: 45px var(--box-padding-left-L) 20px;
+    }
   }
 }
 
@@ -53,13 +66,18 @@
 
   .latestActivity {
     height: auto;
+
+    & h2 {
+      font-size: var(--font-size-h2-l);
+      margin: 45px var(--box-padding-left-M) 20px;
+    }
   }
 }
 
 @media (--small-viewport) {
   .latestActivity {
     & h2 {
-      font-size: 24px;
+      font-size: var(--font-size-h2-s);
     }
   }
 

src/components/delegateList/delegateList.css

@@ -20,8 +20,9 @@
   --main-header-font-size-XS: 24px;
   --tabel-header-padding-m: 27px;
   --tabel-header-padding-s: 19px;
-  --grid-padding-L: 24px;
-  --grid-padding-XS: 19px;
+  --grid-padding-L: var(--box-padding-left-L);
+  --grid-padding-M: var(--box-padding-left-M);
+  --grid-padding-XS: var(--box-padding-left-M);
   --list-line-height: 25px;
   --grid-header-line-height: 60px;
   --main-row-line-height: 70px;
@@ -45,6 +46,11 @@
   --list-bottom-padding-s: 90px;
 }
 
+.leftText {
+  text-align: left;
+  padding-left: 0px;
+}
+
 .wrapper {
   width: 100%;
 }
@@ -170,7 +176,7 @@
     font-size: 15px;
     font-weight: 500;
     vertical-align: middle;
-    margin-left: 10px;
+    margin-right: 10px;
 
     &:not(:last-of-type) {
       margin-right: 24px;
@@ -358,6 +364,14 @@
   font-weight: 500;
 }
 
+@media (--xLarge-viewport) {
+  .delegatesList {
+    & .row {
+      padding: 0px var(--grid-padding-L);
+    }
+  }
+}
+
 @media (--large-viewport) {
   .header {
     padding: 20px var(--grid-padding-L);
@@ -366,11 +380,17 @@
       font-size: var(--main-header-font-size-L);
     }
   }
+
+  .delegatesList {
+    & .row {
+      padding: 0px var(--grid-padding-L);
+    }
+  }
 }
 
 @media (--medium-viewport) {
   .wrapper {
-    overflow: scroll;
+    overflow: auto;
     height: 100%;
     min-height: 100%;
   }
@@ -432,8 +452,8 @@
 
     & .row,
     & .tableHead {
-      padding-left: var(--grid-padding-XS);
-      padding-right: var(--grid-padding-XS);
+      padding-left: var(--grid-padding-M);
+      padding-right: var(--grid-padding-M);
     }
 
     & .tableHead li:nth-child(4),

src/components/delegateList/delegateList.js

@@ -157,7 +157,7 @@ class DelegateList extends React.Component {
         <section className={`${styles.delegatesList} delegate-list`}>
           <div className={styles.table}>
             <ul className={`${styles.tableHead} ${grid.row}`}>
-              <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>{this.props.t('Vote', { context: 'verb' })}</li>
+              <li className={`${grid['col-md-1']} ${grid['col-xs-2']} ${styles.leftText}`}>{this.props.t('Vote', { context: 'verb' })}</li>
               <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>{this.props.t('Rank')}</li>
               <li className={`${grid['col-md-3']} ${grid['col-xs-5']}`}>{this.props.t('Name')}</li>
               <li className={`${grid['col-md-5']}`}>{this.props.t('Lisk ID')}</li>

src/components/delegateList/votingRow.js

@@ -30,7 +30,7 @@ class VotingRow extends React.Component {
   render() {
     const { data, voteStatus, voteToggled } = this.props;
     return (<ul className={`delegate-row ${styles.row} ${grid.row} ${setRowClass(voteStatus)}`}>
-      <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>
+      <li className={`${grid['col-md-1']} ${grid['col-xs-2']} ${styles.leftText}`}>
         <Checkbox styles={styles}
           toggle={voteToggled}
           value={data.selected}

src/components/login/login.css

@@ -48,7 +48,7 @@
 
 .login {
   width: 42%;
-  overflow: scroll;
+  overflow: auto;
 
   & footer {
     padding-top: 7vh; /* stylelint-disable-line */

src/components/passphraseInput/passphraseInput.css

@@ -41,7 +41,7 @@
 
 .errorMessage {
   color: var(--color-error);
-  height: auto;
+  height: 20px;
   font-weight: var(--font-weight-semi-bold);
   padding-top: 10px;
 }

src/components/passphraseSteps/passphraseSteps.css

@@ -38,6 +38,6 @@
   .wrapper {
     padding: 0px 30px 80px;
     max-height: 100%;
-    overflow: scroll;
+    overflow: auto;
   }
 }

src/components/savedAccounts/savedAccounts.css

@@ -3,16 +3,16 @@
 :root {
   --font-size-ids-h1-xl: 4em;
   --font-size-ids-h1-l: 3em;
-  --font-size-ids-h1-s: 2.5em;
+  --font-size-ids-h1-s: 2em;
   --font-size-card-h2: 2em;
   --font-size-card-h2-s: 1.5em;
   --close-button-shadow: 0 20px 20px 0 rgba(0, 32, 68, 0.25);
   --h1-padding-xl: 85px;
   --h1-padding-l: 40px;
   --h1-padding-m: 25px;
-  --h1-width: 600px;
+  --h1-width: 300px;
   --h1-width-m: 400px;
-  --h1-width-s: 300px;
+  --h1-width-s: 260px;
   --add-button-margin: 200px;
   --card-width: 347px;
   --card-height: 436px;
@@ -52,7 +52,7 @@
   max-width: 100vw; /* stylelint-disable-line */
   position: relative;
 
-  & > a {
+  & > li {
     display: inline-block;
   }
 }
@@ -297,7 +297,7 @@
   }
 
   .addAcctiveAccountButton {
-    bottom: 60px;
+    bottom: 16vh; /* stylelint-disable-line */
   }
 
   .address {
@@ -317,17 +317,23 @@
     padding: 0;
   }
 
+  .card {
+    width: var(--card-width-m);
+    height: 320px;
+    margin: 0px 24px;
+  }
+
+  .cardIcon {
+    height: 130px;
+  }
+
   .addAcctiveAccountButton {
-    bottom: 40px;
+    bottom: 18vh; /* stylelint-disable-line */
   }
 
   .deviceIos {
-    & .cardsWrapper {
-      padding-bottom: 80px;
-    }
-
     & .addAcctiveAccountButton {
-      bottom: 180px;
+      bottom: 20vh; /* stylelint-disable-line */
     }
   }