Permalink

client/coral-plugin-permalinks/PermalinkButton.js

@@ -3,6 +3,8 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './translations';
 import onClickOutside from 'react-onclickoutside';
 const name = 'coral-plugin-permalinks';
+import {Button} from 'coral-ui';
+import styles from './styles.css';
 
 const lang = new I18n(translations);
 
@@ -32,40 +34,37 @@ class PermalinkButton extends React.Component {
     this.permalinkInput.select();
     try {
       document.execCommand('copy');
-      this.setState({copySuccessful: true});
+      this.setState({copySuccessful: true, copyFailure: null});
     } catch (err) {
-      this.setState({copyFailure: true});
+      this.setState({copyFailure: true, copySuccessful: null});
     }
 
     setTimeout(() => {
       this.setState({copyFailure: null, copySuccessful: null});
-    }, 4500);
+    }, 3500);
   }
 
   render () {
+    const {copySuccessful, copyFailure} = this.state;
     return (
       <div className={`${name}-container`}>
         <button onClick={this.toggle} className={`${name}-button`}>
           <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
           {lang.t('permalink.permalink')}
         </button>
-        <div
-          className={`${name}-popover ${this.state.popoverOpen ? 'active' : ''}`}>
+        <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
           <input
             className={`${name}-copy-field`}
             type='text'
             ref={input => this.permalinkInput = input}
             value={`${this.props.articleURL}#${this.props.commentId}`}
             onChange={() => {}} />
-          <button className={`${name}-copy-button`} onClick={this.copyPermalink}>Copy</button>
-          {
-            this.state.copySuccessful ? <p className={`${name}-copied-text`}>copied to clipboard</p> : null
-          }
-          {
-            this.state.copyFailure
-            ? <p className={`${name}-copied-error`}>copying to clipboard not supported in this browser. Use Cmd + C.</p>
-            : null
-          }
+          <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
+            onClick={this.copyPermalink} >
+            {!copyFailure && !copySuccessful && 'Copy'}
+            {copySuccessful && 'Copied'}
+            {copyFailure && 'Not supported'}
+          </Button>
         </div>
       </div>
     );

client/coral-plugin-permalinks/styles.css

@@ -0,0 +1,50 @@
+.container {
+  border-radius: 3px;
+  border: solid 1px #D8D8D8;
+  border-radius: 3px;
+  padding: 15px 10px;
+  box-sizing: border-box;
+  box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  width: auto;
+  margin: 0 auto;
+  left: 0;
+  margin: 0 5px;
+
+  input {
+    display: inline-block;
+    width: calc(100% - 78px);
+    padding: 8px;
+    border-radius: 3px;
+    border: solid 1px #e0e0e0;
+    height: 32px;
+    box-sizing: border-box;
+    font-size: 1em;
+  }
+
+  button {
+    display: inline-block;
+    float: right;
+    box-sizing: border-box;
+    margin: 0;
+    background-color: #e0e0e0;
+    font-size: 1em;
+    width: auto;
+    height: auto;
+    padding: 2px;
+    transition: background-color 0.4s ease;
+
+    &:hover{
+      color: black;
+    }
+
+    &.success {
+      background-color: #00897B;
+      color: white;
+    }
+
+    &.failure {
+      background-color: #FF5252;
+      color: white;
+    }
+  }
+}