(move) all ballot cards to individual components

src/assets/stylesheets/components/_BallotAbout.scss

@@ -1,117 +1,3 @@
 .sw-BallotAbout {
-  $cell-right-padding: 12px;
-
-  margin-top: -8px;
-
-  @media screen and (max-width: $breakpoint-md) {
-    display: table;
-    width: 100%;
-  }
-
-  $this: &;
-  p {
-    line-height: 28px;
-  }
-  &-i {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    box-sizing: border-box;
-    @media screen and (max-width: $breakpoint-md) {
-      display: table-row;
-      width: 100% !important;
-    }
-    & .ballots-about-td-value {
-      padding-right: $cell-right-padding;
-    }
-    &_name {
-      width: 12%;
-    }
-    &_action {
-      width: 8%;
-    }
-    // 25
-    &_type {
-      width: 8%;
-    }
-    &_proposal {
-      width: 30%;
-    }
-    &_key {
-      width: 26%;
-      word-break: break-all;
-    }
-    &_key_wide {
-      width: 50%;
-      word-break: break-all;
-    }
-    &_proposed_receiver {
-      width: 45%;
-      word-break: break-all;
-    }
-    &_funds_amount {
-      width: 23%;
-      word-break: break-all;
-    }
-    &_proposed-min-threshold {
-      width: 30%;
-      word-break: break-all;
-    }
-    &_contract-type {
-      width: 25%;
-      word-break: break-all;
-    }
-    &_proposed-address {
-      width: 30%;
-      word-break: break-all;
-    }
-    &_time {
-      width: 20%;
-    }
-    &--title {
-      color: #777;
-      font-size: 13px;
-      font-weight: 400;
-      text-align: left;
-    }
-    &:first-child .ballots-about-td-value {
-      border-left: none;
-      padding-left: 0;
-    }
-    &:last-child .ballots-about-td-value {
-      border-right: none;
-      padding-right: 0;
-    }
-  }
-  &-td {
-    &.ballots-about-td-value {
-      color: #333;
-      font-size: 14px;
-
-      .ballots-about-i_action &,
-      .ballots-about-i_type & {
-        text-transform: capitalize;
-      }
-
-      @media screen and (max-width: $breakpoint-md) {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-    }
-    @media screen and (max-width: $breakpoint-md) {
-      display: table-cell;
-      vertical-align: top;
-    }
-    &:first-child {
-      @media screen and (max-width: $breakpoint-md) {
-        padding-right: 10px;
-      }
-    }
-    #{$this}-i:not(:last-child) & {
-      @media screen and (max-width: $breakpoint-md) {
-        padding-bottom: 10px;
-      }
-    }
-  }
+    margin-top: -8px;
 }

src/assets/stylesheets/components/_BallotDataPair.scss

@@ -0,0 +1,82 @@
+$cell-right-padding: 12px;
+
+.blc-BallotDataPair {
+    box-sizing: border-box;
+    display: table-row;
+    min-width: 100%;
+    padding-right: 0;
+    position: relative;
+    vertical-align: top;
+
+    @media (min-width: $breakpoint-md) {
+        display: inline-block;
+        min-width: 0;
+        padding-right: $cell-right-padding;
+    }
+
+    &:last-child {
+        padding-right: 0;
+    }
+
+    &#{ & }-name {
+        width: 12%;
+    }
+    &#{ & }-action {
+        width: 8%;
+    }
+    &#{ & }-type {
+        width: 8%;
+    }
+    &#{ & }-proposal {
+        width: 30%;
+    }
+    &#{ & }-key {
+        width: 26%;
+        word-break: break-all;
+    }
+    &#{ & }-key-wide {
+        width: 50%;
+        word-break: break-all;
+    }
+    &#{ & }-proposed-receiver {
+        width: 45%;
+        word-break: break-all;
+    }
+    &#{ & }-funds-amount {
+        width: 23%;
+        word-break: break-all;
+    }
+    &#{ & }-proposed-min-threshold {
+        width: 30%;
+        word-break: break-all;
+    }
+    &#{ & }-contract-type {
+        width: 25%;
+        word-break: break-all;
+    }
+    &#{ & }-proposed-address {
+        width: 30%;
+        word-break: break-all;
+    }
+    &#{ & }-time {
+        width: 20%;
+    }
+}
+
+.blc-BallotDataPair_Title {
+    color: #777;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 28px;
+    margin: 0;
+    text-align: left;
+}
+
+.blc-BallotDataPair_Value {
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 28px;
+    margin: 0;
+    text-align: left;
+}

