(add) validator layout - (add) new ballot button layout - (add) autocomplete form component

2019-01-03 17:37:28 -03:00 · 2019-01-03 17:37:28 -03:00 · 490be1fb8d
parent 8d7f576edd
commit 490be1fb8d
13 changed files with 237 additions and 211 deletions
--- a/src/assets/stylesheets/components/_BallotKeysMetadata.scss
+++ b/src/assets/stylesheets/components/_BallotKeysMetadata.scss
@ -1,12 +1,14 @@
-.frm-BallotKeysMetadata_Row {
+.frm-BallotKeysMetadata {
    margin-bottom: $base-grid-gap;
+}

-    &:last-child {
-        margin-bottom: 0;
-    }
+.frm-BallotKeysMetadata_Row {
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;

-    @media (min-width: $breakpoint-md) {
-        display: grid;
+    @media (min-width: $breakpoint-xxl) {
        grid-column-gap: $base-grid-gap;
        grid-template-columns: 1fr 1fr;
    }
--- a/src/assets/stylesheets/components/_ButtonAddBallot.scss
+++ b/src/assets/stylesheets/components/_ButtonAddBallot.scss
@ -10,6 +10,7 @@ $sw-ButtonAddBallot-height: 44px;
    font-size: 14px;
    font-weight: 700;
    height: $sw-ButtonAddBallot-height;
+    justify-content: space-between;
    line-height: $sw-ButtonAddBallot-height;
    opacity: 1;
    outline: none;
--- a/src/assets/stylesheets/components/_KeysTypes.scss
+++ b/src/assets/stylesheets/components/_KeysTypes.scss
@ -3,31 +3,17 @@
 }

 .frm-KeysTypes_Row {
-    margin-bottom: $base-grid-gap;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;

    @media (min-width: $breakpoint-md) {
-        display: grid;
        grid-column-gap: $base-grid-gap;
        grid-template-columns: 1fr 1fr 1fr;
    }
 }

-.frm-KeysTypes_Td {
-    margin-bottom: $base-grid-gap;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    @media (min-width: $breakpoint-md) {
-        margin-bottom: 0;
-    }
-}
-
 .frm-KeysTypes_Button {
    position: relative;
 }
--- a/src/assets/stylesheets/components/_NewBallot.scss
+++ b/src/assets/stylesheets/components/_NewBallot.scss
@ -29,6 +29,7 @@
        min-width: 300px;
        width: 300px;
    }
+
 }

 .new-NewBallot_FormContent {
@ -39,4 +40,14 @@
    @media (min-width: $breakpoint-md) {
        border-left: 1px solid $base-border-color;
    }
+}
+
+.new-NewBallot_ButtonContainer {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint-xxl) {
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
 }
--- a/src/assets/stylesheets/components/_Validator.scss
+++ b/src/assets/stylesheets/components/_Validator.scss
@ -0,0 +1,15 @@
+.frm-Validator {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-Validator_Row {
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint-xxl) {
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}
--- a/src/assets/stylesheets/components/_index.scss
+++ b/src/assets/stylesheets/components/_index.scss
@ -45,5 +45,6 @@
@import "SearchBar";
@import "Separator";
@import "SocialIcons";
+@import "Validator";
@import "VoteProgressBar";
@import "Votes";
--- a/src/assets/stylesheets/helpers/_form-mixins.scss
+++ b/src/assets/stylesheets/helpers/_form-mixins.scss
@ -30,4 +30,22 @@
            opacity: 0.6;
        }
    }
+}
+
+@mixin form-row-base-styles-wrapped($wrapper-selector) {
+
+    #{ $wrapper-selector } & {
+        @include form-row-base-styles();
+    }
+
+}
+
+@mixin form-row-base-styles() {
+
+    margin-bottom: $base-grid-gap;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
 }
--- a/src/assets/stylesheets/index.css
+++ b/src/assets/stylesheets/index.css
--- a/src/components/BallotKeysMetadata/index.js
+++ b/src/components/BallotKeysMetadata/index.js
@ -1,12 +1,21 @@
 import React from 'react'
 import { FormInput } from '../FormInput'
 import { FormSelect } from '../FormSelect'
-import { Separator } from '../Separator'
 import { inject, observer } from 'mobx-react'

