Merge pull request #354 from LiskHQ/352-deleagte-page-issues

Fix delegates page issues - Closes #352

package.json

@@ -62,7 +62,7 @@
     "react": "=16.2.0",
     "react-animate-on-change": "=1.0.0",
     "react-chartjs-2": "2.6.4",
-    "react-circular-progressbar": "0.2.1",
+    "react-circular-progressbar": "0.8.0",
     "react-copy-to-clipboard": "5.0.1",
     "react-countdown-now": "1.2.0",
     "react-css-themr": "=2.1.2",

src/components/delegateList/delegateList.css

@@ -18,8 +18,7 @@
   --main-header-font-size-XL: 32px;
   --main-header-font-size-L: 28px;
   --main-header-font-size-XS: 24px;
-  --grid-padding-XL: 32px;
-  --grid-padding-L: 32px;
+  --grid-padding-L: 24px;
   --grid-padding-XS: 19px;
   --list-line-height: 25px;
   --grid-header-line-height: 60px;
@@ -123,16 +122,15 @@
   & ul {
     list-style-type: none;
     line-height: 48px;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0;
     padding-left: var(--grid-padding-L);
     padding-right: var(--grid-padding-L);
   }
 }
 
 .header {
   line-height: var(--header-line-height);
-  padding: 20px var(--grid-padding-XL);
+  padding: 20px var(--grid-padding-L);
 
   & h2 {
     margin-bottom: 0;
@@ -168,9 +166,10 @@
     font-size: 15px;
     font-weight: 500;
     vertical-align: middle;
+    margin-left: 10px;
 
     &:not(:last-of-type) {
-      margin-right: 50px;
+      margin-right: 24px;
     }
   }
 
@@ -180,6 +179,10 @@
   }
 }
 
