Working

src/core/client/stream/components/Comment/Comment.tsx

@@ -28,8 +28,12 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <div>
         <Popover
           // tslint:disable-next-line:jsx-no-lambda
-          body={({ forwardRef }) => (
-            <PermalinkPopover commentId={props.id} forwardRef={forwardRef} />
+          body={({ toggleVisibility, forwardRef }) => (
+            <PermalinkPopover
+              commentID={props.id}
+              forwardRef={forwardRef}
+              toggleVisibility={toggleVisibility}
+            />
           )}
         >
           {({ toggleVisibility, forwardRef }) => (

src/core/client/stream/components/PermalinkPopover.css

@@ -3,11 +3,6 @@
 }
 
 .root {
-  background-color: #ffffff;
-  border: 1px solid #c9cacb;
-  box-sizing: border-box;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 1px;
   padding: 6px 10px;
   display: flex;
 }

src/core/client/stream/components/PermalinkPopover.tsx

@@ -6,9 +6,10 @@ import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
-  commentId: string;
+  commentID: string;
   style?: CSSProperties;
-  innerRef?: RefHandler;
+  forwardRef?: RefHandler;
+  toggleVisibility?: () => any;
 }
 
 interface State {
@@ -34,13 +35,13 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId, style, innerRef } = this.props;
+    const { commentID } = this.props;
     const { copied } = this.state;
     return (
-      <div className={styles.root} style={style} ref={innerRef}>
-        <TextField defaultValue={commentId} className={styles.textField} />
-        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-          <Button primary>
+      <div className={styles.root}>
+        <TextField defaultValue={commentID} className={styles.textField} />
+        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled">
             {copied ? (
               <Localized id="comments-permalink-copied">
                 <span>Copied!</span>