Moving Copy component

client/coral-admin/src/routes/Moderation/components/UserDetail.css

@@ -35,9 +35,8 @@
   border: none;
   background-color: transparent;
   font-size: 16px;
-  position: absolute;
-  width: 90%;
   outline: none;
+  width: calc(100% - 90px);
 }
 
 .commentStatuses {

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -1,8 +1,8 @@
 import React, {PropTypes} from 'react';
-import {Button, Drawer, Copy} from 'coral-ui';
-import styles from './UserDetail.css';
-import Slot from 'coral-framework/components/Slot';
 import Comment from './Comment';
+import styles from './UserDetail.css';
+import {Button, Drawer} from 'coral-ui';
+import {Slot, Copy} from 'coral-framework/components';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
 
 export default class UserDetail extends React.Component {
@@ -98,13 +98,16 @@ export default class UserDetail extends React.Component {
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
-        {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
 
-        <Copy onCopy={() => this.showCopied()} text={profile} className={styles.profileEmail}>
-          <Button className={styles.copyButton}>
-            {this.state.emailCopied ? 'Copied!' : 'Copy'}
-          </Button>
-        </Copy>
+        <div>
+          {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+
+          <Copy onCopy={() => this.showCopied()} text={profile} className={styles.profileEmail}>
+            <Button className={styles.copyButton}>
+              {this.state.emailCopied ? 'Copied!' : 'Copy'}
+            </Button>
+          </Copy>
+        </div>
 
         <Slot
           fill="userProfile"

client/coral-framework/components/Copy.js

@@ -22,10 +22,11 @@ export default class Copy extends Component {
   }
 
   render() {
-    const {children, target = '', text = ''} = this.props;
+    const {children, target = '', text = '', className = ''} = this.props;
 
     return (
      <span
+       className={className}
        ref={this.refCopyButton}
        data-clipboard-action="copy"
        data-clipboard-text={text}

client/coral-framework/components/index.js

@@ -1 +1,2 @@
 export {default as Slot} from './Slot';
+export {default as Copy} from './Copy';

client/coral-ui/index.js

@@ -24,4 +24,3 @@ export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
 export {default as TextArea} from './components/TextArea';
 export {default as Drawer} from './components/Drawer';
-export {default as Copy} from './components/Copy';

plugin-api/beta/client/components/index.js

@@ -1 +1,2 @@
 export {Slot} from 'coral-framework/components';
+export {Copy} from 'coral-framework/components';