Consolidate axios request logic into its own service

CORL-1277
Try out axios requests for perspective
2026-09-15 12:42:37 +08:00 · 2020-08-13 12:44:57 -06:00 · 2020-08-12 12:52:18 -06:00 · 2020-08-12 11:52:46 -06:00 · 2020-08-11 22:05:50 +00:00 · 2020-08-11 21:49:32 +00:00
538 changed files with 6515 additions and 4566 deletions
@@ -27,4 +27,3 @@ yarn.lock
 dist
 *.css.d.ts
 __generated__
-README.md.orig
@@ -21,6 +21,7 @@ const typescriptOverrides = {
    "@typescript-eslint/tslint",
    "react",
    "jsx-a11y",
+    "react-hooks",
  ],
  settings: {
    react: {
@@ -175,6 +176,7 @@ module.exports = {
    "eslint:recommended",
    "plugin:jsdoc/recommended",
    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2018,
@@ -20,5 +20,4 @@ yarn.lock
 dist
 *.css.d.ts
 __generated__
-README.md.orig
 persisted-queries.json
@@ -133,6 +133,7 @@ createComment.error
 - <a href="#unfeatureComment">unfeatureComment</a>
 - <a href="#updateNotificationSettings">updateNotificationSettings</a>
 - <a href="#updateStorySettings">updateStorySettings</a>
+- <a href="#updateUserMediaSettings">updateUserMediaSettings</a>
 - <a href="#viewConversation">viewConversation</a>
 - <a href="#viewFullDiscussion">viewFullDiscussion</a>
 - <a href="#viewNewComments">viewNewComments</a>
@@ -587,6 +588,17 @@ createComment.error
      };
  }
  ```
+- <a id="updateUserMediaSettings">**updateUserMediaSettings.success**, **updateUserMediaSettings.error**</a>: 
+  ```ts
+  {
+      unfurlEmbeds?: boolean | null | undefined;
+      success: {};
+      error: {
+          message: string;
+          code?: string | undefined;
+      };
+  }
+  ```
 - <a id="viewConversation">**viewConversation**</a>: This event is emitted when the viewer changes to the single conversation view.
  ```ts
  {
@@ -36,7 +36,6 @@ the old CSS Variables, please upgrade. Currently we have a compatibility layer t
    - <a href="#font-weight-primary">font-weight-primary</a>
    - <a href="#font-weight-secondary">font-weight-secondary</a>
  - <a href="#font-size">font-size</a>
-  - <a href="#line-height">line-height</a>
  - <a href="#shadow">shadow</a>
  - <a href="#spacing">spacing</a>
  - <a href="#mini-unit">mini-unit</a>
@@ -128,7 +127,7 @@ Color palette that is used for grey shades.

 #### palette-error

-Color palette that is used for indicating something negative and is usually red.
+Color palette that is used for indicating something is error red.

 `--palette-error-100: #FCE5D9;  /* Before 6.3.0: --palette-error-lightest */`

@@ -150,7 +149,7 @@ Color palette that is used for indicating something negative and is usually red.

 #### palette-success

-Color palette that is used for indicating something positive and is usually green.
+Color palette that is used for indicating something is success green.

 `--palette-success-100: #D8F9D5;  /* Before 6.3.0: --palette-success-lightest */`

@@ -192,17 +191,17 @@ Different font weights with matching values for the fonts.

 #### font-weight-primary

-`--font-weight-primary-bold: 700;  /* Before 6.3.0: --font-weight-sans-bold */`
+`--font-weight-primary-bold: 700;  /* Before 6.3.0: --font-weight-bold */`

-`--font-weight-primary-semi-bold: 600;  /* Before 6.3.0: --font-weight-sans-medium */`
+`--font-weight-primary-semi-bold: 600;  /* Before 6.3.0: --font-weight-medium */`

-`--font-weight-primary-regular: 300;  /* Before 6.3.0: --font-weight-sans-regular */`
+`--font-weight-primary-regular: 300;  /* Before 6.3.0: --font-weight-light */`

 #### font-weight-secondary

-`--font-weight-secondary-bold: 700;  /* Before 6.3.0: --font-weight-serif-bold */`
+`--font-weight-secondary-bold: 700;  /* Before 6.3.0: --font-weight-bold */`

-`--font-weight-secondary-regular: 300;  /* Before 6.3.0: --font-weight-serif-regular */`
+`--font-weight-secondary-regular: 300;  /* Before 6.3.0: --font-weight-light */`

 ### font-size

@@ -234,28 +233,6 @@ Different font weights with matching values for the fonts.

 `--font-size-icon-xs: 0.75rem;`

-### line-height
-
-`--line-height-comment-body: 1.45rem;`
-
-`--line-height-field-description: 1.3rem;`
-
-`--line-height-1: 0.75rem;`
-
-`--line-height-2: 0.875rem;`
-
-`--line-height-3: 1rem;`
-
-`--line-height-4: 1.125rem;`
-
-`--line-height-5: 1.25rem;`
-
-`--line-height-6: 1.5rem;`
-
-`--line-height-7: 1.75rem;`
-
-`--line-height-8: 2rem;`
-
 ### shadow

 Different shadows that are currently used in Coral.
@@ -1,39 +1,52 @@
-# Coral ![CircleCI](https://img.shields.io/circleci/project/github/coralproject/talk.svg)
+<p align="center">
+  <a href="https://coralproject.net" target="_blank"><img width="250" src="https://docs.coralproject.net/coral/images/coralproject_by_voxmedia.svg" alt="Coral by Vox Media" /></a>
+</p>

-Online comments are broken. Our open-source commenting platform, Coral, rethinks
-how moderation, comment display, and conversation function, creating the
-opportunity for safer, smarter discussions around your work.
-[Read more about Coral here](https://coralproject.net/talk).
+<p align="center">
+  A better commenting experience from <a href="https://product.voxmedia.com/" target="_blank">Vox Media</a>.
+</p>

-Built with <3 by the Coral team, a part of [Vox Media](https://product.voxmedia.com/).
+<p align="center">
+  <a href="https://circleci.com/gh/coralproject/talk" target="_blank"><img src="https://img.shields.io/circleci/build/gh/coralproject/talk?style=flat-square" alt="CircleCI" /></a>
+  <a href="https://hub.docker.com/r/coralproject/talk" target="_blank"><img src="https://img.shields.io/docker/v/coralproject/talk?label=docker%20hub&sort=semver&style=flat-square" alt="Docker Image Version" /></a>
+  <a href="https://hub.docker.com/r/coralproject/talk" target="_blank"><img src="https://img.shields.io/docker/image-size/coralproject/talk?label=docker%20image%20size&sort=semver&style=flat-square" alt="Docker Image Size" /></a>
+  <a href="https://twitter.com/coralproject" target="_blank"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/coralproject?style=flat-square"></a>
+</p>

-Preview Coral easily by running it via a Heroku App:
+## Description

-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk)
+Online comments are broken. Our open-source commenting platform,
+[Coral](https://coralproject.net), rethinks how moderation, comment display, and
+conversation function, creating the opportunity for safer, smarter discussions
+around your work.

-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
-
- [Documentation](#documentation)
- [Pre-Launch Guide](#pre-launch-guide)
- [More Resources](#more-resources)
- [License](#license)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+We offer hosting and support packages for Coral, as well as exclusive,
+customer-only features. [Contact us](https://coralproject.net/pricing/) for more
+information or [sign up for a webinar](https://coralproject.net).

 ## Documentation

-You can get started with Coral using our [Documentation](https://docs.coralproject.net/talk/).
+If you're new to Coral, the [Coral documentation](https://docs.coralproject.net/)
+is a great place to start running and developing with Coral.

-## Pre-Launch Guide
+You’ve installed Coral, and you’re preparing to launch it on your site. The real
+community work starts now, before you go live. You have a unique opportunity
+pre-launch to set your community up for success. Read our
+[Community Guides](https://guides.coralproject.net/start-here/) to learn more.

-You’ve installed Coral on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Community Guides](https://guides.coralproject.net/start-here/) to learn more.
+## Support

-## More Resources
+We can help you set up Coral, migrate your comments from another system,
+integrate your registration platform, pair with your programmers, and help you
+with bespoke installs. To learn more, [contact us](https://coralproject.net/pricing/).

- [Learn more about Coral and sign up for a webinar](https://coralproject.net/)
+## Contributing
+
+Coral is a Apache-2.0 licensed open-source project built with <3 by the Coral
+team, a part of [Vox Media](https://product.voxmedia.com/).
+
+If you are interested in contributing to Coral, check out our [Contributor's Guide](CONTRIBUTING.md).

 ## License

-Coral is released under the [Apache License, v2.0](/LICENSE).
+Coral is [Apache-2.0 licensed](LICENSE).
@@ -1,38 +0,0 @@
-{
-  "name": "Coral",
-  "description": "A better commenting experience from Vox Media.",
-  "env": {
-    "REWRITE_ENV": {
-      "description": "Used to rewrite the environment variables set by Heroku.",
-      "value": "REDIS_URI:REDIS_URL,MONGODB_URI:MONGO_URI"
-    },
-    "SIGNING_SECRET": {
-      "description": "The shared secret to use to sign JSON Web Tokens (JWT) with the selected signing algorithm.",
-      "generator": "secret"
-    },
-    "LOCALE": {
-      "description": "Specify the default locale to use for all requests without a locale specified",
-      "value": "en-US"
-    },
-    "ENABLE_GRAPHIQL": {
-      "description": "When true, this will enable the GraphiQL routes",
-      "value": "false"
-    },
-    "TRUST_PROXY": {
-      "description": "When set to 1, it instructs Coral to trust up to one proxy, this is needed for authentication support",
-      "value": "1"
-    }
-  },
-  "addons": [
-    {
-      "plan": "mongolab:sandbox",
-      "as": "MONGO"
-    },
-    {
-      "plan": "rediscloud:30",
-      "as": "REDIS"
-    }
-  ],
-  "success_url": "/install",
-  "website": "https://github.com/coralproject/talk"
-}
@@ -1,6 +1,6 @@
 {
  "name": "@coralproject/talk",
-  "version": "6.3.0",
+  "version": "6.3.2",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -8237,12 +8237,14 @@
    "@types/d3-path": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
-      "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA=="
+      "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA==",
+      "dev": true
    },
    "@types/d3-shape": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
      "integrity": "sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w==",
+      "dev": true,
      "requires": {
        "@types/d3-path": "*"
      }
@@ -8925,7 +8927,8 @@
    "@types/prop-types": {
      "version": "15.5.8",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
-      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw=="
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==",
+      "dev": true
    },
    "@types/q": {
      "version": "1.5.1",
@@ -8947,6 +8950,7 @@
      "version": "16.9.31",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.31.tgz",
      "integrity": "sha512-NpYJpNMWScFXtx3A2BJMeew2G3+9SEslVWMdxNJ6DLvxIuxWjY1bizK9q5Y1ujhln31vtjmhjOAYDr9Xx3k9FQ==",
+      "dev": true,
      "requires": {
        "@types/prop-types": "*",
        "csstype": "^2.2.0"
@@ -9039,6 +9043,7 @@
      "version": "1.8.11",
      "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.11.tgz",
      "integrity": "sha512-1E1+3uKo7EyNk3LZ6J2cqfayIdQEUt1YOq2Y/9eRSXUzasf100ncF4f0iARnaXnED6DyFgTPRomwtChcwLYvhA==",
+      "dev": true,
      "requires": {
        "@types/d3-shape": "*",
        "@types/react": "*",
@@ -9048,7 +9053,8 @@
    "@types/recharts-scale": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@types/recharts-scale/-/recharts-scale-1.0.0.tgz",
-      "integrity": "sha512-HR/PrCcxYb2YHviTqH7CMdL1TUhUZLTUKzfrkMhxm1HTa5mg/QtP8XMiuSPz6dZ6wecazAOu8aYZ5DqkNlgHHQ=="
+      "integrity": "sha512-HR/PrCcxYb2YHviTqH7CMdL1TUhUZLTUKzfrkMhxm1HTa5mg/QtP8XMiuSPz6dZ6wecazAOu8aYZ5DqkNlgHHQ==",
+      "dev": true
    },
    "@types/recompose": {
      "version": "0.30.7",
@@ -14000,7 +14006,8 @@
    "classnames": {
      "version": "2.2.6",
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
+      "dev": true
    },
    "clean-css": {
      "version": "4.2.1",
@@ -16442,27 +16449,32 @@
    "d3-array": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
+      "dev": true
    },
    "d3-collection": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
-      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
+      "dev": true
    },
    "d3-color": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
-      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
+      "dev": true
    },
    "d3-format": {
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
-      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw==",
+      "dev": true
    },
    "d3-interpolate": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "dev": true,
      "requires": {
        "d3-color": "1"
      }
@@ -16470,12 +16482,14 @@
    "d3-path": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
-      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "dev": true
    },
    "d3-scale": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "dev": true,
      "requires": {
        "d3-array": "^1.2.0",
        "d3-collection": "1",
@@ -16489,6 +16503,7 @@
      "version": "1.3.7",
      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dev": true,
      "requires": {
        "d3-path": "1"
      }
@@ -16496,12 +16511,14 @@
    "d3-time": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
-      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
+      "dev": true
    },
    "d3-time-format": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+      "dev": true,
      "requires": {
        "d3-time": "1"
      }
@@ -16815,7 +16832,8 @@
    "decimal.js-light": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.0.tgz",
-      "integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg=="
+      "integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg==",
+      "dev": true
    },
    "decode-uri-component": {
      "version": "0.2.0",
@@ -18437,6 +18455,7 @@
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dev": true,
      "requires": {
        "@babel/runtime": "^7.1.2"
      }
@@ -20249,9 +20268,9 @@
      }
    },
    "eslint-plugin-react-hooks": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.8.tgz",
+      "integrity": "sha512-6SSb5AiMCPd8FDJrzah+Z4F44P2CdOaK026cXFV+o/xSRzfOiV1FNFeLl2z6xm3yqWOQEZ5OfVgiec90qV2xrQ==",
      "dev": true
    },
    "eslint-scope": {
@@ -24051,6 +24070,12 @@
            }
          }
        },
+        "eslint-plugin-react-hooks": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+          "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
+          "dev": true
+        },
        "event-source-polyfill": {
          "version": "1.0.15",
          "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.15.tgz",
@@ -29508,12 +29533,9 @@
      }
    },
    "graphql-playground-html": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/graphql-playground-html/-/graphql-playground-html-1.6.22.tgz",
-      "integrity": "sha512-pqDJ8N8tI1LFORLZTDC+gByuqiBfbirjgMKprFxRbCmFylnIRj2AyUQUhTPQkm08n8pWj8w5T0wWCVtbE323ag==",
-      "requires": {
-        "xss": "^1.0.6"
-      }
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/graphql-playground-html/-/graphql-playground-html-1.6.13.tgz",
+      "integrity": "sha512-5DNtVeaWrfxrobA2Vp3ypWjAQYGPIXyZ3rdQXy4m4nDJnc4UALPSZRh9y+U4kp8GaoPp1aCgIJerDSRBOT9HnA=="
    },
    "graphql-redis-subscriptions": {
      "version": "2.2.1",
@@ -36110,7 +36132,8 @@
    "js-tokens": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "dev": true
    },
    "js-yaml": {
      "version": "3.13.1",
@@ -37345,9 +37368,9 @@
      }
    },
    "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
    },
    "lodash-es": {
      "version": "4.17.15",
@@ -37379,7 +37402,8 @@
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
    },
    "lodash.deburr": {
      "version": "4.1.0",
@@ -37558,7 +37582,8 @@
    "lodash.throttle": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=",
+      "dev": true
    },
    "lodash.toarray": {
      "version": "4.4.0",
@@ -37785,6 +37810,7 @@
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
      "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
+      "dev": true,
      "requires": {
        "js-tokens": "^3.0.0"
      }
@@ -38054,7 +38080,8 @@
    "math-expression-evaluator": {
      "version": "1.2.22",
      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz",
-      "integrity": "sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ=="
+      "integrity": "sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ==",
+      "dev": true
    },
    "mathjs": {
      "version": "2.7.0",
@@ -44873,6 +44900,7 @@
      "version": "15.6.2",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "dev": true,
      "requires": {
        "loose-envify": "^1.3.1",
        "object-assign": "^4.1.1"
@@ -45090,6 +45118,7 @@
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dev": true,
      "requires": {
        "performance-now": "^2.1.0"
      }
@@ -45916,7 +45945,8 @@
    "react-fast-compare": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "dev": true
    },
    "react-feather": {
      "version": "2.0.3",
@@ -45978,6 +46008,7 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
      "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==",
+      "dev": true,
      "requires": {
        "object-assign": "^4.1.1",
        "prop-types": "^15.5.4",
@@ -46029,7 +46060,8 @@
    "react-lifecycles-compat": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "dev": true
    },
    "react-live": {
      "version": "2.2.2",
@@ -46256,6 +46288,7 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz",
      "integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==",
+      "dev": true,
      "requires": {
        "shallowequal": "^1.0.1"
      }
@@ -46270,6 +46303,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz",
      "integrity": "sha512-eW057HT0lFgCKh8ilr0y2JaH2YbNcuEdFpxyg7Gf/qDKk9hqGMyXryZJ8iMGJEuKH0+wxS0ccSsBBB3W8yCn8w==",
+      "dev": true,
      "requires": {
        "lodash": "~4.17.4",
        "prop-types": "^15.6.0",
@@ -46281,6 +46315,7 @@
          "version": "1.4.0",
          "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
          "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+          "dev": true,
          "requires": {
            "js-tokens": "^3.0.0 || ^4.0.0"
          }
@@ -46289,6 +46324,7 @@
          "version": "2.9.0",
          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "dev": true,
          "requires": {
            "dom-helpers": "^3.4.0",
            "loose-envify": "^1.4.0",
@@ -46465,6 +46501,7 @@
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/recharts/-/recharts-1.8.5.tgz",
      "integrity": "sha512-tM9mprJbXVEBxjM7zHsIy6Cc41oO/pVYqyAsOHLxlJrbNBuLs0PHB3iys2M+RqCF0//k8nJtZF6X6swSkWY3tg==",
+      "dev": true,
      "requires": {
        "classnames": "^2.2.5",
        "core-js": "^2.6.10",
@@ -46482,12 +46519,14 @@
        "core-js": {
          "version": "2.6.11",
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
+          "dev": true
        },
        "react-resize-detector": {
          "version": "2.3.0",
          "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz",
          "integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==",
+          "dev": true,
          "requires": {
            "lodash.debounce": "^4.0.8",
            "lodash.throttle": "^4.1.1",
@@ -46501,6 +46540,7 @@
      "version": "0.4.3",
      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.3.tgz",
      "integrity": "sha512-t8p5sccG9Blm7c1JQK/ak9O8o95WGhNXD7TXg/BW5bYbVlr6eCeRBNpgyigD4p6pSSMehC5nSvBUPj6F68rbFA==",
+      "dev": true,
      "requires": {
        "decimal.js-light": "^2.4.1"
      }
@@ -46559,6 +46599,7 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
      "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
+      "dev": true,
      "requires": {
        "balanced-match": "^0.4.2",
        "math-expression-evaluator": "^1.2.14",
@@ -46568,7 +46609,8 @@
        "balanced-match": {
          "version": "0.4.2",
          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
        }
      }
    },
@@ -46576,6 +46618,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "dev": true,
      "requires": {
        "balanced-match": "^1.0.0"
      }
@@ -47868,7 +47911,8 @@
    "resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
    },
    "resolve": {
      "version": "1.8.1",
@@ -48380,7 +48424,8 @@
    "shallowequal": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
    },
    "shebang-command": {
      "version": "1.2.0",
@@ -1,6 +1,6 @@
 {
  "name": "@coralproject/talk",
-  "version": "6.3.0",
+  "version": "6.3.2",
  "author": "The Coral Project",
  "homepage": "https://coralproject.net/",
  "sideEffects": [
@@ -29,7 +29,7 @@
    "migration:create": "ts-node --transpile-only ./scripts/migration/create.ts",
    "docs:events": "ts-node ./scripts/generateEventDocs.ts ./src/core/client/stream/events.ts ./CLIENT_EVENTS.md",
    "docs:css-variables": "ts-node ./scripts/generateCSSVariablesDocs.ts ./src/core/client/ui/theme/streamVariables.ts ./CSS_VARIABLES.md",
-    "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' README.md CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md",
+    "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md",
    "generate": "npm-run-all generate:css-types generate:schema generate:relay",
    "generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist",
    "generate:css-types": "tcm src/core/client/",
@@ -67,12 +67,12 @@
    "@hapi/joi": "^17.1.1",
    "@metascraper/helpers": "^5.11.6",
    "@rudderstack/rudder-sdk-node": "0.0.2",
-    "@types/recharts": "^1.8.9",
    "abort-controller": "^3.0.0",
    "akismet-api": "^5.0.0",
    "apollo-server-core": "^2.14.4",
    "apollo-server-express": "^2.14.2",
    "archiver": "^3.1.1",
+    "axios": "^0.19.2",
    "basic-auth": "^2.0.1",
    "bcryptjs": "^2.4.3",
    "bull": "^3.13.0",
@@ -100,8 +100,7 @@
    "graphql-config": "^2.2.2",
    "graphql-extensions": "^0.11.0",
    "graphql-fields": "2.0.3",
-    "graphql-import": "^0.7.1",
-    "graphql-playground-html": "^1.6.22",
+    "graphql-playground-html": "1.6.13",
    "graphql-redis-subscriptions": "^2.2.1",
    "graphql-subscriptions": "^1.1.0",
    "graphql-tools": "^4.0.7",
@@ -114,7 +113,7 @@
    "juice": "^6.0.0",
    "jwks-rsa": "^1.7.0",
    "linkifyjs": "^2.1.9",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
    "long-settimeout": "^1.0.1",
    "lru-cache": "^5.1.1",
    "luxon": "^1.22.2",
@@ -138,8 +137,6 @@
    "prom-client": "^12.0.0",
    "proxy-agent": "^3.1.1",
    "querystringify": "^2.1.1",
-    "react-helmet": "^5.2.1",
-    "recharts": "^1.8.5",
    "source-map-support": "^0.5.16",
    "stack-utils": "^2.0.1",
    "striptags": "^3.1.1",
@@ -225,6 +222,7 @@
    "@types/react-responsive": "^8.0.2",
    "@types/react-test-renderer": "^16.9.2",
    "@types/react-transition-group": "^4.2.4",
+    "@types/recharts": "^1.8.9",
    "@types/recompose": "^0.30.7",
    "@types/relay-runtime": "^8.0.7",
    "@types/sane": "^2.0.0",
@@ -279,6 +277,7 @@
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.8",
    "eventemitter2": "^6.3.1",
    "farce": "^0.2.8",
    "final-form": "4.18.6",
@@ -334,6 +333,7 @@
    "react-error-overlay": "^6.0.7",
    "react-final-form": "6.3.0",
    "react-final-form-arrays": "^3.1.1",
+    "react-helmet": "^5.2.1",
    "react-popper": "^1.3.7",
    "react-relay": "^9.0.0",
    "react-relay-network-modern": "^4.6.1",
@@ -341,6 +341,7 @@
    "react-test-renderer": "^16.13.1",
    "react-timeago": "^4.4.0",
    "react-transition-group": "^4.3.0",
+    "recharts": "^1.8.5",
    "recompose": "^0.30.0",
    "regenerator-runtime": "^0.13.5",
    "relay-compiler": "^9.0.0",
@@ -409,6 +410,11 @@
      "Newer versions has problems with radio and checkbox fields.",
      "Update when the following issue is resolved:",
      "https://github.com/final-form/react-final-form/issues/683"
+    ],
+    "graphql-playground-html@1.6.13": [
+      "A template was broken in a release.",
+      "Update when the following issue is resolved:",
+      "https://github.com/prisma-labs/graphql-playground/pull/1238"
    ]
  },
  "husky": {
@@ -429,7 +435,7 @@
    "{src/core/client/ui/theme/sharedVariables.ts,src/core/client/ui/theme/streamVariables.ts,scripts/generateCSSVariablesDocs.ts,CSS_VARIABLES.md}": [
      "npm run docs:css-variables -- --verify"
    ],
-    "{README,CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [
+    "{CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [
      "npm run doctoc"
    ]
  },
@@ -3,7 +3,7 @@
  font-style: normal;
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-7);
+  line-height: 1.17;

  color: var(--palette-text-500);

@@ -3,7 +3,7 @@
  font-style: normal;
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-7);
+  line-height: 1.17;

  color: var(--palette-text-500);

@@ -23,7 +23,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-5);
+  line-height: 1.25;

  color: var(--palette-text-500);

@@ -7,7 +7,7 @@ import { CallOut } from "coral-ui/components/v3";
 const Sorry: FunctionComponent = () => {
  return (
    <CallOut
-      color="negative"
+      color="error"
      icon={<Icon>error</Icon>}
      titleWeight="semiBold"
      title={
@@ -3,7 +3,7 @@
  font-style: normal;
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-7);
+  line-height: 1.17;

  color: var(--palette-text-500);

@@ -15,7 +15,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-5);
+  line-height: 1.25;

  color: var(--palette-text-500);

@@ -27,7 +27,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;

  color: var(--palette-text-500);

@@ -39,7 +39,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;

  color: var(--palette-text-100);

@@ -16,7 +16,7 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
        <div className={styles.title}>Oops Sorry!</div>
      </Localized>
      <CallOut
-        color="negative"
+        color="error"
        titleWeight="semiBold"
        title={
          reason ? (
@@ -16,7 +16,7 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
        <div className={styles.title}>Oops Sorry!</div>
      </Localized>
      <CallOut
-        color="negative"
+        color="error"
        titleWeight="semiBold"
        title={
          reason ? (
@@ -3,7 +3,7 @@
  font-style: normal;
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-7);
+  line-height: 1.17;

  color: var(--palette-text-500);

@@ -15,7 +15,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-5);
+  line-height: 1.25;

  color: var(--palette-text-500);

@@ -27,7 +27,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;

  color: var(--palette-text-500);

@@ -39,7 +39,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;

  color: var(--palette-text-100);

@@ -51,7 +51,7 @@ const UnsubscribeForm: React.FunctionComponent<Props> = ({
                  notifications.
                </div>
              </Localized>
-              {submitError && <CallOut color="negative" title={submitError} />}
+              {submitError && <CallOut color="error" title={submitError} />}
              <Localized id="unsubscribe-submit-unsubscribe">
                <Button
                  type="submit"
@@ -3,7 +3,7 @@
  font-style: normal;
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-7);
+  line-height: 1.17;

  color: var(--palette-text-500);

@@ -15,7 +15,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-5);
+  line-height: 1.25;

  color: var(--palette-text-500);

@@ -27,7 +27,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;

  color: var(--palette-text-500);

@@ -39,7 +39,7 @@
  font-style: normal;
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;

  color: var(--palette-text-100);

@@ -105,9 +105,7 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
                    </FormField>
                  )}
                </Field>
-                {submitError && (
-                  <CallOut color="negative" title={submitError} />
-                )}
+                {submitError && <CallOut color="error" title={submitError} />}
                <Localized id="resetPassword-resetPassword">
                  <Button
                    type="submit"
@@ -16,7 +16,7 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
        <div className={styles.title}>Oops Sorry!</div>
      </Localized>
      <CallOut
-        color="negative"
+        color="error"
        titleWeight="semiBold"
        title={
          reason ? (
@@ -36,6 +36,7 @@ exports[`renders form 1`] = `
            <div>
              <button
                className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeSmall Button-colorPrimary Button-upperCase Button-fullWidth Confirm-submit"
+                data-variant="filled"
                disabled={false}
                onBlur={[Function]}
                onFocus={[Function]}
@@ -78,10 +79,10 @@ exports[`renders missing confirm token 1`] = `
            Oops Sorry!
          </div>
          <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder"
+            className="CallOut-root CallOut-error CallOut-leftBorder"
          >
            <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
            >
              <div
                className="CallOut-content"
@@ -93,6 +93,7 @@ Make sure it is unique and be sure to keep it secure.
                </div>
                <button
                  className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth Reset-submit"
+                  data-variant="filled"
                  disabled={false}
                  onBlur={[Function]}
                  onFocus={[Function]}
@@ -136,10 +137,10 @@ exports[`renders missing reset token 1`] = `
            Oops Sorry!
          </div>
          <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder"
+            className="CallOut-root CallOut-error CallOut-leftBorder"
          >
            <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
            >
              <div
                className="CallOut-content"
@@ -35,6 +35,7 @@ exports[`renders form 1`] = `
              </div>
              <button
                className="BaseButton-root Button-base Button-filled Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth Unsubscribe-submit"
+                data-variant="filled"
                disabled={false}
                onBlur={[Function]}
                onFocus={[Function]}
@@ -77,10 +78,10 @@ exports[`renders missing confirm token 1`] = `
            Oops Sorry!
          </div>
          <div
-            className="CallOut-root CallOut-negative CallOut-leftBorder"
+            className="CallOut-root CallOut-error CallOut-leftBorder"
          >
            <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
            >
              <div
                className="CallOut-content"
@@ -1,7 +1,7 @@
 .root {
  height: 100%;
  font-size: var(--font-size-1);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
  color: var(--palette-text-100);
  padding: 0 var(--spacing-1);
 }
@@ -6,5 +6,5 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;
 }
@@ -1,10 +1,10 @@
 $moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;

 .root {
-  line-height: var(--line-height-3);
  font-weight: var(--font-weight-primary-bold);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-1);
+  line-height: 1.33;
  color: $moderateCardDecisionHistoryLinkTextColor;
  font-style: var(--font-style-underline);
 }
@@ -11,6 +11,6 @@
  color: var(--palette-text-500);
  font-weight: var(--font-weight-primary-semi-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-4);
  font-size: var(--font-size-2);
+  line-height: 1.285;
 }
@@ -5,7 +5,7 @@ $moderateCardDecisionHistoryBorderColor: var(--palette-grey-300);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-primary-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  text-transform: uppercase;
  color: $moderateCardDecisionHistoryLinkTextColor;
  width: 100%;
@@ -5,5 +5,5 @@ $timestampColor: var(--palette-text-100);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-1);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
 }
@@ -4,6 +4,6 @@ $moderateCardDecisionHistoryColor: var(--palette-text-900);
  color: $moderateCardDecisionHistoryColor;
  font-weight: var(--font-weight-secondary-bold);
  font-family: var(--font-family-secondary);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  font-size: var(--font-size-3);
 }
@@ -11,9 +11,7 @@ exports[`renders correctly 1`] = `
      className="DecisionHistoryLoading-container"
      justifyContent="center"
    >
-      <Delay
-        ms={500}
-      >
+      <Delay>
        <withPropsOnChange(Spinner)
          size="sm"
        />
@@ -1,4 +1,5 @@
 import { useRouter } from "found";
+import { setLongTimeout } from "long-settimeout";
 import { ReactNode, useContext } from "react";

 import { NotificationContext } from "./GlobalNotificationContext";
@@ -17,7 +18,7 @@ function useNotification() {
  const setMessage = (message: ReactNode, timeout?: number) => {
    dispatch({ type: "SET_MESSAGE", message });
    if (timeout) {
-      setTimeout(() => {
+      setLongTimeout(() => {
        dispatch({ type: "CLEAR_MESSAGE" });
      }, timeout);
    }
@@ -8,7 +8,7 @@ $comment-link-active: $colors-teal-900;
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-primary-regular);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-comment-body);
+  line-height: 1.45;
  color: $comment-content;
  overflow-wrap: break-word;

@@ -11,14 +11,14 @@ $moderateCardUsernameBackgroundHover: var(--palette-grey-200);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height:  1.14;
 }
 .username {
  color: $moderateCardInReplyToUsernameColor;
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
+  line-height: 1;

  padding: var(--spacing-1);

@@ -4,6 +4,6 @@ $moderateCardUsernameColor: var(--palette-text-900);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-secondary-bold);
  font-family: var(--font-family-secondary);
-  line-height: var(--line-height-3);
+  line-height: 1;
  color: $moderateCardUsernameColor;
 }
@@ -5,7 +5,7 @@ $moderateCardUsernameBackgroundHover: var(--palette-grey-200);
  padding: var(--spacing-1);
  margin-left: calc(-1 * var(--spacing-1));

-  line-height: var(--line-height-3);
+  line-height: 1;

  &:hover {
    background-color: $moderateCardUsernameBackgroundHover;
@@ -3,6 +3,7 @@ import cn from "classnames";
 import React, { FunctionComponent, useCallback, useState } from "react";
 import { graphql } from "react-relay";

+import { MediaContainer } from "coral-admin/components/MediaContainer";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import {
  Button,
@@ -95,6 +96,7 @@ const ConversationModalCommentContainer: FunctionComponent<Props> = ({
                {comment.body}
              </CommentContent>
            )}
+            <MediaContainer comment={comment} />
          </div>
        </HorizontalGutter>
      </Flex>
@@ -104,7 +106,7 @@ const ConversationModalCommentContainer: FunctionComponent<Props> = ({
            <Localized id="conversation-modal-reply-show-replies">
              <Button
                color="mono"
-                variant="outline"
+                variant="outlined"
                onClick={onShowReplies}
                fullWidth
              >
@@ -153,6 +155,7 @@ const enhanced = withFragmentContainer<Props>({
          id
        }
      }
+      ...MediaContainer_comment
    }
  `,
 })(ConversationModalCommentContainer);
@@ -4,7 +4,7 @@ $modal-header-text: var(--palette-text-900);
  font-size: var(--font-size-4);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-5);
+  line-height: 1.11;
  color: $modal-header-text;
  margin: 0;
 }
@@ -39,7 +39,12 @@ const ConversationModalHeaderContainer: FunctionComponent<Props> = ({
            : comment.story.url}
        </h1>
        <Localized id="conversation-modal-header-moderate-link">
-          <Button variant="outline" color="mono" uppercase onClick={onModerate}>
+          <Button
+            variant="outlined"
+            color="mono"
+            uppercase
+            onClick={onModerate}
+          >
            Moderate story
          </Button>
        </Localized>
@@ -62,7 +62,7 @@ const ConversationModalRepliesContainer: FunctionComponent<Props> = ({
      <div className={styles.footer}>
        {!showReplies && comment.replyCount > 0 && (
          <Localized id="conversation-modal-replies-show">
-            <Button variant="outline" fullWidth onClick={onShowReplies}>
+            <Button variant="outlined" fullWidth onClick={onShowReplies}>
              Show replies
            </Button>
          </Localized>
@@ -71,7 +71,7 @@ const ConversationModalRepliesContainer: FunctionComponent<Props> = ({
          comment.replyCount > replies.length &&
          replies.length > 0 && (
            <Localized id="conversation-modal-replies-show-more">
-              <Button variant="outline" fullWidth onClick={loadMore}>
+              <Button variant="outlined" fullWidth onClick={loadMore}>
                Show more replies
              </Button>
            </Localized>
@@ -1,5 +1,5 @@
 import { Localized } from "@fluent/react/compat";
-import React, { FunctionComponent, useMemo } from "react";
+import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

 import { QueryRenderData, QueryRenderer } from "coral-framework/lib/relay";
@@ -60,17 +60,13 @@ const ConversationModalRepliesQuery: FunctionComponent<Props> = ({
          );
        }

-        const replies = useMemo(
-          () => props.comment!.replies.edges.map((edge) => edge.node),
-          [props.comment.replies]
-        );
        return (
          <div>
-            {replies.map((reply) => (
-              <div key={reply.id}>
+            {props.comment.replies.edges.map((reply) => (
+              <div key={reply.node.id}>
                <ConversationModalCommentContainer
-                  key={reply.id}
-                  comment={reply}
+                  key={reply.node.id}
+                  comment={reply.node}
                  settings={props.settings}
                  isHighlighted={false}
                  isReply={true}
@@ -0,0 +1,4 @@
+export { default as MediaContainer } from "./MediaContainer";
+export { default as GiphyMedia } from "./GiphyMedia";
+export { default as TwitterMedia } from "./TwitterMedia";
+export { default as YouTubeMedia } from "./YouTubeMedia";
@@ -4,6 +4,6 @@ $modal-body-text: $colors-mono-500;
  font-size: var(--font-size-3);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  color: $modal-body-text;
 }
@@ -4,7 +4,7 @@ $modal-text: $colors-mono-500;
  font-size: var(--font-size-5);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-title);
+  line-height: 1.2;
  color: $modal-text;
  margin: 0;
 }
@@ -4,6 +4,6 @@ $moderateCardFlagsCategoryColor: var(--palette-text-500);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-primary-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-6);
+  line-height: 1.5;
  color: $moderateCardFlagsCategoryColor;
 }
@@ -6,7 +6,7 @@ $moderateCardReasonTextColor: var(--palette-text-500);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-secondary-bold);
  font-family: var(--font-family-secondary);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  padding-right: calc(0.5 * var(--mini-unit));
 }

@@ -17,11 +17,10 @@ $moderateCardReasonTextColor: var(--palette-text-500);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-primary-regular);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
 }

 .flagger {
-  line-height: var(--line-height-3);
  margin-right: var(--mini-unit);
  padding: var(--spacing-1);
  margin-left: calc(-1 * var(--spacing-1));
@@ -32,6 +32,11 @@ it("renders all markers", () => {
            },
          },
        },
+        metadata: {
+          wordList: {
+            timedOut: false,
+          },
+        },
      },
    },
    settings: {
@@ -71,6 +76,11 @@ it("renders some markers", () => {
            },
          },
        },
+        metadata: {
+          wordList: {
+            timedOut: false,
+          },
+        },
      },
    },
    settings: {
@@ -38,7 +38,17 @@ const markers: Array<(
    null,
  (c) =>
    (c.revision &&
-      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_BANNED_WORD && (
+      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_BANNED_WORD &&
+      c.revision.metadata?.wordList?.timedOut && (
+        <Localized id="moderate-marker-possibleBannedWord" key={keyCounter++}>
+          <Marker color="reported">Possible Banned Word</Marker>
+        </Localized>
+      )) ||
+    null,
+  (c) =>
+    (c.revision &&
+      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_BANNED_WORD &&
+      !c.revision.metadata?.wordList?.timedOut && (
        <Localized id="moderate-marker-bannedWord" key={keyCounter++}>
          <Marker color="reported">Banned Word</Marker>
        </Localized>
@@ -46,7 +56,17 @@ const markers: Array<(
    null,
  (c) =>
    (c.revision &&
-      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SUSPECT_WORD && (
+      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SUSPECT_WORD &&
+      c.revision.metadata?.wordList?.timedOut && (
+        <Localized id="moderate-marker-possibleSuspectWord" key={keyCounter++}>
+          <Marker color="reported">Possible Suspect Word</Marker>
+        </Localized>
+      )) ||
+    null,
+  (c) =>
+    (c.revision &&
+      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SUSPECT_WORD &&
+      !c.revision.metadata?.wordList?.timedOut && (
        <Localized id="moderate-marker-suspectWord" key={keyCounter++}>
          <Marker color="reported">Suspect Word</Marker>
        </Localized>
@@ -193,6 +213,11 @@ const enhanced = withFragmentContainer<MarkersContainerProps>({
            }
          }
        }
+        metadata {
+          wordList {
+            timedOut
+          }
+        }
      }
    }
  `,
@@ -101,7 +101,7 @@ $moderateCardLinkTextColor: $colors-teal-700;
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-primary-semi-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
  color: $moderateCardLinkTextColor;
  text-transform: uppercase;
 }
@@ -115,7 +115,7 @@ $moderateCardLinkTextColor: $colors-teal-700;
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-primary-semi-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
  margin-bottom: var(--spacing-1);
  text-transform: uppercase;
 }
@@ -123,7 +123,7 @@ $moderateCardLinkTextColor: $colors-teal-700;
 .commentOn {
  font-size: var(--font-size-2);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  margin-bottom: var(--spacing-1);
 }

@@ -152,7 +152,7 @@ $moderateCardLinkTextColor: $colors-teal-700;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-1);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
 }

 .edited {
@@ -160,7 +160,7 @@ $moderateCardLinkTextColor: $colors-teal-700;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-1);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
  padding-left: var(--spacing-2);
 }

@@ -174,7 +174,7 @@ $moderateCardLinkTextColor: $colors-teal-700;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-1);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
  padding-left: var(--spacing-2);
 }

@@ -183,5 +183,5 @@ $moderateCardLinkTextColor: $colors-teal-700;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;
 }
@@ -10,6 +10,7 @@ import React, {
  useRef,
 } from "react";

+import { MediaContainer } from "coral-admin/components/MediaContainer";
 import { HOTKEYS } from "coral-admin/constants";
 import { GetPhrasesRegExpOptions } from "coral-admin/helpers";
 import { PropTypesOf } from "coral-framework/types";
@@ -29,7 +30,6 @@ import ApproveButton from "./ApproveButton";
 import CommentAuthorContainer from "./CommentAuthorContainer";
 import FeatureButton from "./FeatureButton";
 import MarkersContainer from "./MarkersContainer";
-import MediaContainer from "./MediaContainer";
 import RejectButton from "./RejectButton";

 import styles from "./ModerateCard.css";
@@ -5,7 +5,7 @@ $moderated-by-username: var(--palette-text-900);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-primary-semi-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 1.33;
  color: $moderated-by;
  text-transform: uppercase;
 }
@@ -14,7 +14,7 @@ $moderated-by-username: var(--palette-text-900);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-secondary-bold);
  font-family: var(--font-family-secondary);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  color: $moderated-by-username;
  text-align: center;
  padding-top: 1px;
@@ -5,7 +5,7 @@ $moderateCardToxicityColor: var(--palette-text-500);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-primary-semi-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-4);
+  line-height: 1.285;
  color: $moderateCardToxicityColor;
 }

@@ -25,6 +25,11 @@ exports[`renders all markers 1`] = `
                },
              },
            },
+            "metadata": Object {
+              "wordList": Object {
+                "timedOut": false,
+              },
+            },
          },
          "status": "PREMOD",
        }
@@ -172,6 +177,11 @@ exports[`renders some markers 1`] = `
                },
              },
            },
+            "metadata": Object {
+              "wordList": Object {
+                "timedOut": false,
+              },
+            },
          },
          "status": "PREMOD",
        }
