Permalink ui

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

@@ -3,9 +3,17 @@
 }
 
 .gutterBottom {
-  margin-bottom: calc(2px * $spacing-unit);
+  margin-bottom: calc(2 px * $spacing-unit);
 }
 
 .author {
   font-weight: $font-weight-medium;
 }
+
+.shareButton {
+  padding: 10px 0;
+}
+
+.input {
+  margin-right: 5px;
+}

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

@@ -1,9 +1,7 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
-
-import { Typography } from "talk-ui/components";
-
+import { Button, Input, Tooltip, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
@@ -25,6 +23,20 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
+      <div className={cn("talk-comment-footer")}>
+        <Button
+          className={styles.shareButton}
+          data-tip
+          data-for="tooltip"
+          data-event="click"
+        >
+          Share
+        </Button>
+        <Tooltip id="tooltip" effect="solid">
+          <Input value="ad" className={styles.input} />
+          <Button primary>Copy</Button>
+        </Tooltip>
+      </div>
     </div>
   );
 };