(add) form select component - (add) form input component - (add) form input title component - (add) form textarea component

src/assets/stylesheets/base/_forms.scss

@@ -11,9 +11,11 @@ label {
 }
 
 input {
+    // TODO: delete
     @include form-element-base-style();
     height: $input-height;
 
+    // TODO: keep
     &[type='radio'] {
         display: none;
     }
@@ -29,6 +31,7 @@ textarea {
 }
 
 select {
+    // TODO: delete
     @include form-element-base-style();
     @include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
     appearance: none;

src/assets/stylesheets/components/_BallotKeysMetadata.scss

@@ -0,0 +1,13 @@
+.frm-BallotKeysMetadata_Row {
+    margin-bottom: $base-grid-gap;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        display: grid;
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}

src/assets/stylesheets/components/_ButtonAddBallot.scss

@@ -1,7 +1,8 @@
-$sw-ButtonAddBallot-height: 36px;
+$sw-ButtonAddBallot-height: 44px;
 
 .sw-ButtonAddBallot {
     align-items: center;
+    border: none;
     border-radius: 3px;
     color: #fff;
     cursor: pointer;

src/assets/stylesheets/components/_FormFieldTitle.scss

@@ -0,0 +1,7 @@
+.frm-FormFieldTitle {
+    color: $gray-text-color;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 1.2;
+    margin-bottom: 15px;
+}

src/assets/stylesheets/components/_FormInput.scss

@@ -0,0 +1,4 @@
+.frm-FormInput_Field {
+    @include form-element-base-style();
+    height: $input-height;
+}

src/assets/stylesheets/components/_FormSelect.scss

@@ -0,0 +1,10 @@
+.frm-FormSelect {
+    @include form-element-base-style();
+    @include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
+    appearance: none;
+    background-image: url('#{ $base-images-path }/Base/select.png');
+    background-position: right 13px center;
+    background-repeat: no-repeat;
+    height: $input-height;
+    padding-right: 30px;
+}

src/assets/stylesheets/components/_FormTextarea.scss

@@ -0,0 +1,8 @@
+.frm-FormTextarea_Field {
+    @include form-element-base-style();
+    height: 70px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    resize: none;
+    width: 100%;
+}

src/assets/stylesheets/components/_index.scss

@@ -4,6 +4,7 @@
 @import "BallotDataPair";
 @import "BallotFooter";
 @import "BallotInfoContainer";
+@import "BallotKeysMetadata";
 @import "Ballots";
 @import "BaseLoader";
 @import "ButtonAddBallot";
@@ -12,7 +13,11 @@
 @import "ButtonNewBallot";
 @import "ButtonVoting";
 @import "Footer";
+@import "FormFieldTitle";
 @import "FormHint";
+@import "FormInput";
+@import "FormSelect";
+@import "FormTextarea";
 @import "Header";
 @import "IconActive";
 @import "IconAdd";
@@ -41,4 +46,4 @@
 @import "Separator";
 @import "SocialIcons";
 @import "VoteProgressBar";
-@import "Votes";
+@import "Votes";

src/components/BallotKeysMetadata/index.js

@@ -1,18 +1,22 @@
 import React from 'react'
-import Select from 'react-select'
+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 {
   render() {
-    const { ballotStore, contractsStore } = this.props
+    const { ballotStore, contractsStore, networkBranch } = this.props
     let options = []
+
     for (var key in contractsStore.validatorsMetadata) {
       if (contractsStore.validatorsMetadata.hasOwnProperty(key)) {
         options.push(contractsStore.validatorsMetadata[key])
       }
     }
+
     let newVotingPayoutKeys = ''
     if (
       ballotStore.isNewValidatorPersonalData &&
@@ -56,62 +60,50 @@ export class BallotKeysMetadata extends React.Component {
         </div>
       )
     }
+
     return (
-      <div>
+      <div className="frm-BallotKeysMetadata">
-        <div>
+        <div className="frm-BallotKeysMetadata_Row">
-          <div className="left">
+          <FormInput
-            <div className="form-el">
+            id="key"
-              <label htmlFor="key">{ballotStore.isNewValidatorPersonalData ? 'New Mining Key' : 'Affected Key'}</label>
+            networkBranch={networkBranch}
-              <input
+            onChange={e => ballotStore.changeBallotMetadata(e, 'affectedKey', 'ballotKeys')}
-                type="text"
+            title={ballotStore.isNewValidatorPersonalData ? 'New Mining Key' : 'Affected Key'}
-                id="key"
+            value={ballotStore.ballotKeys.affectedKey}
-                value={ballotStore.ballotKeys.affectedKey}
+            hint={`${
-                onChange={e => ballotStore.changeBallotMetadata(e, 'affectedKey', 'ballotKeys')}
+              ballotStore.isNewValidatorPersonalData
-              />
+                ? 'Mining key address of new validator.'
-              <p className="hint">
+                : 'Affected key address of validator to vote for.'
-                {ballotStore.isNewValidatorPersonalData
+            }
-                  ? 'Mining key address of new validator.'
+            <br>Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.`}
-                  : 'Affected key address of validator to vote for.'}
+          />
-                <br />
+          <FormSelect
-                Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
+            disabled={ballotStore.isNewValidatorPersonalData}
-              </p>
+            hint="Mining key address of validator to vote for.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee."
-            </div>
+            id="mining-key"
-          </div>
+            name="form-field-name"
-          <div className="right">
+            networkBranch={networkBranch}
-            <div className="form-el">
+            onChange={ballotStore.setMiningKey}
-              <label htmlFor="mining-key">Mining Key</label>
+            options={options}
-              <Select.Creatable
+            title="Mining Key"
-                name="form-field-name"
+            value={ballotStore.ballotKeys.miningKey}
-                id="mining-key"
+          />
-                value={ballotStore.ballotKeys.miningKey}
-                onChange={ballotStore.setMiningKey}
-                options={options}
-                disabled={ballotStore.isNewValidatorPersonalData}
-              />
-              <p className="hint">
-                Mining key address of validator to vote for.
-                <br />
-                Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
-              </p>
-            </div>
-          </div>
-          <div className="clearfix"> </div>
-          {newVotingPayoutKeys}
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="datetime-local">Ballot End</label>
-              <input
-                type="datetime-local"
-                id="datetime-local"
-                value={ballotStore.endTime}
-                min={ballotStore.endTime}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
-              />
-              <p className="hint">Ballot's end time.</p>
-            </div>
-          </div>
         </div>
-        <hr />
+        <div className="clearfix"> </div>
+        {newVotingPayoutKeys}
+        <div className="frm-BallotKeysMetadata_Row">
+          <FormInput
+            hint="Ballot's end time."
+            id="datetime-local"
+            min={ballotStore.endTime}
+            networkBranch={networkBranch}
+            onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
+            title="Ballot End"
+            type="datetime-local"
+            value={ballotStore.endTime}
+          />
+        </div>
+        <Separator />
       </div>
     )
   }

src/components/FormFieldTitle/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const FormFieldTitle = ({ extraClassName = '', text, htmlFor }) => {
+  return (
+    <label className={`frm-FormFieldTitle ${extraClassName}`} htmlFor={htmlFor}>
+      {text}
+    </label>
+  )
+}

src/components/FormHint/index.js

@@ -1,5 +1,10 @@
 import React from 'react'
 
 export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
-  return <p className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}>{text}</p>
+  return (
+    <p
+      className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}
+      dangerouslySetInnerHTML={{ __html: text }}
+    />
+  )
 }