@@ -9,7 +9,7 @@
 }

 .wrapper {
-  overflow-x: hidden;
+  overflow: hidden;
  /* adjust for button line-height being > 1 */
  margin-top: -2px;
 }
@@ -20,7 +20,7 @@
  width: calc(20 * var(--mini-unit));
  margin-right: calc(var(--spacing-1) / 2);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-min);
+  line-height: 1.2;
  justify-content: space-between;
  background: var(--palette-background-input);
 }
@@ -41,6 +41,6 @@
 }

 .buttonText {
-  overflow-x: hidden;
+  overflow: hidden;
  text-overflow: ellipsis;
 }
@@ -10,7 +10,7 @@ $moderator-note-username: var(--palette-text-900);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  background-color: $moderator-note-bg;
  border-radius: 4px;
  padding: var(--spacing-3);
@@ -25,7 +25,7 @@ $moderator-note-username: var(--palette-text-900);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-1);
  position: relative;
@@ -47,8 +47,8 @@ $moderator-note-username: var(--palette-text-900);
 .username {
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-secondary-bold);
-  line-height: var(--line-height-3);
  font-size: var(--font-size-3);
+  line-height: 1;
  color: $moderator-note-username;
 }

@@ -9,7 +9,7 @@ $recent-history-triggered: var(--palette-error-500);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-3);
  margin: 0;
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  color: $recent-history-title;
 }

