From b664b9abc9184105c0a4ca41dbadaa3452a5e88f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 25 Sep 2018 18:03:56 -0300
Subject: [PATCH] Adding Respect Button UI

---
 .../comments/components/RespectButton.tsx     | 21 +++++++++++++++++++
 .../comments/containers/CommentContainer.tsx  |  2 ++
 .../containers/RespectButtonContainer.tsx     |  9 ++++++++
 src/locales/en-US/stream.ftl                  |  2 ++
 4 files changed, 34 insertions(+)
 create mode 100644 src/core/client/stream/tabs/comments/components/RespectButton.tsx
 create mode 100644 src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx

diff --git a/src/core/client/stream/tabs/comments/components/RespectButton.tsx b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
new file mode 100644
index 000000000..0bf7bc6fa
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
@@ -0,0 +1,21 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+
+import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
+
+class RespectButton extends React.Component {
+  public render() {
+    return (
+      <Button variant="ghost" size="small">
+        <MatchMedia gtWidth="xs">
+          <ButtonIcon>thumb_up_alt</ButtonIcon>
+        </MatchMedia>
+        <Localized id="comments-respectButton-respect">
+          <span>Respect</span>
+        </Localized>
+      </Button>
+    );
+  }
+}
+
+export default RespectButton;
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index 24e09fd23..9c5e45020 100644
--- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
@@ -19,6 +19,7 @@ import ReplyButton from "../components/Comment/ReplyButton";
 import EditCommentFormContainer from "./EditCommentFormContainer";
 import PermalinkButtonContainer from "./PermalinkButtonContainer";
 import ReplyCommentFormContainer from "./ReplyCommentFormContainer";
+import RespectButtonContainer from "./RespectButtonContainer";
 
 interface InnerProps {
   me: MeData | null;
@@ -150,6 +151,7 @@ export class CommentContainer extends Component<InnerProps, State> {
                 active={showReplyDialog}
               />
               <PermalinkButtonContainer commentID={comment.id} />
+              <RespectButtonContainer />
             </>
           }
         />
diff --git a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
new file mode 100644
index 000000000..1c34ae75c
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
@@ -0,0 +1,9 @@
+import React, { StatelessComponent } from "react";
+
+import RespectButton from "../components/RespectButton";
+
+export const RespectButtonContainer: StatelessComponent = () => {
+  return <RespectButton />;
+};
+
+export default RespectButtonContainer;
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index a62d6723a..0a8ecced6 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -68,3 +68,5 @@ comments-editCommentForm-rte =
 comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
 comments-editedMarker-edited = Edited
+
+comments-respectButton-respect = Respect