Add read-only inputs to UI plus Copy to Clipboard buttons

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 {

js/src/ui/Container/Title/title.css

@@ -15,7 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .byline {
-  color: #aaa;
   overflow: hidden;
   position: relative;
   line-height: 1.2em;
@@ -24,6 +23,12 @@
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+
+  color: #aaa;
+
+  * {
+    color: #aaa !important;
+  }
 }
 
 .title {

js/src/ui/Container/Title/title.js

@@ -24,7 +24,9 @@ export default class Title extends Component {
     title: PropTypes.oneOfType([
       PropTypes.string, PropTypes.node
     ]),
-    byline: PropTypes.string
+    byline: PropTypes.oneOfType([
+      PropTypes.string, PropTypes.node
+    ])
   }
 
   state = {
@@ -34,15 +36,21 @@ export default class Title extends Component {
   render () {
     const { className, title, byline } = this.props;
 
+    const byLine = typeof byline === 'string'
+      ? (
+      <span title={ byline }>
+        { byline }
+      </span>
+      )
+      : byline;
+
     return (
       <div className={ className }>
         <h3 className={ styles.title }>
           { title }
         </h3>
         <div className={ styles.byline }>
-          <span title={ byline }>
-            { byline }
-          </span>
+          { byLine }
         </div>
       </div>
     );

js/src/ui/Form/Input/input.css

@@ -0,0 +1,31 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  position: relative;
+}
+
+.copy {
+  margin-right: 0.5em;
+
+  svg {
+    transition: all .5s ease-in-out;
+  }
+}