@@ -19,7 +19,7 @@ $recent-history-triggered: var(--palette-error-500);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
  margin: 0;
-  line-height: var(--line-height-4);
+  line-height: 1.285;
 }

 .info {
@@ -29,8 +29,7 @@ $recent-history-triggered: var(--palette-error-500);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-3);
-  line-height: var(--line-height-3);
+  line-height: 0.67;
  color: $recent-history-info;
  margin: 0;
 }
@@ -29,7 +29,7 @@ $user-drawer-status-label: var(--palette-text-500);
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-secondary-bold);
  font-size: var(--font-size-6);
-  line-height: var(--line-height-3);
+  line-height: 0.67;
 }

 .userDetail {
@@ -39,7 +39,7 @@ $user-drawer-status-label: var(--palette-text-500);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
+  line-height: 1;
  color: $user-drawer-account-info;
 }

@@ -61,7 +61,7 @@ $user-drawer-status-label: var(--palette-text-500);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  color: $user-drawer-status-label;
  margin-right: var(--spacing-1);
 }
@@ -5,7 +5,7 @@ $user-status-details: var(--palette-text-500);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
  color: $user-status-details;
-  line-height: var(--line-height-4);
+  line-height: 1.285;
  margin: 0 0 var(--spacing-1) 0;
 }

