Adding Respect Button UI

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;

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 />
             </>
           }
         />

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;

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