Align design delegates page - Closes #2167 #2347

i18n/locales/en/common.json

@@ -38,7 +38,6 @@
   "All important information at a glance": "All important information at a glance",
   "All transactions": "All transactions",
   "Amount": "Amount",
-  "Amount of LSK earned by a delegate from forging blocks.": "Amount of LSK earned by a delegate from forging blocks.",
   "An error occoured while rendering this page": "An error occoured while rendering this page",
   "An error occurred while creating the transaction.": "An error occurred while creating the transaction.",
   "An error occurred while registering your second passphrase. Please try again.": "An error occurred while registering your second passphrase. Please try again.",
@@ -165,7 +164,6 @@
   "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",
-  "Forged LSK": "Forged LSK",
   "Found several devices, choose the one you’d like to access": "Found several devices, choose the one you’d like to access",
   "Get Involved": "Get Involved",
   "Give Feedback": "Give Feedback",
@@ -400,8 +398,8 @@
   "Step 3 / 4": "Step 3 / 4",
   "Step 4 / 4": "Step 4 / 4",
   "Store this document in a safe place.": "Store this document in a safe place.",
-  "Sum of LSK balance of all accounts who voted for this delegate": "Sum of LSK balance of all accounts who voted for this delegate",
-  "Sum of LSK of all accounts who voted for a delegate": "Sum of LSK of all accounts who voted for a delegate",
+  "Sum of LSK in all accounts who have voted for this delegate.": "Sum of LSK in all accounts who have voted for this delegate.",
+  "Sum of all LSK awarded to a delegate for each block successfully generated on the blockchain.": "Sum of all LSK awarded to a delegate for each block successfully generated on the blockchain.",
   "Terms of Use": "Terms of Use",
   "Testnet": "Testnet",
   "The Lisk Academy is an entirely free, unbiased and comprehensive educational platform about blockchain technology, containing something for everyone, regardless of what level of knowledge you are at.": "The Lisk Academy is an entirely free, unbiased and comprehensive educational platform about blockchain technology, containing something for everyone, regardless of what level of knowledge you are at.",

src/components/delegates/votingHeader.css

@@ -37,7 +37,7 @@
   & h3 {
     @mixin headingNormal;
 
-    margin: 5px 0;
+    margin: 0;
     color: var(--color-maastricht-blue);
   }
 }