@@ -21,10 +21,6 @@ interface Props {
 }

 const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
-  if (!user.status.ban.active && !user.status.suspension.active) {
-    return null;
-  }
-
  const activeBan = useMemo(() => {
    return user.status.ban.history.find((item) => item.active);
  }, [user]);
@@ -41,6 +37,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
    minute: "2-digit",
  });

+  if (!user.status.ban.active && !user.status.suspension.active) {
+    return null;
+  }
+
  return (
    <div>
      <Popover
@@ -56,7 +56,7 @@ const SiteModeratorModal: FunctionComponent<Props> = ({
  );

  return (
-    <Modal open={open} onClose={onCancel}>
+    <Modal open={open} onClose={onCancel} disableScroll>
      {({ firstFocusableRef, lastFocusableRef }) => (
        <Card className={styles.root}>
          <Flex justifyContent="flex-end">
@@ -4,7 +4,7 @@ $ban-modal-text: var(--palette-text-500);
  font-size: var(--font-size-3);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  color: $ban-modal-text;
 }

@@ -19,7 +19,7 @@ $suspend-modal-text: var(--palette-text-500);
  font-size: var(--font-size-4);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-5);
+  line-height: 1.11;
  color: $suspend-modal-text;
  margin: 0;
 }
@@ -4,7 +4,7 @@ $suspend-modal-text: var(--palette-text-500);
  font-size: var(--font-size-3);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  color: $suspend-modal-text;
 }

@@ -12,7 +12,7 @@ $suspend-modal-text: var(--palette-text-500);
  font-size: var(--font-size-4);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-5);
