[next] Moderate (#2118)

* fix: load .env before building / watching * feat: Implement AppBar, Brand, and SubBar * feat: add card ui component * feat: add modqueue components * feat: implement modqueue * feat: add translations * test: add unit tests * feat: single comment view * test: feature / integration tests for modqueue * test: fix remaining tests * feature: support TextMatchOptions * fix: remove body count marker * fix: remove accidently added package * feat: testHelper toJSON * chore: cleanup + comments * chore: better types * test: fix test * chore: refactor decision history test * chore: tiny fix * fix: adjust to recent server changes * fix: marking suspect and banned words * feat: added moderation queue edge to accept/reject comment payloads - Simplified moderationQueue returns - Simplified resolvers * feat: update counts * feat: added id's to moderation queue and settings * fix+test: test count changes, apply fix * chore: adapt to server change, and remove custom mutation handlers * fix: use common utils * fix: purify fix, babel fix * fix: workaround css treeshake issue and upgrade css plugins * fix: fixed snapshot * fix: support empty word lists * feat: separate client config
2026-08-19 12:40:16 +08:00 · 2018-12-18 18:00:39 +00:00
parent 90e67ca479
commit 1fc49f8e50
316 changed files with 11587 additions and 3005 deletions
@@ -5,9 +5,5 @@
  }
 }

-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-unit);
-  box-sizing: border-box;
+.root {
 }
@@ -1,15 +1,28 @@
 import React, { StatelessComponent } from "react";

-import styles from "./App.css";
-import AppBar from "./AppBar";
+import { Logo } from "talk-ui/components";
+import { AppBar, Begin, Divider, End } from "talk-ui/components/AppBar";
+
+import SignOutButtonContainer from "../containers/SignOutButtonContainer";
+import DecisionHistoryButton from "./DecisionHistoryButton";
 import Navigation from "./Navigation";

+import styles from "./App.css";
+
 const App: StatelessComponent = ({ children }) => (
-  <div>
-    <AppBar>
-      <Navigation />
+  <div className={styles.root}>
+    <AppBar gutterBegin gutterEnd>
+      <Begin itemGutter="double">
+        <Logo />
+        <Navigation />
+      </Begin>
+      <End>
+        <DecisionHistoryButton />
+        <Divider />
+        <SignOutButtonContainer id="navigation-signOutButton" />
+      </End>
    </AppBar>
-    <div className={styles.container}>{children}</div>
+    {children}
  </div>
 );

