(add) Modify Proxy Contract Ballot component layout

src/assets/stylesheets/components/_BallotProxyMetadata.scss

@@ -0,0 +1,15 @@
+.frm-BallotProxyMetadata {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-BallotProxyMetadata_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;
+    }
+}

src/assets/stylesheets/components/_index.scss

@@ -6,6 +6,7 @@
 @import "BallotInfoContainer";
 @import "BallotKeysMetadata";
 @import "BallotMinThresholdMetadata";
+@import "BallotProxyMetadata";
 @import "Ballots";
 @import "BaseLoader";
 @import "ButtonAddBallot";

src/components/BallotProxyMetadata/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
-import { inject, observer } from 'mobx-react'
 import Select from 'react-select'
+import { FormInput } from '../FormInput'
+import { FormSelect } from '../FormSelect'
+import { inject, observer } from 'mobx-react'
 
 @inject('ballotStore', 'contractsStore')
 @observer
 export class BallotProxyMetadata extends React.Component {
   render() {
-    const { ballotStore, contractsStore } = this.props
+    const { ballotStore, contractsStore, networkBranch } = this.props
     let options = [
       /*0*/ { value: '', label: '' },
       /*1*/ { value: '1', label: ballotStore.ProxyBallotType[1] }, // KeysManager
@@ -23,46 +25,37 @@ export class BallotProxyMetadata extends React.Component {
     }
 
     return (
-      <div>
-        <div>
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="key">Proposed Address</label>
-              <input
-                type="text"
-                id="key"
-                value={ballotStore.ballotProxy.proposedAddress}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'proposedAddress', 'ballotProxy')}
-              />
-              <p className="hint">Proposed address of a new proxy contract.</p>
-            </div>
-          </div>
-          <div className="right">
-            <div className="form-el">
-              <label htmlFor="contract-type">Contract Type</label>
-              <Select
-                id="contract-type"
-                value={ballotStore.ballotProxy.contractType}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'contractType', 'ballotProxy')}
-                options={options}
-              />
-              <p className="hint">Choose proxy contract type.</p>
-            </div>
-          </div>
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="datetime-local">Ballot End</label>
-              <input
-                type="datetime-local"
-                id="datetime-local"
-                value={ballotStore.endTime}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
-              />
-              <p className="hint">Ballot's end time.</p>
-            </div>
-          </div>
+      <div className="frm-BallotProxyMetadata">
+        <div className="frm-BallotProxyMetadata_Row">
+          <FormInput
+            hint="Proposed address of a new proxy contract."
+            id="key"
+            networkBranch={networkBranch}
+            onChange={e => ballotStore.changeBallotMetadata(e, 'proposedAddress', 'ballotProxy')}
+            title="Proposed Address"
+            value={ballotStore.ballotProxy.proposedAddress}
+          />
+          <FormSelect
+            hint="Choose proxy contract type."
+            id="contract-type"
+            networkBranch={networkBranch}
+            onChange={e => ballotStore.changeBallotMetadata(e, 'contractType', 'ballotProxy')}
+            options={options}
+            title="Contract Type"
+            value={ballotStore.ballotProxy.contractType}
+          />
+        </div>
+        <div className="frm-BallotProxyMetadata_Row">
+          <FormInput
+            hint="Ballot's end time."
+            id="datetime-local"
+            networkBranch={networkBranch}
+            onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
+            title="Ballot End"
+            type="datetime-local"
+            value={ballotStore.endTime}
+          />
         </div>
-        <hr />
       </div>
     )
   }

src/components/NewBallot/index.js

@@ -434,7 +434,7 @@ export class NewBallot extends React.Component {
         minThreshold = contractsStore.minThresholdBallotThreshold
         break
       case ballotStore.BallotType.proxy:
-        metadata = <BallotProxyMetadata />
+        metadata = <BallotProxyMetadata networkBranch={networkBranch} />
         minThreshold = contractsStore.proxyBallotThreshold
         break
       case ballotStore.BallotType.emissionFunds: