Improve alignments in deleagte list

LiskHQ · Feb 14, 2018 · fba4e8f · fba4e8f
1 parent f53a8f6
commit fba4e8f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/delegateList/delegateList.css b/src/components/delegateList/delegateList.css
@@ -166,9 +166,10 @@
     font-size: 15px;
     font-weight: 500;
     vertical-align: middle;
+    margin-left: 10px;
 
     &:not(:last-of-type) {
-      margin-right: 40px;
+      margin-right: 24px;
     }
   }
 
@@ -178,6 +179,10 @@
   }
 }
 
+.productivity {
+  text-align: right;
+}
+
 .search {
   position: relative;
 
@@ -291,6 +296,10 @@
       transition: all ease 200ms;
       font-weight: 700;
     }
+
+    & .productivity {
+      direction: rtl;
+    }
   }
 
   & .row {
@@ -379,7 +388,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);

diff --git a/src/components/delegateList/delegateList.js b/src/components/delegateList/delegateList.js
@@ -161,7 +161,7 @@ class DelegateList extends React.Component {
               <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']}`}>{this.props.t('Productivity')}</li>
+              <li className={`${grid['col-md-2']} ${grid['col-xs-3']} ${styles.productivity}`}>{this.props.t('Productivity')}</li>
             </ul>
             { this.getList(filteredList) }
           </div>

diff --git a/src/components/delegateList/votingRow.js b/src/components/delegateList/votingRow.js
@@ -41,7 +41,7 @@ class VotingRow extends React.Component {
       <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']}`}>{data.productivity} %</li>
+      <li className={`${grid['col-md-2']} ${grid['col-xs-3']} ${styles.productivity}`}>{data.productivity} %</li>
     </ul>
     );
   }