@@ -50,8 +50,10 @@
 
 .outlinedBox {
   background-color: var(--color-white);
-  border-radius: 3px;
   border: solid 1px var(--color-platinum);
+  border-radius: 3px;
+  box-sizing: border-box;
+  max-height: 62px;
 
   &.addedVotes {
     border-color: var(--color-ultramarine-blue);

src/components/delegates/votingHeader.js

@@ -16,7 +16,10 @@ import {
 import styles from './votingHeader.css';
 
 function shouldShowRegisterDelagteButton(account) {
-  return account.address && !account.delegate && account.loginType === loginType.normal;
+  return account.address
+    && !account.delegate
+    && account.loginType === loginType.normal
+    && !Object.keys(account.hwInfo).length;
 }
 
 class VotingHeader extends React.Component {

src/components/delegatesListView/delegateList.js

@@ -29,10 +29,10 @@ class DelegateList extends React.Component {
     const shouldShowVoteColumn = votingModeEnabled || getTotalVotesCount(votes) > 0;
     const columnClassNames = {
       vote: `${grid['col-md-1']} ${grid['col-xs-1']}`,
-      rank: `${grid['col-md-1']} ${grid['col-xs-1']}`,
+      rank: `${grid['col-md-1']} ${grid['col-xs-1']} ${styles.rank}`,
       delegate: `${grid[shouldShowVoteColumn ? 'col-md-5' : 'col-md-6']} ${grid['col-xs-4']}`,
       forged: `${grid['col-md-2']} ${grid['col-xs-2']}`,
-      productivity: `${grid['col-md-1']} ${grid['col-xs-2']}`,
+      productivity: `${grid['col-md-1']} ${grid['col-xs-2']} ${styles.productivity}`,
       voteWeight: `${grid['col-md-2']}`,
     };
     return (

src/components/delegatesListView/delegateRow.js

@@ -71,7 +71,7 @@ class DelegateRow extends React.Component {
         )}
       >
         {shouldShowVoteColumn ? (
-          <div className={`${columnClassNames.rank} ${styles.leftText}`}>
+          <div className={`${columnClassNames.vote} ${styles.leftText}`}>
             <VoteCheckbox
               className={styles.checkbox}
               accent={shouldHightlightCheckbox}
@@ -102,16 +102,16 @@ class DelegateRow extends React.Component {
             </div>
           </Link>
         </div>
-        <div className={`${columnClassNames.forged} delegate-forged`}>
+        <div className={`${columnClassNames.forged} ${styles.forged} delegate-forged`}>
           <LiskAmount val={rewards} />
-          {this.props.t('LSK')}
+          {` ${this.props.t('LSK')}`}
         </div>
         <div className={`${columnClassNames.productivity} delegate-productivity`}>
           {`${productivity} %`}
         </div>
         <div className={`${columnClassNames.voteWeight} ${styles.weight} vote-weight`}>
           <LiskAmount val={data.vote} />
-          {this.props.t('LSK')}
+          {` ${this.props.t('LSK')}`}
         </div>
       </TableRow>
     );

src/components/delegatesListView/listLabels.js

@@ -19,28 +19,25 @@ const ListLabels = ({
       }
       <div className={columnClassNames.rank}>{t('Rank')}</div>
       <div className={columnClassNames.delegate}>{t('Delegate')}</div>
-      <div className={columnClassNames.forged}>{t('Forged LSK')}</div>
+      <div className={columnClassNames.forged}>
+        {t('Forged')}
+        <Tooltip className="showOnLeft">
+          <p>{t('Sum of all LSK awarded to a delegate for each block successfully generated on the blockchain.')}</p>
+        </Tooltip>
+      </div>
       <div className={columnClassNames.productivity}>
         {t('Productivity')}
-        <Tooltip>
+        <Tooltip className="showOnLeft">
           <p>
-            {' '}
-            {
-            t('Percentage of successfully forged blocks of when the delegate should have forged a block of transactions.')
-          }
-            {' '}
+            {t('Percentage of successfully forged blocks of when the delegate should have forged a block of transactions.')}
           </p>
         </Tooltip>
       </div>
       <div className={columnClassNames.voteWeight}>
         {t('Vote weight')}
         <Tooltip className="showOnLeft">
           <p>
-            {' '}
-            {
-            t('Sum of LSK balance of all accounts who voted for this delegate')
-          }
-            {' '}
+            {t('Sum of LSK in all accounts who have voted for this delegate.')}
           </p>
         </Tooltip>
       </div>

src/components/delegatesListView/votingHeader.js

@@ -3,6 +3,7 @@ import voteFilters from '../../constants/voteFilters';
 import Piwik from '../../utils/piwik';
 import Tabs from '../toolbox/tabs';
 import { Input } from '../toolbox/inputs';
+import styles from './votingListView.css';
 
 
 class VotingHeader extends React.Component {
@@ -68,7 +69,7 @@ class VotingHeader extends React.Component {
         <span>
           <Input
             size="xs"
-            className="search"
+            className={`${styles.search} search`}
             value={this.state.query}
             onChange={this.search.bind(this)}
             placeholder={t('Filter by name...')}

src/components/delegatesListView/votingListView.css

@@ -14,6 +14,10 @@
   width: 100%;
 }
 
+.search {
+  width: 177px;
+}
+
 .loadMore {
   @mixin contentSmall bold;
 
@@ -33,9 +37,23 @@
   }
 }
 
+.rank {
+  padding-left: 40px !important;
+}
+
+.forged,
+.productivity {
+  padding-left: 10px !important;
+}
+
+.forged {
+  display: inline-block !important;
+}
+
 .weight {
-  font-weight: bold;
-  text-align: right;
+  display: inline-block !important;
+  font-weight: bold !important;
+  text-align: right !important;
 }
 
 .emptyMessage {

src/components/votes/votesTableHeader.js

@@ -11,7 +11,7 @@ const VotesTableHeader = ({ t }) => (
     <div className={`${grid['col-sm-2']} ${grid['col-lg-2']}`}>
       {t('Forged')}
       <Tooltip className="showOnBottom">
-        <p>{t('Amount of LSK earned by a delegate from forging blocks.')}</p>
+        <p>{t('Sum of all LSK awarded to a delegate for each block successfully generated on the blockchain.')}</p>
       </Tooltip>
     </div>
     <div className={`${grid['col-sm-2']} ${grid['col-lg-1']}`}>
@@ -23,7 +23,7 @@ const VotesTableHeader = ({ t }) => (
     <div className={`${grid['col-sm-4']} ${grid['col-lg-2']} ${styles.lastHeading}`}>
       {t('Vote weight')}
       <Tooltip className="showOnBottom">
-        <p>{t('Sum of LSK of all accounts who voted for a delegate')}</p>
+        <p>{t('Sum of LSK in all accounts who have voted for this delegate.')}</p>
       </Tooltip>
     </div>
   </TableRow>