Removing styles from default.css

client/coral-embed-stream/style/default.css

@@ -335,33 +335,6 @@ button.comment__action-button[disabled],
   display: inline-block;
 }
 
-.coral-plugin-permalinks-container {
-  /*position: relative;*/
-  z-index: 2;
-}
-
-.coral-plugin-permalinks-popover {
-  display: none;
-  background-color: white;
-  border: 1px solid black;
-  position: absolute;
-  padding: 5px;
-}
-
-.coral-plugin-permalinks-popover.active {
-  display: block;
-}
-
-.coral-plugin-permalinks-copy-field {
-  display: block;
-  width: calc(100% - 5px);
-}
-
-.coral-plugin-permalinks-copied-text {
-  float: right;
-  margin: 8px;
-}
-
 /* Flag Styles */
 
 .coral-plugin-flags-popup-form {

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -61,7 +61,7 @@ export default class PermalinkButton extends React.Component {
     const {asset} = this.props;
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
-        <div className={`${name}-container`}>
+        <div className={cn(`${name}-container`, styles.container)}>
           <button
             ref={(ref) => this.linkButton = ref}
             onClick={this.toggle}
@@ -69,15 +69,16 @@ export default class PermalinkButton extends React.Component {
             {t('permalink')}
             <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
           </button>
+
           <div
             ref={(ref) => this.popover = ref}
-            className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}>
+            className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}>
 
             <input
               className={cn(styles.input, `${name}-copy-field`)}
               type='text'
               ref={(input) => this.permalinkInput = input}
-              value={`${asset.url}#${this.props.commentId}`}
+              defaultValue={`${asset.url}#${this.props.commentId}`}
             />
 
             <Button

plugins/talk-plugin-permalink/client/components/styles.css

@@ -1,4 +1,8 @@
-.container {
+.popover {
+  display: none;
+  background-color: white;
+  position: absolute;
+
   border-radius: 3px;
   padding: 15px 10px;
   box-sizing: border-box;
@@ -7,7 +11,7 @@
   width: 100%;
   z-index: 10;
 }
-.container::before {
+.popover::before {
   content: '';
   border: 10px solid transparent;
   border-top-color: white;
@@ -17,7 +21,7 @@
   z-index: 2;
 }
 
-.container::after{
+.popover::after{
   content: '';
   border: 10px solid transparent;
   border-top-color: rgba(153, 153, 153, 0.33);
@@ -64,3 +68,11 @@
   background-color: #FF5252;
   color: white;
 }
+
+.container {
+  z-index: 2;
+}
+
+.active {
+  display: block;
+}