+  line-height: 1.11;
  color: $suspend-modal-text;
  margin: 0;
 }
@@ -2,7 +2,7 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
 }

 .success {
@@ -100,10 +100,34 @@ const RejectCommentMutation = createMutation(
        proxy.setValue(true, "viewerDidModerate");

        const connections = [
-          getQueueConnection(store, "REPORTED", input.storyID),
-          getQueueConnection(store, "PENDING", input.storyID),
-          getQueueConnection(store, "UNMODERATED", input.storyID),
-          getQueueConnection(store, "APPROVED", input.storyID),
+          getQueueConnection(
+            store,
+            "REPORTED",
+            input.storyID,
+            input.siteID,
+            input.section
+          ),
+          getQueueConnection(
+            store,
+            "PENDING",
+            input.storyID,
+            input.siteID,
+            input.section
+          ),
+          getQueueConnection(
+            store,
+            "UNMODERATED",
+            input.storyID,
+            input.siteID,
+            input.section
+          ),
+          getQueueConnection(
+            store,
+            "APPROVED",
+            input.storyID,
+            input.siteID,
+            input.section
+          ),
        ].filter((c) => c);
        connections.forEach((con) =>
          ConnectionHandler.deleteNode(con!, input.commentID)
@@ -3,7 +3,7 @@
  font-family: var(--font-family-secondary);
  color: var(--palette-text-100);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-4);
+  line-height: 1.285;

  padding-bottom: var(--spacing-3);
 }
@@ -12,7 +12,7 @@
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-secondary-bold);
  font-family: var(--font-family-secondary);