@@ -1,16 +0,0 @@
-.root {
-  background-color: #f5f5f5;
-  border-bottom: 1px solid var(--palette-grey-lighter);
-}
-
-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-unit) 0 calc(2 * var(--spacing-unit));
-  height: calc(6 * var(--spacing-unit));
-  box-sizing: border-box;
-}
-
-.logo {
-  margin-right: calc(2.5 * var(--spacing-unit));
-}
@@ -1,17 +0,0 @@
-import React, { StatelessComponent } from "react";
-
-import { Flex } from "talk-ui/components";
-
-import styles from "./AppBar.css";
-import Logo from "./Logo";
-
-const AppBar: StatelessComponent = ({ children }) => (
-  <div className={styles.root}>
-    <Flex className={styles.container}>
-      <Logo className={styles.logo} />
-      {children}
-    </Flex>
-  </div>
-);
-
-export default AppBar;
@@ -1,12 +0,0 @@
-.base {
-}
-
-.md {
-  height: 35px;
-  width: 36px;
-}
-
-.lg {
-  height: 58px;
-  width: 59px;
-}
@@ -1,15 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-
-import { PropTypesOf } from "talk-framework/types";
-
-import BrandIcon from "./BrandIcon";
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof BrandIcon> = {
-    className: "custom",
-    size: "lg",
-  };
-  const wrapper = shallow(<BrandIcon {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
@@ -1,45 +0,0 @@
-import cn from "classnames";
-import React, { StatelessComponent } from "react";
-
-import styles from "./BrandIcon.css";
-
-interface Props {
-  className?: string;
-  size?: "md" | "lg";
-}
-
-const BrandIcon: StatelessComponent<Props> = props => (
-  <svg
-    className={cn(styles.base, props.className, {
-      [styles.md]: props.size === "md",
-      [styles.lg]: props.size === "lg",
-    })}
-    id="Layer_1"
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 541.77 557.72"
-  >
-    <defs>
-      <clipPath id="clip-path">
-        <rect width="554" height="570" fill="none" />
-      </clipPath>
-      <clipPath id="clip-path-2" transform="translate(-8.12 -8.14)">
-        <path
-          d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
-          fill="none"
-          clipPath="url(#clip-path)"
-          clipRule="evenodd"
-        />
-      </clipPath>
-    </defs>
-    <title>logo mark2018</title>
-    <g clipPath="url(#clip-path-2)">
-      <rect width="541.77" height="557.72" fill="#f7705f" />
-    </g>
-  </svg>
-);
-BrandIcon.defaultProps = {
-  size: "md",
-};
-
-export default BrandIcon;
@@ -1,15 +0,0 @@
-.root {
-  font-weight: var(--font-weight-bold);
-  font-family: var(--font-family-sans-serif);
-  color: var(--palette-brand);
-  margin: 0;
-}
-
-.md {
-  font-size: calc(36rem / var(--rem-base));
-  line-height: calc(38em / 36);
-}
-.lg {
-  font-size: calc(48rem / var(--rem-base));
-  line-height: 1;
-}
@@ -1,16 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-
-import { PropTypesOf } from "talk-framework/types";
-
-import BrandName from "./BrandName";
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof BrandName> = {
-    align: "center",
-    className: "custom",
-    size: "lg",
-  };
-  const wrapper = shallow(<BrandName {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
@@ -1,36 +0,0 @@
-import cn from "classnames";
-import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
-
-import { PropTypesOf } from "talk-framework/types";
-import { Typography } from "talk-ui/components";
-
-import styles from "./BrandName.css";
-
-interface Props {
-  align?: PropTypesOf<typeof Typography>["align"];
-  className?: string;
-  size?: "md" | "lg";
-}
-
-const BrandName: StatelessComponent<Props> = props => (
-  <Localized id="general-brandName">
-    <Typography
-      variant="heading1"
-      align={props.align}
-      className={cn(props.className, styles.root, {
-        [styles.md]: props.size === "md",
-        [styles.lg]: props.size === "lg",
-      })}
-    >
-      Talk
-    </Typography>
-  </Localized>
-);
-
-BrandName.defaultProps = {
-  size: "md",
-  align: "center",
-};
-
-export default BrandName;
@@ -4,6 +4,7 @@ import { oncePerFrame } from "talk-common/utils";
 import { BaseButton, ClickOutside, Icon, Popover } from "talk-ui/components";

 import DecisionHistoryQuery from "../views/decisionHistory/queries/DecisionHistoryQuery";
+
 import styles from "./DecisionHistoryButton.css";

 class DecisionHistoryButton extends React.Component {
@@ -24,17 +25,17 @@ class DecisionHistoryButton extends React.Component {
        placement="bottom-end"
        description="A dialog showing a permalink to the comment"
        classes={{ popover: styles.popover }}
-        body={({ toggleVisibility }) => (
-          <ClickOutside
-            onClickOutside={() =>
-              this.toggleVisibilityOncePerFrame(toggleVisibility)
-            }
-          >
-            <div>
-              <DecisionHistoryQuery />
-            </div>
-          </ClickOutside>
-        )}
+        body={({ toggleVisibility }) => {
+          const hide = () =>
+            this.toggleVisibilityOncePerFrame(toggleVisibility);
+          return (
+            <ClickOutside onClickOutside={hide}>
+              <div>
+                <DecisionHistoryQuery onClosePopover={hide} />
+              </div>
+            </ClickOutside>
+          );
+        }}
      >
        {({ toggleVisibility, forwardRef, visible }) => (
          <BaseButton
@@ -1,6 +0,0 @@
-.root {
-}
-
-.icon {
-  margin-right: var(--spacing-unit);
-}
@@ -1,14 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-
-import { PropTypesOf } from "talk-framework/types";
-
-import Logo from "./Logo";
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof Logo> = {
-    className: "custom",
-  };
-  const wrapper = shallow(<Logo {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
@@ -1,21 +0,0 @@
-import cn from "classnames";
-import React, { StatelessComponent } from "react";
-
-import { Flex } from "talk-ui/components";
-
-import BrandIcon from "./BrandIcon";
-import BrandName from "./BrandName";
-import styles from "./Logo.css";
-
-interface Props {
-  className?: string;
-}
-
-const Logo: StatelessComponent<Props> = props => (
-  <Flex alignItems="center" className={cn(styles.root, props.className)}>
-    <BrandIcon className={styles.icon} />
-    <BrandName />
-  </Flex>
-);
-
-export default Logo;
@@ -0,0 +1,6 @@
+.root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-unit);
+  box-sizing: border-box;
+}
@@ -3,12 +3,12 @@ import React from "react";

 import { PropTypesOf } from "talk-framework/types";

-import AppBar from "./AppBar";
+import MainLayout from "./MainLayout";

 it("renders correctly", () => {
-  const props: PropTypesOf<typeof AppBar> = {
-    children: "child",
+  const props: PropTypesOf<typeof MainLayout> = {
+    children: "content",
  };
-  const wrapper = shallow(<AppBar {...props} />);
+  const wrapper = shallow(<MainLayout {...props} />);
  expect(wrapper).toMatchSnapshot();
 });
@@ -0,0 +1,21 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+
+import styles from "./MainLayout.css";
+
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const MainLayout: StatelessComponent<Props> = ({
+  children,
+  className,
+  ...rest
+}) => (
+  <div {...rest} className={cn(styles.root, className)}>
+    {children}
+  </div>
+);
+
+export default MainLayout;
@@ -1,33 +0,0 @@
-.root {
-  height: 100%;
-  width: 100%;
-}
-
-.link {
-  color: var(--palette-text-secondary);
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-bold);
-  font-size: calc(18rem / var(--rem-base));
-  line-height: calc(20em / 18);
-  letter-spacing: calc(-0.1em / 18);
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 calc(1.5 * var(--spacing-unit));
-  text-transform: uppercase;
-  text-decoration: none;
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.active {
-  background-color: var(--palette-brand);
-  text-decoration: none;
-  color: var(--palette-text-light);
-}
-
-.historyIcon {
-  color: var(--palette-text-secondary);
-  padding: var(--spacing-unit) var(--spacing-unit);
-}
@@ -1,36 +1,28 @@
 import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";

-import { Flex } from "talk-ui/components";
+import { AppBarNavigation } from "talk-ui/components";

-import SignOutButtonContainer from "../containers/SignOutButtonContainer";
-import DecisionHistoryButton from "./DecisionHistoryButton";
-import styles from "./Navigation.css";
-import NavigationDivider from "./NavigationDivider";
 import NavigationLink from "./NavigationLink";

+/* TODO:
+  <Localized id="navigation-community">
+    <NavigationLink to="/admin/community">Community</NavigationLink>
+  </Localized>
+  <Localized id="navigation-stories">
+    <NavigationLink to="/admin/stories">Stories</NavigationLink>
+  </Localized>
+ */
+
 const Navigation: StatelessComponent = () => (
-  <Flex className={styles.root} justifyContent="space-between">
-    <Flex alignItems="center">
-      <Localized id="navigation-moderate">
-        <NavigationLink to="/admin/moderate">Moderate</NavigationLink>
-      </Localized>
-      <Localized id="navigation-community">
-        <NavigationLink to="/admin/community">Community</NavigationLink>
-      </Localized>
-      <Localized id="navigation-stories">
-        <NavigationLink to="/admin/stories">Stories</NavigationLink>
-      </Localized>
-      <Localized id="navigation-configure">
-        <NavigationLink to="/admin/configure">Configure</NavigationLink>
-      </Localized>
-    </Flex>
-    <Flex alignItems="center">
-      <DecisionHistoryButton />
-      <NavigationDivider />
-      <SignOutButtonContainer id="navigation-signOutButton" />
-    </Flex>
-  </Flex>
+  <AppBarNavigation>
+    <Localized id="navigation-moderate">
+      <NavigationLink to="/admin/moderate">Moderate</NavigationLink>
+    </Localized>
+    <Localized id="navigation-configure">
+      <NavigationLink to="/admin/configure">Configure</NavigationLink>
+    </Localized>
+  </AppBarNavigation>
 );

 export default Navigation;
@@ -1,4 +0,0 @@
-.root {
-  height: 75%;
-  border-right: 1px solid var(--palette-divider);
-}
@@ -1,9 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-
-import NavigationDivider from "./NavigationDivider";
-
-it("renders correctly", () => {
-  const wrapper = shallow(<NavigationDivider />);
-  expect(wrapper).toMatchSnapshot();
-});
@@ -1,9 +0,0 @@
-import React, { StatelessComponent } from "react";
-
-import styles from "./NavigationDivider.css";
-
-const NavigationDivider: StatelessComponent<{}> = () => (
-  <div className={styles.root} />
-);
-
-export default NavigationDivider;
@@ -1,23 +0,0 @@
-.root {
-  color: var(--palette-text-secondary);
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(18rem / var(--rem-base));
-  line-height: calc(20em / 18);
-  letter-spacing: calc(-0.1em / 18);
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 calc(1.5 * var(--spacing-unit));
-  text-transform: uppercase;
-  text-decoration: none;
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.active {
-  background-color: var(--palette-brand);
-  text-decoration: none;
-  color: var(--palette-text-light);
-}
@@ -1,7 +1,7 @@
 import { Link, LocationDescriptor } from "found";
 import React, { StatelessComponent } from "react";

-import styles from "./NavigationLink.css";
+import { AppBarNavigationItem } from "talk-ui/components";

 interface Props {
  children: React.ReactNode;
@@ -9,7 +9,7 @@ interface Props {
 }

 const NavigationLink: StatelessComponent<Props> = props => (
-  <Link to={props.to} className={styles.root} activeClassName={styles.active}>
+  <Link to={props.to} Component={AppBarNavigationItem} activePropName="active">
    {props.children}
  </Link>
 );
@@ -1,14 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders correctly 1`] = `
-<div>
-  <AppBar>
-    <Navigation />
-  </AppBar>
-  <div
-    className="App-container"
+<div
+  className="App-root"
+>
+  <withPropsOnChange(AppBar)
+    gutterBegin={true}
+    gutterEnd={true}
  >
-    child
-  </div>
+    <withPropsOnChange(Begin)
+      itemGutter="double"
+    >
+      <withPropsOnChange(Logo) />
+      <Navigation />
+    </withPropsOnChange(Begin)>
+    <withPropsOnChange(End)>
+      <DecisionHistoryButton />
+      <withPropsOnChange(Divider) />
+      <withContext(createMutationContainer(RedirectAppContainer))
+        id="navigation-signOutButton"
+      />
+    </withPropsOnChange(End)>
+  </withPropsOnChange(AppBar)>
+  child
 </div>
 `;
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<div
-  className="AppBar-root"
->
-  <withPropsOnChange(Flex)
-    className="AppBar-container"
-  >
-    <Logo
-      className="AppBar-logo"
-    />
-    child
-  </withPropsOnChange(Flex)>
-</div>
-`;
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<svg
-  className="BrandIcon-base custom BrandIcon-lg"
-  data-name="Layer 1"
-  id="Layer_1"
-  viewBox="0 0 541.77 557.72"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <defs>
-    <clipPath
-      id="clip-path"
-    >
-      <rect
-        fill="none"
-        height="570"
-        width="554"
-      />
-    </clipPath>
-    <clipPath
-      id="clip-path-2"
-      transform="translate(-8.12 -8.14)"
-    >
-      <path
-        clipPath="url(#clip-path)"
-        clipRule="evenodd"
-        d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
-        fill="none"
-      />
-    </clipPath>
-  </defs>
-  <title>
-    logo mark2018
-  </title>
-  <g
-    clipPath="url(#clip-path-2)"
-  >
-    <rect
-      fill="#f7705f"
-      height="557.72"
-      width="541.77"
-    />
-  </g>
-</svg>
-`;
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<Localized
-  id="general-brandName"
->
-  <withPropsOnChange(Typography)
-    align="center"
-    className="custom BrandName-root BrandName-lg"
-    variant="heading1"
-  >
-    Talk
-  </withPropsOnChange(Typography)>
-</Localized>
-`;
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)
-  alignItems="center"
-  className="Logo-root custom"
->
-  <BrandIcon
-    className="Logo-icon"
-    size="md"
-  />
-  <BrandName
-    align="center"
-    size="md"
-  />
-</withPropsOnChange(Flex)>
-`;
@@ -2,6 +2,8 @@

 exports[`renders correctly 1`] = `
 <div
-  className="NavigationDivider-root"
-/>
+  className="MainLayout-root"
+>
+  content
+</div>
 `;
@@ -1,58 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)
-  className="Navigation-root"
-  justifyContent="space-between"
->
-  <withPropsOnChange(Flex)
-    alignItems="center"
+<withPropsOnChange(Navigation)>
+  <Localized
+    id="navigation-moderate"
  >
-    <Localized
-      id="navigation-moderate"
+    <NavigationLink
+      to="/admin/moderate"
    >
-      <NavigationLink
-        to="/admin/moderate"
-      >
-        Moderate
-      </NavigationLink>
-    </Localized>
-    <Localized
-      id="navigation-community"
-    >
-      <NavigationLink
-        to="/admin/community"
-      >
-        Community
-      </NavigationLink>
-    </Localized>
-    <Localized
-      id="navigation-stories"
-    >
-      <NavigationLink
-        to="/admin/stories"
-      >
-        Stories
-      </NavigationLink>
-    </Localized>
-    <Localized
-      id="navigation-configure"
-    >
-      <NavigationLink
-        to="/admin/configure"
-      >
-        Configure
-      </NavigationLink>
-    </Localized>
-  </withPropsOnChange(Flex)>
-  <withPropsOnChange(Flex)
-    alignItems="center"
+      Moderate
+    </NavigationLink>
+  </Localized>
+  <Localized
+    id="navigation-configure"
  >
-    <DecisionHistoryButton />
-    <NavigationDivider />
-    <withContext(createMutationContainer(RedirectAppContainer))
-      id="navigation-signOutButton"
-    />
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+    <NavigationLink
+      to="/admin/configure"
+    >
+      Configure
+    </NavigationLink>
+  </Localized>
+</withPropsOnChange(Navigation)>
 `;
@@ -2,8 +2,8 @@

 exports[`renders correctly 1`] = `
 <Link
-  activeClassName="NavigationLink-active"
-  className="NavigationLink-root"
+  Component={[Function]}
+  activePropName="active"
  to="/moderate"
 >
  link