wip

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

@@ -9,11 +9,3 @@
 .author {
   font-weight: $font-weight-medium;
 }
-
-.shareButton {
-  padding: 10px 0;
-}
-
-.input {
-  margin-right: 5px;
-}

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

@@ -28,7 +28,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </Typography>
       <Typography>{props.body}</Typography>
       <div className={cn("talk-comment-footer")}>
-        <PermalinkPopover />
+        <PermalinkPopover commentId={props.id} />
       </div>
     </div>
   );

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

@@ -0,0 +1,13 @@
+.shareButton {
+  composes: button from "talk-ui/shared/typography.css";
+  composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  padding: 10px 0;
+}
+
+.textField {
+  margin-right: 5px;
+}
+
+.root {
+  background-color: #fff;
+}

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

@@ -1,22 +1,27 @@
 import React from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Input, Popover } from "talk-ui/components";
+import { Button, Popover, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
 
-class PermalinkPopover extends React.Component {
+interface InnerProps {
+  commentId: string;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
   public render() {
-    const props = this.props;
+    const { commentId } = this.props;
     return (
       <Popover
         body={
-          <div>
-            <Input defaultValue={props.id} className={styles.input} />
-            <CopyToClipboard text={props.id}>
+          <div className={styles.root}>
+            <TextField defaultValue={commentId} className={styles.textField} />
+            <CopyToClipboard text={commentId}>
               <Button primary>Copy</Button>
             </CopyToClipboard>
           </div>
         }
       >
-        <button>Reference element</button>
+        <button className={styles.shareButton}>Share</button>
       </Popover>
     );
   }