Merge branch 'next-comment-counts' of github.com:coralproject/talk into next-comment-counts

* 'next-comment-counts' of github.com:coralproject/talk: (53 commits)
  fix: Readd and fix App unittest
  fix: undesired margin
  Correct optimitic updates
  fix: correct typings
  fix: linting
  Optimistic Responses updated
  Adding optimisticresponse for deleteCommentReaction
  Changes
  test: use baseComment and baseAsset in fixtures
  fix: lint
  test: simplify tests
  fix: pass settings to deeper ReplyListContainer
  fix: remove debug
  fix: test updates
  feat: replaced respect with reaction and added some options!
  Adding spected
  More snapshots
  It was the optimistic response
  Adding actionCounts to the fixtures
  Updated snapshots
  ...

src/core/client/stream/components/App.spec.tsx

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import noop from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders comments", () => {
+  const props: PropTypesOf<typeof App> = {
+    activeTab: "COMMENTS",
+    onTabClick: noop,
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/components/__snapshots__/App.spec.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comments 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="App-root"
+>
+  <withPropsOnChange(TabBar)
+    activeTab="COMMENTS"
+    onTabClick={[Function]}
+  >
+    <CommentsTab
+      tabId="COMMENTS"
+    />
+    <MyProfileTab
+      tabId="PROFILE"
+    />
+  </withPropsOnChange(TabBar)>
+  <TabContent
+    activeTab="COMMENTS"
+    className="App-tabContent"
+  >
+    <TabPane
+      tabId="COMMENTS"
+    >
+      <withContext(withLocalStateContainer(CommentsPaneContainer)) />
+    </TabPane>
+    <TabPane
+      tabId="PROFILE"
+    >
+      <withContext(withLocalStateContainer(ProfileQuery)) />
+    </TabPane>
+  </TabContent>
+</withPropsOnChange(HorizontalGutter)>
+`;

src/core/client/stream/mutations/CreateCommentMutation.ts

@@ -158,6 +158,11 @@ function commit(
             editing: {
               editableUntil: new Date(Date.now() + 10000),
             },
+            actionCounts: {
+              reaction: {
+                total: 0,
+              },
+            },
           },
         },
         clientMutationId: (clientMutationId++).toString(),

src/core/client/stream/mutations/CreateCommentReactionMutation.ts

@@ -0,0 +1,70 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutationContainer,
+} from "talk-framework/lib/relay";
+import { Omit } from "talk-framework/types";
+
+import { CreateCommentReactionMutation as MutationTypes } from "talk-stream/__generated__/CreateCommentReactionMutation.graphql";
+
+export type CreateCommentReactionInput = Omit<
+  MutationTypes["variables"]["input"],
+  "clientMutationId"
+>;
+
+const mutation = graphql`
+  mutation CreateCommentReactionMutation($input: CreateCommentReactionInput!) {
+    createCommentReaction(input: $input) {
+      comment {
+        ...ReactionButtonContainer_comment
+      }
+      clientMutationId
+    }
+  }
+`;
+
+let clientMutationId = 0;
+
+function commit(environment: Environment, input: CreateCommentReactionInput) {
+  const source = environment.getStore().getSource();
+  const currentCount = source.get(
+    source.get(source.get(input.commentID)!.actionCounts.__ref)!.reaction.__ref
+  )!.total;
+
+  return commitMutationPromiseNormalized<MutationTypes>(environment, {
+    mutation,
+    variables: {
+      input: {
+        ...input,
+        clientMutationId: clientMutationId.toString(),
+      },
+    },
+    optimisticResponse: {
+      createCommentReaction: {
+        comment: {
+          id: input.commentID,
+          myActionPresence: {
+            reaction: true,
+          },
+          actionCounts: {
+            reaction: {
+              total: currentCount + 1,
+            },
+          },
+        },
+        clientMutationId: (clientMutationId++).toString(),
+      },
+    } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
+  });
+}
+
+export const withCreateCommentReactionMutation = createMutationContainer(
+  "createCommentReaction",
+  commit
+);
+
+export type CreateCommentReactionMutation = (
+  input: CreateCommentReactionInput
+) => Promise<MutationTypes["response"]["createCommentReaction"]>;

src/core/client/stream/mutations/DeleteCommentReactionMutation.ts

@@ -0,0 +1,64 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutationContainer,
+} from "talk-framework/lib/relay";
+
+import { DeleteCommentReactionMutation as MutationTypes } from "talk-stream/__generated__/DeleteCommentReactionMutation.graphql";
+import { CreateCommentReactionInput } from "./CreateCommentReactionMutation";
+
+const mutation = graphql`
+  mutation DeleteCommentReactionMutation($input: CreateCommentReactionInput!) {
+    deleteCommentReaction(input: $input) {
+      comment {
+        ...ReactionButtonContainer_comment
+      }
+      clientMutationId
+    }
+  }
+`;
+
+const clientMutationId = 0;
+
+function commit(environment: Environment, input: CreateCommentReactionInput) {
+  const source = environment.getStore().getSource();
+  const currentCount = source.get(
+    source.get(source.get(input.commentID)!.actionCounts.__ref)!.reaction.__ref
+  )!.total;
+  return commitMutationPromiseNormalized<MutationTypes>(environment, {
+    mutation,
+    variables: {
+      input: {
+        ...input,
+        clientMutationId: clientMutationId.toString(),
+      },
+    },
+    optimisticResponse: {
+      deleteCommentReaction: {
+        comment: {
+          id: input.commentID,
+          myActionPresence: {
+            reaction: false,
+          },
+          actionCounts: {
+            reaction: {
+              total: currentCount - 1,
+            },
+          },
+        },
+        clientMutationId: clientMutationId.toString(),
+      },
+    } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
+  });
+}
+
+export const withDeleteCommentReactionMutation = createMutationContainer(
+  "deleteCommentReaction",
+  commit
+);
+
+export type DeleteCommentReactionMutation = (
+  input: CreateCommentReactionInput
+) => Promise<MutationTypes["response"]["deleteCommentReaction"]>;

src/core/client/stream/mutations/index.ts

@@ -31,3 +31,12 @@ export {
   withSetActiveTabMutation,
   SetActiveTabMutation,
 } from "./SetActiveTabMutation";
+export {
+  withCreateCommentReactionMutation,
+  CreateCommentReactionMutation,
+  CreateCommentReactionInput,
+} from "./CreateCommentReactionMutation";
+export {
+  withDeleteCommentReactionMutation,
+  DeleteCommentReactionMutation,
+} from "./DeleteCommentReactionMutation";

src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkButton.tsx

@@ -35,7 +35,7 @@ class Permalink extends React.Component<PermalinkProps> {
         id={popoverID}
         placement="top-start"
         description="A dialog showing a permalink to the comment"
-        className={styles.popover}
+        classes={{ popover: styles.popover }}
         body={({ toggleVisibility }) => (
           <ClickOutside
             onClickOutside={() =>

src/core/client/stream/tabs/comments/components/PermalinkView.tsx

@@ -10,6 +10,7 @@ import * as styles from "./PermalinkView.css";
 export interface PermalinkViewProps {
   me: PropTypesOf<typeof CommentContainer>["me"];
   asset: PropTypesOf<typeof CommentContainer>["asset"];
+  settings: PropTypesOf<typeof CommentContainer>["settings"];
   comment: PropTypesOf<typeof CommentContainer>["comment"] | null;
   showAllCommentsHref: string | null;
   onShowAllComments: (e: MouseEvent<any>) => void;
@@ -18,6 +19,7 @@ export interface PermalinkViewProps {
 const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   showAllCommentsHref,
   comment,
+  settings,
   asset,
   onShowAllComments,
   me,
@@ -46,7 +48,14 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
           <Typography>Comment not found</Typography>
         </Localized>
       )}
-      {comment && <CommentContainer me={me} comment={comment} asset={asset} />}
+      {comment && (
+        <CommentContainer
+          settings={settings}
+          me={me}
+          comment={comment}
+          asset={asset}
+        />
+      )}
     </div>
   );
 };

src/core/client/stream/tabs/comments/components/ReactionButton.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
+
+interface ReactionButtonProps {
+  onClick: () => void;
+  totalReactions: number;
+  reacted: boolean | null;
+  label: string;
+  labelActive: string | null;
+  icon: string;
+  iconActive: string | null;
+  // color: string;
+}
+
+class ReactionButton extends React.Component<ReactionButtonProps> {
+  public render() {
+    const { totalReactions, reacted } = this.props;
+    return (
+      <Button variant="ghost" size="small" onClick={this.props.onClick}>
+        {!!totalReactions && <span>{totalReactions}</span>}
+        <MatchMedia gtWidth="xs">
+          <ButtonIcon>
+            {reacted
+              ? this.props.iconActive
+                ? this.props.iconActive
+                : this.props.icon
+              : this.props.icon}
+          </ButtonIcon>
+        </MatchMedia>
+        <span>
+          {reacted
+            ? this.props.labelActive
+              ? this.props.labelActive
+              : this.props.label
+            : this.props.label}
+        </span>
+      </Button>
+    );
+  }
+}
+
+export default ReactionButton;

src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx

@@ -25,6 +25,12 @@ it("renders correctly", () => {
     me: null,
     localReply: false,
     disableReplies: false,
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
   };
   const wrapper = shallow(<ReplyListN {...props} />);
   expect(wrapper).toMatchSnapshot();
@@ -40,6 +46,12 @@ describe("when there is more", () => {
     disableShowAll: false,
     indentLevel: 1,
     me: null,
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
   };
 
   const wrapper = shallow(<ReplyListN {...props} />);

src/core/client/stream/tabs/comments/components/ReplyList.tsx

@@ -15,29 +15,21 @@ export interface ReplyListProps {
     id: string;
   };
   comments: ReadonlyArray<
-    { id: string; showConversationLink?: boolean } & PropTypesOf<
-      typeof CommentContainer
-    >["comment"]
+    {
+      id: string;
+      replyListElement?: React.ReactElement<any>;
+      showConversationLink?: boolean;
+    } & PropTypesOf<typeof CommentContainer>["comment"]
   >;
+  settings: PropTypesOf<typeof CommentContainer>["settings"];
   onShowAll?: () => void;
   hasMore?: boolean;
   disableShowAll?: boolean;
   indentLevel?: number;
-  ReplyListComponent?: React.ComponentType<any>;
   localReply?: boolean;
   disableReplies?: boolean;
 }
 
-function getReplyListElement(
-  { ReplyListComponent, me, asset }: ReplyListProps,
-  comment: PropTypesOf<typeof CommentContainer>["comment"]
-) {
-  if (!ReplyListComponent) {
-    return null;
-  }
-  return <ReplyListComponent me={me} comment={comment} asset={asset} />;
-}
-
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <HorizontalGutter
@@ -51,12 +43,13 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             me={props.me}
             comment={comment}
             asset={props.asset}
+            settings={props.settings}
             indentLevel={props.indentLevel}
             localReply={props.localReply}
             disableReplies={props.disableReplies}
             showConversationLink={!!comment.showConversationLink}
           />
-          {getReplyListElement(props, comment)}
+          {comment.replyListElement}
         </HorizontalGutter>
       ))}
       {props.hasMore && (

src/core/client/stream/tabs/comments/components/Stream.spec.tsx

@@ -17,6 +17,12 @@ it("renders correctly", () => {
       isClosed: false,
     },
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     onLoadMore: noop,
     disableLoadMore: false,
     hasMore: false,
@@ -38,6 +44,12 @@ describe("when use is logged in", () => {
       disableLoadMore: false,
       hasMore: false,
       me: {},
+      settings: {
+        reaction: {
+          icon: "thumb_up_alt",
+          label: "Respect",
+        },
+      },
     };
     const wrapper = shallow(<StreamN {...props} />);
     expect(wrapper).toMatchSnapshot();
@@ -51,6 +63,12 @@ describe("when there is more", () => {
       isClosed: false,
     },
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     onLoadMore: sinon.spy(),
     disableLoadMore: false,
     hasMore: true,

src/core/client/stream/tabs/comments/components/Stream.tsx

@@ -18,6 +18,8 @@ export interface StreamProps {
     isClosed?: boolean;
   } & PropTypesOf<typeof CommentContainer>["asset"] &
     PropTypesOf<typeof ReplyListContainer>["asset"];
+  settings: PropTypesOf<typeof CommentContainer>["settings"] &
+    PropTypesOf<typeof ReplyListContainer>["settings"];
   comments: ReadonlyArray<
     { id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
       PropTypesOf<typeof ReplyListContainer>["comment"]
@@ -52,10 +54,12 @@ const Stream: StatelessComponent<StreamProps> = props => {
           <HorizontalGutter key={comment.id}>
             <CommentContainer
               me={props.me}
+              settings={props.settings}
               comment={comment}
               asset={props.asset}
             />
             <ReplyListContainer
+              settings={props.settings}
               me={props.me}
               comment={comment}
               asset={props.asset}

src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap

@@ -24,6 +24,14 @@ exports[`renders correctly 1`] = `
       key="comment-1"
       localReply={false}
       me={null}
+      settings={
+        Object {
+          "reaction": Object {
+            "icon": "thumb_up_alt",
+            "label": "Respect",
+          },
+        }
+      }
       showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
@@ -47,6 +55,14 @@ exports[`renders correctly 1`] = `
       key="comment-2"
       localReply={false}
       me={null}
+      settings={
+        Object {
+          "reaction": Object {
+            "icon": "thumb_up_alt",
+            "label": "Respect",
+          },
+        }
+      }
       showConversationLink={true}
     />
   </withPropsOnChange(HorizontalGutter)>
@@ -75,6 +91,14 @@ exports[`when there is more disables load more button 1`] = `
       indentLevel={1}
       key="comment-1"
       me={null}
+      settings={
+        Object {
+          "reaction": Object {
+            "icon": "thumb_up_alt",
+            "label": "Respect",
+          },
+        }
+      }
       showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
@@ -95,6 +119,14 @@ exports[`when there is more disables load more button 1`] = `
       indentLevel={1}
       key="comment-2"
       me={null}
+      settings={
+        Object {
+          "reaction": Object {
+            "icon": "thumb_up_alt",
+            "label": "Respect",
+          },
+        }
+      }
       showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
@@ -142,6 +174,14 @@ exports[`when there is more renders a load more button 1`] = `
       indentLevel={1}
       key="comment-1"
       me={null}
+      settings={
+        Object {
+          "reaction": Object {
+            "icon": "thumb_up_alt",
+            "label": "Respect",
+          },
+        }
+      }
       showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
@@ -162,6 +202,14 @@ exports[`when there is more renders a load more button 1`] = `
       indentLevel={1}
       key="comment-2"
       me={null}
+      settings={
+        Object {
+          "reaction": Object {
+            "icon": "thumb_up_alt",
+            "label": "Respect",
+          },
+        }
+      }
       showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>

src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap

@@ -34,6 +34,14 @@ exports[`renders correctly 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -48,6 +56,14 @@ exports[`renders correctly 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
     <withPropsOnChange(HorizontalGutter)
@@ -66,6 +82,14 @@ exports[`renders correctly 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -80,6 +104,14 @@ exports[`renders correctly 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
   </withPropsOnChange(HorizontalGutter)>
@@ -120,6 +152,14 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -134,6 +174,14 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
     <withPropsOnChange(HorizontalGutter)
@@ -152,6 +200,14 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -166,6 +222,14 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
     <Localized
@@ -220,6 +284,14 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -234,6 +306,14 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
     <withPropsOnChange(HorizontalGutter)
@@ -252,6 +332,14 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -266,6 +354,14 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
         me={null}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
     <Localized
@@ -322,6 +418,14 @@ exports[`when use is logged in renders correctly 1`] = `
           }
         }
         me={Object {}}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -336,6 +440,14 @@ exports[`when use is logged in renders correctly 1`] = `
           }
         }
         me={Object {}}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
     <withPropsOnChange(HorizontalGutter)
@@ -354,6 +466,14 @@ exports[`when use is logged in renders correctly 1`] = `
           }
         }
         me={Object {}}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
       <withProps(Relay(ReplyListContainer))
         asset={
@@ -368,6 +488,14 @@ exports[`when use is logged in renders correctly 1`] = `
           }
         }
         me={Object {}}
+        settings={
+          Object {
+            "reaction": Object {
+              "icon": "thumb_up_alt",
+              "label": "Respect",
+            },
+          }
+        }
       />
     </withPropsOnChange(HorizontalGutter)>
   </withPropsOnChange(HorizontalGutter)>

src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx

@@ -30,6 +30,12 @@ it("renders username and body", () => {
       },
       pending: false,
     },
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     indentLevel: 1,
     showAuthPopup: noop as any,
     setCommentID: noop as any,
@@ -61,6 +67,12 @@ it("renders body only", () => {
       },
       pending: false,
     },
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     indentLevel: 1,
     showAuthPopup: noop as any,
     setCommentID: noop as any,
@@ -90,6 +102,12 @@ it("hide reply button", () => {
       },
       pending: false,
     },
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     indentLevel: 1,
     showAuthPopup: noop as any,
     setCommentID: noop as any,
@@ -107,6 +125,13 @@ it("shows conversation link", () => {
     asset: {
       url: "http://localhost/asset",
     },
+    settings: {
+      reaction: {
+        icon: "thumb_up",
+        label: "Respect",
+        labelActive: "Respected",
+      },
+    },
     comment: {
       id: "comment-id",
       author: {

src/core/client/stream/tabs/comments/containers/CommentContainer.tsx

@@ -9,6 +9,7 @@ import { PropTypesOf } from "talk-framework/types";
 import { CommentContainer_asset as AssetData } from "talk-stream/__generated__/CommentContainer_asset.graphql";
 import { CommentContainer_comment as CommentData } from "talk-stream/__generated__/CommentContainer_comment.graphql";
 import { CommentContainer_me as MeData } from "talk-stream/__generated__/CommentContainer_me.graphql";
+import { CommentContainer_settings as SettingsData } from "talk-stream/__generated__/CommentContainer_settings.graphql";
 import {
   SetCommentIDMutation,
   ShowAuthPopupMutation,
@@ -16,6 +17,7 @@ import {
   withShowAuthPopupMutation,
 } from "talk-stream/mutations";
 
+import ReactionButtonContainer from "talk-stream/tabs/comments/containers/ReactionButtonContainer";
 import { Button } from "talk-ui/components";
 import Comment, {
   ButtonsBar,
@@ -30,6 +32,7 @@ interface InnerProps {
   me: MeData | null;
   comment: CommentData;
   asset: AssetData;
+  settings: SettingsData;
   indentLevel?: number;
   showAuthPopup: ShowAuthPopupMutation;
   setCommentID: SetCommentIDMutation;
@@ -131,6 +134,7 @@ export class CommentContainer extends Component<InnerProps, State> {
   public render() {
     const {
       comment,
+      settings,
       asset,
       indentLevel,
       localReply,
@@ -182,6 +186,12 @@ export class CommentContainer extends Component<InnerProps, State> {
                   />
                 )}
                 <PermalinkButtonContainer commentID={comment.id} />
+                {this.props.me && (
+                  <ReactionButtonContainer
+                    comment={comment}
+                    settings={settings}
+                  />
+                )}
               </ButtonsBar>
               {showConversationLink && (
                 <ShowConversationLink
@@ -241,6 +251,12 @@ const enhanced = withSetCommentIDMutation(
           pending
           ...ReplyCommentFormContainer_comment
           ...EditCommentFormContainer_comment
+          ...ReactionButtonContainer_comment
+        }
+      `,
+      settings: graphql`
+        fragment CommentContainer_settings on Settings {
+          ...ReactionButtonContainer_settings
         }
       `,
     })(CommentContainer)