-  line-height: var(--line-height-7);
+  line-height: 1.17;
  color: var(--palette-text-900);

  text-align: center;
@@ -24,7 +24,7 @@
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-primary-regular);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-4);
+  line-height: 1.125;
  color: var(--palette-text-500);

  text-align: center;
@@ -39,7 +39,7 @@
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-primary-semi-bold);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-3);
+  line-height: 0.89;
  color: var(--palette-text-900);

  text-align: center;
@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import { graphql } from "react-relay";

 import { SetRedirectPathMutation } from "coral-admin/mutations";
-import { timeout } from "coral-common/utils";
+import { waitFor } from "coral-common/helpers";
 import {
  MutationProp,
  withFragmentContainer,
@@ -31,7 +31,7 @@ class RestrictedContainer extends Component<Props> {
  private handleSignInAs = async () => {
    await this.props.signOut();
    // Wait for new context to propagate.
-    await timeout();
+    await waitFor();
    void this.props.setRedirectPath({
      path: location.pathname + location.search + location.hash,
    });
@@ -2,6 +2,6 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  text-align: center;
 }
@@ -4,6 +4,6 @@ $invite-form-text: var(--palette-text-500);
  font-size: var(--font-size-3);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  color: $invite-form-text;
 }
@@ -10,7 +10,7 @@ $invite-modal-text: var(--palette-text-500);
  font-size: var(--font-size-5);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-6);
+  line-height: 1.2;
  color: $invite-modal-text;
  margin: 0;
 }
@@ -4,6 +4,6 @@ $role-field-text: var(--palette-text-500);
  font-size: var(--font-size-3);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-field-description);
+  line-height: 1.3;
  color: $role-field-text;
 }
@@ -7,7 +7,7 @@ $success-text: var(--palette-text-500);
  font-size: var(--font-size-5);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-6);
+  line-height: 1.2;
  color: $success-text;
  margin: 0;
 }
@@ -24,8 +24,8 @@
  padding: 0px;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-3);
  font-size: var(--font-size-2);
+  line-height: 1.14;
 }

 .username {
@@ -6,6 +6,6 @@ $configureHeadingForegroundColor: var(--palette-text-000);
  color: $configureHeadingForegroundColor;
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-primary-bold);
-  line-height: var(--line-height-3);
+  line-height: 1;
  font-family: var(--font-family-primary);
 }
@@ -3,5 +3,5 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;
 }
@@ -7,7 +7,7 @@ $sideNavActiveColor: var(--palette-text-500);
  color: $sideNavItemColor;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-4);
-  line-height: var(--line-height-5);
+  line-height: 1.11;
  font-weight: var(--font-weight-primary-regular);
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-2)
@@ -6,5 +6,5 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
 }
@@ -2,7 +2,7 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;

  border-radius: 2px;
  padding-left: var(--spacing-1);
@@ -9,7 +9,7 @@ $announcement-modal-text: var(--palette-text-500);
  font-size: var(--font-size-5);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-6);
+  line-height: 1.2;
  color: $announcement-modal-text;
  margin: 0;
 }
@@ -122,7 +122,7 @@ const AnnouncementForm: FunctionComponent<Props> = ({
                  </HorizontalGutter>
                  <Flex itemGutter justifyContent="flex-end">
                    <Localized id="configure-general-announcements-cancel">
-                      <Button color="mono" variant="outline" onClick={onClose}>
+                      <Button color="mono" variant="outlined" onClick={onClose}>
                        Cancel
                      </Button>
                    </Localized>
@@ -7,5 +7,5 @@
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-primary-regular);
  font-family: var(--font-family-primary);
-  line-height: var(--line-height-4);
+  line-height: 1.125;
 }
@@ -6,5 +6,5 @@
  font-size: var(--font-size-5);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-6);
+  line-height: 1.2;
 }
@@ -5,6 +5,6 @@
 .detailsButton {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-3);
  font-size: var(--font-size-2);
+  line-height: 1.14;
 }