src/assets/stylesheets/components/_index.scss

@@ -1,6 +1,7 @@
 @import "App";
 @import "BallotAbout";
 @import "BallotCard";
+@import "BallotDataPair";
 @import "Ballots";
 @import "BallotInfoContainer";
 @import "BaseLoader";

src/components/BallotCard/index.js

@@ -3,6 +3,7 @@ import moment from 'moment'
 import { observable, action, computed } from 'mobx'
 import { inject, observer } from 'mobx-react'
 import { messages } from '../../utils/messages'
+import { BallotDataPair } from '../BallotDataPair'
 import { sendTransactionByVotingKey } from '../../utils/helpers'
 import swal from 'sweetalert2'
 
@@ -777,26 +778,13 @@ export class BallotCard extends React.Component {
         }`}
       >
         <div className="sw-BallotAbout">
-          <div className="sw-BallotAbout-i sw-BallotAbout-i_name">
-            <div className="sw-BallotAbout-td sw-BallotAbout-td-title">
-              <p className="sw-BallotAbout-i--title">Proposer</p>
-            </div>
-            <div className="sw-BallotAbout-td sw-BallotAbout-td-value">
-              <p className="sw-BallotCard_Name">{this.creator}</p>
-            </div>
-          </div>
+          <BallotDataPair dataType="name" title="Proposer" value={[this.creator]} />
           {children}
-          <div className="sw-BallotAbout-i sw-BallotAbout-i_time">
-            <div className="sw-BallotAbout-td sw-BallotAbout-td-title">
-              <p className="sw-BallotAbout-i--title">Ballot Time (UTC)</p>
-            </div>
-            <div className="sw-BallotAbout-td sw-BallotAbout-td-value">
-              <p className="ballots-i--created">{this.startTime}</p>
-              <p className="ballots-i--time">
-                {this.timeTo.displayValue}&nbsp;({this.timeTo.title})
-              </p>
-            </div>
-          </div>
+          <BallotDataPair
+            dataType="time"
+            title="Ballot Time (UTC)"
+            value={[this.startTime, `${this.timeTo.displayValue} (${this.timeTo.title})`]}
+          />
         </div>
         {votingScale}
         <div className="bc-BallotInfoContainer">

src/components/BallotDataPair/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const BallotDataPair = ({ dataType = '', title = '', value = [] }) => {
+  return (
+    <div className={`blc-BallotDataPair blc-BallotDataPair-${dataType}`}>
+      <h2 className="blc-BallotDataPair_Title">{title}</h2>
+      {value.map((item, index) => {
+        return (
+          <p className="blc-BallotDataPair_Value" key={index}>
+            {item}
+          </p>
+        )
+      })}
+    </div>
+  )
+}

src/components/BallotEmissionFundsCard.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { inject, observer } from 'mobx-react'
-import { BallotCard } from './BallotCard'
-
-@inject('contractsStore')
-@observer
-export class BallotEmissionFundsCard extends React.Component {
-  render() {
-    const { id, votingState, pos, contractsStore } = this.props
-    const amount = contractsStore.web3Instance.utils.fromWei(votingState.amount, 'ether')
-    return (
-      <BallotCard votingType="votingToManageEmissionFunds" votingState={votingState} id={id} pos={pos}>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_proposed_receiver">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Proposed Receiver</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.receiver}</p>
-          </div>
-        </div>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_funds_amount">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Funds Amount</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{amount} POA</p>
-          </div>
-        </div>
-      </BallotCard>
-    )
-  }
-}

src/components/BallotEmissionFundsCard/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { BallotCard } from '../BallotCard'
+import { BallotDataPair } from '../BallotDataPair'
+import { inject, observer } from 'mobx-react'
+
+@inject('contractsStore')
+@observer
+export class BallotEmissionFundsCard extends React.Component {
+  render() {
+    const { id, votingState, pos, contractsStore } = this.props
+    const amount = contractsStore.web3Instance.utils.fromWei(votingState.amount, 'ether')
+    return (
+      <BallotCard votingType="votingToManageEmissionFunds" votingState={votingState} id={id} pos={pos}>
+        <BallotDataPair dataType="proposed-receiver" title="Proposed Receiver" value={[votingState.receiver]} />
+        <BallotDataPair dataType="funds-amount" title="Funds Amount" value={[`${amount} POA`]} />
+      </BallotCard>
+    )
+  }
+}

src/components/BallotKeysCard.jsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { inject, observer } from 'mobx-react'
-import { BallotCard } from './BallotCard'
-
-@inject('commonStore', 'routing')
-@observer
-export class BallotKeysCard extends React.Component {
-  render() {
-    let { id, votingState, pos } = this.props
-    let affectedKeyClassName
-    let affectedKey = <p>{votingState.affectedKey}</p>
-    let newVotingKey
-    let newPayoutKey
-    let miningKeyDiv
-
-    if (votingState.isAddMining) {
-      affectedKeyClassName = 'sw-BallotAbout-i_key_wide'
-      if (votingState.newVotingKey || votingState.newPayoutKey) {
-        affectedKey = <p>Mining: {votingState.affectedKey}</p>
-        if (votingState.newVotingKey) newVotingKey = <p>Voting: {votingState.newVotingKey}</p>
-        if (votingState.newPayoutKey) newPayoutKey = <p>Payout: {votingState.newPayoutKey}</p>
-      }
-    } else {
-      affectedKeyClassName = 'sw-BallotAbout-i_key'
-      miningKeyDiv = (
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_key">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Validator key</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.miningKey}</p>
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <BallotCard votingType="votingToChangeKeys" votingState={votingState} id={id} pos={pos}>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_action">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Action</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.ballotTypeDisplayName}</p>
-          </div>
-        </div>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_type">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Key type</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.affectedKeyTypeDisplayName}</p>
-          </div>
-        </div>
-        <div className={`sw-BallotAbout-i ${affectedKeyClassName}`}>
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Affected key</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            {affectedKey}
-            {newVotingKey}
-            {newPayoutKey}
-          </div>
-        </div>
-        {miningKeyDiv}
-      </BallotCard>
-    )
-  }
-}

src/components/BallotKeysCard/index.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { BallotCard } from '../BallotCard'
+import { BallotDataPair } from '../BallotDataPair'
+import { inject, observer } from 'mobx-react'
+
+@inject('commonStore', 'routing')
+@observer
+export class BallotKeysCard extends React.Component {
+  render() {
+    let { id, votingState, pos } = this.props
+    let affectedKey = votingState.affectedKey
+    let newVotingKey
+    let newPayoutKey
+    let affectedKeyType = 'key'
+
+    if (votingState.isAddMining) {
+      affectedKeyType = 'key-wide'
+      if (votingState.newVotingKey || votingState.newPayoutKey) {
+        affectedKey = `Mining: ${votingState.affectedKey}`
+        if (votingState.newVotingKey) newVotingKey = `Voting: ${votingState.newVotingKey}`
+        if (votingState.newPayoutKey) newPayoutKey = `Payout: ${votingState.newPayoutKey}`
+      }
+    }
+
+    return (
+      <BallotCard votingType="votingToChangeKeys" votingState={votingState} id={id} pos={pos}>
+        <BallotDataPair dataType="action" title="Action" value={[votingState.ballotTypeDisplayName]} />
+        <BallotDataPair dataType="type" title="Key type" value={[votingState.affectedKeyTypeDisplayName]} />
+        <BallotDataPair
+          dataType={affectedKeyType}
+          title="Affected key"
+          value={[affectedKey, newVotingKey, newPayoutKey]}
+        />
+        {!votingState.isAddMining ? (
+          <BallotDataPair dataType="key" title="Validator key" value={[votingState.miningKey]} />
+        ) : null}
+      </BallotCard>
+    )
+  }
+}

src/components/BallotMinThresholdCard.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { inject, observer } from 'mobx-react'
-import { BallotCard } from './BallotCard'
-
-@inject('commonStore', 'routing')
-@observer
-export class BallotMinThresholdCard extends React.Component {
-  render() {
-    let { id, votingState, pos } = this.props
-    return (
-      <BallotCard votingType="votingToChangeMinThreshold" votingState={votingState} id={id} pos={pos}>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_proposed-min-threshold">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Proposed min threshold</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.proposedValue}</p>
-          </div>
-        </div>
-      </BallotCard>
-    )
-  }
-}

src/components/BallotMinThresholdCard/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { BallotCard } from '../BallotCard'
+import { BallotDataPair } from '../BallotDataPair'
+import { inject, observer } from 'mobx-react'
+
+@inject('commonStore', 'routing')
+@observer
+export class BallotMinThresholdCard extends React.Component {
+  render() {
+    let { id, votingState, pos } = this.props
+    return (
+      <BallotCard votingType="votingToChangeMinThreshold" votingState={votingState} id={id} pos={pos}>
+        <BallotDataPair
+          dataType="proposed-min-threshold"
+          title="Proposed min threshold"
+          value={[votingState.proposedValue]}
+        />
+      </BallotCard>
+    )
+  }
+}

src/components/BallotProxyCard.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { inject, observer } from 'mobx-react'
-import { BallotCard } from './BallotCard'
-
-@inject('commonStore', 'ballotStore', 'routing')
-@observer
-export class BallotProxyCard extends React.Component {
-  render() {
-    const { id, votingState, pos } = this.props
-    return (
-      <BallotCard votingType="votingToChangeProxy" votingState={votingState} id={id} pos={pos}>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_contract-type">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Contract type</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.contractTypeDisplayName}</p>
-          </div>
-        </div>
-        <div className="sw-BallotAbout-i sw-BallotAbout-i_proposed-address">
-          <div className="ballots-about-td ballots-about-td-title">
-            <p className="sw-BallotAbout-i--title">Proposed contract address</p>
-          </div>
-          <div className="ballots-about-td ballots-about-td-value">
-            <p>{votingState.proposedValue}</p>
-          </div>
-        </div>
-      </BallotCard>
-    )
-  }
-}

src/components/BallotProxyCard/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { BallotCard } from '../BallotCard'
+import { BallotDataPair } from '../BallotDataPair'
+import { inject, observer } from 'mobx-react'
+
+@inject('commonStore', 'ballotStore', 'routing')
+@observer
+export class BallotProxyCard extends React.Component {
+  render() {
+    const { id, votingState, pos } = this.props
+    return (
+      <BallotCard votingType="votingToChangeProxy" votingState={votingState} id={id} pos={pos}>
+        <BallotDataPair dataType="contract-type" title="Contract type" value={[votingState.contractTypeDisplayName]} />
+        <BallotDataPair
+          dataType="proposed-address"
+          title="Proposed contract address"
+          value={[votingState.proposedValue]}
+        />
+      </BallotCard>
+    )
+  }
+}

src/components/Validator.jsx

@@ -10,7 +10,6 @@ export class Validator extends React.Component {
   onSelectAutocomplete = async data => {
     const { validatorStore } = this.props
     let place = await geocodeByAddress(data)
-    console.log(place)
     let address_components = {
       postal_code: '',
       street_number: '',
@@ -18,9 +17,11 @@ export class Validator extends React.Component {
       locality: '',
       administrative_area_level_1: ''
     }
+
     for (let i = 0; i < place[0].address_components.length; i++) {
       let address_component = place[0].address_components[i]
       let addressType = address_component.types[0]
+
       switch (addressType) {
         case 'postal_code':
           address_components.postal_code = address_component.short_name

src/stores/ContractsStore.js

@@ -14,10 +14,10 @@ import ValidatorMetadata from '../contracts/ValidatorMetadata.contract'
 import ballotStore from './BallotStore'
 import ballotsStore from './BallotsStore'
 import commonStore from './CommonStore'
-import { BallotKeysCard } from '../components/BallotKeysCard.jsx'
-import { BallotMinThresholdCard } from '../components/BallotMinThresholdCard.jsx'
-import { BallotProxyCard } from '../components/BallotProxyCard.jsx'
-import { BallotEmissionFundsCard } from '../components/BallotEmissionFundsCard.jsx'
+import { BallotKeysCard } from '../components/BallotKeysCard'
+import { BallotMinThresholdCard } from '../components/BallotMinThresholdCard'
+import { BallotProxyCard } from '../components/BallotProxyCard'
+import { BallotEmissionFundsCard } from '../components/BallotEmissionFundsCard'
 import { constants } from '../utils/constants'
 
 import 'babel-polyfill'