+.productivity {
+  text-align: right;
+}
+
 .search {
   position: relative;
 
@@ -284,15 +287,24 @@
 .delegatesList {
   overflow-y: auto;
 
-  & .tableHead li {
-    color: var(--color-grayscale-dark) !important;
-    font-size: 15px !important;
-    transition: all ease 200ms;
-    font-weight: 500;
+  & .tableHead {
+    flex-wrap: nowrap;
+
+    & li {
+      color: var(--color-grayscale-dark) !important;
+      font-size: 15px !important;
+      transition: all ease 200ms;
+      font-weight: 700;
+    }
+
+    & .productivity {
+      direction: rtl;
+    }
   }
 
   & .row {
     background: linear-gradient(90deg, var(--color-white) 0%, #f5f8fc 82%);
+    flex-wrap: nowrap;
 
     &:nth-child(2n) {
       background: var(--color-white);
@@ -310,6 +322,11 @@
   }
 }
 
+.username {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .showChangeSummery {
   & .filters .filter:not(.search) {
     display: none;
@@ -366,7 +383,7 @@
         width: 100%;
         position: fixed;
         top: 67px;
-        left: 8px;
+        left: 0;
         z-index: 2;
         background: var(--color-white);
         box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
@@ -419,7 +436,6 @@
 
     & .tableHead li {
       font-size: 12px !important;
-      font-weight: 700;
     }
   }
 

src/components/delegateList/delegateList.js

@@ -122,7 +122,7 @@ class DelegateList extends React.Component {
 
     if (!this.isInitial && this.props.delegates.length === 0) {
       message = 'No delegates found.';
-    } else if (this.state.filter === voteFilters.voted &&
+    } else if (this.state.activeFilter === voteFilters.voted &&
       Object.keys(this.props.votes).length === 0) {
       message = 'You have not voted yet.';
     } else if (this.query !== '' && Object.keys(filteredList).length === 0) {
@@ -157,11 +157,11 @@ 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-lg-1']} ${grid['col-xs-2']}`}>{this.props.t('Vote', { context: 'verb' })}</li>
-              <li className={`${grid['col-lg-1']} ${grid['col-xs-2']}`}>{this.props.t('Rank')}</li>
-              <li className={`${grid['col-lg-3']} ${grid['col-xs-5']}`}>{this.props.t('Name')}</li>
-              <li className={`${grid['col-lg-5']}}`}>{this.props.t('Lisk ID')}</li>
-              <li className={`${grid['col-lg-2']} ${grid['col-xs-3']}`}>{this.props.t('Productivity')}</li>
+              <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']}`}>{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>
+              <li className={`${grid['col-md-2']} ${grid['col-xs-3']} ${styles.productivity}`}>{this.props.t('Productivity')}</li>
             </ul>
             { this.getList(filteredList) }
           </div>

src/components/delegateList/votingRow.js

@@ -30,18 +30,18 @@ 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-lg-1']} ${grid['col-xs-2']}`}>
+      <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>
         <Checkbox styles={styles}
           toggle={voteToggled}
           value={data.selected}
           status={voteStatus}
           data={data}
         />
       </li>
-      <li className={`${grid['col-lg-1']} ${grid['col-xs-2']}`}>{data.rank}</li>
-      <li className={`${grid['col-lg-3']} ${grid['col-xs-5']}`}>{data.username}</li>
-      <li className={`${grid['col-lg-5']}`}>{data.address}</li>
-      <li className={`${grid['col-lg-2']} ${grid['col-xs-3']}`}>{data.productivity} %</li>
+      <li className={`${grid['col-md-1']} ${grid['col-xs-2']}`}>{data.rank}</li>
+      <li className={`${grid['col-md-3']} ${grid['col-xs-5']} ${styles.username}`}>{data.username}</li>
+      <li className={`${grid['col-md-5']}`}>{data.address}</li>
+      <li className={`${grid['col-md-2']} ${grid['col-xs-3']} ${styles.productivity}`}>{data.productivity} %</li>
     </ul>
     );
   }

src/components/votesPreview/index.js

@@ -28,15 +28,17 @@ class VotesPreview extends React.Component {
   }
 
   render() {
-    const { votes, t, nextStep, updateList } = this.props;
+    const {
+      votes, t, nextStep, updateList,
+    } = this.props;
     const { maxCountOfVotes, maxCountOfVotesInOneTurn } = votingConst;
     const voteList = getVoteList(votes);
     const unvoteList = getUnvoteList(votes);
     const totalVotesCount = getTotalVotesCount(votes);
     const totalNewVotesCount = voteList.length + unvoteList.length;
     const selectionClass = totalNewVotesCount > maxCountOfVotesInOneTurn ? styles.red : '';
     const totalClass = totalVotesCount > 101 ? styles.red : '';
-    const createPercentage = (count, total) => Math.ceil((count / total) * 100);
+    const createPercentage = (count, total) => ((count / total) * 100);
     const surpassedVoteLimit = totalNewVotesCount > maxCountOfVotesInOneTurn ||
       totalVotesCount > 101;
     const insufficientFunds = this.props.account.balance - fees.vote < 0;
@@ -46,6 +48,7 @@ class VotesPreview extends React.Component {
         ? t('Maximum of 101 votes in total')
         : t('Maximum of {{maxcount}} votes at a time', { maxcount: maxCountOfVotesInOneTurn });
     };
+    const progressBarStyles = { path: { strokeLinecap: 'round' } };
 
     return (<Fragment>
       <section className={`${styles.wrapper} votes-preview ${surpassedVoteLimit ? styles.surpassed : ''}
@@ -59,7 +62,7 @@ class VotesPreview extends React.Component {
         <section>
           <div className={`${styles.progressWrapper} ${selectionClass} selection-wrapper`}>
             <CircularProgressBar
-              className={styles.progress}
+              styles={progressBarStyles}
               percentage={createPercentage(totalNewVotesCount, maxCountOfVotesInOneTurn)}
               textForPercentage={() => ''}/>
             <article className='selection'>
@@ -70,7 +73,7 @@ class VotesPreview extends React.Component {
           </div>
           <div className={`${styles.progressWrapper} ${totalClass} ${styles.totalWrapper} total-wrapper`}>
             <CircularProgressBar
-              className={styles.progress}
+              styles={progressBarStyles}
               percentage={createPercentage(totalVotesCount, maxCountOfVotes)}
               textForPercentage={() => ''}/>
             <article className='total'>
@@ -84,7 +87,7 @@ class VotesPreview extends React.Component {
           <span>{surpassMessage()}</span>
           <FontIcon value='close' onClick={this.dismissSurpassMessage.bind(this)} />
         </footer>
-        <div className={styles.bla}>
+        <div className={styles.footerWrapper}>
           <Button
             className={`${styles.button} next`}
             type='button'

src/components/votesPreview/votesPreview.css

@@ -75,15 +75,12 @@
   }
 }
 
-.bla {
+.footerWrapper {
   margin: 0 51px 56px;
   text-align: center;
 }
 
 .button {
-  margin: 0 51px 76px;
-  width: auto;
-
   & span:last-child {
     font-size: 16px;
     display: none;
@@ -233,7 +230,7 @@
       }
     }
 
-    & .bla {
+    & .footerWrapper {
       margin: 0;
     }
 

src/store/reducers/voting.js

@@ -81,7 +81,7 @@ const voting = (state = {
       });
 
 
-    case actionTypes.accountLoggedOut:
+    case actionTypes.accountLoading:
       return Object.assign({}, state, {
         votes: {},
         delegates: [],

src/store/reducers/voting.test.js

@@ -44,9 +44,9 @@ describe('Reducer: voting(state, action)', () => {
     expect(changedState).to.be.equal(state);
   });
 
-  it('should clean up with action: accountLoggedOut', () => {
+  it('should clean up with action: accountLoading', () => {
     const action = {
-      type: actionTypes.accountLoggedOut,
+      type: actionTypes.accountLoading,
     };
     const state = { votes: cleanVotes, delegates: fullDelegates, refresh: false };
     const changedState = voting(state, action);