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>
   );
 };

src/core/client/ui/components/Input/Input.css

@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}

src/core/client/ui/components/Input/Input.tsx

@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./Input.css";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;

src/core/client/ui/components/Input/index.ts

@@ -0,0 +1,2 @@
+export * from "./Input";
+export { default } from "./Input";

src/core/client/ui/components/Tooltip/Tooltip.css

@@ -0,0 +1,14 @@
+.root {
+  background: #ffffff !important;
+  border: 1px solid #c9cacb;
+  box-sizing: border-box;
+  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 1px;
+  color: #222 !important;
+  display: flex !important;
+
+  &:after,
+  &::before {
+    border-top-color: transparent !important;
+  }
+}

src/core/client/ui/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import * as styles from "./Tooltip.css";
+
+class Tooltip extends React.Component<ReactTooltip.Props> {
+  public render() {
+    return <ReactTooltip className={styles.root} {...this.props} />;
+  }
+}
+
+export default Tooltip;

src/core/client/ui/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export { default } from "./Tooltip";

src/core/client/ui/components/index.ts

@@ -2,3 +2,5 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Tooltip } from "./Tooltip";
+export { default as Input } from "./Input";