Merge pull request #2731 from ethcore/ng-copy-clipboard-fix

Fixed Snackbar not showing and/or behind transactions (#2730)

js/src/views/Account/Header/header.css

@@ -41,3 +41,8 @@
 .uuidline {
   display: inline-block;
 }
+
+.address {
+  white-space: nowrap;
+  font-family: monospace;
+}

js/src/views/Account/Header/header.js

@@ -19,7 +19,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import IconButton from 'material-ui/IconButton';
 import Snackbar from 'material-ui/Snackbar';
 import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import { lightWhite, fullWhite, lightBlack } from 'material-ui/styles/colors';
+import { lightWhite, fullWhite, darkBlack } from 'material-ui/styles/colors';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
 
@@ -63,21 +63,30 @@ export default class Header extends Component {
       : <div className={ styles.uuidline }>uuid: { uuid }</div>;
 
     return (
+      <div>
+
+        <Snackbar
+          open={ addressCopied }
+          message={
+            <span>
+              Address
+              <span className={ styles.address }> { address } </span>
+              copied to clipboard
+            </span>
+          }
+          autoHideDuration={ 4000 }
+          onRequestClose={ this.handleCopyAddressClose }
+          bodyStyle={ {
+            backgroundColor: darkBlack
+          } }
+        />
+
         <Container>
           <IdentityIcon
             address={ address } />
           <div className={ styles.floatleft }>
             <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
             <div className={ styles.addressline }>
-            <Snackbar
-              open={ addressCopied }
-              message={ `Address ${address} copied to clipboard` }
-              autoHideDuration={ 4000 }
-              onRequestClose={ this.handleCopyAddressClose }
-              bodyStyle={ {
-                backgroundColor: lightBlack
-              } }
-            />
               <CopyToClipboard
                 onCopy={ this.handleCopyAddress }
                 text={ address } >
@@ -115,6 +124,7 @@ export default class Header extends Component {
               balance={ balance } />
           </div>
         </Container>
+      </div>
     );
   }