src/components/FormInput/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { FormFieldTitle } from '../FormFieldTitle'
+import { FormHint } from '../FormHint'
+
+export const FormInput = ({
+  disabled = false,
+  extraClassName = '',
+  hint,
+  id,
+  min,
+  networkBranch,
+  onChange,
+  placeholder,
+  title,
+  type = 'text',
+  value
+}) => {
+  return (
+    <div className={`frm-FormInput ${extraClassName}`}>
+      <FormFieldTitle htmlFor={id} text={title} />
+      <input
+        className="frm-FormInput_Field"
+        disabled={disabled}
+        id={id}
+        min={min}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type}
+        value={value}
+      />
+      {hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
+    </div>
+  )
+}

src/components/FormSelect/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import Select from 'react-select'
+import { FormFieldTitle } from '../FormFieldTitle'
+import { FormHint } from '../FormHint'
+
+export const FormSelect = ({
+  disabled = false,
+  extraClassName = '',
+  hint,
+  id,
+  name = '',
+  networkBranch,
+  onChange,
+  options,
+  title,
+  value
+}) => {
+  return (
+    <div className={`frm-FormSelect ${extraClassName}`}>
+      <FormFieldTitle htmlFor={id} text={title} />
+      <label className="frm-FormSelect_Title" htmlFor={id}>
+        {title}
+      </label>
+      <Select.Creatable name={name} id={id} value={value} onChange={onChange} options={options} disabled={disabled} />
+      {hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
+    </div>
+  )
+}

src/components/FormTextarea/index.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { FormFieldTitle } from '../FormFieldTitle'
+import { FormHint } from '../FormHint'
+
+export const FormTextarea = ({
+  disabled = false,
+  extraClassName = '',
+  hint,
+  id,
+  networkBranch,
+  onChange,
+  placeholder,
+  title,
+  value
+}) => {
+  return (
+    <div className={`frm-FormTextarea ${extraClassName}`}>
+      <FormFieldTitle htmlFor={id} text={title} />
+      <textarea
+        className="frm-FormTextarea_Field"
+        disabled={disabled}
+        id={id}
+        onChange={onChange}
+        placeholder={placeholder}
+        rows="4"
+        value={value}
+      />
+      {hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
+    </div>
+  )
+}

src/components/NewBallot/index.js

@@ -6,6 +6,7 @@ import { BallotKeysMetadata } from '../BallotKeysMetadata'
 import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
 import { BallotProxyMetadata } from '../BallotProxyMetadata'
 import { ButtonAddBallot } from '../ButtonAddBallot'
+import { FormTextarea } from '../FormTextarea'
 import { KeysTypes } from '../KeysTypes'
 import { NewBallotMenu } from '../NewBallotMenu'
 import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
@@ -425,7 +426,7 @@ export class NewBallot extends React.Component {
 
     switch (ballotStore.ballotType) {
       case ballotStore.BallotType.keys:
-        metadata = <BallotKeysMetadata />
+        metadata = <BallotKeysMetadata networkBranch={networkBranch} />
         minThreshold = contractsStore.keysBallotThreshold
         break
       case ballotStore.BallotType.minThreshold:
@@ -458,10 +459,13 @@ export class NewBallot extends React.Component {
             />
           </div>
           <div className="new-NewBallot_FormContent">
-            <div className="form-el">
+            <FormTextarea
-              <label>Description of the ballot</label>
+              id="datetime-local"
-              <textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
+              networkBranch={networkBranch}
-            </div>
+              onChange={e => ballotStore.setMemo(e)}
+              title="Description of the ballot"
+              value={ballotStore.memo}
+            />
             <Separator />
             {ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
             {ballotStore.isNewValidatorPersonalData ? <Validator /> : null}