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/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -31,7 +31,8 @@ export default class AccountDetails extends Component {
     return (
       <Form>
         <Input
-          disabled
+          readOnly
+          allowCopy
           hint='a descriptive name for the account'
           label='account name'
           value={ name } />
@@ -54,7 +55,8 @@ export default class AccountDetails extends Component {
 
     return (
       <Input
-        disabled
+        readOnly
+        allowCopy
         hint='the account recovery phrase'
         label='account recovery phrase (keep safe)'
         value={ phrase } />

js/src/modals/CreateAccount/NewAccount/newAccount.js

@@ -84,7 +84,6 @@ export default class CreateAccount extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='a strong, unique password'
               type='password'
@@ -94,7 +93,6 @@ export default class CreateAccount extends Component {
           </div>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password (repeat)'
               hint='verify your password'
               type='password'

js/src/modals/CreateAccount/NewImport/newImport.js

@@ -72,7 +72,6 @@ export default class NewImport extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='the password to unlock the wallet'
               type='password'

js/src/modals/CreateAccount/RawKey/rawKey.js

@@ -75,7 +75,6 @@ export default class RawKey extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='a strong, unique password'
               type='password'
@@ -85,7 +84,6 @@ export default class RawKey extends Component {
           </div>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password (repeat)'
               hint='verify your password'
               type='password'

js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js

@@ -72,7 +72,6 @@ export default class RecoveryPhrase extends Component {
         <div className={ styles.passwords }>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password'
               hint='a strong, unique password'
               type='password'
@@ -82,7 +81,6 @@ export default class RecoveryPhrase extends Component {
           </div>
           <div className={ styles.password }>
             <Input
-              className={ styles.password }
               label='password (repeat)'
               hint='verify your password'
               type='password'

js/src/modals/CreateAccount/createAccount.css

@@ -21,6 +21,15 @@
 .password {
   flex: 0 1 50%;
   width: 50%;
+  box-sizing: border-box;
+
+  &:nth-child(odd) {
+    padding-right: 0.25rem;
+  }
+
+  &:nth-child(even) {
+    padding-left: 0.25rem;
+  }
 }
 
 .passwords {