(add) Consensus Threshold Ballot component layout

src/assets/stylesheets/components/_BallotMinThresholdMetadata.scss

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

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

src/components/BallotMinThresholdMetadata/index.js

@@ -1,40 +1,35 @@
 import React from 'react'
+import { FormInput } from '../FormInput'
 import { inject, observer } from 'mobx-react'
 
 @inject('ballotStore')
 @observer
 export class BallotMinThresholdMetadata extends React.Component {
   render() {
-    const { ballotStore } = this.props
+    const { ballotStore, networkBranch } = this.props
+
     return (
-      <div>
-        <div className="hidden">
-          <div className="left">
-            <div className="form-el">
-              <label htmlFor="key">Proposed Value</label>
-              <input
-                type="number"
-                id="key"
-                value={ballotStore.ballotMinThreshold.proposedValue}
-                onChange={e => ballotStore.changeBallotMetadata(e, 'proposedValue', 'ballotMinThreshold')}
-              />
-              <p className="hint">Proposed value of the minimum threshold for keys ballot consensus.</p>
-            </div>
-          </div>
-          <div className="right">
-            <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-BallotMinThresholdMetadata">
+        <div className="frm-BallotMinThresholdMetadata_Row">
+          <FormInput
+            hint="Proposed value of the minimum threshold for keys ballot consensus."
+            id="key"
+            networkBranch={networkBranch}
+            onChange={e => ballotStore.changeBallotMetadata(e, 'proposedValue', 'ballotMinThreshold')}
+            title="Proposed Value"
+            type="number"
+            value={ballotStore.ballotMinThreshold.proposedValue}
+          />
+          <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

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