@inject('ballotStore', 'contractsStore')
@observer
 export class BallotKeysMetadata extends React.Component {
+  showNewVotingPayoutKeys() {
+    const { ballotStore, contractsStore } = this.props
+
+    return (
+      ballotStore.isNewValidatorPersonalData &&
+      contractsStore.votingToChangeKeys &&
+      contractsStore.votingToChangeKeys.doesMethodExist('createBallotToAddNewValidator')
+    )
+  }
+
  render() {
    const { ballotStore, contractsStore, networkBranch } = this.props
    let options = []
@ -17,50 +26,6 @@ export class BallotKeysMetadata extends React.Component {
      }
    }

-    let newVotingPayoutKeys = ''
-    if (
-      ballotStore.isNewValidatorPersonalData &&
-      contractsStore.votingToChangeKeys &&
-      contractsStore.votingToChangeKeys.doesMethodExist('createBallotToAddNewValidator')
-    ) {
-      newVotingPayoutKeys = (
-        <div>
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="new-voting-key">New Voting Key</label>
-              <input
-                type="text"
-                id="new-voting-key"
-                value={ballotStore.ballotKeys.newVotingKey}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'newVotingKey', 'ballotKeys')}
-              />
-              <p className="hint">
-                Voting key address of new validator.
-                <br />
-                Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
-              </p>
-            </div>
-          </div>
-          <div className="right">
-            <div className="form-el">
-              <label htmlFor="new-payout-key">New Payout Key</label>
-              <input
-                type="text"
-                id="new-payout-key"
-                value={ballotStore.ballotKeys.newPayoutKey}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'newPayoutKey', 'ballotKeys')}
-              />
-              <p className="hint">
-                Payout key address of new validator.
-                <br />
-                Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
    return (
      <div className="frm-BallotKeysMetadata">
        <div className="frm-BallotKeysMetadata_Row">
@ -89,8 +54,26 @@ export class BallotKeysMetadata extends React.Component {
            value={ballotStore.ballotKeys.miningKey}
          />
        </div>
-        <div className="clearfix"> </div>
-        {newVotingPayoutKeys}
+        {this.showNewVotingPayoutKeys() ? (
+          <div className="frm-BallotKeysMetadata_Row">
+            <FormInput
+              hint="Voting key address of new validator.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee."
+              id="new-voting-key"
+              networkBranch={networkBranch}
+              onChange={e => ballotStore.changeBallotMetadata(e, 'newVotingKey', 'ballotKeys')}
+              title="New Voting Key"
+              value={ballotStore.ballotKeys.newVotingKey}
+            />
+            <FormInput
+              hint="Payout key address of new validator.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee."
+              id="new-payout-key"
+              networkBranch={networkBranch}
+              onChange={e => ballotStore.changeBallotMetadata(e, 'newPayoutKey', 'ballotKeys')}
+              title="New Payout Key"
+              value={ballotStore.ballotKeys.newPayoutKey}
+            />
+          </div>
+        ) : null}
        <div className="frm-BallotKeysMetadata_Row">
          <FormInput
            hint="Ballot's end time."
@ -103,7 +86,6 @@ export class BallotKeysMetadata extends React.Component {
            value={ballotStore.endTime}
          />
        </div>
-        <Separator />
      </div>
    )
  }
--- a/src/components/FormAutocomplete/index.js
+++ b/src/components/FormAutocomplete/index.js
@ -0,0 +1,23 @@
+import PlacesAutocomplete from 'react-places-autocomplete'
+import React from 'react'
+import { FormFieldTitle } from '../FormFieldTitle'
+import { FormHint } from '../FormHint'
+
+export const FormAutocomplete = ({
+  extraClassName = '',
+  hint,
+  id,
+  networkBranch,
+  onSelect,
+  title,
+  autocompleteItem,
+  inputProps
+}) => {
+  return (
+    <div className={`frm-FormAutocomplete ${extraClassName}`}>
+      <FormFieldTitle htmlFor={id} text={title} />
+      <PlacesAutocomplete onSelect={onSelect} inputProps={inputProps} autocompleteItem={autocompleteItem} />
+      {hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
+    </div>
+  )
+}
--- a/src/components/FormSelect/index.js
+++ b/src/components/FormSelect/index.js
@ -18,17 +18,14 @@ export const FormSelect = ({
  return (
    <div className={`frm-FormSelect ${extraClassName}`}>
      <FormFieldTitle htmlFor={id} text={title} />
-      <label className="frm-FormSelect_Title" htmlFor={id}>
-        {title}
-      </label>
      <Select.Creatable
        className="frm-FormSelect_Select"
-        name={name}
+        disabled={disabled}
        id={id}
-        value={value}
+        name={name}
        onChange={onChange}
        options={options}
-        disabled={disabled}
+        value={value}
      />
      {hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
    </div>
--- a/src/components/NewBallot/index.js
+++ b/src/components/NewBallot/index.js
@ -468,9 +468,12 @@ export class NewBallot extends React.Component {
            />
            <Separator />
            {ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
-            {ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
+            {ballotStore.isNewValidatorPersonalData ? <Validator networkBranch={networkBranch} /> : null}
            {metadata}
-            <ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
+            <Separator />
+            <div className="new-NewBallot_ButtonContainer">
+              <ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
+            </div>
          </div>
        </form>
      </section>
--- a/src/components/Validator/index.js
+++ b/src/components/Validator/index.js
@ -1,7 +1,9 @@
-import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'
 import React from 'react'
-import Select from 'react-select'
+import { FormAutocomplete } from '../FormAutocomplete'
+import { FormInput } from '../FormInput'
+import { FormSelect } from '../FormSelect'
 import { constants } from '../../utils/constants'
+import { geocodeByAddress } from 'react-places-autocomplete'
 import { inject, observer } from 'mobx-react'

@inject('validatorStore', 'ballotStore')
@ -61,145 +63,130 @@ export class Validator extends React.Component {
  }

  render() {
-    const { validatorStore } = this.props
+    const { validatorStore, networkBranch } = this.props
    const inputProps = {
      value: validatorStore.address,
      onChange: e => validatorStore.changeValidatorMetadata(e, 'address'),
      id: 'address'
    }
    const AutocompleteItem = ({ formattedSuggestion }) => (
-      <div className="custom-container">
+      <div className="frm-Validator_AutocompleteItem">
        <strong>{formattedSuggestion.mainText}</strong> <small>{formattedSuggestion.secondaryText}</small>
      </div>
    )
+    const US_STATES = [
+      { value: '', label: '' },
+      { value: 'Alabama', label: 'Alabama' },
+      { value: 'Alaska', label: 'Alaska' },
+      { value: 'Arizona', label: 'Arizona' },
+      { value: 'Arkansas', label: 'Arkansas' },
+      { value: 'California', label: 'California' },
+      { value: 'Colorado', label: 'Colorado' },
+      { value: 'Connecticut', label: 'Connecticut' },
+      { value: 'Delaware', label: 'Delaware' },
+      { value: 'Florida', label: 'Florida' },
+      { value: 'Georgia', label: 'Georgia' },
+      { value: 'Hawaii', label: 'Hawaii' },
+      { value: 'Idaho', label: 'Idaho' },
+      { value: 'Illinois', label: 'Illinois' },
+      { value: 'Indiana', label: 'Indiana' },
+      { value: 'Iowa', label: 'Iowa' },
+      { value: 'Kansas', label: 'Kansas' },
+      { value: 'Kentucky', label: 'Kentucky' },
+      { value: 'Louisianna', label: 'Louisianna' },
+      { value: 'Maine', label: 'Maine' },
+      { value: 'Maryland', label: 'Maryland' },
+      { value: 'Massachusetts', label: 'Massachusetts' },
+      { value: 'Michigan', label: 'Michigan' },
+      { value: 'Minnesota', label: 'Minnesota' },
+      { value: 'Mississippi', label: 'Mississippi' },
+      { value: 'Missouri', label: 'Missouri' },
+      { value: 'Montana', label: 'Montana' },
+      { value: 'Nebraska', label: 'Nebraska' },
+      { value: 'Nevada', label: 'Nevada' },
+      { value: 'New Hampshire', label: 'New Hampshire' },
+      { value: 'New Jersey', label: 'New Jersey' },
+      { value: 'New Mexico', label: 'New Mexico' },
+      { value: 'New York', label: 'New York' },
+      { value: 'North Carolina', label: 'North Carolina' },
+      { value: 'North Dakota', label: 'North Dakota' },
+      { value: 'Ohio', label: 'Ohio' },
+      { value: 'Oklahoma', label: 'Oklahoma' },
+      { value: 'Oregon', label: 'Oregon' },
+      { value: 'Pennsylvania', label: 'Pennsylvania' },
+      { value: 'Rhode Island', label: 'Rhode Island' },
+      { value: 'South California', label: 'South California' },
+      { value: 'South Dakota', label: 'South Dakota' },
+      { value: 'Tennessee', label: 'Tennessee' },
+      { value: 'Texas', label: 'Texas' },
+      { value: 'Utah', label: 'Utah' },
+      { value: 'Vermont', label: 'Vermont' },
+      { value: 'Virginia', label: 'Virginia' },
+      { value: 'Washington', label: 'Washington' },
+      { value: 'West Virginia', label: 'West Virginia' },
+      { value: 'Wisconsin', label: 'Wisconsin' },
+      { value: 'Wyoming', label: 'Wyoming' }
+    ]
+
    return (
-      <div>
-        <div className="hidden">
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="full-name">Full Name</label>
-              <input
-                type="text"
-                id="full-name"
-                value={validatorStore.fullName}
-                onChange={e => validatorStore.changeValidatorMetadata(e, 'fullName')}
-              />
-              <p className="hint">Proposed validator's full name. Example: Jefferson L. Flowers.</p>
-            </div>
-          </div>
-          <div className="right">
-            <div className="form-el">
-              <label htmlFor="address">Address</label>
-              <PlacesAutocomplete
-                onSelect={this.onSelectAutocomplete}
-                inputProps={inputProps}
-                autocompleteItem={AutocompleteItem}
-              />
-              <p className="hint">Proposed validator's registration address. Example: 110 Wall St., New York.</p>
-            </div>
-          </div>
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="us-state">State</label>
-              <Select
-                id="us-state"
-                value={validatorStore.state}
-                onChange={e => validatorStore.changeValidatorMetadata(e, 'state')}
-                options={[
-                  { value: '', label: '' },
-                  { value: 'Alabama', label: 'Alabama' },
-                  { value: 'Alaska', label: 'Alaska' },
-                  { value: 'Arizona', label: 'Arizona' },
-                  { value: 'Arkanzas', label: 'Arkanzas' },
-                  { value: 'California', label: 'California' },
-                  { value: 'Colorado', label: 'Colorado' },
-                  { value: 'Connecticut', label: 'Connecticut' },
-                  { value: 'Delaware', label: 'Delaware' },
-                  { value: 'Florida', label: 'Florida' },
-                  { value: 'Georgia', label: 'Georgia' },
-                  { value: 'Hawaii', label: 'Hawaii' },
-                  { value: 'Idaho', label: 'Idaho' },
-                  { value: 'Illinois', label: 'Illinois' },
-                  { value: 'Indiana', label: 'Indiana' },
-                  { value: 'Iowa', label: 'Iowa' },
-                  { value: 'Kansas', label: 'Kansas' },
-                  { value: 'Kentucky', label: 'Kentucky' },
-                  { value: 'Louisianna', label: 'Louisianna' },
-                  { value: 'Maine', label: 'Maine' },
-                  { value: 'Maryland', label: 'Maryland' },
-                  { value: 'Massachusetts', label: 'Massachusetts' },
-                  { value: 'Michigan', label: 'Michigan' },
-                  { value: 'Minnesota', label: 'Minnesota' },
-                  { value: 'Mississippi', label: 'Mississippi' },
-                  { value: 'Missouri', label: 'Missouri' },
-                  { value: 'Montana', label: 'Montana' },
-                  { value: 'Nebraska', label: 'Nebraska' },
-                  { value: 'Nevada', label: 'Nevada' },
-                  { value: 'New Hampshire', label: 'New Hampshire' },
-                  { value: 'New Jersey', label: 'New Jersey' },
-                  { value: 'New Mexico', label: 'New Mexico' },
-                  { value: 'New York', label: 'New York' },
-                  { value: 'North Carolina', label: 'North Carolina' },
-                  { value: 'North Dakota', label: 'North Dakota' },
-                  { value: 'Ohio', label: 'Ohio' },
-                  { value: 'Oklahoma', label: 'Oklahoma' },
-                  { value: 'Oregon', label: 'Oregon' },
-                  { value: 'Pennsylvania', label: 'Pennsylvania' },
-                  { value: 'Rhode Island', label: 'Rhode Island' },
-                  { value: 'South California', label: 'South California' },
-                  { value: 'South Dakota', label: 'South Dakota' },
-                  { value: 'Tennessee', label: 'Tennessee' },
-                  { value: 'Texas', label: 'Texas' },
-                  { value: 'Utah', label: 'Utah' },
-                  { value: 'Vermont', label: 'Vermont' },
-                  { value: 'Virginia', label: 'Virginia' },
-                  { value: 'Washington', label: 'Washington' },
-                  { value: 'West Virginia', label: 'West Virginia' },
-                  { value: 'Wisconsin', label: 'Wisconsin' },
-                  { value: 'Wyoming', label: 'Wyoming' }
-                ]}
-              />
-              <p className="hint">Proposed validator's US state. Example: New York.</p>
-            </div>
-          </div>
-          <div className="right">
-            <div className="form-el">
-              <label htmlFor="zip-code">Zip Code</label>
-              <input
-                type="text"
-                id="zip-code"
-                value={validatorStore.zipCode}
-                onChange={e => validatorStore.changeValidatorMetadata(e, 'zipCode')}
-              />
-              <p className="hint">Proposed validator's postal code. Example: 10005.</p>
-            </div>
-          </div>
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="license-id">License ID</label>
-              <input
-                type="text"
-                id="license-id"
-                value={validatorStore.licenseID}
-                onChange={e => validatorStore.changeValidatorMetadata(e, 'licenseID')}
-              />
-              <p className="hint">Proposed validator's notary license ID. Example: 191947.</p>
-            </div>
-          </div>
-          <div className="right">
-            <div className="form-el">
-              <label htmlFor="license-expiration">License Expiration</label>
-              <input
-                type="date"
-                id="license-expiration"
-                value={validatorStore.licenseExpiration}
-                onChange={e => validatorStore.changeValidatorMetadata(e, 'licenseExpiration')}
-              />
-              <p className="hint">When proposed validator's notary license is expired. Example: 11/10/2021.</p>
-            </div>
-          </div>
+      <div className="frm-Validator">
+        <div className="frm-Validator_Row">
+          <FormInput
+            hint="Proposed validator's full name. Example: Jefferson L. Flowers."
+            id="full-name"
+            networkBranch={networkBranch}
+            onChange={e => validatorStore.changeValidatorMetadata(e, 'fullName')}
+            title="Full Name"
+            value={validatorStore.fullName}
+          />
+          <FormAutocomplete
+            autocompleteItem={AutocompleteItem}
+            hint="Proposed validator's registration address. Example: 110 Wall St., New York."
+            inputProps={inputProps}
+            networkBranch={networkBranch}
+            onSelect={this.onSelectAutocomplete}
+            title="Address"
+          />
+        </div>
+        <div className="frm-Validator_Row">
+          <FormSelect
+            hint="Proposed validator's US state. Example: New York."
+            id="us-state"
+            name="form-field-name"
+            networkBranch={networkBranch}
+            onChange={e => validatorStore.changeValidatorMetadata(e, 'state')}
+            options={US_STATES}
+            title="State"
+            value={validatorStore.state}
+          />
+          <FormInput
+            hint="Proposed validator's postal code. Example: 10005."
+            id="zip-code"
+            networkBranch={networkBranch}
+            onChange={e => validatorStore.changeValidatorMetadata(e, 'zipCode')}
+            title="Zip Code"
+            value={validatorStore.zipCode}
+          />
+        </div>
+        <div className="frm-Validator_Row">
+          <FormInput
+            hint="Proposed validator's notary license ID. Example: 191947."
+            id="license-id"
+            networkBranch={networkBranch}
+            onChange={e => validatorStore.changeValidatorMetadata(e, 'licenseID')}
+            title="License ID"
+            value={validatorStore.licenseID}
+          />
+          <FormInput
+            hint="When proposed validator's notary license is expired. Example: 11/10/2021."
+            id="license-expiration"
+            networkBranch={networkBranch}
+            onChange={e => validatorStore.changeValidatorMetadata(e, 'licenseExpiration')}
+            title="License Expiration"
+            type="date"
+            value={validatorStore.licenseExpiration}
+          />
        </div>
-        <hr />
      </div>
    )
  }