Fix bonding/unbonding ui

app/src/renderer/components/common/NiFormStruct.vue

@@ -84,7 +84,7 @@ export default {
   > div
     padding 1rem 1rem 1rem - px
     display flex
-    justify-content flex-end
+    justify-content space-between
     align-items center
 
     > *:not(:last-child)

app/src/renderer/components/staking/FormGroupCandidate.vue → app/src/renderer/components/staking/FormGroupDelegate.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 form-group(:class='cssClass' :error="$v.fields.atoms.$error")
-  i.fa.fa-check-square-o(@click='rm(candidate.id)')
-  router-link.id(:to="{ name: 'candidate', params: { candidate: candidate.id } }")
-    | {{ candidate.keybaseID }}
+  i.fa.fa-check-square-o(@click='rm(delegate.id)')
+  router-link.id(:to="{ name: 'delegate', params: { delegate: delegate.id } }")
+    | {{ delegate.keybaseID }}
   field(
     theme="cosmos"
     type="number"
@@ -21,24 +21,24 @@ import Btn from '@nylira/vue-button'
 import FormGroup from 'common/NiFormGroup'
 import FormMsg from 'common/NiFormMsg'
 export default {
-  name: 'card-candidate-atoms',
-  props: ['candidate'],
+  name: 'card-delegate-atoms',
+  props: ['delegate'],
   components: {
     Btn,
     Field,
     FormGroup,
     FormMsg
   },
   computed: {
-    ...mapGetters(['shoppingCart', 'candidates']),
+    ...mapGetters(['shoppingCart', 'delegates']),
     cssClass () {
-      let value = 'card-candidate-atoms'
+      let value = 'card-delegate-atoms'
       return value
     }
   },
   methods: {
-    rm (candidateId) {
-      this.$store.commit('removeFromCart', candidateId)
+    rm (delegateId) {
+      this.$store.commit('removeFromCart', delegateId)
     }
   }
 }
@@ -47,7 +47,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.card-candidate-atoms
+.card-delegate-atoms
   border px solid bc
   margin-bottom 1rem
 

app/src/renderer/components/staking/CardCandidate.vue → app/src/renderer/components/staking/LiDelegate.vue

@@ -1,27 +1,27 @@
 <template lang='pug'>
-transition(name='ts-card-candidate'): div(:class='styles')
-  .card-candidate-container
+transition(name='ts-li-delegate'): div(:class='styles')
+  .li-delegate-container
     .values
       .value.id
         span
           template
-            i.fa.fa-check-square-o(v-if='inCart' @click='rm(candidate)')
-            i.fa.fa-square-o(v-else @click='add(candidate)')
-          router-link(:to="{ name: 'candidate', params: { candidate: candidate.id }}")
-            | {{ candidate.keybaseID}}
-      .value {{ candidate.country }}
+            i.fa.fa-check-square-o(v-if='inCart' @click='rm(delegate)')
+            i.fa.fa-square-o(v-else @click='add(delegate)')
+          router-link(:to="{ name: 'delegate', params: { delegate: delegate.id }}")
+            | {{ delegate.keybaseID}}
+      .value {{ delegate.country }}
       .value.voting_power.num.bar
-        span {{ num.prettyInt(candidate.voting_power) }}
+        span {{ num.prettyInt(delegate.voting_power) }}
         .bar(:style='vpStyles')
       .value.delegated.num.bar.delegated
-        span {{ num.prettyInt(candidate.shares) }}
+        span {{ num.prettyInt(delegate.shares) }}
         .bar(:style='sharesStyles')
-      .value {{ (candidate.commission * 100).toFixed(2) }}%
+      .value {{ (delegate.commission * 100).toFixed(2) }}%
     menu
       btn(theme='cosmos' v-if='inCart'
-        icon='delete' value='Remove' size='sm' @click.native='rm(candidate)')
+        icon='delete' value='Remove' size='sm' @click.native='rm(delegate)')
       btn(v-else='' theme='cosmos'
-        icon='check' value='Add' size='sm' @click.native='add(candidate)')
+        icon='check' value='Add' size='sm' @click.native='add(delegate)')
 </template>
 
 <script>
@@ -30,66 +30,66 @@ import num from 'scripts/num'
 import Btn from '@nylira/vue-button'
 import { maxBy } from 'lodash'
 export default {
-  name: 'card-candidate',
-  props: ['candidate'],
+  name: 'li-delegate',
+  props: ['delegate'],
   components: {
     Btn
   },
   computed: {
-    ...mapGetters(['shoppingCart', 'candidates']),
+    ...mapGetters(['shoppingCart', 'delegates']),
     styles () {
-      let value = 'card-candidate'
-      if (this.inCart) value += ' card-candidate-active '
+      let value = 'li-delegate'
+      if (this.inCart) value += ' li-delegate-active '
       return value
     },
     vpMax () {
-      if (this.candidates.length > 0) {
-        let richestCandidate = maxBy(this.candidates, 'voting_power')
-        return richestCandidate.voting_power
+      if (this.delegates.length > 0) {
+        let richestDelegate = maxBy(this.delegates, 'voting_power')
+        return richestDelegate.voting_power
       } else { return 0 }
     },
     vpStyles () {
       let percentage =
-        Math.round((this.candidate.voting_power / this.vpMax) * 100)
+        Math.round((this.delegate.voting_power / this.vpMax) * 100)
       return { width: percentage + '%' }
     },
     sharesMax () {
-      if (this.candidates) {
-        let richestCandidate = maxBy(this.candidates, 'shares')
-        return richestCandidate.shares
+      if (this.delegates) {
+        let richestDelegate = maxBy(this.delegates, 'shares')
+        return richestDelegate.shares
       } else { return 0 }
     },
     sharesStyles () {
       let percentage =
-        Math.round((this.candidate.shares / this.sharesMax) * 100)
+        Math.round((this.delegate.shares / this.sharesMax) * 100)
       return { width: percentage + '%' }
     },
     inCart () {
-      return this.shoppingCart.find(c => c.id === this.candidate.id)
+      return this.shoppingCart.find(c => c.id === this.delegate.id)
     }
   },
   data: () => ({
     num: num
   }),
   methods: {
-    add (candidate) { this.$store.commit('addToCart', candidate) },
-    rm (candidate) { this.$store.commit('removeFromCart', candidate.id) }
+    add (delegate) { this.$store.commit('addToCart', delegate) },
+    rm (delegate) { this.$store.commit('removeFromCart', delegate.id) }
   }
 }
 </script>
 
 <style lang="stylus">
 @require '~variables'
 
-.card-candidate
-  &:nth-of-type(2n) .card-candidate-container
+.li-delegate
+  &:nth-of-type(2n) .li-delegate-container
     background app-fg
 
-  &.card-candidate-active .card-candidate-container
+  &.li-delegate-active .li-delegate-container
     .value.id a, .icon
       color link
 
-.card-candidate-container
+.li-delegate-container
   position relative
   &:hover
     menu
@@ -158,15 +158,15 @@ export default {
     display none
 
 @media screen and (max-width: 414px)
-  .card-candidate-container menu .ni-btn .ni-btn-value
+  .li-delegate-container menu .ni-btn .ni-btn-value
     display none
 
 @media screen and (max-width: 479px)
-  .card-candidate-container .value span i.fa
+  .li-delegate-container .value span i.fa
     display none
 
 @media screen and (min-width: 768px)
-  .card-candidate-container
+  .li-delegate-container
     .value span
       font-size x
 </style>