src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx

@@ -6,6 +6,7 @@ import { PropTypesOf } from "talk-framework/types";
 import { LocalReplyListContainer_asset as AssetData } from "talk-stream/__generated__/LocalReplyListContainer_asset.graphql";
 import { LocalReplyListContainer_comment as CommentData } from "talk-stream/__generated__/LocalReplyListContainer_comment.graphql";
 import { LocalReplyListContainer_me as MeData } from "talk-stream/__generated__/LocalReplyListContainer_me.graphql";
+import { LocalReplyListContainer_settings as SettingsData } from "talk-stream/__generated__/LocalReplyListContainer_settings.graphql";
 
 import ReplyList from "../components/ReplyList";
 
@@ -14,6 +15,7 @@ interface InnerProps {
   me: MeData;
   asset: AssetData;
   comment: CommentData;
+  settings: SettingsData;
 }
 
 /**
@@ -30,6 +32,7 @@ export class LocalReplyListContainer extends Component<InnerProps> {
     return (
       <ReplyList
         me={this.props.me}
+        settings={this.props.settings}
         comment={this.props.comment}
         comments={this.props.comment.localReplies}
         asset={this.props.asset}
@@ -60,6 +63,11 @@ const enhanced = withFragmentContainer<InnerProps>({
       }
     }
   `,
+  settings: graphql`
+    fragment LocalReplyListContainer_settings on Settings {
+      ...CommentContainer_settings
+    }
+  `,
 })(LocalReplyListContainer);
 
 export type LocalReplyListContainerProps = PropTypesOf<typeof enhanced>;

src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx

@@ -8,6 +8,7 @@ import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PermalinkViewContainer_asset as AssetData } from "talk-stream/__generated__/PermalinkViewContainer_asset.graphql";
 import { PermalinkViewContainer_comment as CommentData } from "talk-stream/__generated__/PermalinkViewContainer_comment.graphql";
 import { PermalinkViewContainer_me as MeData } from "talk-stream/__generated__/PermalinkViewContainer_me.graphql";
+import { PermalinkViewContainer_settings as SettingsData } from "talk-stream/__generated__/PermalinkViewContainer_settings.graphql";
 import {
   SetCommentIDMutation,
   withSetCommentIDMutation,
@@ -18,6 +19,7 @@ import PermalinkView from "../components/PermalinkView";
 interface PermalinkViewContainerProps {
   comment: CommentData | null;
   asset: AssetData;
+  settings: SettingsData;
   me: MeData | null;
   setCommentID: SetCommentIDMutation;
   pym: PymChild | undefined;
@@ -48,12 +50,13 @@ class PermalinkViewContainer extends React.Component<
   }
 
   public render() {
-    const { comment, asset, me } = this.props;
+    const { comment, asset, me, settings } = this.props;
     return (
       <PermalinkView
         me={me}
         asset={asset}
         comment={comment}
+        settings={settings}
         showAllCommentsHref={this.getShowAllCommentsHref()}
         onShowAllComments={this.showAllComments}
       />
@@ -82,6 +85,11 @@ const enhanced = withContext(ctx => ({
           ...CommentContainer_me
         }
       `,
+      settings: graphql`
+        fragment PermalinkViewContainer_settings on Settings {
+          ...CommentContainer_settings
+        }
+      `,
     })(PermalinkViewContainer)
   )
 );

src/core/client/stream/tabs/comments/containers/ReactionButtonContainer.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { graphql } from "react-relay";
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { ReactionButtonContainer_comment as CommentData } from "talk-stream/__generated__/ReactionButtonContainer_comment.graphql";
+import { ReactionButtonContainer_settings as SettingsData } from "talk-stream/__generated__/ReactionButtonContainer_settings.graphql";
+
+import {
+  CreateCommentReactionMutation,
+  DeleteCommentReactionMutation,
+  withCreateCommentReactionMutation,
+  withDeleteCommentReactionMutation,
+} from "talk-stream/mutations";
+import ReactionButton from "talk-stream/tabs/comments/components/ReactionButton";
+
+interface ReactionButtonContainerProps {
+  createCommentReaction: CreateCommentReactionMutation;
+  deleteCommentReaction: DeleteCommentReactionMutation;
+  comment: CommentData;
+  settings: SettingsData;
+}
+
+class ReactionButtonContainer extends React.Component<
+  ReactionButtonContainerProps
+> {
+  private handleClick = () => {
+    const input = {
+      commentID: this.props.comment.id,
+    };
+
+    const { createCommentReaction, deleteCommentReaction } = this.props;
+    const reacted =
+      this.props.comment.myActionPresence &&
+      this.props.comment.myActionPresence.reaction;
+
+    reacted ? deleteCommentReaction(input) : createCommentReaction(input);
+  };
+  public render() {
+    const {
+      actionCounts: {
+        reaction: { total: totalReactions },
+      },
+    } = this.props.comment;
+    const {
+      reaction: { label, labelActive, icon, iconActive },
+    } = this.props.settings;
+
+    const reacted =
+      this.props.comment.myActionPresence &&
+      this.props.comment.myActionPresence.reaction;
+
+    return (
+      <ReactionButton
+        onClick={this.handleClick}
+        totalReactions={totalReactions}
+        reacted={reacted}
+        label={label}
+        labelActive={labelActive}
+        icon={icon}
+        iconActive={iconActive}
+      />
+    );
+  }
+}
+
+export default withDeleteCommentReactionMutation(
+  withCreateCommentReactionMutation(
+    withFragmentContainer<ReactionButtonContainerProps>({
+      comment: graphql`
+        fragment ReactionButtonContainer_comment on Comment {
+          id
+          myActionPresence {
+            reaction
+          }
+          actionCounts {
+            reaction {
+              total
+            }
+          }
+        }
+      `,
+      settings: graphql`
+        fragment ReactionButtonContainer_settings on Settings {
+          reaction {
+            label
+            labelActive
+            icon
+            iconActive
+          }
+        }
+      `,
+    })(ReactionButtonContainer)
+  )
+);

src/core/client/stream/tabs/comments/containers/ReplyListContainer.spec.tsx

@@ -22,6 +22,12 @@ it("renders correctly", () => {
         edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
       },
     },
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     relay: {
       hasMore: noop,
       isLoading: noop,
@@ -49,6 +55,12 @@ it("renders correctly when replies are empty", () => {
       isLoading: noop,
     } as any,
     me: null,
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     indentLevel: 1,
     ReplyListComponent: undefined,
     localReply: false,
@@ -69,6 +81,12 @@ describe("when has more replies", () => {
         edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
       },
     },
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     relay: {
       hasMore: () => true,
       isLoading: () => false,

src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx

@@ -7,6 +7,7 @@ import { PropTypesOf } from "talk-framework/types";
 import { ReplyListContainer1_asset as AssetData } from "talk-stream/__generated__/ReplyListContainer1_asset.graphql";
 import { ReplyListContainer1_comment as CommentData } from "talk-stream/__generated__/ReplyListContainer1_comment.graphql";
 import { ReplyListContainer1_me as MeData } from "talk-stream/__generated__/ReplyListContainer1_me.graphql";
+import { ReplyListContainer1_settings as SettingsData } from "talk-stream/__generated__/ReplyListContainer1_settings.graphql";
 import {
   COMMENT_SORT,
   ReplyListContainer1PaginationQueryVariables,
@@ -14,22 +15,29 @@ import {
 import { ReplyListContainer5_comment as Comment5Data } from "talk-stream/__generated__/ReplyListContainer5_comment.graphql";
 
 import { StatelessComponent } from "enzyme";
+import { FragmentKeys } from "talk-framework/lib/relay/types";
 import ReplyList from "../components/ReplyList";
 import LocalReplyListContainer from "./LocalReplyListContainer";
 
 type UnpackArray<T> = T extends ReadonlyArray<infer U> ? U : any;
 type ReplyNode5 = UnpackArray<Comment5Data["replies"]["edges"]>["node"];
 
-export interface InnerProps {
+export interface BaseProps {
   me: MeData | null;
   asset: AssetData;
   comment: CommentData;
+  settings: SettingsData;
   relay: RelayPaginationProp;
   indentLevel: number;
-  ReplyListComponent: React.ComponentType<any> | undefined;
   localReply: boolean | undefined;
 }
 
+export type InnerProps = BaseProps & {
+  ReplyListComponent:
+    | React.ComponentType<{ [P in FragmentKeys<BaseProps>]: any }>
+    | undefined;
+};
+
 // TODO: (cvle) This should be autogenerated.
 interface FragmentVariables {
   count: number;
@@ -50,6 +58,14 @@ export class ReplyListContainer extends React.Component<InnerProps> {
     }
     const comments = this.props.comment.replies.edges.map(edge => ({
       ...edge.node,
+      replyListElement: this.props.ReplyListComponent && (
+        <this.props.ReplyListComponent
+          me={this.props.me}
+          comment={edge.node}
+          asset={this.props.asset}
+          settings={this.props.settings}
+        />
+      ),
       // ReplyListContainer5 contains replyCount.
       showConversationLink: ((edge.node as any) as ReplyNode5).replyCount > 0,
     }));
@@ -59,11 +75,11 @@ export class ReplyListContainer extends React.Component<InnerProps> {
         comment={this.props.comment}
         comments={comments}
         asset={this.props.asset}
+        settings={this.props.settings}
         onShowAll={this.showAll}
         hasMore={this.props.relay.hasMore()}
         disableShowAll={this.state.disableShowAll}
         indentLevel={this.props.indentLevel}
-        ReplyListComponent={this.props.ReplyListComponent}
         localReply={this.props.localReply}
       />
     );
@@ -94,9 +110,10 @@ function createReplyListContainer(
     me: GraphQLTaggedNode;
     asset: GraphQLTaggedNode;
     comment: GraphQLTaggedNode;
+    settings: GraphQLTaggedNode;
   },
   query: GraphQLTaggedNode,
-  ReplyListComponent?: React.ComponentType<any>,
+  ReplyListComponent?: InnerProps["ReplyListComponent"],
   localReply?: boolean
 ) {
   return withProps({ indentLevel, ReplyListComponent, localReply })(
@@ -145,6 +162,12 @@ const ReplyListContainer5 = createReplyListContainer(
         ...LocalReplyListContainer_me
       }
     `,
+    settings: graphql`
+      fragment ReplyListContainer5_settings on Settings {
+        ...LocalReplyListContainer_settings
+        ...CommentContainer_settings
+      }
+    `,
     asset: graphql`
       fragment ReplyListContainer5_asset on Asset {
         ...CommentContainer_asset
@@ -201,6 +224,12 @@ const ReplyListContainer4 = createReplyListContainer(
         ...CommentContainer_me
       }
     `,
+    settings: graphql`
+      fragment ReplyListContainer4_settings on Settings {
+        ...ReplyListContainer5_settings
+        ...CommentContainer_settings
+      }
+    `,
     asset: graphql`
       fragment ReplyListContainer4_asset on Asset {
         ...ReplyListContainer5_asset
@@ -255,6 +284,12 @@ const ReplyListContainer3 = createReplyListContainer(
         ...CommentContainer_me
       }
     `,
+    settings: graphql`
+      fragment ReplyListContainer3_settings on Settings {
+        ...ReplyListContainer4_settings
+        ...CommentContainer_settings
+      }
+    `,
     asset: graphql`
       fragment ReplyListContainer3_asset on Asset {
         ...ReplyListContainer4_asset
@@ -309,6 +344,12 @@ const ReplyListContainer2 = createReplyListContainer(
         ...CommentContainer_me
       }
     `,
+    settings: graphql`
+      fragment ReplyListContainer2_settings on Settings {
+        ...ReplyListContainer3_settings
+        ...CommentContainer_settings
+      }
+    `,
     asset: graphql`
       fragment ReplyListContainer2_asset on Asset {
         ...ReplyListContainer3_asset
@@ -363,6 +404,12 @@ const ReplyListContainer1 = createReplyListContainer(
         ...CommentContainer_me
       }
     `,
+    settings: graphql`
+      fragment ReplyListContainer1_settings on Settings {
+        ...ReplyListContainer2_settings
+        ...CommentContainer_settings
+      }
+    `,
     asset: graphql`
       fragment ReplyListContainer1_asset on Asset {
         ...ReplyListContainer2_asset

src/core/client/stream/tabs/comments/containers/StreamContainer.spec.tsx

@@ -21,6 +21,12 @@ it("renders correctly", () => {
       },
     },
     me: null,
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     relay: {
       hasMore: noop,
       isLoading: noop,
@@ -41,6 +47,12 @@ describe("when has more comments", () => {
       },
     },
     me: null,
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
     relay: {
       hasMore: () => true,
       isLoading: () => false,

src/core/client/stream/tabs/comments/containers/StreamContainer.tsx

@@ -5,6 +5,7 @@ import { withPaginationContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 import { StreamContainer_asset as AssetData } from "talk-stream/__generated__/StreamContainer_asset.graphql";
 import { StreamContainer_me as MeData } from "talk-stream/__generated__/StreamContainer_me.graphql";
+import { StreamContainer_settings as SettingsData } from "talk-stream/__generated__/StreamContainer_settings.graphql";
 import {
   COMMENT_SORT,
   StreamContainerPaginationQueryVariables,
@@ -14,6 +15,7 @@ import Stream from "../components/Stream";
 
 interface InnerProps {
   asset: AssetData;
+  settings: SettingsData;
   me: MeData | null;
   relay: RelayPaginationProp;
 }
@@ -38,6 +40,7 @@ export class StreamContainer extends React.Component<InnerProps> {
       <Stream
         asset={this.props.asset}
         comments={comments}
+        settings={this.props.settings}
         onLoadMore={this.loadMore}
         hasMore={this.props.relay.hasMore()}
         disableLoadMore={this.state.disableLoadMore}
@@ -105,6 +108,12 @@ const enhanced = withPaginationContainer<
         ...UserBoxContainer_me
       }
     `,
+    settings: graphql`
+      fragment StreamContainer_settings on Settings {
+        ...ReplyListContainer1_settings
+        ...CommentContainer_settings
+      }
+    `,
   },
   {
     direction: "forward",

src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`renders correctly 1`] = `
 <ReplyList
-  ReplyListComponent={[Function]}
   asset={
     Object {
       "id": "asset-id",
@@ -31,10 +30,52 @@ exports[`renders correctly 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": <ReplyListComponent
+          asset={
+            Object {
+              "id": "asset-id",
+            }
+          }
+          comment={
+            Object {
+              "id": "comment-1",
+            }
+          }
+          me={null}
+          settings={
+            Object {
+              "reaction": Object {
+                "icon": "thumb_up_alt",
+                "label": "Respect",
+              },
+            }
+          }
+        />,
         "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": <ReplyListComponent
+          asset={
+            Object {
+              "id": "asset-id",
+            }
+          }
+          comment={
+            Object {
+              "id": "comment-2",
+            }
+          }
+          me={null}
+          settings={
+            Object {
+              "reaction": Object {
+                "icon": "thumb_up_alt",
+                "label": "Respect",
+              },
+            }
+          }
+        />,
         "showConversationLink": false,
       },
     ]
@@ -44,6 +85,14 @@ exports[`renders correctly 1`] = `
   localReply={false}
   me={null}
   onShowAll={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;
 
@@ -79,10 +128,12 @@ exports[`when has more replies renders hasMore 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": undefined,
         "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": undefined,
         "showConversationLink": false,
       },
     ]
@@ -93,6 +144,14 @@ exports[`when has more replies renders hasMore 1`] = `
   localReply={false}
   me={null}
   onShowAll={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;
 
@@ -126,10 +185,12 @@ exports[`when has more replies when showing all disables show all button 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": undefined,
         "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": undefined,
         "showConversationLink": false,
       },
     ]
@@ -140,6 +201,14 @@ exports[`when has more replies when showing all disables show all button 1`] = `
   localReply={false}
   me={null}
   onShowAll={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;
 
@@ -173,10 +242,12 @@ exports[`when has more replies when showing all enable show all button after loa
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": undefined,
         "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": undefined,
         "showConversationLink": false,
       },
     ]
@@ -187,5 +258,13 @@ exports[`when has more replies when showing all enable show all button after loa
   localReply={false}
   me={null}
   onShowAll={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;

src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap

@@ -35,6 +35,14 @@ exports[`renders correctly 1`] = `
   disableLoadMore={false}
   me={null}
   onLoadMore={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;
 
@@ -74,6 +82,14 @@ exports[`when has more comments renders hasMore 1`] = `
   hasMore={true}
   me={null}
   onLoadMore={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;
 
@@ -113,6 +129,14 @@ exports[`when has more comments when loading more disables load more button 1`]
   hasMore={true}
   me={null}
   onLoadMore={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;
 
@@ -152,5 +176,13 @@ exports[`when has more comments when loading more enable load more button after
   hasMore={true}
   me={null}
   onLoadMore={[Function]}
+  settings={
+    Object {
+      "reaction": Object {
+        "icon": "thumb_up_alt",
+        "label": "Respect",
+      },
+    }
+  }
 />
 `;

src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx

@@ -36,6 +36,7 @@ export const render = ({
     return (
       <PermalinkViewContainer
         me={props.me}
+        settings={props.settings}
         comment={props.comment}
         asset={props.asset}
       />
@@ -63,6 +64,9 @@ const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
         comment(id: $commentID) {
           ...PermalinkViewContainer_comment
         }
+        settings {
+          ...PermalinkViewContainer_settings
+        }
       }
     `}
     variables={{

src/core/client/stream/tabs/comments/queries/StreamQuery.tsx

@@ -31,7 +31,13 @@ export const render = ({
         </Localized>
       );
     }
-    return <StreamContainer me={props.me} asset={props.asset} />;
+    return (
+      <StreamContainer
+        settings={props.settings}
+        me={props.me}
+        asset={props.asset}
+      />
+    );
   }
 
   return <Spinner />;
@@ -49,6 +55,9 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
         asset(id: $assetID, url: $assetURL) {
           ...StreamContainer_asset
         }
+        settings {
+          ...StreamContainer_settings
+        }
       }
     `}
     variables={{

src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap

@@ -323,6 +323,21 @@ exports[`cancel edit: edit canceled 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -359,10 +374,10 @@ exports[`cancel edit: edit canceled 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -397,6 +412,21 @@ exports[`cancel edit: edit canceled 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -843,10 +873,10 @@ exports[`edit a comment: edit form 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -881,6 +911,21 @@ exports[`edit a comment: edit form 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1327,10 +1372,10 @@ exports[`edit a comment: optimistic response 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -1365,6 +1410,21 @@ exports[`edit a comment: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1700,6 +1760,21 @@ exports[`edit a comment: render stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1736,10 +1811,10 @@ exports[`edit a comment: render stream 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -1774,6 +1849,21 @@ exports[`edit a comment: render stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -2118,6 +2208,21 @@ exports[`edit a comment: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -2154,10 +2259,10 @@ exports[`edit a comment: server response 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -2192,6 +2297,21 @@ exports[`edit a comment: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -2527,6 +2647,21 @@ exports[`shows expiry message: edit form closed 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -2563,10 +2698,10 @@ exports[`shows expiry message: edit form closed 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -2601,6 +2736,21 @@ exports[`shows expiry message: edit form closed 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -3024,10 +3174,10 @@ exports[`shows expiry message: edit time expired 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -3062,6 +3212,21 @@ exports[`shows expiry message: edit time expired 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap

@@ -282,10 +282,10 @@ exports[`loads more comments 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -356,10 +356,10 @@ exports[`loads more comments 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:14:00.000Z"
-                        title="2018-07-06T18:14:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:14:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -688,10 +688,10 @@ exports[`renders comment stream 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>

src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap

@@ -317,6 +317,21 @@ exports[`post a comment: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -391,6 +406,21 @@ exports[`post a comment: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -427,10 +457,10 @@ exports[`post a comment: optimistic response 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -465,6 +495,21 @@ exports[`post a comment: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -784,6 +829,21 @@ exports[`post a comment: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -858,6 +918,21 @@ exports[`post a comment: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -894,10 +969,10 @@ exports[`post a comment: server response 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -932,6 +1007,21 @@ exports[`post a comment: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1251,6 +1341,21 @@ exports[`renders comment stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1287,10 +1392,10 @@ exports[`renders comment stream 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -1325,6 +1430,21 @@ exports[`renders comment stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap

@@ -307,6 +307,21 @@ exports[`post a reply: open reply form 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -385,6 +400,21 @@ exports[`post a reply: open reply form 1`] = `
                             Reply
                           </span>
                         </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -463,6 +493,21 @@ exports[`post a reply: open reply form 1`] = `
                                 Reply
                               </span>
                             </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Respect
+                              </span>
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -541,6 +586,21 @@ exports[`post a reply: open reply form 1`] = `
                                     Reply
                                   </span>
                                 </button>
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseDown={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Respect
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -619,6 +679,21 @@ exports[`post a reply: open reply form 1`] = `
                                         Reply
                                       </span>
                                     </button>
+                                    <button
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      type="button"
+                                    >
+                                      <span>
+                                        Respect
+                                      </span>
+                                    </button>
                                   </div>
                                 </div>
                               </div>
@@ -697,6 +772,21 @@ exports[`post a reply: open reply form 1`] = `
                                             Reply
                                           </span>
                                         </button>
+                                        <button
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseDown={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                          onTouchEnd={[Function]}
+                                          type="button"
+                                        >
+                                          <span>
+                                            Respect
+                                          </span>
+                                        </button>
                                       </div>
                                       <a
                                         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -1169,6 +1259,21 @@ exports[`post a reply: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1247,6 +1352,21 @@ exports[`post a reply: optimistic response 1`] = `
                             Reply
                           </span>
                         </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -1325,6 +1445,21 @@ exports[`post a reply: optimistic response 1`] = `
                                 Reply
                               </span>
                             </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Respect
+                              </span>
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1403,6 +1538,21 @@ exports[`post a reply: optimistic response 1`] = `
                                     Reply
                                   </span>
                                 </button>
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseDown={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Respect
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -1481,6 +1631,21 @@ exports[`post a reply: optimistic response 1`] = `
                                         Reply
                                       </span>
                                     </button>
+                                    <button
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      type="button"
+                                    >
+                                      <span>
+                                        Respect
+                                      </span>
+                                    </button>
                                   </div>
                                 </div>
                               </div>
@@ -1559,6 +1724,21 @@ exports[`post a reply: optimistic response 1`] = `
                                             Reply
                                           </span>
                                         </button>
+                                        <button
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseDown={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                          onTouchEnd={[Function]}
+                                          type="button"
+                                        >
+                                          <span>
+                                            Respect
+                                          </span>
+                                        </button>
                                       </div>
                                       <a
                                         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -1773,7 +1953,23 @@ exports[`post a reply: optimistic response 1`] = `
                                           />
                                           <div
                                             className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                          />
+                                          >
+                                            <button
+                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseDown={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                              onTouchEnd={[Function]}
+                                              type="button"
+                                            >
+                                              <span>
+                                                Respect
+                                              </span>
+                                            </button>
+                                          </div>
                                         </div>
                                       </div>
                                     </div>
@@ -2104,6 +2300,21 @@ exports[`post a reply: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -2182,6 +2393,21 @@ exports[`post a reply: server response 1`] = `
                             Reply
                           </span>
                         </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -2260,6 +2486,21 @@ exports[`post a reply: server response 1`] = `
                                 Reply
                               </span>
                             </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Respect
+                              </span>
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2338,6 +2579,21 @@ exports[`post a reply: server response 1`] = `
                                     Reply
                                   </span>
                                 </button>
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseDown={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Respect
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -2416,6 +2672,21 @@ exports[`post a reply: server response 1`] = `
                                         Reply
                                       </span>
                                     </button>
+                                    <button
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      type="button"
+                                    >
+                                      <span>
+                                        Respect
+                                      </span>
+                                    </button>
                                   </div>
                                 </div>
                               </div>
@@ -2494,6 +2765,21 @@ exports[`post a reply: server response 1`] = `
                                             Reply
                                           </span>
                                         </button>
+                                        <button
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseDown={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                          onTouchEnd={[Function]}
+                                          type="button"
+                                        >
+                                          <span>
+                                            Respect
+                                          </span>
+                                        </button>
                                       </div>
                                       <a
                                         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -2571,7 +2857,23 @@ exports[`post a reply: server response 1`] = `
                                           />
                                           <div
                                             className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                          />
+                                          >
+                                            <button
+                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseDown={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                              onTouchEnd={[Function]}
+                                              type="button"
+                                            >
+                                              <span>
+                                                Respect
+                                              </span>
+                                            </button>
+                                          </div>
                                         </div>
                                       </div>
                                     </div>
@@ -2902,6 +3204,21 @@ exports[`renders comment stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -2980,6 +3297,21 @@ exports[`renders comment stream 1`] = `
                             Reply
                           </span>
                         </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -3058,6 +3390,21 @@ exports[`renders comment stream 1`] = `
                                 Reply
                               </span>
                             </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseDown={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Respect
+                              </span>
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3136,6 +3483,21 @@ exports[`renders comment stream 1`] = `
                                     Reply
                                   </span>
                                 </button>
+                                <button
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseDown={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Respect
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -3214,6 +3576,21 @@ exports[`renders comment stream 1`] = `
                                         Reply
                                       </span>
                                     </button>
+                                    <button
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      type="button"
+                                    >
+                                      <span>
+                                        Respect
+                                      </span>
+                                    </button>
                                   </div>
                                 </div>
                               </div>
@@ -3292,6 +3669,21 @@ exports[`renders comment stream 1`] = `
                                             Reply
                                           </span>
                                         </button>
+                                        <button
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onMouseDown={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                          onTouchEnd={[Function]}
+                                          type="button"
+                                        >
+                                          <span>
+                                            Respect
+                                          </span>
+                                        </button>
                                       </div>
                                       <a
                                         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"

src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap

@@ -307,6 +307,21 @@ exports[`post a reply: open reply form 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -470,10 +485,10 @@ exports[`post a reply: open reply form 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -508,6 +523,21 @@ exports[`post a reply: open reply form 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -827,6 +857,21 @@ exports[`post a reply: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1042,6 +1087,21 @@ exports[`post a reply: optimistic response 1`] = `
                             Reply
                           </span>
                         </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -1080,10 +1140,10 @@ exports[`post a reply: optimistic response 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -1118,6 +1178,21 @@ exports[`post a reply: optimistic response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1437,6 +1512,21 @@ exports[`post a reply: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1515,6 +1605,21 @@ exports[`post a reply: server response 1`] = `
                             Reply
                           </span>
                         </button>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
                       </div>
                     </div>
                   </div>
@@ -1553,10 +1658,10 @@ exports[`post a reply: server response 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -1591,6 +1696,21 @@ exports[`post a reply: server response 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1910,6 +2030,21 @@ exports[`renders comment stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1946,10 +2081,10 @@ exports[`renders comment stream 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>
@@ -1984,6 +2119,21 @@ exports[`renders comment stream 1`] = `
                         Reply
                       </span>
                     </button>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = `
         role="tab"
         type="button"
       >
-        ⁨1⁩ Comments
+        ⁨2⁩ Comments
       </button>
     </li>
   </ul>
@@ -438,10 +438,10 @@ exports[`renders comment stream 1`] = `
                             >
                               <time
                                 className="Timestamp-root RelativeTime-root"
-                                dateTime="2018-07-06T18:14:00.000Z"
-                                title="2018-07-06T18:14:00.000Z"
+                                dateTime="2018-07-06T18:24:00.000Z"
+                                title="2018-07-06T18:24:00.000Z"
                               >
-                                2018-07-06T18:14:00.000Z
+                                2018-07-06T18:24:00.000Z
                               </time>
                             </div>
                           </div>
@@ -512,10 +512,10 @@ exports[`renders comment stream 1`] = `
                             >
                               <time
                                 className="Timestamp-root RelativeTime-root"
-                                dateTime="2018-07-06T18:14:00.000Z"
-                                title="2018-07-06T18:14:00.000Z"
+                                dateTime="2018-07-06T18:24:00.000Z"
+                                title="2018-07-06T18:24:00.000Z"
                               >
-                                2018-07-06T18:14:00.000Z
+                                2018-07-06T18:24:00.000Z
                               </time>
                             </div>
                           </div>
@@ -588,10 +588,10 @@ exports[`renders comment stream 1`] = `
                         >
                           <time
                             className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:14:00.000Z"
-                            title="2018-07-06T18:14:00.000Z"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
                           >
-                            2018-07-06T18:14:00.000Z
+                            2018-07-06T18:24:00.000Z
                           </time>
                         </div>
                       </div>

src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap

@@ -282,10 +282,10 @@ exports[`renders comment stream 1`] = `
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        2018-07-06T18:20:00.000Z
+                        2018-07-06T18:24:00.000Z
                       </time>
                     </div>
                   </div>

src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap

@@ -286,10 +286,10 @@ exports[`renders comment stream 1`] = `
                         >
                           <time
                             className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:20:00.000Z"
-                            title="2018-07-06T18:20:00.000Z"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
                           >
-                            2018-07-06T18:20:00.000Z
+                            2018-07-06T18:24:00.000Z
                           </time>
                         </div>
                       </div>
@@ -648,10 +648,10 @@ exports[`show all replies 1`] = `
                         >
                           <time
                             className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:20:00.000Z"
-                            title="2018-07-06T18:20:00.000Z"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
                           >
-                            2018-07-06T18:20:00.000Z
+                            2018-07-06T18:24:00.000Z
                           </time>
                         </div>
                       </div>
@@ -722,10 +722,10 @@ exports[`show all replies 1`] = `
                         >
                           <time
                             className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:14:00.000Z"
-                            title="2018-07-06T18:14:00.000Z"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
                           >
-                            2018-07-06T18:14:00.000Z
+                            2018-07-06T18:24:00.000Z
                           </time>
                         </div>
                       </div>

src/core/client/stream/test/comments/editComment.spec.tsx

@@ -1,9 +1,10 @@
+import sinon from "sinon";
 import timekeeper from "timekeeper";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, users } from "../fixtures";
+import { assets, settings, users } from "../fixtures";
 import create from "./create";
 
 function createTestRenderer() {
@@ -16,10 +17,8 @@ function createTestRenderer() {
             .withArgs(undefined, { id: assets[0].id, url: null })
             .returns(assets[0])
       ),
-      me: createSinonStub(
-        s => s.throws(),
-        s => s.withArgs(undefined).returns(users[0])
-      ),
+      me: sinon.stub().returns(users[0]),
+      settings: sinon.stub().returns(settings),
     },
     Mutation: {
       editComment: createSinonStub(

src/core/client/stream/test/comments/loadMore.spec.tsx

@@ -4,7 +4,7 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, comments } from "../fixtures";
+import { assets, comments, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -66,6 +66,7 @@ beforeEach(() => {
             )
             .returns(assetStub)
       ),
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/comments/permalinkView.spec.tsx

@@ -4,7 +4,7 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, comments } from "../fixtures";
+import { assets, comments, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -41,6 +41,7 @@ beforeEach(() => {
             .withArgs(undefined, { id: assetStub.id, url: null })
             .returns(assetStub)
       ),
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx

@@ -1,7 +1,9 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 
+import { settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -10,6 +12,7 @@ beforeEach(() => {
     Query: {
       comment: () => null,
       asset: () => null,
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx

@@ -4,7 +4,7 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, comments } from "../fixtures";
+import { assets, comments, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -38,6 +38,7 @@ beforeEach(() => {
             .withArgs(undefined, { id: assetStub.id, url: null })
             .returns(assetStub)
       ),
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/comments/postComment.spec.tsx

@@ -1,18 +1,26 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 import timekeeper from "timekeeper";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, users } from "../fixtures";
+import { assets, baseComment, settings, users } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
     Query: {
-      asset: createSinonStub(s => s.throws(), s => s.returns(assets[0])),
-      me: createSinonStub(s => s.throws(), s => s.returns(users[0])),
+      settings: sinon.stub().returns(settings),
+      me: sinon.stub().returns(users[0]),
+      asset: createSinonStub(
+        s => s.throws(),
+        s =>
+          s
+            .withArgs(undefined, { id: assets[0].id, url: null })
+            .returns(assets[0])
+      ),
     },
     Mutation: {
       createComment: createSinonStub(
@@ -31,15 +39,10 @@ beforeEach(() => {
               edge: {
                 cursor: null,
                 node: {
+                  ...baseComment,
                   id: "comment-x",
                   author: users[0],
                   body: "<strong>Hello world! (from server)</strong>",
-                  createdAt: "2018-07-06T18:24:00.000Z",
-                  editing: {
-                    edited: false,
-                    editableUntil: "2018-07-06T18:24:30.000Z",
-                  },
-                  replies: { edges: [], pageInfo: {} },
                 },
               },
               clientMutationId: "0",
@@ -71,7 +74,7 @@ it("post a comment", async () => {
     .findByProps({ inputId: "comments-postCommentForm-field" })
     .props.onChange({ html: "<strong>Hello world!</strong>" });
 
-  timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
+  timekeeper.freeze(new Date(baseComment.createdAt));
 
   testRenderer.root
     .findByProps({ id: "comments-postCommentForm-form" })

src/core/client/stream/test/comments/postLocalReply.spec.tsx

@@ -1,21 +1,31 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 import timekeeper from "timekeeper";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assetWithDeepestReplies, users } from "../fixtures";
+import {
+  assetWithDeepestReplies,
+  baseComment,
+  settings,
+  users,
+} from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
     Query: {
+      settings: sinon.stub().returns(settings),
+      me: sinon.stub().returns(users[0]),
       asset: createSinonStub(
         s => s.throws(),
-        s => s.returns(assetWithDeepestReplies)
+        s =>
+          s
+            .withArgs(undefined, { id: assetWithDeepestReplies.id, url: null })
+            .returns(assetWithDeepestReplies)
       ),
-      me: createSinonStub(s => s.throws(), s => s.returns(users[0])),
     },
     Mutation: {
       createComment: createSinonStub(
@@ -34,18 +44,10 @@ beforeEach(() => {
               edge: {
                 cursor: null,
                 node: {
+                  ...baseComment,
                   id: "comment-x",
                   author: users[0],
                   body: "<strong>Hello world! (from server)</strong>",
-                  createdAt: "2018-07-06T18:24:00.000Z",
-                  replies: {
-                    edges: [],
-                    pageInfo: { endCursor: null, hasNextPage: false },
-                  },
-                  editing: {
-                    edited: false,
-                    editableUntil: "2018-07-06T18:24:30.000Z",
-                  },
                 },
               },
               clientMutationId: "0",
@@ -92,7 +94,7 @@ it("post a reply", async () => {
     })
     .props.onChange({ html: "<strong>Hello world!</strong>" });
 
-  timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
+  timekeeper.freeze(new Date(baseComment.createdAt));
   testRenderer.root
     .findByProps({
       id: "comments-replyCommentForm-form-comment-with-deepest-replies-5",

src/core/client/stream/test/comments/postReply.spec.tsx

@@ -1,18 +1,26 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 import timekeeper from "timekeeper";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, users } from "../fixtures";
+import { assets, baseComment, settings, users } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
     Query: {
-      asset: createSinonStub(s => s.throws(), s => s.returns(assets[0])),
-      me: createSinonStub(s => s.throws(), s => s.returns(users[0])),
+      settings: sinon.stub().returns(settings),
+      me: sinon.stub().returns(users[0]),
+      asset: createSinonStub(
+        s => s.throws(),
+        s =>
+          s
+            .withArgs(undefined, { id: assets[0].id, url: null })
+            .returns(assets[0])
+      ),
     },
     Mutation: {
       createComment: createSinonStub(
@@ -31,18 +39,10 @@ beforeEach(() => {
               edge: {
                 cursor: null,
                 node: {
+                  ...baseComment,
                   id: "comment-x",
                   author: users[0],
                   body: "<strong>Hello world! (from server)</strong>",
-                  createdAt: "2018-07-06T18:24:00.000Z",
-                  replies: {
-                    edges: [],
-                    pageInfo: { endCursor: null, hasNextPage: false },
-                  },
-                  editing: {
-                    edited: false,
-                    editableUntil: "2018-07-06T18:24:30.000Z",
-                  },
                 },
               },
               clientMutationId: "0",
@@ -84,7 +84,7 @@ it("post a reply", async () => {
     .findByProps({ inputId: "comments-replyCommentForm-rte-comment-0" })
     .props.onChange({ html: "<strong>Hello world!</strong>" });
 
-  timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
+  timekeeper.freeze(new Date(baseComment.createdAt));
   testRenderer.root
     .findByProps({ id: "comments-replyCommentForm-form-comment-0" })
     .props.onSubmit();

src/core/client/stream/test/comments/renderReplies.spec.tsx

@@ -1,9 +1,10 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assetWithDeepReplies } from "../fixtures";
+import { assetWithDeepReplies, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -17,6 +18,7 @@ beforeEach(() => {
             .withArgs(undefined, { id: assetWithDeepReplies.id, url: null })
             .returns(assetWithDeepReplies)
       ),
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/comments/renderStream.spec.tsx

@@ -1,9 +1,10 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets } from "../fixtures";
+import { assets, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -17,6 +18,7 @@ beforeEach(() => {
             .withArgs(undefined, { id: assets[0].id, url: null })
             .returns(assets[0])
       ),
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/comments/showAllReplies.spec.tsx

@@ -4,7 +4,7 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, comments } from "../fixtures";
+import { assets, comments, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -65,6 +65,7 @@ beforeEach(() => {
 
   const resolvers = {
     Query: {
+      settings: sinon.stub().returns(settings),
       comment: createSinonStub(
         s => s.throws(),
         s => s.withArgs(undefined, { id: commentStub.id }).returns(commentStub)

src/core/client/stream/test/comments/showConversation.spec.tsx

@@ -4,7 +4,7 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assetWithDeepestReplies, comments } from "../fixtures";
+import { assetWithDeepestReplies, comments, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
@@ -25,6 +25,7 @@ beforeEach(() => {
               id: "comment-with-deepest-replies-5",
             })
       ),
+      settings: sinon.stub().returns(settings),
     },
   };
 

src/core/client/stream/test/fixtures.ts

@@ -1,3 +1,11 @@
+export const settings = {
+  reaction: {
+    icon: "thumb_up",
+    label: "Respect",
+    labelActive: "Respected",
+  },
+};
+
 export const users = [
   {
     id: "user-0",
@@ -13,106 +21,67 @@ export const users = [
   },
 ];
 
+export const baseComment = {
+  author: users[0],
+  body: "Comment Body",
+  createdAt: "2018-07-06T18:24:00.000Z",
+  replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+  replyCount: 0,
+  editing: {
+    edited: false,
+    editableUntil: "2018-07-06T18:24:30.000Z",
+  },
+  actionCounts: {
+    reaction: {
+      total: 0,
+    },
+  },
+};
+
 export const comments = [
   {
+    ...baseComment,
     id: "comment-0",
     author: users[0],
     body: "Joining Too",
-    createdAt: "2018-07-06T18:24:00.000Z",
-    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
-    replyCount: 0,
-    editing: {
-      edited: false,
-      editableUntil: "2018-07-06T18:24:30.000Z",
-    },
   },
   {
+    ...baseComment,
     id: "comment-1",
     author: users[1],
     body: "What's up?",
-    createdAt: "2018-07-06T18:20:00.000Z",
-    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
-    replyCount: 0,
-    editing: {
-      edited: false,
-      editableUntil: "2018-07-06T18:20:30.000Z",
-    },
   },
   {
+    ...baseComment,
     id: "comment-2",
     author: users[2],
     body: "Hey!",
-    createdAt: "2018-07-06T18:14:00.000Z",
-    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
-    replyCount: 0,
-    editing: {
-      edited: false,
-      editableUntil: "2018-07-06T18:14:30.000Z",
-    },
   },
   {
+    ...baseComment,
     id: "comment-3",
     author: users[2],
     body: "Comment Body 3",
-    createdAt: "2018-07-06T18:14:00.000Z",
-    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
-    replyCount: 0,
-    editing: {
-      edited: false,
-      editableUntil: "2018-07-06T18:14:30.000Z",
-    },
   },
   {
+    ...baseComment,
     id: "comment-4",
     author: users[2],
     body: "Comment Body 4",
-    createdAt: "2018-07-06T18:14:00.000Z",
-    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
-    replyCount: 0,
-    editing: {
-      edited: false,
-      editableUntil: "2018-07-06T18:14:30.000Z",
-    },
   },
   {
+    ...baseComment,
     id: "comment-5",
     author: users[2],
     body: "Comment Body 5",
-    createdAt: "2018-07-06T18:14:00.000Z",
-    replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
-    replyCount: 0,
-    editing: {
-      edited: false,
-      editableUntil: "2018-07-06T18:14:30.000Z",
-    },
-  },
-];
-
-export const assets = [
-  {
-    id: "asset-1",
-    url: "http://localhost/assets/asset-1",
-    isClosed: false,
-    commentCounts: {
-      totalVisible: 2,
-    },
-    comments: {
-      edges: [
-        { node: comments[0], cursor: comments[0].createdAt },
-        { node: comments[1], cursor: comments[1].createdAt },
-      ],
-      pageInfo: {
-        hasNextPage: false,
-      },
-    },
   },
 ];
 
 export const commentWithReplies = {
+  ...baseComment,
   id: "comment-with-replies",
   author: users[0],
   body: "I like yoghurt",
-  createdAt: "2018-07-06T18:24:00.000Z",
   replies: {
     edges: [
       { node: comments[3], cursor: comments[3].createdAt },
@@ -123,17 +92,13 @@ export const commentWithReplies = {
     },
   },
   replyCount: 2,
-  editing: {
-    edited: false,
-    editableUntil: "2018-07-06T18:24:30.000Z",
-  },
 };
 
 export const commentWithDeepReplies = {
+  ...baseComment,
   id: "comment-with-deep-replies",
   author: users[0],
   body: "I like yoghurt",
-  createdAt: "2018-07-06T18:24:00.000Z",
   replies: {
     edges: [
       { node: commentWithReplies, cursor: commentWithReplies.createdAt },
@@ -144,120 +109,76 @@ export const commentWithDeepReplies = {
     },
   },
   replyCount: 2,
-  editing: {
-    edited: false,
-    editableUntil: "2018-07-06T18:24:30.000Z",
-  },
-};
-
-export const assetWithReplies = {
-  id: "asset-with-replies",
-  url: "http://localhost/assets/asset-with-replies",
-  isClosed: false,
-  comments: {
-    edges: [
-      { node: comments[0], cursor: comments[0].createdAt },
-      { node: commentWithReplies, cursor: commentWithReplies.createdAt },
-    ],
-    pageInfo: {
-      hasNextPage: false,
-    },
-  },
-  commentCounts: {
-    totalVisible: 1,
-  },
-};
-
-export const assetWithDeepReplies = {
-  id: "asset-with-deep-replies",
-  url: "http://localhost/assets/asset-with-replies",
-  isClosed: false,
-  comments: {
-    edges: [
-      { node: comments[0], cursor: comments[0].createdAt },
-      {
-        node: commentWithDeepReplies,
-        cursor: commentWithDeepReplies.createdAt,
-      },
-    ],
-    pageInfo: {
-      hasNextPage: false,
-    },
-  },
-  commentCounts: {
-    totalVisible: 1,
-  },
 };
 
 export const commentWithDeepestReplies = {
-  ...commentWithReplies,
+  ...baseComment,
   id: "comment-with-deepest-replies",
   body: "body 0",
   replyCount: 1,
   replies: {
-    ...commentWithReplies.replies,
+    ...baseComment.replies,
     edges: [
       {
-        cursor: commentWithReplies.createdAt,
+        cursor: baseComment.createdAt,
         node: {
-          ...commentWithReplies,
+          ...baseComment,
           id: "comment-with-deepest-replies-1",
           body: "body 1",
           replyCount: 1,
           replies: {
-            ...commentWithReplies.replies,
+            ...baseComment.replies,
             edges: [
               {
-                cursor: commentWithReplies.createdAt,
+                cursor: baseComment.createdAt,
                 node: {
-                  ...commentWithReplies,
+                  ...baseComment,
                   id: "comment-with-deepest-replies-2",
                   body: "body 2",
                   replyCount: 1,
                   replies: {
-                    ...commentWithReplies.replies,
+                    ...baseComment.replies,
                     edges: [
                       {
-                        cursor: commentWithReplies.createdAt,
+                        cursor: baseComment.createdAt,
                         node: {
-                          ...commentWithReplies,
+                          ...baseComment,
                           id: "comment-with-deepest-replies-3",
                           body: "body 3",
                           replyCount: 1,
                           replies: {
-                            ...commentWithReplies.replies,
+                            ...baseComment.replies,
                             edges: [
                               {
-                                cursor: commentWithReplies.createdAt,
+                                cursor: baseComment.createdAt,
                                 node: {
-                                  ...commentWithReplies,
+                                  ...baseComment,
                                   id: "comment-with-deepest-replies-4",
                                   body: "body 4",
                                   replyCount: 1,
                                   replies: {
-                                    ...commentWithReplies.replies,
+                                    ...baseComment.replies,
                                     edges: [
                                       {
-                                        cursor: commentWithReplies.createdAt,
+                                        cursor: baseComment.createdAt,
                                         node: {
-                                          ...commentWithReplies,
+                                          ...baseComment,
                                           id: "comment-with-deepest-replies-5",
                                           body: "body 5",
                                           replyCount: 1,
                                           replies: {
-                                            ...commentWithReplies.replies,
+                                            ...baseComment.replies,
                                             edges: [
                                               {
-                                                cursor:
-                                                  commentWithReplies.createdAt,
+                                                cursor: baseComment.createdAt,
                                                 node: {
-                                                  ...commentWithReplies,
+                                                  ...baseComment,
                                                   id:
                                                     "comment-with-deepest-replies-6",
                                                   body: "body 6",
                                                   replyCount: 1,
                                                   replies: {
-                                                    ...commentWithReplies.replies,
+                                                    ...baseComment.replies,
                                                     edges: [],
                                                   },
                                                 },
@@ -286,10 +207,82 @@ export const commentWithDeepestReplies = {
   },
 };
 
+export const baseAsset = {
+  isClosed: false,
+  comments: {
+    edges: [],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+  commentCounts: {
+    totalVisible: 0,
+  },
+};
+
+export const assets = [
+  {
+    ...baseAsset,
+    id: "asset-1",
+    url: "http://localhost/assets/asset-1",
+    comments: {
+      edges: [
+        { node: comments[0], cursor: comments[0].createdAt },
+        { node: comments[1], cursor: comments[1].createdAt },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+      },
+    },
+    commentCounts: {
+      totalVisible: 2,
+    },
+  },
+];
+
+export const assetWithReplies = {
+  ...baseAsset,
+  id: "asset-with-replies",
+  url: "http://localhost/assets/asset-with-replies",
+  comments: {
+    edges: [
+      { node: comments[0], cursor: comments[0].createdAt },
+      { node: commentWithReplies, cursor: commentWithReplies.createdAt },
+    ],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+  commentCounts: {
+    totalVisible: 2,
+  },
+};
+
+export const assetWithDeepReplies = {
+  ...baseAsset,
+  id: "asset-with-deep-replies",
+  url: "http://localhost/assets/asset-with-replies",
+  comments: {
+    edges: [
+      { node: comments[0], cursor: comments[0].createdAt },
+      {
+        node: commentWithDeepReplies,
+        cursor: commentWithDeepReplies.createdAt,
+      },
+    ],
+    pageInfo: {
+      hasNextPage: false,
+    },
+  },
+  commentCounts: {
+    totalVisible: 2,
+  },
+};
+
 export const assetWithDeepestReplies = {
+  ...baseAsset,
   id: "asset-with-deepest-replies",
   url: "http://localhost/assets/asset-with-replies",
-  isClosed: false,
   comments: {
     edges: [
       {

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

@@ -1,4 +1,7 @@
 .root {
+}
+
+.popover {
   background: var(--palette-common-white);
   border: 1px solid var(--palette-grey-lighter);
   box-sizing: border-box;

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

@@ -7,6 +7,9 @@ import {
   Reference,
   RefHandler,
 } from "react-popper";
+
+import { withStyles } from "talk-ui/hocs";
+
 import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
@@ -43,6 +46,7 @@ interface PopoverProps {
   onClose?: () => void;
   className?: string;
   placement?: Placement;
+  classes: typeof styles;
 }
 
 interface State {
@@ -50,7 +54,7 @@ interface State {
 }
 
 class Popover extends React.Component<PopoverProps> {
-  public static defaultProps = {
+  public static defaultProps: Partial<PopoverProps> = {
     placement: "top",
   };
   public state: State = {
@@ -92,56 +96,61 @@ class Popover extends React.Component<PopoverProps> {
       description,
       className,
       placement,
+      classes,
     } = this.props;
 
     const { visible } = this.state;
-    const popoverClassName = cn(styles.root, className, {
-      [styles.top]: placement!.startsWith("top"),
-      [styles.left]: placement!.startsWith("left"),
-      [styles.right]: placement!.startsWith("right"),
-      [styles.bottom]: placement!.startsWith("bottom"),
+    const popoverClassName = cn(classes.popover, {
+      [classes.top]: placement!.startsWith("top"),
+      [classes.left]: placement!.startsWith("left"),
+      [classes.right]: placement!.startsWith("right"),
+      [classes.bottom]: placement!.startsWith("bottom"),
     });
 
     return (
-      <Manager>
-        <Reference>
-          {(props: PopperArrowProps) =>
-            children({
-              forwardRef: props.ref,
-              toggleVisibility: this.toggleVisibility,
-              visible: this.state.visible,
-            })
-          }
-        </Reference>
-        <Popper placement={placement} eventsEnabled positionFixed={false}>
-          {(props: PopperArrowProps) => (
-            <div
-              id={id}
-              role="popup"
-              aria-labelledby={`${id}-ariainfo`}
-              aria-hidden={!visible}
-            >
-              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
-              {visible && (
-                <div
-                  style={props.style}
-                  className={popoverClassName}
-                  ref={props.ref}
-                >
-                  {typeof body === "function"
-                    ? body({
-                        toggleVisibility: this.toggleVisibility,
-                        visible: this.state.visible,
-                      })
-                    : body}
-                </div>
-              )}
-            </div>
-          )}
-        </Popper>
-      </Manager>
+      <div className={cn(classes.root, className)}>
+        <Manager>
+          <Reference>
+            {(props: PopperArrowProps) =>
+              children({
+                forwardRef: props.ref,
+                toggleVisibility: this.toggleVisibility,
+                visible: this.state.visible,
+              })
+            }
+          </Reference>
+          <Popper placement={placement} eventsEnabled positionFixed={false}>
+            {(props: PopperArrowProps) => (
+              <div
+                id={id}
+                role="popup"
+                aria-labelledby={`${id}-ariainfo`}
+                aria-hidden={!visible}
+              >
+                <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+                {visible && (
+                  <div
+                    style={props.style}
+                    className={popoverClassName}
+                    ref={props.ref}
+                  >
+                    {typeof body === "function"
+                      ? body({
+                          toggleVisibility: this.toggleVisibility,
+                          visible: this.state.visible,
+                        })
+                      : body}
+                  </div>
+                )}
+              </div>
+            )}
+          </Popper>
+        </Manager>
+      </div>
     );
   }
 }
 
-export default Popover;
+const enhanced = withStyles(styles)(Popover);
+
+export default enhanced;