@@ -114,7 +114,7 @@ const CreateSiteForm: FunctionComponent<Props> = ({ onCreate }) => {
              <Flex itemGutter justifyContent="flex-end">
                <Localized id="configure-sites-site-form-cancel">
                  <Button
-                    variant="outline"
+                    variant="outlined"
                    size="large"
                    color="mono"
                    to="/admin/configure/organization"
@@ -17,20 +17,23 @@ interface Props {
 }

 const AddSiteRoute: FunctionComponent<Props> = ({ data }) => {
+  const { setMessage, clearMessage } = useNotification();
+  const onSiteEdit = useCallback(
+    (name: string) => {
+      setMessage(
+        <Localized id="configure-sites-edit-success" $site={name}>
+          <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+            Changes to {name} have been saved
+          </AppNotification>
+        </Localized>
+      );
+    },
+    [setMessage, clearMessage]
+  );
  if (!data || !data.site) {
    return null;
  }
  const { site } = data;
-  const { setMessage, clearMessage } = useNotification();
-  const onSiteEdit = useCallback((name: string) => {
-    setMessage(
-      <Localized id="configure-sites-edit-success" $site={name}>
-        <AppNotification icon="check_circle_outline" onClose={clearMessage}>
-          Changes to {name} have been saved
-        </AppNotification>
-      </Localized>
-    );
-  }, []);
  return (
    <ConfigBox
      title={
@@ -6,5 +6,5 @@
  font-size: var(--font-size-5);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-6);
+  line-height: 1.2;
 }
@@ -5,6 +5,6 @@
 .detailsButton {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-3);
  font-size: var(--font-size-2);
+  line-height: 1.14;
 }
@@ -27,22 +27,17 @@ import DashboardSiteSelector from "./DashboardSiteSelector";

 import styles from "./DashboardContainer.css";

+interface Site {
+  name: string;
+  id: string;
+}
+
 interface Props {
  query: QueryData | null;
  relay: RelayPaginationProp;
-  selectedSiteID?: string;
+  site?: Site | null;
 }
 const DashboardContainer: React.FunctionComponent<Props> = (props) => {
-  const sites = props.query
-    ? props.query.sites.edges.map((edge) => edge.node)
-    : [];
-  const selectedSite = props.selectedSiteID
-    ? sites.find((s) => s.id === props.selectedSiteID)
-    : sites[0];
-
-  if (!selectedSite) {
-    return null;
-  }
  const [lastUpdated, setLastUpdated] = useState<string>(new Date().toString());
  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
  const [, isRefetching] = useRefetch<
@@ -51,6 +46,12 @@ const DashboardContainer: React.FunctionComponent<Props> = (props) => {
  const onRefetch = useCallback(() => {
    setLastUpdated(new Date().toString());
  }, []);
+  if (!props.site) {
+    return null;
+  }
+  const sites = props.query
+    ? props.query.sites.edges.map((edge) => edge.node)
+    : [];
  return (
    <MainLayout className={styles.root}>
      <Popover
@@ -76,7 +77,7 @@ const DashboardContainer: React.FunctionComponent<Props> = (props) => {
        {({ toggleVisibility, ref, visible }) => (
          <BaseButton onClick={toggleVisibility} ref={ref}>
            <Flex>
-              <h2 className={styles.header}>{selectedSite.name}</h2>
+              <h2 className={styles.header}>{props.site && props.site.name}</h2>
              {
                <ButtonIcon className={styles.icon} size="lg">
                  {visible ? "arrow_drop_up" : "arrow_drop_down"}
@@ -93,7 +94,7 @@ const DashboardContainer: React.FunctionComponent<Props> = (props) => {
          Refresh
        </Button>
      </Flex>
-      <Dashboard siteID={selectedSite.id} lastUpdated={lastUpdated} />
+      <Dashboard siteID={props.site.id} lastUpdated={lastUpdated} />
    </MainLayout>
  );
 };
@@ -5,7 +5,7 @@ import { withRouteConfig } from "coral-framework/lib/router";

 import { DashboardRouteQueryResponse } from "coral-admin/__generated__/DashboardRouteQuery.graphql";

-import DashboardSiteSelectorContainer from "./DashboardContainer";
+import DashboardContainer from "./DashboardContainer";

 interface Props {
  data: DashboardRouteQueryResponse | null;
@@ -15,12 +15,29 @@ const DashboardRoute: React.FunctionComponent<Props> = ({ data }) => {
    return null;
  }

-  return <DashboardSiteSelectorContainer query={data} />;
+  return (
+    <DashboardContainer
+      query={data}
+      site={
+        data.firstSite.edges && data.firstSite.edges.length > 0
+          ? data.firstSite.edges[0].node
+          : null
+      }
+    />
+  );
 };

 const enhanced = withRouteConfig<Props>({
  query: graphql`
    query DashboardRouteQuery {
+      firstSite: sites(first: 1) {
+        edges {
+          node {
+            id
+            name
+          }
+        }
+      }
      ...DashboardContainer_query
    }
  `,
@@ -6,7 +6,7 @@ import { withRouteConfig } from "coral-framework/lib/router";

 import { SiteDashboardRouteQueryResponse } from "coral-admin/__generated__/SiteDashboardRouteQuery.graphql";

-import DashboardSiteSelectorContainer from "./DashboardContainer";
+import DashboardContainer from "./DashboardContainer";

 interface RouteParams {
  siteID: string;
@@ -20,12 +20,7 @@ interface Props {
 const SiteDashboardRoute: React.FunctionComponent<Props> = (props) => {
  const { data } = props;
  if (data && data.site) {
-    return (
-      <DashboardSiteSelectorContainer
-        query={data}
-        selectedSiteID={props.match.params.siteID}
-      />
-    );
+    return <DashboardContainer query={data} site={data.site} />;
  }
  return null;
 };
@@ -1,6 +1,6 @@
 .root {
  flex: 1;
-  min-height: 120px;
+  min-height: 105px;
 }

 .icon {
@@ -1,7 +1,7 @@
 .valueBoxValue {
  font-size: var(--font-size-7);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-3);
+  line-height: 0.57;
 }

 .valueBoxName {
@@ -7,7 +7,7 @@
 .valueBoxValue {
  font-size: var(--font-size-7);
  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--line-height-3);
+  line-height: 0.57;
 }

 .valueBoxName {
@@ -11,6 +11,6 @@
  font-family: var(--font-family-primary);
  color: $colors-teal-700;
  font-size: var(--font-size-2);
-  line-height: var(--line-height-3);
+  line-height: 1.14;
  text-decoration: underline;
 }
@@ -19,7 +19,7 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-2);
-  line-height: var(--line-height-4);
+  line-height: 1.285;
  color: var(--palette-text-000);

  margin-bottom: var(--spacing-1);
@@ -31,7 +31,7 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-4);
-  line-height: var(--line-height-5);
+  line-height: 1.11;
  color: var(--palette-text-000);

  text-align: center;
@@ -44,6 +44,6 @@
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-3);
-  line-height: var(--line-height-4);
+  line-height: 1.125;
  color: var(--palette-text-100);
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nick-funk	e2fc4c0038	Consolidate axios request logic into its own service CORL-1277	2020-08-13 12:44:57 -06:00
nick-funk	6e896a189d	Try out axios requests for perspective CORL-1277	2020-08-12 12:52:18 -06:00
nick-funk	0e8449c5cd	Try a promise oriented fetch timeout for perspective If this mitigates issues of failed requests, this means we can switch over to this version of time out based fetch requests. CORL-1277	2020-08-12 11:52:46 -06:00
Nick FunkandWyatt Johnson	d67c3d2907	Mark and allow word list timed out comments (#3097 ) Will mark the comment's metdata as a word list time out if it happens and also tag them with suspect or banned word. Then we show "possible suspect/banned word" markers on the moderate card so moderators can manually review them. CORL-1264 Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-08-11 22:05:50 +00:00
Wyatt Johnson	3398bd12c4	fix: export public flag, fix button (#3098 )	2020-08-11 21:49:32 +00:00
Wyatt Johnsonandkodiakhq[bot]	fc6de50dde	fix: move deps (#3095 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-11 20:28:20 +00:00
Nick Funk	6c32316595	6.3.2 mobile and responsive UI fixes (#3096 ) * Remove vertical padding and line height on badges Allows them to align with the time and user name text elements. * Hide report button text on mobile screens * Allow read more links to wrap text on mobile * Wrap comment tags when on mobile screens * Fix collapse alignment on mobile screens * Update top bar responsive scaling * Use MatchMedia inside ReportButton * Fix justification on comment TopBarRight	2020-08-11 20:13:11 +00:00
bowser2010andkodiakhq[bot]	47abd030ef	Adding new translation (#3093 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-10 21:13:22 +00:00
Nick Funkandkodiakhq[bot]	5ffb53d0eb	Add media to comment data downloads (#3089 ) This will update the admin and user CSV downloads to include a "Media" column that will specify the media type and the URL for the media content. CORL-1188 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-10 20:59:30 +00:00
Nick Funkandkodiakhq[bot]	af842e98ee	Move wordlist check after staff approval check (#3094 ) This allows staff members to comment anything they want, even if it's on the banned word list. CORL-1255 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-10 20:42:47 +00:00
Kim Gardnerandkodiakhq[bot]	281f19d21c	Bump version 6.3.2 (#3092 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-10 20:27:44 +00:00
Nick Funkandkodiakhq[bot]	45cd0e6628	[CORL-1248] Allow users to auto-show media in stream (#3086 ) * Create preliminary media preferences Allows user to select whether they want to automatically show media or not. CORL-1248 * Fix up the copy around media preferences CORL-1248 * Rename EmbedPreferences to UserMediaSettings CORL-1248 * Add error/validation messages to media prefs CORL-1248 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-10 20:12:56 +00:00
Tessa Thornton	adc508c7dc	remove duplicate code and add comment to wrapper component (#3076 ) * remove duplicate code and add comment to wrapper component: * use react hooks recommended settings	2020-08-10 12:30:25 -04:00
Nick Funk	88a77f8712	Show media in the moderate view conversation modal (#3088 )	2020-08-10 09:29:17 -06:00
Tessa Thornton	5d2ab3d061	adjust spacing on configure tab on mobile (#3087 )	2020-08-07 12:02:46 -04:00
Tessa Thorntonandkodiakhq[bot]	df6f666447	make spacing between discussions and headers explicit (#3084 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 19:20:57 +00:00
Vinhandkodiakhq[bot]	e412b27c1e	fix: auto focus on reply (#3083 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 19:03:04 +00:00
Vinhandkodiakhq[bot]	0fe0be832e	fix: use same focus styling (#3078 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 18:48:08 +00:00
Tessa Thorntonandkodiakhq[bot]	288809ee14	add PERMIT argunment to auth directives that should be accessible to suspended or banned users (#3085 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 17:49:49 +00:00
Wyatt Johnsonandkodiakhq[bot]	b97ec638b2	fix: ensure anonymousId or userId is added to the payload (#3075 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 16:35:02 +00:00
Wyatt JohnsonandVinh	2bbfbc7ddd	[CORL-1242] Ensure SSO Access Tokens are not persisted (#3080 ) * fix: ensure access tokens from sso are not persisted * fix: increment storage key field to bust existing usage Co-authored-by: Vinh <vinh@vinh.tech>	2020-08-06 15:20:46 +00:00
Wyatt Johnson Chi Vinh Le kodiakhq[bot]	b029a01bd9	setTimeout Fixes (#3082 ) * fix: fixed types and some unmanaged timeouts * fix: refetch type Co-authored-by: Chi Vinh Le <vinh@vinh.tech> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 14:56:57 +00:00
Wyatt Johnsonandkodiakhq[bot]	6fabeb2755	[CORL-1243] Subscription Errors (#3074 ) * fix: fixed subscription event error * fix: further subscription refinements * fix: review fixes * fix: exhastive deps Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-06 14:42:04 +00:00
Vinhandkodiakhq[bot]	459e11a5fa	fix: correctly cleanup timeout (#3081 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-05 23:32:14 +00:00
Nick Funkandkodiakhq[bot]	ce7d6969dd	Add read more opens new tab feature flag (#3079 ) If the feature flag READ_MORE_NEW_TAB is set, then clicking on "Read more of this conversation" will open a new tab. CORL-1246 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-05 21:10:55 +00:00
Vinhandkodiakhq[bot]	6a8d6b07d6	[CORL-1240] Check existing data before handling subscriptions (#3077 ) * fix: check existing data before handling subscriptions * fix: typo Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-05 20:56:11 +00:00
Wyatt JohnsonandVinh	8ede245a8d	feat: added data-coral-count to count elements (#3055 ) Co-authored-by: Vinh <vinh@vinh.tech>	2020-08-05 19:10:13 +00:00
Nick Funkandkodiakhq[bot]	88eb9555c7	[CORL-1227] Fix scroll-able modal position popping (#3069 ) * Disable scrolling on site moderators modal The site moderator modal already has a scroll bar inside it and its height is less than 480px. We don't need a scrollbar on the modal background since the modal window will always be fully visible on even the smallest screens. This eliminates the bug of the modal sliding away when there are enough sites in the org to cause the background scroll to be activated. CORL-1227 * Stop checkboxes from shoving input element down The checkbox input element that we style away using ::before css was being shoved down the dom non-relative to the checkbox root. Now it's relative to the checkbox root and positioned accordingly. CORL-1227 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-05 15:49:33 +00:00
Nick Funk Wyatt Johnson kodiakhq[bot]	ce53134736	[CORL-794] Create a common date formatter (#3073 ) * Create a common date formatter Updates all uses of Intl.DateTimeFormat(...) with re-usable date time formatter functions. The formatter functions have default formatting options, but these can be overridden. CORL-794 * Include options in useMemo Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> * Make date formatting accept single locale string Makes formatDate and createDateFormatter accept string \| string[] \| undefined for the locales argument. CORL-794 Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-05 15:34:42 +00:00
Tessa Thornton Wyatt Johnson kodiakhq[bot]	0f1dd7d707	add react hooks eslint plugin (#3059 ) * add eslint react hooks * fix code breaking the rules-of-hooks eslint rule * fix spinnerWhileRendering for tests Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-05 14:42:50 +00:00
Wyatt Johnsonandkodiakhq[bot]	9d02391062	[CORL-1239] Swap setTimeout for setLongTimeout (#3071 ) * fix: ensure user editable time use setLongTimeout * fix: fixed wrong type * fix: fixed snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-04 18:24:31 +00:00
Wyatt Johnsonandkodiakhq[bot]	8aac2d33fc	[CORL-1238] Duplicate User Race (#3068 ) * fix: added a single retry to user create * feat: added additional error context Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-04 18:09:55 +00:00
Tessa Thorntonandkodiakhq[bot]	3eddf5f155	[CORL-1233] Mobile display fixes (#3067 ) * mobile display fixes * show button full text at larger breakpoint * update snaps * hardcode in media query for reaction buttons Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-08-04 17:55:30 +00:00
Nick Funk	94ff8ff880	fix: replace outdated `keys` with `signingSecrets` (#3070 ) Looks like this was missed during the migration of `auth.integrations.sso.keys` renamed to `auth.integrations.sso.signingSecrets`. CORL-1159	2020-08-04 11:09:24 -06:00
Nick FunkandWyatt Johnson	7dfc064c9f	Better use flex to align callout contents (#3060 ) CORL-1201 Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-08-03 17:25:47 -06:00
Wyatt Johnson	d602cf873c	fix: support mobile twitter links (#3066 )	2020-08-03 16:51:15 +00:00
Wyatt Johnson	79627af8d6	fix: fixed incorrect connection access (#3064 )	2020-08-03 15:21:09 +00:00
Tessa Thornton Kim Gardner Wyatt Johnson	871d3f80c1	[CORL-1230] corrects logic for editing comments with media attachments (#3063 ) * correctly attach media to edited comments * ensure media can be removed in edits * fix: updates to support repeat post Co-authored-by: Kim Gardner <kgardnr@gmail.com> Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-07-31 18:03:54 +00:00
Wyatt Johnson	f7d01174d7	fix: fixed overflow scrollbar appearing in dropdown (#3062 )	2020-07-31 13:30:08 -04:00
Nick Funk	6966bb8d12	Replace positive/negative naming for success/error (#3058 ) CORL-1200	2020-07-31 15:40:48 +00:00
Tessa Thornton	40ad2ed0cb	remove hook causing crash from conversation modal replies (#3057 )	2020-07-31 14:37:05 +00:00
Vinh nick-funk Wyatt Johnson Tessa Thornton	802f656caa	Stream UI bugfixes (#3041 ) * fix: various ui fixes * fix: tooltip button active color * fix: teal color * fix: RTE borders * fix: snapshots * fix: reduce padding of show more of this conversation button * Fix font weight fallback values * Replace RTE validation messages with v3 CallOuts CORL-1213 * More styling classnames * chore: remove not used style * fix: reaction button primary color * fix snapshots * harmonize data-variant on buttons * [CORL-1215] Install Style Tweaks (#3046) * fix logic around repeat posts with or without media embeds: (#3042) * fix: restore ReportCommentEvent (#3037) Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> * fix: fixed issue with graphiql (#3043) * README.md Update (#3045) * chore: update README.md * fix: removed README from doctoc * fix: replaced emoji codes with emjoi * fix: removed emoji's due to browser rendering issues * fix: fixed bugs with install styles Co-authored-by: Tessa Thornton <tessathornton@gmail.com> Co-authored-by: Vinh <vinh@vinh.tech> * fix: remove lineheight css variables and make them relative * fix: adjust line-heights * fix: update snapshots * More css bindings for client styling Set bindable class on community guidelines Set bindable classname on "Comment on" label * fix: more tweaks * fix: snapshots * fix: lint and tests Co-authored-by: nick-funk <nick.funk@outlook.com> Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> Co-authored-by: Tessa Thornton <tessathornton@gmail.com>	2020-07-31 00:19:59 +02:00
Wyatt Johnson tessalt Chi Vinh Le	dfdea2b9d2	[CORL-1150] Discussions Tab (#3050 ) * feat: Added Site.topStories edge * feat: Added User.ongoingDiscussions edge * connect discussions tab to relay * style discussions tab * add message if no ongoing discussions * style site name in story row * fix: make line-heights relative * add custom class hooks * feat: condition display based on feature flag * add target attribute to story links * fix: expose some featureFlags * fix: fixed sorting * fix: copy fixes Co-authored-by: tessalt <tessathornton@gmail.com> Co-authored-by: Chi Vinh Le <vinh@vinh.tech>	2020-07-30 17:18:59 -04:00
Wyatt Johnson	9a9c92d360	Site Moderator Fixes (#3054 ) * fix: disable banning for site moderators * fix: fixed redirect issue for site moderators	2020-07-30 16:04:28 +00:00
Tessa Thornton Wyatt Johnson Kim Gardner	ceadcc7ae1	fix warning about media key in tests (#3048 ) Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-07-29 23:29:51 +00:00
Kim GardnerandWyatt Johnson	e0db803a21	Bump version 6.3.1 (#3053 ) * Bump version 6.3.1 * chore: bump version in package-lock.json Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-07-29 19:12:05 -04:00
Tessa ThorntonandWyatt Johnson	7a099bbf05	don't save clientMutationId when creating announcement (#3049 ) * don't save clientMutationId when creating announcement * move mutationId filtering from resolver to mutation Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-07-29 21:38:12 +00:00
Wyatt Johnson	51112a11c0	[CORL-1219] Media Type Fixes (#3051 ) * fix: better graphql types * fix: fixed tests * fix: fixed tests	2020-07-29 21:11:53 +00:00
Wyatt Johnson	6e50b28d8b	[CORL-1149] Active Stories (#3040 ) * fix: removed type assertions in place of stricter types * fix: fixed bug with module ordering * feat: support for story activity jsonp route	2020-07-28 16:34:05 +00:00
Tessa Thornton	1f72cdbfb3	ensure preloaded css is actually used (#3047 )	2020-07-28 08:42:39 -04:00
Wyatt Johnson	87aba459d6	README.md Update (#3045 ) * chore: update README.md * fix: removed README from doctoc * fix: replaced emoji codes with emjoi * fix: removed emoji's due to browser rendering issues	2020-07-24 19:06:33 +00:00
Wyatt Johnson	9aa4591655	fix: fixed issue with graphiql (#3043 )	2020-07-24 17:19:08 +00:00
VinhandWyatt Johnson	87d32680f0	fix: restore ReportCommentEvent (#3037 ) Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-07-24 16:48:02 +00:00
Tessa Thornton	25a1dcdf8d	fix logic around repeat posts with or without media embeds: (#3042 )	2020-07-23 15:36:08 -06:00
Tessa ThorntonandWyatt Johnson	e90272aa58	remove debug style from comment stream (#3038 ) Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-07-22 23:32:27 +00:00
Tessa ThorntonandWyatt Johnson	bbbff98270	pass custom stream css url through to html (#3039 ) * pass custom stream css url through to html * rename streamcssURL to customCSSURL * only enable custom css query on stream route * Update src/core/server/app/router/client.ts Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com> * simplify template for client html Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>	2020-07-22 18:57:47 +00:00
Nick Funkandkodiakhq[bot]	fe19ffd7e1	Show nice error message on network time out (#3036 ) Shows "Network error. Please refresh your page and try again." when the retry middleware times out from too many attempts on failed/timed out requests. CORL-1199 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-07-22 00:02:27 +00:00
Nick Funk	7f98f13990	Send staff comments to Slack with all comments enabled (#3035 ) When we set up a Slack channel, you can select to have "All comments" sent to the slack channel. If we do this we want staff comments to come through as well. This wasn't happening before because there is a `staffCreated` flag instead of `created` when a staff member comments. So we change the trigger return type to an array, and when a staff comment appears, return `staffCreated` as well as `created` so the all filter lets it through. I also changed `getBlocks(...)` to `getContent(...)` as it now returns a JSON object with both a `blocks` array and a `text` string field. This fixes the problem where Slack would notifications would say "this content cannot be displayed". Now it will say the text provided. CORL-1172	2020-07-21 18:01:38 +00:00
Nick Funk	1a9bd27236	Implement TODO for rejected message when replying (#3034 ) Implements the proper callout for when a user submits a comment with a banned word when replying to another comment. CORL-1191	2020-07-20 16:44:49 +00:00
dependabot[bot]	536e804d61	chore(deps): bump lodash from 4.17.15 to 4.17.19 (#3033 ) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2020-07-20 14:53:21 +00:00
Tessa Thorntonandkodiakhq[bot]	43d5d56c90	correct dashboard spacing (#3032 ) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-07-17 18:53:48 +00:00
Tessa Thorntonandkodiakhq[bot]	cdcc991255	[CORL-1195] Fix bug with displaying site dashboards (#3031 ) * fix bug where dashboard would not display data for sites beyond first page of results * remove unused param * remove unused file * undo rename * rename selectedSite to site * check that sites.edges.length is greater than 0 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2020-07-17 17:25:19 +00:00
Tessa Thornton	b221baff82	[CORL-1194] correct typo in config (#3030 ) * correct typo in config * update snap	2020-07-17 15:14:52 +00:00