From 942ea7b9167a012fb9d4c8b606bf8d7e90d8f470 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 20 Jun 2017 10:37:10 -0300
Subject: [PATCH] ButtonCopyToClipboard

---
 .../components/ButtonCopyToClipboard.js       | 23 ++-----------------
 .../Moderation/components/UserDetail.js       | 12 +---------
 .../hocs/withCopyToClipboard.js               | 14 ++++-------
 client/coral-ui/components/Button.css         | 10 ++++++++
 locales/en.yml                                |  1 -
 locales/es.yml                                |  1 -
 6 files changed, 18 insertions(+), 43 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js b/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js
index ba25d533c..5bc5767ba 100644
--- a/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js
+++ b/client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js
@@ -4,29 +4,10 @@ import t from 'coral-framework/services/i18n';
 import {withCopyToClipboard} from 'coral-framework/hocs';
 
 class ButtonCopyToClipboard extends React.Component {
-
-  constructor() {
-    super();
-
-    this.state = {
-      emailCopied: false
-    };
-  }
-
-  showCopied() {
-    this.setState({
-      emailCopied: true
-    }, () => {
-      setTimeout(() => this.setState({
-        emailCopied: false
-      }), 3000);
-    });
-  }
-
   render () {
     return (
-      <Button {...this.props}>
-        {this.state.emailCopied ? t('common.copied') : t('common.copy')}
+      <Button {...this.props} >
+        {t('common.copy')}
       </Button>
     );
   }
diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js
index a591d1393..791f47729 100644
--- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js
+++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js
@@ -44,16 +44,6 @@ export default class UserDetail extends React.Component {
     this.props.changeStatus('rejected');
   }
 
-  showCopied() {
-    this.setState({
-      emailCopied: true
-    }, () => {
-      setTimeout(() => this.setState({
-        emailCopied: false
-      }), 3000);
-    });
-  }
-
   render () {
     const {
       root: {
@@ -95,7 +85,7 @@ export default class UserDetail extends React.Component {
 
         <div>
           {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-          <ButtonCopyToClipboard className={styles.copyButton} text={profile} />
+          <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
         </div>
 
         <Slot
diff --git a/client/coral-framework/hocs/withCopyToClipboard.js b/client/coral-framework/hocs/withCopyToClipboard.js
index 17dffd715..9e8046802 100644
--- a/client/coral-framework/hocs/withCopyToClipboard.js
+++ b/client/coral-framework/hocs/withCopyToClipboard.js
@@ -3,31 +3,27 @@ import ReactDOM from 'react-dom';
 import Clipboard from 'clipboard';
 
 export default (WrappedComponent) => {
-
-  class withCopyToClipboard extends React.Component {
+  class WithCopyToClipboard extends React.Component {
     componentDidMount() {
       const clipboard = new Clipboard(ReactDOM.findDOMNode(this));
 
       clipboard.on('success', (e) => {
-        if (this.props.onCopy) {
-          this.props.onCopy();
-        }
         e.clearSelection();
       });
     }
 
     render() {
-      const {target = '', text = '', className = '', ...rest} = this.props;
+      const {copyTarget = '', copyText = '', className = '', ...rest} = this.props;
 
       return <WrappedComponent
         className={className}
         data-clipboard-action="copy"
-        data-clipboard-text={text}
-        data-clipboard-target={target}
+        data-clipboard-text={copyText}
+        data-clipboard-target={copyTarget}
         {...rest}
       />;
     }
   }
 
-  return withCopyToClipboard;
+  return WithCopyToClipboard;
 };
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index 671c55bad..409fc1bc6 100644
--- a/client/coral-ui/components/Button.css
+++ b/client/coral-ui/components/Button.css
@@ -53,6 +53,16 @@
     color: #212121;
 }
 
+.type--local:hover {
+    background: #d6d5d5;
+    color: #212121;
+}
+
+.type--local:active {
+    background: #cccccc;
+    color: #212121;
+}
+
 .type--facebook {
     background-color: #4267b2;
     border-color: #4267b2;
diff --git a/locales/en.yml b/locales/en.yml
index 0bbf594c8..73a7e82d2 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -33,7 +33,6 @@ en:
   comment_post_notif: "Your comment has been posted."
   comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly."
   common:
-    copied: 'Copied'
     copy: 'Copy'
   community:
     account_creation_date: "Account Creation Date"
diff --git a/locales/es.yml b/locales/es.yml
index 9d7e4c939..4eb1ca756 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -33,7 +33,6 @@ es:
   comment_post_notif: "Tu comentario ha sido publicado."
   comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto."
   common:
-    copied: 'Copiado'
     copy: 'Copiar'
   community:
     account_creation_date: "Fecha de creación de la cuenta"