[CORL-263, CORL-225] Story Titles, Moderate Story, Mini Unit (#2294)

* feat: show story title + moderate this story link

* feat: introduce mini unit

* test: add tests for moderate story link

* fix: snapshot

* fix: lint / test

* fix: unwanted margin

src/core/client/admin/components/AuthBox.css

@@ -3,15 +3,15 @@
   background-color: #f5f5f5;
   border: 1px solid var(--palette-grey-lighter);
   margin-top: 70px;
-  padding: 0 calc(3 * var(--spacing-unit)) calc(4 * var(--spacing-unit))
-    calc(3 * var(--spacing-unit));
+  padding: 0 calc(3 * var(--mini-unit)) calc(4 * var(--mini-unit))
+    calc(3 * var(--mini-unit));
   box-sizing: border-box;
 }
 
 .brandIcon {
   display: inline-flex;
   background: var(--palette-common-white);
-  padding: calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
   border: 1px solid var(--palette-grey-lighter);
   margin-top: -42px;
 }

src/core/client/admin/components/DecisionHistoryButton.css

@@ -4,5 +4,5 @@
 
 .historyIcon {
   color: var(--palette-text-secondary);
-  margin-right: calc(1.5 * var(--spacing-unit));
+  margin-right: calc(1.5 * var(--mini-unit));
 }

src/core/client/admin/components/MainLayout.css

@@ -1,6 +1,6 @@
 .root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 0 var(--spacing-unit);
+  padding: 0 var(--mini-unit);
   box-sizing: border-box;
 }

src/core/client/admin/routes/community/components/Community.css

@@ -1,5 +1,5 @@
 .root {
   max-width: 950px;
-  margin-top: calc(3 * var(--spacing-unit));
-  margin-bottom: calc(3 * var(--spacing-unit));
+  margin-top: calc(3 * var(--mini-unit));
+  margin-bottom: calc(3 * var(--mini-unit));
 }

src/core/client/admin/routes/community/components/UserTableFilter.css

