Add read-only inputs to UI plus Copy to Clipboard buttons (#3095)

* Adds readOnly prop to Input, convert disabled props to it (#3066)

* WIP

* Adds copy icon to readOnly Input (#3009)

* Added Copy to Clipboard buttons on the UI (#3009)

* copiable to allowCopy props #3095

* Padded copy icons (#3095)

* Fixed password width in account creation

* Copyable value in MethodDecoding

js/src/views/Status/components/MiningSettings/MiningSettings.js

@@ -45,26 +45,41 @@ export default class MiningSettings extends Component {
           hint='the mining author'
           value={ coinbase }
           onSubmit={ this.onAuthorChange }
-          { ...this._test('author') } />
+          allowCopy
+          floatCopy
+          { ...this._test('author') }
+        />
+
         <Input
           label='extradata'
           hint='extra data for mined blocks'
           value={ decodeExtraData(extraData) }
           onSubmit={ this.onExtraDataChange }
           defaultValue={ decodeExtraData(defaultExtraData) }
-          { ...this._test('extra-data') } />
+          allowCopy
+          floatCopy
+          { ...this._test('extra-data') }
+        />
+
         <Input
           label='minimal gas price'
           hint='the minimum gas price for mining'
           value={ toNiceNumber(minGasPrice) }
           onSubmit={ this.onMinGasPriceChange }
-          { ...this._test('min-gas-price') } />
+          allowCopy={ minGasPrice.toString() }
+          floatCopy
+          { ...this._test('min-gas-price') }
+        />
+
         <Input
           label='gas floor target'
           hint='the gas floor target for mining'
           value={ toNiceNumber(gasFloorTarget) }
           onSubmit={ this.onGasFloorTargetChange }
-          { ...this._test('gas-floor-target') } />
+          allowCopy={ gasFloorTarget.toString() }
+          floatCopy
+          { ...this._test('gas-floor-target') }
+        />
       </div>
     );
   }

js/src/views/Status/components/Status/Status.js

@@ -97,21 +97,21 @@ export default class Status extends Component {
       <div { ...this._test('settings') }>
         <ContainerTitle title='network settings' />
         <Input
-          disabled
+          readOnly
           label='chain'
           value={ nodeStatus.netChain }
           { ...this._test('chain') } />
         <div className={ styles.row }>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='peers'
               value={ peers }
               { ...this._test('peers') } />
           </div>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='network port'
               value={ nodeStatus.netPort.toString() }
               { ...this._test('network-port') } />
@@ -119,21 +119,21 @@ export default class Status extends Component {
         </div>
 
         <Input
-          disabled
+          readOnly
           label='rpc enabled'
           value={ rpcSettings.enabled ? 'yes' : 'no' }
           { ...this._test('rpc-enabled') } />
         <div className={ styles.row }>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='rpc interface'
               value={ rpcSettings.interface }
               { ...this._test('rpc-interface') } />
           </div>
           <div className={ styles.col6 }>
             <Input
-              disabled
+              readOnly
               label='rpc port'
               value={ rpcSettings.port.toString() }
               { ...this._test('rpc-port') } />