Merge pull request #651 from LiskHQ/622-fix-voting-tab-after-migratio…

…n-differences Fix voting tab after migration differences - Close #622
LiskArchive · Aug 25, 2017 · 4fadf2d · 4fadf2d
2 parents 0bd0d09 + afbc728
commit 4fadf2d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/src/components/voting/confirmVotes.js b/src/components/voting/confirmVotes.js
@@ -6,6 +6,7 @@ import InfoParagraph from '../infoParagraph';
 import ActionBar from '../actionBar';
 import Fees from '../../constants/fees';
 import Autocomplete from './voteAutocomplete';
+import styles from './voting.css';
 
 export class ConfirmVotes extends React.Component {
   constructor() {
@@ -42,13 +43,14 @@ export class ConfirmVotes extends React.Component {
       <article>
         <Autocomplete voted={this.props.voted} />
         {secondPassphrase}
-
-        <InfoParagraph>
-          <div >
-            You can select up to 33 delegates in one voting turn.
-          </div>
-          You can vote for up to 101 delegates in total.
-        </InfoParagraph>
+        <article className={styles.info}>
+          <InfoParagraph>
+            <div >
+              You can select up to 33 delegates in one voting turn.
+            </div>
+            You can vote for up to 101 delegates in total.
+          </InfoParagraph>
+        </article>
 
         <ActionBar
           secondaryButton={{

diff --git a/src/components/voting/disableMenu.css b/src/components/voting/disableMenu.css
@@ -0,0 +1,6 @@
+.icon{
+    color: rgba(0,0,0,0.38) !important;
+    cursor: default !important;
+    text-align: right;
+    width: auto;
+}
diff --git a/src/components/voting/voteAutocomplete.js b/src/components/voting/voteAutocomplete.js
@@ -155,7 +155,7 @@ export class VoteAutocomplete extends React.Component {
   render() {
     return (
       <article>
-        <h3>Add vote to</h3>
+        <h3 className={styles.autoCompleteTile}>Add vote to</h3>
         <div>
           {this.props.votedList.map(
             item => <Chip key={item.username}
@@ -168,6 +168,7 @@ export class VoteAutocomplete extends React.Component {
         <section className={styles.searchContainer}>
           <Input type='text' label='Search by username' name='votedListSearch'
             className='votedListSearch' value={this.state.votedListSearch}
+            theme={styles}
             onBlur={this.suggestionStatus.bind(this, false, 'votedSuggestionClass')}
             onKeyDown={this.votedSearchKeyDown.bind(this)}
             onChange={this.search.bind(this, 'votedListSearch')}/>
@@ -185,7 +186,7 @@ export class VoteAutocomplete extends React.Component {
             </List>
           </Card>
         </section>
-        <h3>Remove vote from</h3>
+        <h3 className={styles.autoCompleteTile}>Remove vote from</h3>
         <div>
           {this.props.unvotedList.map(
             item => <Chip key={item.username}
@@ -198,6 +199,7 @@ export class VoteAutocomplete extends React.Component {
         <section className={styles.searchContainer}>
           <Input type='text' label='Search by username' name='unvotedListSearch'
             className='unvotedListSearch' value={this.state.unvotedListSearch}
+            theme={styles}
             onBlur={this.suggestionStatus.bind(this, false, 'unvotedSuggestionClass')}
             onKeyDown={this.unvotedSearchKeyDown.bind(this)}
             onChange={this.search.bind(this, 'unvotedListSearch')}/>

diff --git a/src/components/voting/voting.css b/src/components/voting/voting.css
@@ -69,17 +69,25 @@
     overflow: auto !important;
     z-index: 9;
 }
+.info {
+    border-top: 1px solid rgba(0,0,0,0.12);
+    border-bottom: 1px solid rgba(0,0,0,0.12);
+    margin: 10px -24px 20px;
+}
+.autoCompleteTile{
+    margin-bottom: 5px;
+}
 /* react toolbar overwroght */
 .input{
-    margin-top: -15px;
+    margin-top: -10px;
 }
 .menuItem{
     flex-direction: row-reverse;
     width: 241px;
 }
 .icon{
     text-align: right;
-    width: auto
+    width: auto;
 }
 .menuInner{
     height: 306px;

diff --git a/src/components/voting/votingHeader.js b/src/components/voting/votingHeader.js
@@ -4,6 +4,7 @@ import { Button } from 'react-toolbox/lib/button';
 import { IconMenu, MenuItem } from 'react-toolbox/lib/menu';
 import Input from 'react-toolbox/lib/input';
 import styles from './voting.css';
+import disableStyle from './disableMenu.css';
 import Confirm from './confirmVotes';
 
 class VotingHeader extends React.Component {
@@ -49,8 +50,9 @@ class VotingHeader extends React.Component {
   }
 
   render() {
+    const theme = this.props.votedDelegates.length === 0 ? disableStyle : styles;
     const button = <div className={styles.votesMenuButton}>
-      <i className="material-icons">visibility</i>
+      <i className='material-icons'>visibility</i>
       <span>my votes ({this.props.votedDelegates.length})</span>
     </div>;
     return (
@@ -67,7 +69,7 @@ class VotingHeader extends React.Component {
           </i>
         </div>
         <div className={styles.actionBar}>
-          <IconMenu theme={styles} icon={button} position='topLeft'
+          <IconMenu theme={theme} icon={button} position='topLeft'
             iconRipple={false} className='my-votes-button'>
             {this.props.votedDelegates.map(delegate =>
               <MenuItem