@@ -5,13 +5,13 @@
 
 .textField {
   height: 31px;
-  width: calc(36 * var(--spacing-unit));
+  width: calc(45 * var(--mini-unit));
 }
 
 .adornment {
-  padding: 0 var(--spacing-unit);
+  padding: 0 var(--mini-unit);
 }
 
 .selectField {
-  min-width: calc(13 * var(--spacing-unit));
+  min-width: calc(16 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/components/ConfigBox.css

@@ -3,7 +3,7 @@
 }
 
 .title {
-  padding: calc(0.5 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit)) calc(1.5 * var(--mini-unit));
 
   background-color: var(--palette-text-primary);
 
@@ -16,5 +16,5 @@
 }
 
 .content {
-  padding: calc(2 * var(--spacing-unit)) calc(3 * var(--spacing-unit));
+  padding: calc(2 * var(--mini-unit)) calc(3 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/components/Header.css

@@ -1,7 +1,7 @@
 .root {
-  padding-bottom: calc(0.5 * var(--spacing-unit));
+  padding-bottom: calc(0.5 * var(--mini-unit));
   border-bottom: 1px solid var(--palette-text-primary);
-  margin-bottom: calc(1.5 * var(--spacing-unit));
+  margin-bottom: calc(1.5 * var(--mini-unit));
   display: block;
   width: 100%;
 }

src/core/client/admin/routes/configure/components/Layout.css

@@ -1,4 +1,4 @@
 .root {
-  padding: calc(3 * var(--spacing-unit)) calc(5 * var(--spacing-unit))
-    calc(5 * var(--spacing-unit)) calc(5 * var(--spacing-unit));
+  padding: calc(3 * var(--mini-unit)) calc(5 * var(--mini-unit))
+    calc(5 * var(--mini-unit)) calc(5 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/components/Main.css

@@ -1,4 +1,4 @@
 .root {
   width: 100%;
-  max-width: calc(67 * var(--spacing-unit));
+  max-width: calc(84 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/components/Navigation/Link.css

@@ -1,8 +1,8 @@
 .link {
   composes: sideNavigationItem from "talk-ui/shared/typography.css";
   display: inline-block;
-  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit)
-    calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) + 2px);
+  padding: calc(0.5 * var(--mini-unit)) var(--mini-unit)
+    calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) + 2px);
   margin-left: 2px;
   border-left: 1px solid var(--palette-grey-lighter);
 
@@ -14,6 +14,6 @@
 .linkActive {
   composes: sideNavigationActive from "talk-ui/shared/typography.css";
   margin-left: 0px;
-  border-left: calc(0.5 * var(--spacing-unit)) solid var(--palette-brand-main);
-  padding-left: var(--spacing-unit);
+  border-left: calc(0.5 * var(--mini-unit)) solid var(--palette-brand-main);
+  padding-left: var(--mini-unit);
 }

src/core/client/admin/routes/configure/components/SideBar.css

@@ -1,7 +1,7 @@
 .root {
-  width: calc(25 * var(--spacing-unit));
-  padding-top: calc(0.5 * var(--spacing-unit));
-  padding-right: calc(3 * var(--spacing-unit));
+  width: calc(31 * var(--mini-unit));
+  padding-top: calc(0.5 * var(--mini-unit));
+  padding-right: calc(3 * var(--mini-unit));
   position: sticky;
   top: 0;
   align-self: flex-start;

src/core/client/admin/routes/configure/components/Subheader.css

@@ -1,5 +1,5 @@
 .root {
-  padding-bottom: calc(0.25 * var(--spacing-unit));
+  padding-bottom: calc(0.25 * var(--mini-unit));
   border-bottom: 1px solid var(--palette-divider);
-  margin-bottom: calc(0.75 * var(--spacing-unit));
+  margin-bottom: calc(0.75 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/components/ValidationMessage.css

@@ -1,3 +1,3 @@
 .root {
-  min-width: calc(29 * var(--spacing-unit));
+  min-width: calc(29 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/sections/auth/components/ConfigDescription.css

@@ -1,3 +1,3 @@
 .description {
-  width: calc(30 * var(--spacing-unit));
+  width: calc(30 * var(--mini-unit));
 }

src/core/client/admin/routes/configure/sections/auth/components/SSOKeyField.css

@@ -1,7 +1,7 @@
 .keyGenerated {
   composes: button from "talk-ui/shared/typography.css";
   color: var(--palette-text-secondary);
-  width: calc(29 * var(--spacing-unit));
+  width: calc(29 * var(--mini-unit));
   flex-shrink: 0;
 }
 

src/core/client/admin/routes/configure/sections/wordList/components/BannedWordListConfig.css

@@ -1,3 +1,3 @@
 .textArea {
-  margin-top: var(--spacing-unit);
+  margin-top: var(--mini-unit);
 }

src/core/client/admin/routes/configure/sections/wordList/components/SuspectWordListConfig.css

@@ -1,3 +1,3 @@
 .textArea {
-  margin-top: var(--spacing-unit);
+  margin-top: var(--mini-unit);
 }

src/core/client/admin/routes/configure/sections/wordList/components/WordListTextArea.css

@@ -1,6 +1,6 @@
 .textArea {
   width: 100%;
   box-sizing: border-box;
-  height: calc(23 * var(--spacing-unit));
-  padding: calc(0.5 * var(--spacing-unit));
+  height: calc(23 * var(--mini-unit));
+  padding: calc(0.5 * var(--mini-unit));
 }

src/core/client/admin/routes/login/components/CompleteAccountBox.css

@@ -9,15 +9,15 @@
 
 .header {
   background-color: var(--palette-text-primary);
-  padding: calc(1.5 * var(--spacing-unit));
+  padding: calc(1.5 * var(--mini-unit));
   color: var(--palette-text-light);
 }
 
 .heading3 {
-  margin-bottom: calc(0.25 * var(--spacing-unit));
+  margin-bottom: calc(0.25 * var(--mini-unit));
 }
 
 .main {
-  padding: calc(2.5 * var(--spacing-unit)) calc(2 * var(--spacing-unit))
-    calc(2 * var(--spacing-unit)) calc(2 * var(--spacing-unit));
+  padding: calc(2.5 * var(--mini-unit)) calc(2 * var(--mini-unit))
+    calc(2 * var(--mini-unit)) calc(2 * var(--mini-unit));
 }

src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/UnorderedList.css

@@ -3,7 +3,7 @@
   padding: 0;
 
   & > * {
-    margin: 0 0 calc(1 * var(--spacing-unit)) 0 !important;
+    margin: 0 0 calc(1 * var(--mini-unit)) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;

src/core/client/admin/routes/login/views/signIn/components/HorizontalSeparator.css

@@ -12,5 +12,5 @@
   composes: heading3 from "talk-ui/shared/typography.css";
   position: relative;
   background-color: #f5f5f5;
-  padding: 0 var(--spacing-unit);
+  padding: 0 var(--mini-unit);
 }

src/core/client/admin/routes/login/views/signIn/components/Version.css

@@ -3,6 +3,6 @@
   background-color: #f5f5f5;
   border: 1px solid var(--palette-grey-lighter);
   border-top: 0;
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
   box-sizing: border-box;
 }

src/core/client/admin/routes/moderate/components/AcceptButton.tsx

@@ -16,7 +16,7 @@ const AcceptButton: StatelessComponent<Props> = ({
   className,
   ...rest
 }) => (
-  <Localized id="moderate-acceptButton" attrs={{ "aria-label": true }}>
+  <Localized id="moderate-comment-acceptButton" attrs={{ "aria-label": true }}>
     <BaseButton
       {...rest}
       className={cn(className, styles.root, {

src/core/client/admin/routes/moderate/components/InReplyTo.tsx

@@ -19,7 +19,7 @@ const InReplyTo: StatelessComponent<Props> = ({ children }) => {
   return (
     <Flex alignItems="center">
       <Icon className={styles.icon}>reply</Icon>{" "}
-      <Localized id="moderate-inReplyTo" username={<Username />}>
+      <Localized id="moderate-comment-inReplyTo" username={<Username />}>
         <Typography
           variant="timestamp"
           container="span"

src/core/client/admin/routes/moderate/components/Moderate.css

@@ -9,7 +9,7 @@
 }
 
 .main {
-  margin: calc(2 * var(--spacing-unit)) 0 calc(4 * var(--spacing-unit)) 0;
+  margin: calc(2 * var(--mini-unit)) 0 calc(4 * var(--mini-unit)) 0;
   display: flex;
   justify-content: center;
 }

src/core/client/admin/routes/moderate/components/ModerateCard.css

@@ -1,17 +1,17 @@
 .topBar {
-  margin-bottom: var(--spacing-unit);
+  margin-bottom: var(--mini-unit);
 }
 
 .username {
-  margin-right: var(--spacing-unit);
+  margin-right: var(--mini-unit);
 }
 
 .footer {
-  margin-top: calc(2 * var(--spacing-unit));
+  margin-top: calc(2 * var(--mini-unit));
 }
 
 .content {
-  min-height: calc(4.5 * var(--spacing-unit));
+  min-height: calc(4.5 * var(--mini-unit));
 }
 
 .mainContainer {
@@ -43,7 +43,7 @@
   flex-shrink: 0;
   flex-grow: 0;
   border-right: 1px solid var(--palette-divider);
-  margin: 0 calc(2 * var(--spacing-unit));
+  margin: 0 calc(2 * var(--mini-unit));
 }
 
 .root {
@@ -53,3 +53,31 @@
 .dangling {
   background-color: var(--palette-grey-lightest);
 }
+
+.link {
+  font-size: calc(12rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(18em / 12);
+  letter-spacing: calc(0.2em / 12);
+  text-transform: uppercase;
+}
+
+.story {
+  font-size: calc(12rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(18em / 12);
+  letter-spacing: calc(0.2em / 12);
+  text-transform: uppercase;
+  color: var(--palette-grey-main);
+}
+
+.storyTitle {
+  font-size: calc(12rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(18em / 12);
+  letter-spacing: calc(0.2em / 12);
+  color: var(--palette-text-primary);
+}

src/core/client/admin/routes/moderate/components/ModerateCard.spec.tsx

@@ -22,6 +22,7 @@ const baseProps: PropTypesOf<typeof ModerateCardN> = {
   bannedWords: ["fuck"],
   onAccept: noop,
   onReject: noop,
+  showStory: false,
 };
 
 it("renders correctly", () => {
@@ -72,3 +73,16 @@ it("renders dangling correctly", () => {
   renderer.render(<ModerateCardN {...props} />);
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
+
+it("renders story info", () => {
+  const props: PropTypesOf<typeof ModerateCardN> = {
+    ...baseProps,
+    showStory: true,
+    storyTitle: "Cancer cured!",
+    storyHref: "/story",
+    onModerateStory: noop,
+  };
+  const renderer = createRenderer();
+  renderer.render(<ModerateCardN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/admin/routes/moderate/components/ModerateCard.tsx

@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
-import { Button, Card, Flex, Icon } from "talk-ui/components";
+import { Card, Flex, HorizontalGutter, TextLink } from "talk-ui/components";
 
 import MarkersContainer from "../containers/MarkersContainer";
 import AcceptButton from "./AcceptButton";
@@ -26,6 +26,10 @@ interface Props {
   viewContextHref: string;
   suspectWords: ReadonlyArray<string>;
   bannedWords: ReadonlyArray<string>;
+  showStory: boolean;
+  storyTitle?: React.ReactNode;
+  storyHref?: string;
+  onModerateStory?: React.EventHandler<React.MouseEvent>;
   onAccept: () => void;
   onReject: () => void;
   /**
@@ -50,6 +54,10 @@ const ModerateCard: StatelessComponent<Props> = ({
   onAccept,
   onReject,
   dangling,
+  showStory,
+  storyTitle,
+  storyHref,
+  onModerateStory,
 }) => (
   <Card
     className={cn(styles.root, { [styles.dangling]: dangling })}
@@ -76,23 +84,40 @@ const ModerateCard: StatelessComponent<Props> = ({
           {body}
         </CommentContent>
         <div className={styles.footer}>
-          <Flex justifyContent="flex-end">
-            <Button
-              variant="underlined"
-              color="primary"
-              anchor
-              href={viewContextHref}
-              target="_blank"
-            >
-              <Localized id="moderate-viewContext">
-                <span>View Context</span>
-              </Localized>{" "}
-              <Icon>arrow_forward</Icon>
-            </Button>
-          </Flex>
-          <Flex itemGutter>
+          <HorizontalGutter>
+            <div>
+              <Localized id="moderate-comment-viewContext">
+                <TextLink
+                  className={styles.link}
+                  href={viewContextHref}
+                  target="_blank"
+                  external
+                >
+                  View Context
+                </TextLink>
+              </Localized>
+            </div>
+            {showStory && (
+              <div>
+                <Localized id="moderate-comment-story">
+                  <span className={styles.story}>Story</span>
+                </Localized>
+                {": "}
+                <span className={styles.storyTitle}>{storyTitle}</span>{" "}
+                <Localized id="moderate-comment-moderateStory">
+                  <TextLink
+                    className={styles.link}
+                    href={storyHref}
+                    target="_blank"
+                    onClick={onModerateStory}
+                  >
+                    Moderate Story
+                  </TextLink>
+                </Localized>
+              </div>
+            )}
             <MarkersContainer comment={comment} />
-          </Flex>
+          </HorizontalGutter>
         </div>
       </div>
       <div className={styles.separator} />
@@ -104,7 +129,7 @@ const ModerateCard: StatelessComponent<Props> = ({
         direction="column"
         itemGutter
       >
-        <Localized id="moderate-decision">
+        <Localized id="moderate-comment-decision">
           <div className={styles.decision}>DECISION</div>
         </Localized>
         <Flex itemGutter>

src/core/client/admin/routes/moderate/components/Queue.css

@@ -1,5 +1,5 @@
 .root {
-  width: calc(75 * var(--spacing-unit));
+  width: calc(94 * var(--mini-unit));
 }
 
 .exitTransition {

src/core/client/admin/routes/moderate/components/Queue.tsx

@@ -19,6 +19,7 @@ interface Props {
   disableLoadMore: boolean;
   danglingLogic: PropTypesOf<typeof ModerateCardContainer>["danglingLogic"];
   emptyElement?: React.ReactElement;
+  allStories?: boolean;
 }
 
 const Queue: StatelessComponent<Props> = ({
@@ -29,6 +30,7 @@ const Queue: StatelessComponent<Props> = ({
   onLoadMore,
   danglingLogic,
   emptyElement,
+  allStories,
 }) => (
   <HorizontalGutter className={styles.root} size="double">
     <TransitionGroup component={null} appear={false} enter={false} exit>
@@ -46,6 +48,7 @@ const Queue: StatelessComponent<Props> = ({
             settings={settings}
             comment={c}
             danglingLogic={danglingLogic}
+            showStoryInfo={Boolean(allStories)}
           />
         </CSSTransition>
       ))}

src/core/client/admin/routes/moderate/components/RejectButton.tsx

@@ -16,7 +16,7 @@ const RejectButton: StatelessComponent<Props> = ({
   className,
   ...rest
 }) => (
-  <Localized id="moderate-rejectButton" attrs={{ "aria-label": true }}>
+  <Localized id="moderate-comment-rejectButton" attrs={{ "aria-label": true }}>
     <BaseButton
       {...rest}
       className={cn(className, styles.root, {

src/core/client/admin/routes/moderate/components/Search/Bar.css

@@ -1,5 +1,5 @@
 .root {
-  height: calc(5 * var(--spacing-unit));
+  height: calc(6 * var(--mini-unit));
   background-color: #013f68;
   margin-top: -1px;
 }
@@ -9,7 +9,7 @@
 }
 
 .popover {
-  width: calc(75 * var(--spacing-unit));
+  width: calc(94 * var(--mini-unit));
   border: 0;
 }
 

src/core/client/admin/routes/moderate/components/Search/Field.css

@@ -1,13 +1,13 @@
 .root {
-  width: calc(75 * var(--spacing-unit));
-  height: calc(3 * var(--spacing-unit));
+  width: calc(94 * var(--mini-unit));
+  height: calc(4 * var(--mini-unit));
 }
 
 .begin {
   background-color: var(--palette-primary-darkest);
   border-top-left-radius: var(--round-corners);
   border-bottom-left-radius: var(--round-corners);
-  min-width: calc(4 * var(--spacing-unit));
+  min-width: calc(5 * var(--mini-unit));
   flex-shrink: 0;
   pointer-events: none;
 }
@@ -20,17 +20,17 @@
   letter-spacing: calc(0.2em / 13);
   color: var(--palette-text-light);
   text-transform: uppercase;
-  padding-right: calc(0.25 * var(--spacing-unit));
+  padding-right: calc(0.25 * var(--mini-unit));
 }
 
 .searchIcon {
-  padding: 0 calc(0.5 * var(--spacing-unit)) 0 calc(0.75 * var(--spacing-unit));
+  padding: 0 calc(0.5 * var(--mini-unit)) 0 calc(0.75 * var(--mini-unit));
   font-weight: var(--font-weight-medium);
   color: var(--palette-text-light);
 }
 
 .end {
-  min-width: calc(4 * var(--spacing-unit));
+  min-width: calc(5 * var(--mini-unit));
   background-color: var(--palette-primary-darkest);
   border-top-right-radius: var(--round-corners);
   border-bottom-right-radius: var(--round-corners);
@@ -39,10 +39,10 @@
 
 .searchButton {
   composes: button from "talk-ui/shared/typography.css";
-  padding: 0 calc(1 * var(--spacing-unit));
+  padding: 0 calc(1 * var(--mini-unit));
   color: var(--palette-text-light);
   border-left: 1px solid var(--palette-text-light);
-  height: calc(3 * var(--spacing-unit) - 4px);
+  height: calc(4 * var(--mini-unit) - 4px);
 
   &:disabled {
     cursor: pointer;
@@ -53,7 +53,7 @@
   composes: inputText placeholderPseudo from "talk-ui/shared/typography.css";
   position: relative;
   display: block;
-  padding: calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
   box-sizing: border-box;
   width: 100%;
   line-height: 30px;

src/core/client/admin/routes/moderate/components/Search/Group.css

@@ -7,8 +7,8 @@
 .title {
   display: flex;
   align-items: center;
-  height: calc(3 * var(--spacing-unit));
-  padding-left: calc(1.5 * var(--spacing-unit));
+  height: calc(3 * var(--mini-unit));
+  padding-left: calc(1.5 * var(--mini-unit));
   background: var(--palette-text-primary);
 
   font-family: var(--font-family-sans-serif);

src/core/client/admin/routes/moderate/components/Search/ModerateAllOption.css

@@ -9,7 +9,7 @@
 
 .link {
   justify-content: left;
-  min-height: calc(4 * var(--spacing-unit));
+  min-height: calc(4 * var(--mini-unit));
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
   font-size: calc(16rem / var(--rem-base));

src/core/client/admin/routes/moderate/components/Search/Option.css

@@ -7,8 +7,8 @@
   }
 }
 .container {
-  min-height: calc(4 * var(--spacing-unit));
-  padding: var(--spacing-unit) calc(2.5 * var(--spacing-unit));
+  min-height: calc(4 * var(--mini-unit));
+  padding: var(--mini-unit) calc(2.5 * var(--mini-unit));
   box-sizing: border-box;
   &:hover {
     background: var(--palette-grey-lightest);

src/core/client/admin/routes/moderate/components/Search/SeeAllOption.css

@@ -10,7 +10,7 @@
   align-items: center;
 
   background: var(--palette-primary-dark);
-  min-height: calc(3 * var(--spacing-unit));
+  min-height: calc(3 * var(--mini-unit));
 
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
@@ -27,7 +27,7 @@
 
 .icon {
   font-weight: var(--font-weight-medium);
-  padding-left: calc(0.5 * var(--spacing-unit));
+  padding-left: calc(0.5 * var(--mini-unit));
   line-height: calc(16em / 13);
   margin-top: -2px;
 }

src/core/client/admin/routes/moderate/components/SingleModerate.css

@@ -9,13 +9,13 @@
 }
 
 .main {
-  margin: calc(2 * var(--spacing-unit)) 0 calc(4 * var(--spacing-unit)) 0;
+  margin: calc(2 * var(--mini-unit)) 0 calc(4 * var(--mini-unit)) 0;
   display: flex;
   justify-content: center;
 }
 
 .subBar {
-  height: calc(3 * var(--spacing-unit));
+  height: calc(4 * var(--mini-unit));
   background-color: var(--palette-primary-dark);
   margin-top: -1px;
 }

src/core/client/admin/routes/moderate/components/Username.tsx

@@ -14,7 +14,7 @@ export interface UsernameProps {
 const Username: StatelessComponent<UsernameProps> = props => {
   return (
     <Typography
-      variant="heading2"
+      variant="heading4"
       className={cn(props.className, styles.root)}
       container="span"
     >

src/core/client/admin/routes/moderate/components/__snapshots__/AcceptButton.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`renders correctly 1`] = `
       "aria-label": true,
     }
   }
-  id="moderate-acceptButton"
+  id="moderate-comment-acceptButton"
 >
   <ForwardRef(forwardRef)
     aria-label="Accept"
@@ -30,7 +30,7 @@ exports[`renders correctly inverted 1`] = `
       "aria-label": true,
     }
   }
-  id="moderate-acceptButton"
+  id="moderate-comment-acceptButton"
 >
   <ForwardRef(forwardRef)
     aria-label="Accept"

src/core/client/admin/routes/moderate/components/__snapshots__/InReplyTo.spec.tsx.snap

@@ -11,7 +11,7 @@ exports[`renders correctly 1`] = `
   </ForwardRef(forwardRef)>
    
   <Localized
-    id="moderate-inReplyTo"
+    id="moderate-comment-inReplyTo"
     username={<Username />}
   >
     <ForwardRef(forwardRef)

src/core/client/admin/routes/moderate/components/__snapshots__/ModerateCard.spec.tsx.snap

@@ -41,32 +41,21 @@ exports[`renders accepted correctly 1`] = `
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)
-          justifyContent="flex-end"
-        >
-          <ForwardRef(forwardRef)
-            anchor={true}
-            color="primary"
-            href="http://localhost/comment"
-            target="_blank"
-            variant="underlined"
-          >
+        <ForwardRef(forwardRef)>
+          <div>
             <Localized
-              id="moderate-viewContext"
+              id="moderate-comment-viewContext"
             >
-              <span>
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                external={true}
+                href="http://localhost/comment"
+                target="_blank"
+              >
                 View Context
-              </span>
+              </withPropsOnChange(TextLinkProps)>
             </Localized>
-             
-            <ForwardRef(forwardRef)>
-              arrow_forward
-            </ForwardRef(forwardRef)>
-          </ForwardRef(forwardRef)>
-        </ForwardRef(forwardRef)>
-        <ForwardRef(forwardRef)
-          itemGutter={true}
-        >
+          </div>
           <Relay(MarkersContainer)
             comment={Object {}}
           />
@@ -83,7 +72,7 @@ exports[`renders accepted correctly 1`] = `
       itemGutter={true}
     >
       <Localized
-        id="moderate-decision"
+        id="moderate-comment-decision"
       >
         <div
           className="ModerateCard-decision"
@@ -150,32 +139,21 @@ exports[`renders correctly 1`] = `
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)
-          justifyContent="flex-end"
-        >
-          <ForwardRef(forwardRef)
-            anchor={true}
-            color="primary"
-            href="http://localhost/comment"
-            target="_blank"
-            variant="underlined"
-          >
+        <ForwardRef(forwardRef)>
+          <div>
             <Localized
-              id="moderate-viewContext"
+              id="moderate-comment-viewContext"
             >
-              <span>
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                external={true}
+                href="http://localhost/comment"
+                target="_blank"
+              >
                 View Context
-              </span>
+              </withPropsOnChange(TextLinkProps)>
             </Localized>
-             
-            <ForwardRef(forwardRef)>
-              arrow_forward
-            </ForwardRef(forwardRef)>
-          </ForwardRef(forwardRef)>
-        </ForwardRef(forwardRef)>
-        <ForwardRef(forwardRef)
-          itemGutter={true}
-        >
+          </div>
           <Relay(MarkersContainer)
             comment={Object {}}
           />
@@ -192,7 +170,7 @@ exports[`renders correctly 1`] = `
       itemGutter={true}
     >
       <Localized
-        id="moderate-decision"
+        id="moderate-comment-decision"
       >
         <div
           className="ModerateCard-decision"
@@ -258,32 +236,21 @@ exports[`renders dangling correctly 1`] = `
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)
-          justifyContent="flex-end"
-        >
-          <ForwardRef(forwardRef)
-            anchor={true}
-            color="primary"
-            href="http://localhost/comment"
-            target="_blank"
-            variant="underlined"
-          >
+        <ForwardRef(forwardRef)>
+          <div>
             <Localized
-              id="moderate-viewContext"
+              id="moderate-comment-viewContext"
             >
-              <span>
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                external={true}
+                href="http://localhost/comment"
+                target="_blank"
+              >
                 View Context
-              </span>
+              </withPropsOnChange(TextLinkProps)>
             </Localized>
-             
-            <ForwardRef(forwardRef)>
-              arrow_forward
-            </ForwardRef(forwardRef)>
-          </ForwardRef(forwardRef)>
-        </ForwardRef(forwardRef)>
-        <ForwardRef(forwardRef)
-          itemGutter={true}
-        >
+          </div>
           <Relay(MarkersContainer)
             comment={Object {}}
           />
@@ -300,7 +267,7 @@ exports[`renders dangling correctly 1`] = `
       itemGutter={true}
     >
       <Localized
-        id="moderate-decision"
+        id="moderate-comment-decision"
       >
         <div
           className="ModerateCard-decision"
@@ -368,32 +335,21 @@ exports[`renders rejected correctly 1`] = `
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)
-          justifyContent="flex-end"
-        >
-          <ForwardRef(forwardRef)
-            anchor={true}
-            color="primary"
-            href="http://localhost/comment"
-            target="_blank"
-            variant="underlined"
-          >
+        <ForwardRef(forwardRef)>
+          <div>
             <Localized
-              id="moderate-viewContext"
+              id="moderate-comment-viewContext"
             >
-              <span>
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                external={true}
+                href="http://localhost/comment"
+                target="_blank"
+              >
                 View Context
-              </span>
+              </withPropsOnChange(TextLinkProps)>
             </Localized>
-             
-            <ForwardRef(forwardRef)>
-              arrow_forward
-            </ForwardRef(forwardRef)>
-          </ForwardRef(forwardRef)>
-        </ForwardRef(forwardRef)>
-        <ForwardRef(forwardRef)
-          itemGutter={true}
-        >
+          </div>
           <Relay(MarkersContainer)
             comment={Object {}}
           />
@@ -410,7 +366,7 @@ exports[`renders rejected correctly 1`] = `
       itemGutter={true}
     >
       <Localized
-        id="moderate-decision"
+        id="moderate-comment-decision"
       >
         <div
           className="ModerateCard-decision"
@@ -482,32 +438,21 @@ exports[`renders reply correctly 1`] = `
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)
-          justifyContent="flex-end"
-        >
-          <ForwardRef(forwardRef)
-            anchor={true}
-            color="primary"
-            href="http://localhost/comment"
-            target="_blank"
-            variant="underlined"
-          >
+        <ForwardRef(forwardRef)>
+          <div>
             <Localized
-              id="moderate-viewContext"
+              id="moderate-comment-viewContext"
             >
-              <span>
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                external={true}
+                href="http://localhost/comment"
+                target="_blank"
+              >
                 View Context
-              </span>
+              </withPropsOnChange(TextLinkProps)>
             </Localized>
-             
-            <ForwardRef(forwardRef)>
-              arrow_forward
-            </ForwardRef(forwardRef)>
-          </ForwardRef(forwardRef)>
-        </ForwardRef(forwardRef)>
-        <ForwardRef(forwardRef)
-          itemGutter={true}
-        >
+          </div>
           <Relay(MarkersContainer)
             comment={Object {}}
           />
@@ -524,7 +469,134 @@ exports[`renders reply correctly 1`] = `
       itemGutter={true}
     >
       <Localized
-        id="moderate-decision"
+        id="moderate-comment-decision"
+      >
+        <div
+          className="ModerateCard-decision"
+        >
+          DECISION
+        </div>
+      </Localized>
+      <ForwardRef(forwardRef)
+        itemGutter={true}
+      >
+        <RejectButton
+          invert={false}
+          onClick={[Function]}
+        />
+        <AcceptButton
+          invert={false}
+          onClick={[Function]}
+        />
+      </ForwardRef(forwardRef)>
+    </ForwardRef(forwardRef)>
+  </ForwardRef(forwardRef)>
+</withPropsOnChange(Card)>
+`;
+
+exports[`renders story info 1`] = `
+<withPropsOnChange(Card)
+  className="ModerateCard-root"
+  data-testid="moderate-comment-comment-id"
+>
+  <ForwardRef(forwardRef)>
+    <div
+      className="ModerateCard-mainContainer"
+    >
+      <div
+        className="ModerateCard-topBar"
+      >
+        <div>
+          <Username
+            className="ModerateCard-username"
+          >
+            Theon
+          </Username>
+          <Timestamp>
+            2018-11-29T16:01:51.897Z
+          </Timestamp>
+        </div>
+      </div>
+      <CommentContent
+        bannedWords={
+          Array [
+            "fuck",
+          ]
+        }
+        className="ModerateCard-content"
+        suspectWords={
+          Array [
+            "idiot",
+          ]
+        }
+      >
+        content
+      </CommentContent>
+      <div
+        className="ModerateCard-footer"
+      >
+        <ForwardRef(forwardRef)>
+          <div>
+            <Localized
+              id="moderate-comment-viewContext"
+            >
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                external={true}
+                href="http://localhost/comment"
+                target="_blank"
+              >
+                View Context
+              </withPropsOnChange(TextLinkProps)>
+            </Localized>
+          </div>
+          <div>
+            <Localized
+              id="moderate-comment-story"
+            >
+              <span
+                className="ModerateCard-story"
+              >
+                Story
+              </span>
+            </Localized>
+            : 
+            <span
+              className="ModerateCard-storyTitle"
+            >
+              Cancer cured!
+            </span>
+             
+            <Localized
+              id="moderate-comment-moderateStory"
+            >
+              <withPropsOnChange(TextLinkProps)
+                className="ModerateCard-link"
+                href="/story"
+                onClick={[Function]}
+                target="_blank"
+              >
+                Moderate Story
+              </withPropsOnChange(TextLinkProps)>
+            </Localized>
+          </div>
+          <Relay(MarkersContainer)
+            comment={Object {}}
+          />
+        </ForwardRef(forwardRef)>
+      </div>
+    </div>
+    <div
+      className="ModerateCard-separator"
+    />
+    <ForwardRef(forwardRef)
+      alignItems="center"
+      className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
+      direction="column"
+      itemGutter={true}
+    >
+      <Localized
+        id="moderate-comment-decision"
       >
         <div
           className="ModerateCard-decision"

src/core/client/admin/routes/moderate/components/__snapshots__/RejectButton.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`renders correctly 1`] = `
       "aria-label": true,
     }
   }
-  id="moderate-rejectButton"
+  id="moderate-comment-rejectButton"
 >
   <ForwardRef(forwardRef)
     aria-label="Reject"
@@ -30,7 +30,7 @@ exports[`renders correctly inverted 1`] = `
       "aria-label": true,
     }
   }
-  id="moderate-rejectButton"
+  id="moderate-comment-rejectButton"
 >
   <ForwardRef(forwardRef)
     aria-label="Reject"

src/core/client/admin/routes/moderate/components/__snapshots__/Username.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <span
-  className="Typography-root Typography-heading2 Typography-colorTextPrimary Username-root"
+  className="Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
 >
   Marvin
 </span>

src/core/client/admin/routes/moderate/containers/MarkersContainer.tsx

@@ -4,7 +4,7 @@ import { graphql } from "react-relay";
 
 import { MarkersContainer_comment as CommentData } from "talk-admin/__generated__/MarkersContainer_comment.graphql";
 import { withFragmentContainer } from "talk-framework/lib/relay";
-import { Marker, MarkerCount } from "talk-ui/components";
+import { Flex, Marker, MarkerCount } from "talk-ui/components";
 
 interface MarkersContainerProps {
   comment: CommentData;
@@ -91,7 +91,11 @@ const markers: Array<(c: CommentData) => React.ReactElement<any> | null> = [
 
 export class MarkersContainer extends React.Component<MarkersContainerProps> {
   public render() {
-    return markers.map(cb => cb(this.props.comment));
+    const elements = markers.map(cb => cb(this.props.comment)).filter(m => m);
+    if (elements.length) {
+      return <Flex itemGutter>{elements}</Flex>;
+    }
+    return null;
   }
 }
 

src/core/client/admin/routes/moderate/containers/ModerateCardContainer.tsx

@@ -7,6 +7,7 @@ import {
   ModerateCardContainer_comment as CommentData,
 } from "talk-admin/__generated__/ModerateCardContainer_comment.graphql";
 import { ModerateCardContainer_settings as SettingsData } from "talk-admin/__generated__/ModerateCardContainer_settings.graphql";
+import NotAvailable from "talk-admin/components/NotAvailable";
 import { AcceptCommentMutation } from "talk-admin/mutations";
 import { RejectCommentMutation } from "talk-admin/mutations";
 import {
@@ -15,6 +16,7 @@ import {
   withMutation,
 } from "talk-framework/lib/relay";
 
+import { getModerationLink } from "talk-admin/helpers";
 import ModerateCard from "../components/ModerateCard";
 
 interface Props {
@@ -25,6 +27,7 @@ interface Props {
   danglingLogic: (status: COMMENT_STATUS) => boolean;
   match: Match;
   router: Router;
+  showStoryInfo: boolean;
 }
 
 function getStatus(comment: CommentData) {
@@ -55,8 +58,17 @@ class ModerateCardContainer extends React.Component<Props> {
     });
   };
 
+  private handleModerateStory = (e: React.MouseEvent) => {
+    this.props.router.push(
+      getModerationLink("default", this.props.comment.story.id)
+    );
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+  };
+
   public render() {
-    const { comment, settings, danglingLogic } = this.props;
+    const { comment, settings, danglingLogic, showStoryInfo } = this.props;
     return (
       <ModerateCard
         id={comment.id}
@@ -72,6 +84,14 @@ class ModerateCardContainer extends React.Component<Props> {
         onAccept={this.handleAccept}
         onReject={this.handleReject}
         dangling={danglingLogic(comment.status)}
+        showStory={showStoryInfo}
+        storyTitle={
+          (comment.story.metadata && comment.story.metadata.title) || (
+            <NotAvailable />
+          )
+        }
+        storyHref={getModerationLink("default", comment.story.id)}
+        onModerateStory={this.handleModerateStory}
       />
     );
   }
@@ -95,6 +115,12 @@ const enhanced = withFragmentContainer<Props>({
           username
         }
       }
+      story {
+        id
+        metadata {
+          title
+        }
+      }
       permalink
       ...MarkersContainer_comment
     }

src/core/client/admin/routes/moderate/containers/QueueContainer.tsx

@@ -18,6 +18,7 @@ interface QueueContainerProps {
   settings: SettingsData;
   relay: RelayPaginationProp;
   emptyElement: React.ReactElement;
+  storyID?: string;
 }
 
 // TODO: use generated types
@@ -43,6 +44,7 @@ export class QueueContainer extends React.Component<QueueContainerProps> {
           disableLoadMore={this.state.disableLoadMore}
           danglingLogic={danglingLogic}
           emptyElement={this.props.emptyElement}
+          allStories={!Boolean(this.props.storyID)}
         />
       </IntersectionProvider>
     );
@@ -131,7 +133,7 @@ const createQueueContainer = (
     Component: enhanced,
     query: queueQuery,
     cacheConfig: { force: true },
-    render: ({ Component, props }) => {
+    render: ({ Component, props, match }) => {
       const anyProps = props as any;
       if (Component && props) {
         const queue =
@@ -141,6 +143,7 @@ const createQueueContainer = (
             queue={queue}
             settings={anyProps.settings}
             emptyElement={emptyElement}
+            storyID={match.params.storyID}
           />
         );
       }

src/core/client/admin/routes/moderate/containers/RejectedQueueContainer.tsx

@@ -15,6 +15,7 @@ import Queue from "../components/Queue";
 interface RejectedQueueContainerProps {
   query: QueryData;
   relay: RelayPaginationProp;
+  storyID?: string;
 }
 
 // TODO: use generated types
@@ -45,6 +46,7 @@ export class RejectedQueueContainer extends React.Component<
               <EmptyMessage>There are no rejected comments.</EmptyMessage>
             </Localized>
           }
+          allStories={!Boolean(this.props.storyID)}
         />
       </IntersectionProvider>
     );
@@ -145,9 +147,9 @@ enhanced.routeConfig = {
     }
   `,
   cacheConfig: { force: true },
-  render: ({ Component, props }) => {
+  render: ({ Component, props, match }) => {
     if (Component && props) {
-      return <Component query={props} />;
+      return <Component query={props} storyID={match.params.storyID} />;
     }
     return <LoadingQueue />;
   },

src/core/client/admin/routes/moderate/containers/__snapshots__/MarkersContainer.spec.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders all markers 1`] = `
-Array [
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
   <Localized
     id="moderate-marker-preMod"
   >
@@ -10,7 +12,7 @@ Array [
     >
       Pre-Mod
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-link"
   >
@@ -19,7 +21,7 @@ Array [
     >
       Link
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-bannedWord"
   >
@@ -28,7 +30,7 @@ Array [
     >
       Banned Word
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-suspectWord"
   >
@@ -38,7 +40,7 @@ Array [
     >
       Suspect Word
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-spam"
   >
@@ -47,7 +49,7 @@ Array [
     >
       Spam
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-toxic"
   >
@@ -56,7 +58,7 @@ Array [
     >
       Toxic
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-karma"
   >
@@ -65,7 +67,7 @@ Array [
     >
       Karma
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <withPropsOnChange(Marker)
     color="error"
   >
@@ -80,7 +82,7 @@ Array [
     <withPropsOnChange(Count)>
       2
     </withPropsOnChange(Count)>
-  </withPropsOnChange(Marker)>,
+  </withPropsOnChange(Marker)>
   <withPropsOnChange(Marker)
     color="error"
   >
@@ -95,12 +97,14 @@ Array [
     <withPropsOnChange(Count)>
       3
     </withPropsOnChange(Count)>
-  </withPropsOnChange(Marker)>,
-]
+  </withPropsOnChange(Marker)>
+</ForwardRef(forwardRef)>
 `;
 
 exports[`renders some markers 1`] = `
-Array [
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
   <Localized
     id="moderate-marker-preMod"
   >
@@ -109,8 +113,7 @@ Array [
     >
       Pre-Mod
     </withPropsOnChange(Marker)>
-  </Localized>,
-  null,
+  </Localized>
   <Localized
     id="moderate-marker-bannedWord"
   >
@@ -119,9 +122,7 @@ Array [
     >
       Banned Word
     </withPropsOnChange(Marker)>
-  </Localized>,
-  null,
-  null,
+  </Localized>
   <Localized
     id="moderate-marker-toxic"
   >
@@ -130,7 +131,7 @@ Array [
     >
       Toxic
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <Localized
     id="moderate-marker-karma"
   >
@@ -139,7 +140,7 @@ Array [
     >
       Karma
     </withPropsOnChange(Marker)>
-  </Localized>,
+  </Localized>
   <withPropsOnChange(Marker)
     color="error"
   >
@@ -154,7 +155,6 @@ Array [
     <withPropsOnChange(Count)>
       2
     </withPropsOnChange(Count)>
-  </withPropsOnChange(Marker)>,
-  null,
-]
+  </withPropsOnChange(Marker)>
+</ForwardRef(forwardRef)>
 `;

src/core/client/admin/routes/stories/components/Stories.css

@@ -1,5 +1,5 @@
 .root {
   max-width: 950px;
-  margin-top: calc(3 * var(--spacing-unit));
-  margin-bottom: calc(3 * var(--spacing-unit));
+  margin-top: calc(3 * var(--mini-unit));
+  margin-bottom: calc(3 * var(--mini-unit));
 }

src/core/client/admin/routes/stories/components/StoryTableFilter.css

@@ -5,9 +5,9 @@
 
 .textField {
   height: 31px;
-  width: calc(36 * var(--spacing-unit));
+  width: calc(45 * var(--mini-unit));
 }
 
 .adornment {
-  padding: 0 var(--spacing-unit);
+  padding: 0 var(--mini-unit);
 }

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

@@ -353,6 +353,58 @@ export const users = {
   ),
 };
 
+export const stories = createFixtures<GQLStory>([
+  {
+    id: "story-1",
+    closedAt: null,
+    isClosed: false,
+    status: GQLSTORY_STATUS.OPEN,
+    createdAt: "2018-11-29T16:01:51.897Z",
+    metadata: {
+      author: "Vin Hoa",
+      title: "Finally a Cure for Cancer",
+      publishedAt: "2018-11-29T16:01:51.897Z",
+    },
+  },
+  {
+    id: "story-2",
+    closedAt: null,
+    isClosed: false,
+    status: GQLSTORY_STATUS.OPEN,
+    createdAt: "2018-11-29T16:01:51.897Z",
+    metadata: {
+      author: "Linh Nguyen",
+      title: "First Colony on Mars",
+      publishedAt: "2018-11-29T16:01:51.897Z",
+    },
+  },
+  {
+    id: "story-3",
+    closedAt: "2018-11-29T16:01:51.897Z",
+    createdAt: "2018-11-29T16:01:51.897Z",
+    isClosed: true,
+    status: GQLSTORY_STATUS.CLOSED,
+    metadata: {
+      author: undefined,
+      title: "World hunger has been defeated",
+      publishedAt: "2018-11-29T16:01:51.897Z",
+    },
+  },
+]);
+
+export const storyConnection = createFixture<GQLStoriesConnection>({
+  edges: [
+    { node: stories[0], cursor: stories[0].createdAt },
+    { node: stories[1], cursor: stories[1].createdAt },
+  ],
+  pageInfo: { endCursor: null, hasNextPage: false },
+});
+
+export const emptyStories = createFixture<GQLStoriesConnection>({
+  edges: [],
+  pageInfo: { endCursor: null, hasNextPage: false },
+});
+
 export const baseComment = createFixture<GQLComment>({
   author: users.commenters[0],
   body: "Comment Body",
@@ -372,6 +424,7 @@ export const baseComment = createFixture<GQLComment>({
       },
     },
   },
+  story: stories[0],
 });
 
 export const reportedComments = createFixtures<GQLComment>(
@@ -473,55 +526,3 @@ export const emptyCommunityUsers = createFixture<GQLUsersConnection>({
   edges: [],
   pageInfo: { endCursor: null, hasNextPage: false },
 });
-
-export const stories = createFixtures<GQLStory>([
-  {
-    id: "story-1",
-    closedAt: null,
-    isClosed: false,
-    status: GQLSTORY_STATUS.OPEN,
-    createdAt: "2018-11-29T16:01:51.897Z",
-    metadata: {
-      author: "Vin Hoa",
-      title: "Finally a Cure for Cancer",
-      publishedAt: "2018-11-29T16:01:51.897Z",
-    },
-  },
-  {
-    id: "story-2",
-    closedAt: null,
-    isClosed: false,
-    status: GQLSTORY_STATUS.OPEN,
-    createdAt: "2018-11-29T16:01:51.897Z",
-    metadata: {
-      author: "Linh Nguyen",
-      title: "First Colony on Mars",
-      publishedAt: "2018-11-29T16:01:51.897Z",
-    },
-  },
-  {
-    id: "story-3",
-    closedAt: "2018-11-29T16:01:51.897Z",
-    createdAt: "2018-11-29T16:01:51.897Z",
-    isClosed: true,
-    status: GQLSTORY_STATUS.CLOSED,
-    metadata: {
-      author: undefined,
-      title: "World hunger has been defeated",
-      publishedAt: "2018-11-29T16:01:51.897Z",
-    },
-  },
-]);
-
-export const storyConnection = createFixture<GQLStoriesConnection>({
-  edges: [
-    { node: stories[0], cursor: stories[0].createdAt },
-    { node: stories[1], cursor: stories[1].createdAt },
-  ],
-  pageInfo: { endCursor: null, hasNextPage: false },
-});
-
-export const emptyStories = createFixture<GQLStoriesConnection>({
-  edges: [],
-  pageInfo: { endCursor: null, hasNextPage: false },
-});

src/core/client/admin/test/moderate/moderate.spec.tsx

@@ -1,3 +1,6 @@
+import { noop } from "lodash";
+import { ReactTestRenderer } from "react-test-renderer";
+
 import { pureMerge } from "talk-common/utils";
 import {
   GQLCOMMENT_STATUS,
@@ -21,8 +24,6 @@ import {
   within,
 } from "talk-framework/testHelpers";
 
-import { noop } from "lodash";
-import { ReactTestRenderer } from "react-test-renderer";
 import create from "../create";
 import {
   emptyModerationQueues,
@@ -270,6 +271,12 @@ describe("tab bar", () => {
     await waitForElement(() => getByTestID("moderate-container"));
     expect(toJSON(getByTestID("moderate-tabBar-container"))).toMatchSnapshot();
   });
+  it("should not show moderate story link in comment cards", async () => {
+    const { testRenderer } = await createTestRenderer();
+    const { getByTestID } = within(testRenderer.root);
+    await waitForElement(() => getByTestID("moderate-container"));
+    expect(within(testRenderer.root).queryByText("Moderate Story")).toBeNull();
+  });
 });
 
 describe("moderating specific story", () => {
@@ -365,6 +372,91 @@ describe("reported queue", () => {
     expect(toJSON(getByTestID("moderate-main-container"))).toMatchSnapshot();
   });
 
+  it("renders reported queue with comments", async () => {
+    const { testRenderer } = await createTestRenderer({
+      resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          moderationQueues: () =>
+            pureMerge(emptyModerationQueues, {
+              reported: {
+                count: 2,
+                comments: createQueryResolverStub<
+                  ModerationQueueToCommentsResolver
+                >(({ variables }) => {
+                  expectAndFail(variables).toEqual({ first: 5 });
+                  return {
+                    edges: [
+                      {
+                        node: reportedComments[0],
+                        cursor: reportedComments[0].createdAt,
+                      },
+                      {
+                        node: reportedComments[1],
+                        cursor: reportedComments[1].createdAt,
+                      },
+                    ],
+                    pageInfo: {
+                      endCursor: reportedComments[1].createdAt,
+                      hasNextPage: false,
+                    },
+                  };
+                }) as any,
+              },
+            }),
+        },
+      }),
+    });
+    const { getByTestID } = within(testRenderer.root);
+    await waitForElement(() => getByTestID("moderate-container"));
+    expect(toJSON(getByTestID("moderate-main-container"))).toMatchSnapshot();
+  });
+  it("shows a moderate story", async () => {
+    const {
+      testRenderer,
+      context: { transitionControl },
+    } = await createTestRenderer({
+      resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          moderationQueues: () =>
+            pureMerge(emptyModerationQueues, {
+              reported: {
+                count: 2,
+                comments: createQueryResolverStub<
+                  ModerationQueueToCommentsResolver
+                >(({ variables }) => {
+                  expectAndFail(variables).toEqual({ first: 5 });
+                  return {
+                    edges: [
+                      {
+                        node: reportedComments[0],
+                        cursor: reportedComments[0].createdAt,
+                      },
+                      {
+                        node: reportedComments[1],
+                        cursor: reportedComments[1].createdAt,
+                      },
+                    ],
+                    pageInfo: {
+                      endCursor: reportedComments[1].createdAt,
+                      hasNextPage: false,
+                    },
+                  };
+                }) as any,
+              },
+            }),
+        },
+      }),
+    });
+    const moderateStory = await waitForElement(
+      () => within(testRenderer.root).getAllByText("Moderate Story")[0]
+    );
+    transitionControl.allowTransition = false;
+    moderateStory.props.onClick({});
+    // Expect a routing request was made to the right url.
+    expect(transitionControl.history[0].pathname).toBe(
+      `/admin/moderate/${reportedComments[0].story.id}`
+    );
+  });
   it("renders reported queue with comments and load more", async () => {
     const moderationQueuesStub = pureMerge(emptyModerationQueues, {
       reported: {
@@ -656,6 +748,50 @@ describe("rejected queue", () => {
     expect(toJSON(getByTestID("moderate-main-container"))).toMatchSnapshot();
   });
 
+  it("shows a moderate story", async () => {
+    const {
+      testRenderer,
+      context: { transitionControl },
+    } = await createTestRenderer({
+      resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          comments: ({ variables }) => {
+            expectAndFail(variables).toEqual({
+              first: 5,
+              status: "REJECTED",
+              storyID: null,
+            });
+            return {
+              edges: [
+                {
+                  node: rejectedComments[0],
+                  cursor: rejectedComments[0].createdAt,
+                },
+                {
+                  node: rejectedComments[1],
+                  cursor: rejectedComments[1].createdAt,
+                },
+              ],
+              pageInfo: {
+                endCursor: rejectedComments[1].createdAt,
+                hasNextPage: false,
+              },
+            };
+          },
+        },
+      }),
+    });
+    const moderateStory = await waitForElement(
+      () => within(testRenderer.root).getAllByText("Moderate Story")[0]
+    );
+    transitionControl.allowTransition = false;
+    moderateStory.props.onClick({});
+    // Expect a routing request was made to the right url.
+    expect(transitionControl.history[0].pathname).toBe(
+      `/admin/moderate/${reportedComments[0].story.id}`
+    );
+  });
+
   it("renders rejected queue with comments and load more", async () => {
     const { testRenderer } = await createTestRenderer({
       resolvers: createResolversStub<GQLResolver>({

src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.css

@@ -1,4 +1,4 @@
 .container {
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
   min-height: 30px;
 }

src/core/client/admin/views/decisionHistory/components/DecisionItem.css

@@ -1,6 +1,6 @@
 .root {
-  padding: calc(0.5 * var(--spacing-unit)) calc(0.5 * var(--spacing-unit))
-    calc(0.5 * var(--spacing-unit)) 0;
+  padding: calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit))
+    calc(0.5 * var(--mini-unit)) 0;
 }
 
 .leftCol {
@@ -8,6 +8,6 @@
   justify-content: center;
   flex-grow: 0;
   flex-shrink: 0;
-  width: calc(3 * var(--spacing-unit));
+  width: calc(3 * var(--mini-unit));
   padding-top: 3px;
 }

src/core/client/admin/views/decisionHistory/components/DotDivider.css

@@ -3,5 +3,5 @@
   font-size: calc(12rem / var(--rem-base));
   line-height: calc(12em / 12);
   color: var(--palette-divider);
-  padding: 0 calc(0.5 * var(--spacing-unit));
+  padding: 0 calc(0.5 * var(--mini-unit));
 }

src/core/client/admin/views/decisionHistory/components/Empty.css

@@ -1,3 +1,3 @@
 .root {
-  padding: calc(1.5 * var(--spacing-unit)) calc(2 * var(--spacing-unit));
+  padding: calc(1.5 * var(--mini-unit)) calc(2 * var(--mini-unit));
 }

src/core/client/admin/views/decisionHistory/components/Main.css

@@ -1,5 +1,5 @@
 .root {
-  max-height: calc(26 * var(--spacing-unit));
+  max-height: calc(26 * var(--mini-unit));
   overflow: hidden;
   overflow-y: scroll;
 }

src/core/client/admin/views/decisionHistory/components/ShowMoreButton.css

@@ -3,7 +3,7 @@
   font-size: calc(12rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-sans-serif);
-  line-height: calc(2 * var(--spacing-unit));
+  line-height: calc(2 * var(--mini-unit));
   letter-spacing: calc(0.2em / 12);
   color: var(--palette-grey-main);
   width: 100%;

src/core/client/admin/views/decisionHistory/components/Title.css

@@ -1,5 +1,5 @@
 .root {
-  padding: 0 calc(0.5 * var(--spacing-unit));
+  padding: 0 calc(0.5 * var(--mini-unit));
   background-color: #f2f2f2;
   color: var(--palette-text-primary);
   border-bottom: 1px solid var(--palette-grey-lighter);

src/core/client/auth/components/Header/Bar.css

@@ -1,4 +1,4 @@
 .root {
-  min-height: calc(var(--spacing-unit) * 8);
+  min-height: calc(var(--mini-unit) * 8);
   background-color: var(--palette-text-primary);
 }

src/core/client/auth/components/Header/SubBar.css

@@ -1,4 +1,4 @@
 .root {
-  min-height: calc(var(--spacing-unit) * 4);
+  min-height: calc(var(--mini-unit) * 4);
   border-bottom: 1px solid var(--palette-divider);
 }

src/core/client/auth/components/HorizontalSeparator.css

@@ -12,5 +12,5 @@
   composes: heading3 from "talk-ui/shared/typography.css";
   position: relative;
   background-color: var(--palette-common-white);
-  padding: 0 var(--spacing-unit);
+  padding: 0 var(--mini-unit);
 }

src/core/client/auth/components/Main.css

@@ -1,5 +1,5 @@
 .root {
   width: 100%;
-  padding: calc(2.5 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit));
+  padding: calc(2.5 * var(--mini-unit)) calc(1.5 * var(--mini-unit));
   box-sizing: border-box;
 }

src/core/client/auth/views/addEmailAddress/components/UnorderedList/UnorderedList.css

@@ -3,7 +3,7 @@
   padding: 0;
 
   & > * {
-    margin: 0 0 calc(1 * var(--spacing-unit)) 0 !important;
+    margin: 0 0 calc(1 * var(--mini-unit)) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;

src/core/client/framework/components/DurationField.css

@@ -1,8 +1,8 @@
 .value {
-  width: calc(6 * var(--spacing-unit));
+  width: calc(6 * var(--mini-unit));
 }
 
 .unit {
   height: 100%;
-  min-width: calc(17 * var(--spacing-unit));
+  min-width: calc(17 * var(--mini-unit));
 }

src/core/client/framework/components/Markdown.css

@@ -27,9 +27,9 @@
   }
   blockquote {
     background-color: rgba(255, 255, 255, 0.66);
-    padding: var(--spacing-unit);
-    margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit))
-      var(--spacing-unit);
+    padding: var(--mini-unit);
+    margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
+      var(--mini-unit);
     border-radius: var(--round-corners);
     &::after {
       content: none;

src/core/client/framework/components/loadables/MarkdownEditor/MarkdownEditor.css

@@ -30,9 +30,9 @@ $fullscreenZIndex: 10;
   }
   blockquote {
     background-color: rgba(0, 0, 0, 0.075);
-    padding: var(--spacing-unit);
-    margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit))
-      var(--spacing-unit);
+    padding: var(--mini-unit);
+    margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
+      var(--mini-unit);
     border-radius: var(--round-corners);
     &::after {
       content: none;

src/core/client/install/components/App.css

@@ -18,8 +18,8 @@
 }
 
 .container {
-  padding: var(--spacing-unit) var(--spacing-unit) calc(2 * var(--spacing-unit))
-    var(--spacing-unit);
+  padding: var(--mini-unit) var(--mini-unit) calc(2 * var(--mini-unit))
+    var(--mini-unit);
   max-width: 1080px;
   margin: 0 auto;
 }

src/core/client/install/components/Header.css

@@ -1,5 +1,5 @@
 .root {
-  padding: calc(4 * var(--spacing-unit)) 0;
+  padding: calc(4 * var(--mini-unit)) 0;
 }
 
 .headline {

src/core/client/install/components/MainBar.css

@@ -1,7 +1,7 @@
 .root {
   width: 100%;
   border-bottom: 2px solid var(--palette-grey-main);
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
   box-sizing: border-box;
   background: var(--palette-text-primary);
   background: linear-gradient(

src/core/client/install/components/Wizard.css

@@ -9,5 +9,5 @@
 }
 
 .stepBar {
-  padding: var(--spacing-unit) 0 calc(6 * var(--spacing-unit));
+  padding: var(--mini-unit) 0 calc(6 * var(--mini-unit));
 }

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

@@ -16,5 +16,5 @@
 }
 
 .tabContent {
-  padding-top: var(--spacing-unit);
+  padding-top: var(--mini-unit);
 }

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

@@ -3,7 +3,7 @@
   position: relative;
   justify-content: flex-start;
   align-items: center;
-  padding: calc(0.5 * var(--spacing-unit) + 1px) var(--spacing-unit);
+  padding: calc(0.5 * var(--mini-unit) + 1px) var(--mini-unit);
   box-sizing: border-box;
   width: 100%;
   background-color: var(--palette-text-primary);

src/core/client/stream/components/MessageBox/MessageBoxIcon.css

@@ -4,6 +4,6 @@
   flex-shrink: 0;
   color: var(--palette-text-light);
   &:first-child {
-    margin-right: calc(0.5 * var(--spacing-unit));
+    margin-right: calc(0.5 * var(--mini-unit));
   }
 }

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

@@ -1,3 +1,3 @@
 .joinText {
-  margin-right: var(--spacing-unit);
+  margin-right: var(--mini-unit);
 }

src/core/client/stream/shared/htmlContent.css

@@ -12,9 +12,9 @@
   }
   blockquote {
     background-color: var(--palette-grey-lightest);
-    padding: var(--spacing-unit);
-    margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit))
-      var(--spacing-unit);
+    padding: var(--mini-unit);
+    margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
+      var(--mini-unit);
     border-radius: var(--round-corners);
     &::after {
       content: none;

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

@@ -2,11 +2,11 @@
 }
 .highlight {
   background-color: var(--palette-primary-lightest);
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
 }
 .subBar {
-  margin-bottom: calc(0.5 * var(--spacing-unit));
+  margin-bottom: calc(0.5 * var(--mini-unit));
 }
 .footer:not(:empty) {
-  margin-top: var(--spacing-unit);
+  margin-top: var(--mini-unit);
 }

src/core/client/stream/tabs/comments/components/Divider.css

@@ -1,5 +1,5 @@
 .root {
   border: 0;
   border-top: 1px solid var(--palette-divider);
-  margin: var(--spacing-unit) 0;
+  margin: var(--mini-unit) 0;
 }

src/core/client/stream/tabs/comments/components/Indent.css

@@ -2,37 +2,37 @@
 }
 
 .level1 {
-  padding-left: var(--spacing-unit);
+  padding-left: var(--mini-unit);
   border-left: 3px solid var(--palette-grey-darkest);
 }
 
 .level2 {
-  padding-left: var(--spacing-unit);
-  margin-left: var(--spacing-unit);
+  padding-left: var(--mini-unit);
+  margin-left: var(--mini-unit);
   border-left: 3px solid var(--palette-grey-dark);
 }
 
 .level3 {
-  padding-left: var(--spacing-unit);
-  margin-left: calc(2 * var(--spacing-unit));
+  padding-left: var(--mini-unit);
+  margin-left: calc(2 * var(--mini-unit));
   border-left: 3px solid var(--palette-grey-main);
 }
 
 .level4 {
-  padding-left: var(--spacing-unit);
-  margin-left: calc(3 * var(--spacing-unit));
+  padding-left: var(--mini-unit);
+  margin-left: calc(3 * var(--mini-unit));
   border-left: 3px solid var(--palette-grey-light);
 }
 
 .level5 {
-  padding-left: var(--spacing-unit);
-  margin-left: calc(4 * var(--spacing-unit));
+  padding-left: var(--mini-unit);
+  margin-left: calc(4 * var(--mini-unit));
   border-left: 3px solid var(--palette-grey-lighter);
 }
 
 .level6 {
-  padding-left: var(--spacing-unit);
-  margin-left: calc(5 * var(--spacing-unit));
+  padding-left: var(--mini-unit);
+  margin-left: calc(5 * var(--mini-unit));
   border-left: 3px solid var(--palette-grey-lightest);
 }
 

src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css

@@ -1,5 +1,5 @@
 .root {
-  padding: calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
 }
 
 .textField {

src/core/client/stream/tabs/comments/components/PostCommentForm.css

@@ -3,5 +3,5 @@
 }
 
 .poweredBy {
-  margin-top: calc(-0.5 * var(--spacing-unit));
+  margin-top: calc(-0.5 * var(--mini-unit));
 }

src/core/client/stream/tabs/comments/components/PostCommentFormFake.css

@@ -11,7 +11,7 @@
   height: 150px;
   width: 100%;
   box-sizing: border-box;
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
   border-radius: var(--round-corners);
   resize: vertical;
 }

src/core/client/stream/tabs/comments/components/RTE.css

@@ -10,5 +10,5 @@
 
 .placeholder {
   composes: placeholder from "talk-ui/shared/typography.css";
-  margin: var(--spacing-unit) 0 0 calc(1px + var(--spacing-unit));
+  margin: var(--mini-unit) 0 0 calc(1px + var(--mini-unit));
 }

src/core/client/stream/tabs/comments/components/ReplyEditSubmitStatus.css

@@ -1,3 +1,3 @@
 .callout {
-  min-height: calc(10 * var(--spacing-unit));
+  min-height: calc(10 * var(--mini-unit));
 }

src/core/client/stream/tabs/comments/components/ReplyTo.css

@@ -1,5 +1,5 @@
 .root {
-  padding: calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
   color: var(--palette-grey-dark);
   background-color: var(--palette-grey-lightest);
   border: 1px solid var(--palette-grey-main);

src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css

@@ -2,8 +2,8 @@
 }
 
 .loadMore {
-  padding-left: var(--spacing-unit);
-  padding-bottom: var(--spacing-unit);
+  padding-left: var(--mini-unit);
+  padding-bottom: var(--mini-unit);
 }
 
 .showMoreButton {

src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css

@@ -3,7 +3,7 @@
 }
 
 .replyList {
-  padding-left: calc(2 * var(--spacing-unit));
+  padding-left: calc(2 * var(--mini-unit));
 }
 
 .title1 {

src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css

@@ -7,9 +7,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  left: calc(-1 * var(--spacing-unit) - var(--spacing-unit) - 1px);
+  left: calc(-1 * var(--mini-unit) - var(--mini-unit) - 1px);
   background-color: var(--palette-common-white);
-  width: calc(2 * var(--spacing-unit));
+  width: calc(2 * var(--mini-unit));
   height: 23px;
   color: var(--palette-grey-main);
 }
@@ -24,8 +24,8 @@
 }
 
 .circle {
-  width: var(--spacing-unit);
-  height: var(--spacing-unit);
+  width: var(--mini-unit);
+  height: var(--mini-unit);
   fill: currentColor;
   stroke: currentColor;
 }

src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css

@@ -1,7 +1,7 @@
 .root {
   border-left: 2px solid var(--palette-grey-main);
-  padding-left: var(--spacing-unit);
-  margin-left: calc(0.5 * var(--spacing-unit));
+  padding-left: var(--mini-unit);
+  margin-left: calc(0.5 * var(--mini-unit));
 }
 
 .dotted {

src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css

@@ -3,7 +3,7 @@
 }
 
 .title {
-  padding-right: calc(2 * var(--spacing-unit));
+  padding-right: calc(2 * var(--mini-unit));
 }
 
 .list {

src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css

@@ -1,9 +1,9 @@
 .root {
-  padding: calc(1 * var(--spacing-unit));
+  padding: calc(1 * var(--mini-unit));
 }
 
 .close {
   position: absolute;
-  top: calc(0.5 * var(--spacing-unit));
-  right: calc(0.5 * var(--spacing-unit));
+  top: calc(0.5 * var(--mini-unit));
+  right: calc(0.5 * var(--mini-unit));
 }

src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css

@@ -3,7 +3,7 @@
 }
 
 .title {
-  padding-right: calc(2 * var(--spacing-unit));
+  padding-right: calc(2 * var(--mini-unit));
 }
 
 .dismiss {

src/core/client/stream/tabs/configure/components/CloseStream.css

@@ -1,5 +1,5 @@
 .heading {
-  padding-bottom: calc(1.5 * var(--spacing-unit));
+  padding-bottom: calc(1.5 * var(--mini-unit));
 }
 
 .button {

src/core/client/stream/tabs/configure/components/ConfigureStream.css

@@ -1,3 +1,3 @@
 .heading {
-  padding-bottom: calc(2 * var(--spacing-unit));
+  padding-bottom: calc(2 * var(--mini-unit));
 }

src/core/client/stream/tabs/configure/components/HorizontalRule.css

@@ -2,6 +2,6 @@
   border: 0;
   border-bottom: 1px solid var(--palette-divider);
   padding-top: 1px;
-  margin-top: calc(3 * var(--spacing-unit));
-  margin-bottom: calc(2 * var(--spacing-unit));
+  margin-top: calc(3 * var(--mini-unit));
+  margin-bottom: calc(2 * var(--mini-unit));
 }

src/core/client/stream/tabs/configure/components/OpenStream.css

@@ -1,5 +1,5 @@
 .heading {
-  padding-bottom: calc(1.5 * var(--spacing-unit));
+  padding-bottom: calc(1.5 * var(--mini-unit));
 }
 
 .button {

src/core/client/stream/tabs/profile/components/HistoryComment.css

@@ -1,8 +1,13 @@
 .icon {
   color: var(--palette-text-secondary);
-  margin-right: calc(0.5 * var(--spacing-unit));
+  margin-right: calc(0.5 * var(--mini-unit));
 }
 
 .replies {
   composes: button from "talk-ui/shared/typography.css";
 }
+
+.viewConversation {
+  composes: button from "talk-ui/shared/typography.css";
+  color: var(--palette-grey-main);
+}

src/core/client/stream/tabs/profile/components/HistoryComment.tsx

@@ -3,10 +3,10 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 import Timestamp from "talk-stream/components/Timestamp";
 import {
-  Button,
   Flex,
   HorizontalGutter,
   Icon,
+  TextLink,
   Typography,
 } from "talk-ui/components";
 
@@ -53,18 +53,16 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
             </Localized>
           </div>
         )}
-        <Button
-          variant="underlined"
-          target="_parent"
-          href={props.conversationURL}
-          onClick={props.onGotoConversation}
-          anchor
-        >
-          <Icon>launch</Icon>
-          <Localized id="profile-historyComment-viewConversation">
-            <span>View Conversation</span>
-          </Localized>
-        </Button>
+        <Localized id="profile-historyComment-viewConversation">
+          <TextLink
+            target="_parent"
+            href={props.conversationURL}
+            onClick={props.onGotoConversation}
+            className={styles.viewConversation}
+          >
+            View Conversation
+          </TextLink>
+        </Localized>
       </Flex>
     </HorizontalGutter>
   );