feat: added support for customUserAgent (#2825 )

chore: bump 5.5.0 (#2822 )
Co-authored-by: Kim Gardner <kgardnr@gmail.com>
2026-09-14 11:36:51 +08:00 · 2020-02-05 16:35:57 +00:00 · 2020-02-04 15:10:10 -05:00 · 2020-02-04 19:16:36 +00:00 · 2020-02-04 12:53:27 -05:00 · 2020-02-04 17:04:43 +00:00
1467 changed files with 44598 additions and 25872 deletions
@@ -9,7 +9,7 @@ job_defaults: &job_defaults
  working_directory: ~/coralproject/talk
  resource_class: large
  docker:
-    - image: circleci/node:10
+    - image: circleci/node:12
  environment:
    <<: *job_environment

@@ -102,6 +102,8 @@ let typescriptTypeCheckingOverrides = {
          },
        },
      }],
+      // 28.11.19: (cvle) Disabled because behavior of regexp.exec seems different than str.match?
+      "@typescript-eslint/prefer-regexp-exec": "off",
      "@typescript-eslint/require-await": "off",
      "@typescript-eslint/no-misused-promises": "off",
      "@typescript-eslint/unbound-method": "off", // 10.10.19: (cvle) seems to give false positive.
@@ -1,7 +1,7 @@
 {
    "projects": {
        "tenant": {
-            "schemaPath": "src/core/server/graph/tenant/schema/schema.graphql"
+            "schemaPath": "src/core/server/graph/schema/schema.graphql"
        }
    }
 }
@@ -1,2 +1 @@
-10
-
+12
@@ -12,10 +12,10 @@
  },
  "tslint.enable": false,
  "eslint.validate": [
-		{ "language": "javascript", "autoFix": true },
-		{ "language": "typescript", "autoFix": true },
-		{ "language": "typescriptreact", "autoFix": true }
-	],
+    { "language": "javascript", "autoFix": true },
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "postcss.validate": false,
  "javascript.preferences.importModuleSpecifier": "non-relative",
@@ -44,14 +44,15 @@
    {
      "regex": "^[.]",
      "orderLevel": 50
-    },
+    }
  ],
  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.type": "newLineEachExpressionAfterCountLimitExceptIfOnlyOne",
  "importSorter.importStringConfiguration.trailingComma": "multiLine",
  "importSorter.importStringConfiguration.tabSize": 2,
  "eslint.enable": true,
-  "importSorter.generalConfiguration.exclude": [
-    "d\\.ts$",
-    "__generated__"
-  ],
+  "importSorter.generalConfiguration.exclude": ["d\\.ts$", "__generated__"],
+  "search.exclude": {
+    "package-lock.json": true
+  },
+  "debug.node.autoAttach": "off"
 }
@@ -64,3 +64,8 @@ where the string is used.

 Once a language has enough coverage, it should be added to
 `src/core/common/helpers/i18n/locales.ts`.
+
+The [Perspective API](https://github.com/conversationai/perspectiveapi/blob/master/2-api/methods.md#analyzecomment-request)
+also supports comments in specific languages. When the language is supported in
+Coral and supported by the Perspective API, the language should be added to the
+language map in `src/core/server/services/comments/pipeline/phases/toxic.ts`.
@@ -1,4 +1,4 @@
-FROM node:10-alpine
+FROM node:12-alpine

 # Install build dependancies.
 RUN apk --no-cache add git python
@@ -7,9 +7,6 @@ RUN apk --no-cache add git python
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app

-# Setup the environment for production.
-ENV NODE_ENV production
-
 # Bundle application source.
 COPY . /usr/src/app

@@ -19,15 +16,13 @@ RUN mkdir -p dist/core/common/__generated__ && \
  echo "{\"revision\": \"${REVISION_HASH}\"}" > dist/core/common/__generated__/revision.json

 # Install build static assets and clear caches.
-RUN NODE_ENV=development npm install && \
-  npm run generate && \
+RUN npm ci && \
  npm run build && \
  npm prune --production

 # Setup the environment
-ENV PATH /usr/src/app/bin:$PATH
+ENV NODE_ENV production
 ENV PORT 5000
 EXPOSE 5000
-ENV NODE_ENV production

 CMD ["npm", "run", "start"]
@@ -1,28 +1,20 @@
 /**
 * This is a project wide babel configuration.
 * https://babeljs.io/docs/en/config-files#project-wide-configuration
- *
- * We use this file to apply babel configuration to packages in `node_modules`
 */

-const lodashOptimizations =
+// Note: If Webpack env is set, we are building for the client.
+
+const plugins =
  process.env.WEBPACK === "true" ? ["use-lodash-es", "lodash"] : [];

+const environment =
+  process.env.WEBPACK === "true"
+    ? { targets: "IE 11", modules: false }
+    : { targets: { node: "current" }, modules: "commonjs" };
+
 module.exports = {
  babelrcRoots: ["./src/core/client/*"],
-  env: {
-    production: {
-      plugins: [...lodashOptimizations],
-    },
-    development: {
-      plugins: [...lodashOptimizations],
-    },
-    test: {
-      presets: [
-        ["@babel/env", { targets: { node: "current" } }],
-        "@babel/react",
-      ],
-      plugins: ["dynamic-import-node"],
-    },
-  },
+  plugins,
+  presets: [["@babel/env", environment]],
 };
@@ -7,7 +7,7 @@ module.exports = {
  collectCoverageFrom: ["**/*.{js,jsx,mjs,ts,tsx}"],
  coveragePathIgnorePatterns: ["/node_modules/"],
  setupFiles: [
-    "<rootDir>/src/core/build/polyfills.js",
+    "<rootDir>/src/core/client/test/polyfills.ts",
    "<rootDir>/src/core/client/test/setup.ts",
  ],
  setupFilesAfterEnv: ["<rootDir>/src/core/client/test/setupTestFramework.ts"],
@@ -6,6 +6,7 @@ module.exports = {
  roots: ["<rootDir>/src"],
  collectCoverageFrom: ["**/*.{js,jsx,mjs,ts,tsx}"],
  coveragePathIgnorePatterns: ["/node_modules/"],
+  setupFilesAfterEnv: ["<rootDir>/src/core/server/test/setupTestFramework.ts"],
  testMatch: ["**/*.spec.{js,jsx,mjs,ts,tsx}"],
  testPathIgnorePatterns: ["/node_modules/", "/client/"],
  testEnvironment: "node",
@@ -1,13 +1,11 @@
 // Apply all the configuration provided in the .env file.
 require("dotenv").config();

-const path = require("path");
 const fs = require("fs");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const extensions = [".ts", ".tsx", ".js"];
 // TODO: There is some weird issue with including paths.ts here
 const postCSSConfigPath = "./src/core/build/postcss.config";
-const isProduction = process.NODE_ENV === "production";
 const appDirectory = fs.realpathSync(process.cwd());

 const styleLoader = {
@@ -18,7 +16,7 @@ const styleLoader = {
  },
 };

-export default {
+module.exports = {
  title: "Coral 5.0",
  source: "./src",
  typescript: true,
@@ -60,7 +58,7 @@ export default {
              "@babel/typescript",
              [
                "@babel/env",
-                { targets: { node: "10.0.0" }, modules: "commonjs" },
+                { targets: { node: "current" }, modules: "commonjs" },
              ],
            ],
            // This is a feature of `babel-loader` for webpack (not Babel itself).
@@ -1,6 +1,6 @@
 {
  "name": "@coralproject/talk",
-  "version": "5.3.0",
+  "version": "5.5.0",
  "author": "The Coral Project",
  "homepage": "https://coralproject.net/",
  "sideEffects": [
@@ -11,8 +11,8 @@
    "url": "git://github.com/coralproject/talk.git"
  },
  "engines": {
-    "node": ">=10.0.0",
-    "npm": ">=6.9.0"
+    "node": "^12",
+    "npm": "^6"
  },
  "bugs": "https://github.com/coralproject/talk/issues",
  "contributors": [
@@ -46,9 +46,9 @@
    "lint:server": "eslint 'src/**/*.{js,ts,tsx}' --ignore-pattern 'src/core/client/**'",
    "lint:client": "eslint 'src/core/client/**/*.{js,ts,tsx}'",
    "lint:scripts": "eslint 'scripts/**/*.{js,ts,tsx}'",
-    "lint:graphql": "graphql-schema-linter src/core/server/graph/tenant/schema/schema.graphql",
+    "lint:graphql": "graphql-schema-linter src/core/server/graph/schema/schema.graphql",
    "lint-fix": "npm run lint:server -- --fix && npm run lint:client -- --fix && npm run lint:scripts -- --fix",
-    "test": "node scripts/test.js --env=jsdom",
+    "test": "node --trace-warnings scripts/test.js --env=jsdom",
    "tscheck": "npm-run-all --parallel tscheck:*",
    "tscheck:server": "tsc --project ./src/tsconfig.json --noEmit",
    "tscheck:client": "tsc --project ./src/core/client/tsconfig.json --noEmit",
@@ -58,7 +58,10 @@
  "license": "Apache-2.0",
  "dependencies": {
    "@coralproject/bunyan-prettystream": "^0.1.4",
+    "@fluent/bundle": "^0.14.0",
+    "@fluent/dom": "^0.6.0",
    "@metascraper/helpers": "^5.7.21",
+    "abort-controller": "^3.0.0",
    "akismet-api": "^4.2.0",
    "apollo-server-express": "^2.8.1",
    "archiver": "^3.0.3",
@@ -81,26 +84,27 @@
    "dotenv-expand": "^4.2.0",
    "env-rewrite": "^1.0.2",
    "express": "^4.16.3",
+    "express-enforces-ssl": "^1.1.0",
    "express-static-gzip": "^0.3.2",
-    "fluent": "^0.10.0",
-    "fluent-dom": "^0.4.1",
    "fs-extra": "^6.0.1",
    "graphql": "^0.13.2",
    "graphql-config": "^2.0.1",
    "graphql-extensions": "^0.2.1",
    "graphql-fields": "^1.1.0",
+    "graphql-import": "^0.7.1",
    "graphql-playground-html": "^1.6.0",
    "graphql-redis-subscriptions": "^2.1.0",
    "graphql-subscriptions": "^1.1.0",
    "graphql-tools": "^3.0.5",
+    "helmet": "^3.21.2",
    "html-minifier": "^3.5.21",
    "html-to-text": "^4.0.0",
    "ioredis": "^4.9.0",
    "joi": "^13.4.0",
    "jsdom": "^15.0.0",
-    "jsonwebtoken": "^8.3.0",
+    "jsonwebtoken": "^8.5.1",
    "juice": "^5.2.0",
-    "jwks-rsa": "^1.3.0",
+    "jwks-rsa": "^1.6.0",
    "keymaster": "^1.6.2",
    "linkifyjs": "^2.1.8",
    "lodash": "^4.17.15",
@@ -113,13 +117,13 @@
    "mongodb": "^3.2.7",
    "mongodb-core": "^3.2.7",
    "ms": "^2.1.1",
-    "node-fetch": "^2.2.0",
+    "node-fetch": "^2.6.0",
    "nodemailer": "^4.6.7",
    "nunjucks": "^3.1.3",
    "on-finished": "^2.3.0",
-    "passport": "^0.4.0",
-    "passport-facebook": "^2.1.1",
-    "passport-google-oauth2": "^0.1.6",
+    "passport": "^0.4.1",
+    "passport-facebook": "^3.0.0",
+    "passport-google-oauth2": "^0.2.0",
    "passport-local": "^1.0.0",
    "passport-oauth2": "^1.4.0",
    "passport-strategy": "^1.0.0",
@@ -127,7 +131,7 @@
    "permit": "^0.2.4",
    "prom-client": "^11.3.0",
    "proxy-agent": "^3.1.1",
-    "querystringify": "^2.1.0",
+    "querystringify": "^2.1.1",
    "react-helmet": "^5.2.1",
    "source-map-support": "^0.5.12",
    "stack-utils": "^1.0.2",
@@ -139,15 +143,14 @@
    "verror": "^1.10.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
-    "@babel/polyfill": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
+    "@babel/core": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@babel/runtime-corejs3": "^7.8.3",
    "@coralproject/npm-run-all": "^4.1.5",
-    "@coralproject/rte": "^0.11.0",
+    "@coralproject/rte": "^0.11.1",
+    "@fluent/react": "^0.10.0",
    "@intervolga/optimize-cssnano-plugin": "^1.0.6",
    "@types/agent-base": "^4.2.0",
    "@types/archiver": "^3.0.0",
@@ -174,17 +177,20 @@
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/eventemitter2": "^4.1.0",
    "@types/express": "^4.16.0",
+    "@types/express-enforces-ssl": "^1.1.1",
    "@types/flat": "0.0.28",
    "@types/fs-extra": "^5.0.4",
    "@types/graphql": "^0.13.3",
+    "@types/helmet": "0.0.45",
    "@types/html-minifier": "^3.5.2",
    "@types/html-to-text": "^1.4.31",
    "@types/html-webpack-plugin": "^3.2.0",
    "@types/ioredis": "^4.0.10",
-    "@types/jest": "^24.0.13",
+    "@types/jest": "^24.0.23",
+    "@types/jest-axe": "^3.2.1",
    "@types/joi": "^13.0.8",
    "@types/jsdom": "^12.2.3",
-    "@types/jsonwebtoken": "^7.2.7",
+    "@types/jsonwebtoken": "^8.3.5",
    "@types/linkifyjs": "^2.1.1",
    "@types/lodash": "^4.14.118",
    "@types/lru-cache": "^5.1.0",
@@ -194,33 +200,36 @@
    "@types/mongodb": "^3.1.22",
    "@types/ms": "^0.7.30",
    "@types/node": "^10.5.2",
-    "@types/node-fetch": "^2.3.3",
+    "@types/node-fetch": "^2.5.3",
    "@types/nodemailer": "^4.6.2",
    "@types/nunjucks": "^3.1.1",
    "@types/object-diff": "0.0.0",
    "@types/on-finished": "^2.3.1",
-    "@types/passport": "^0.4.6",
+    "@types/passport": "^1.0.2",
    "@types/passport-facebook": "^2.1.8",
    "@types/passport-local": "^1.0.33",
    "@types/passport-oauth2": "^1.4.5",
    "@types/passport-strategy": "^0.2.33",
    "@types/permit": "^0.2.1",
+    "@types/prettier": "^1.19.0",
    "@types/prop-types": "^15.5.8",
    "@types/react": "^16.8.15",
+    "@types/react-axe": "^3.1.0",
    "@types/react-copy-to-clipboard": "^4.2.6",
    "@types/react-dom": "^16.8.4",
    "@types/react-helmet": "^5.0.10",
-    "@types/react-relay": "^1.3.14",
+    "@types/react-relay": "^5.0.1",
    "@types/react-responsive": "^3.0.1",
    "@types/react-test-renderer": "^16.8.1",
    "@types/react-transition-group": "^2.0.14",
    "@types/recompose": "^0.26.5",
-    "@types/relay-runtime": "^1.3.12",
+    "@types/relay-runtime": "^5.0.5",
    "@types/sane": "^2.0.0",
    "@types/shallow-equals": "^1.0.0",
    "@types/simplemde": "^1.11.7",
    "@types/sinon": "^7.0.11",
    "@types/source-map-support": "^0.5.0",
+    "@types/stack-trace": "0.0.29",
    "@types/stack-utils": "^1.0.1",
    "@types/throng": "^4.0.2",
    "@types/uuid": "^3.4.4",
@@ -238,14 +247,12 @@
    "ansi-styles": "^3.2.0",
    "autoprefixer": "^9.5.1",
    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-plugin-relay": "^4.0.0",
+    "babel-plugin-relay": "^5.0.0",
    "babel-plugin-use-lodash-es": "^0.2.0",
-    "babel-preset-react-optimize": "^1.0.1",
    "bowser": "^1.9.4",
    "case-sensitive-paths-webpack-plugin": "^2.2.0",
    "chalk": "^2.4.2",
@@ -256,8 +263,10 @@
    "common-tags": "^1.8.0",
    "compression-webpack-plugin": "^2.0.0",
    "copy-webpack-plugin": "^5.0.3",
+    "core-js": "^3.6.4",
    "cross-spawn": "^6.0.5",
    "css-loader": "^1.0.1",
+    "css-vars-ponyfill": "^2.1.2",
    "del": "^4.1.1",
    "doctoc": "^1.4.0",
    "docz": "^0.13.7",
@@ -273,14 +282,13 @@
    "eslint-plugin-react": "^7.15.1",
    "eventemitter2": "^5.0.1",
    "farce": "^0.2.6",
-    "final-form": "4.11.0",
+    "final-form": "4.18.6",
+    "final-form-arrays": "1.1.2",
    "flat": "^4.1.0",
    "fluent-intl-polyfill": "^0.1.0",
-    "fluent-langneg": "^0.1.1",
-    "fluent-react": "^0.8.4",
    "fork-ts-checker-webpack-plugin": "^1.5.0",
-    "found": "^0.4.0-alpha.17",
-    "found-relay": "^0.4.0-alpha.8",
+    "found": "^0.4.9",
+    "found-relay": "^0.4.3",
    "graphql-schema-linter": "^0.2.0",
    "graphql-schema-typescript": "^1.2.9",
    "gulp": "^4.0.2",
@@ -288,10 +296,11 @@
    "gulp-cli": "^2.2.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-typescript": "^5.0.1",
-    "html-webpack-plugin": "^4.0.0-beta.5",
+    "html-webpack-plugin": "^4.0.0-beta.11",
    "husky": "^2.2.0",
    "intersection-observer": "^0.6.0",
    "jest": "^24.8.0",
+    "jest-axe": "^3.2.0",
    "jest-junit": "^6.4.0",
    "jest-localstorage-mock": "^2.4.0",
    "jest-mock-console": "^1.0.0",
@@ -303,6 +312,7 @@
    "mini-css-extract-plugin": "^0.6.0",
    "object-diff": "0.0.4",
    "postcss-advanced-variables": "^3.0.0",
+    "postcss-calc-function": "^1.1.0",
    "postcss-css-variables": "^0.11.0",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-font-magician": "^2.2.1",
@@ -315,35 +325,41 @@
    "postcss-preset-env": "^6.5.0",
    "prettier": "^1.18.2",
    "prop-types": "^15.6.2",
+    "proxy-polyfill": "^0.3.0",
    "pstree.remy": "^1.1.6",
    "pym.js": "^1.3.2",
    "raw-loader": "^0.5.1",
-    "react": "^16.9.0-alpha.0",
+    "react": "^16.9.0",
+    "react-axe": "^3.3.0",
    "react-copy-to-clipboard": "^5.0.1",
    "react-dev-utils": "^9.0.0",
-    "react-dom": "^16.9.0-alpha.0",
+    "react-dom": "^16.9.0",
    "react-error-overlay": "^5.1.6",
-    "react-final-form": "4.0.2",
+    "react-final-form": "6.3.0",
+    "react-final-form-arrays": "3.1.0",
    "react-popper": "^1.3.2",
-    "react-relay": "^4.0.0",
+    "react-relay": "^5.0.0",
    "react-relay-network-modern": "^4.0.4",
    "react-responsive": "^7.0.0",
-    "react-test-renderer": "^16.9.0-alpha.0",
+    "react-test-renderer": "^16.9.0",
    "react-timeago": "^4.1.9",
    "react-transition-group": "^2.9.0",
    "react-with-state-props": "^2.0.4",
    "recompose": "0.27.1",
-    "relay-compiler": "^4.0.0",
+    "regenerator-runtime": "^0.13.3",
+    "relay-compiler": "^5.0.0",
    "relay-compiler-language-typescript": "^4.1.0",
    "relay-local-schema": "^0.8.0",
-    "relay-runtime": "^4.0.0",
+    "relay-runtime": "^5.0.0",
    "resize-observer-polyfill": "^1.5.1",
    "sane": "^4.1.0",
+    "scheduler": "^0.15.0",
    "shallow-equals": "^1.0.0",
    "simplemde": "^1.11.2",
    "simulant": "^0.2.2",
    "sinon": "^7.3.2",
    "sockjs-client": "^1.3.0",
+    "stack-trace": "0.0.10",
    "strip-ansi": "^5.2.0",
    "style-loader": "^0.23.1",
    "subscriptions-transport-ws": "^0.9.16",
@@ -359,11 +375,13 @@
    "tslint": "^5.20.0",
    "typed-css-modules": "^0.4.2",
    "typeface-manuale": "^0.0.71",
+    "typeface-nunito": "0.0.72",
+    "typeface-open-sans": "0.0.75",
    "typeface-source-sans-pro": "^0.0.54",
    "typescript": "3.3.4000",
    "typescript-snapshots-plugin": "^1.6.0",
    "wait-for-expect": "^1.1.1",
-    "webpack": "^4.30.0",
+    "webpack": "^4.41.5",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.2",
@@ -379,7 +397,7 @@
    "*.{j,t}s{,x}": [
      "eslint"
    ],
-    "src/core/server/graph/tenant/schema/schema.graphql": [
+    "src/core/server/graph/schema/schema.graphql": [
      "graphql-schema-linter"
    ],
    "{src/core/client/stream/events.ts,scripts/generateEventDocs.ts,events.md}": [
@@ -52,6 +52,9 @@ const args = [
  "--language",
  "typescript",
  "--no-watchman",
+  "--customScalars.Time=String",
+  "--customScalars.Cursor=unknown",
+  "--customScalars.Locale=string",
  "--src",
  program.src,
  "--artifactDirectory",
@@ -74,7 +77,7 @@ if (persist) {
  if (fs.existsSync(persist)) {
    // Create the new filename.
    const name = path.basename(program.src);
-    const generated = "./src/core/server/graph/common/persisted/__generated__";
+    const generated = "./src/core/server/graph/persisted/__generated__";

    // Create the generated directory if it doesn't exist.
    fs.ensureDirSync(generated);
@@ -12,12 +12,12 @@ async function main() {
      name: "tenant",
      fileName: path.join(
        __dirname,
-        "../src/core/server/graph/tenant/schema/__generated__/types.ts"
+        "../src/core/server/graph/schema/__generated__/types.ts"
      ),
      config: {
-        contextType: "TenantContext",
+        contextType: "GraphContext",
        importStatements: [
-          'import TenantContext from "coral-server/graph/tenant/context";',
+          'import GraphContext from "coral-server/graph/context";',
          'import { Cursor } from "coral-server/models/helpers";',
        ],
        customScalarType: { Cursor: "Cursor", Time: "Date" },
@@ -23,9 +23,10 @@ export default class ChokidarWatcher implements Watcher {
    let firstError: Error | null = null;

    // If this is set, a pending promise is waiting for the next result.
-    let pending:
-      | ({ resolve: (result: string) => void; reject: (error: Error) => void })
-      | null = null;
+    let pending: {
+      resolve: (result: string) => void;
+      reject: (error: Error) => void;
+    } | null = null;

    // Only start client if we have something to watch.
    if (paths.length) {
@@ -48,7 +48,7 @@ export default class SaneWatcher implements Watcher {
    const queue: string[] = [];

    // If this is set, a pending promise is waiting for the next result.
-    let pending: ({ resolve: (result: string) => void }) | null = null;
+    let pending: { resolve: (result: string) => void } | null = null;

    // Only start client if we have something to watch.
    if (paths.length) {
@@ -24,7 +24,8 @@ var url = require("url");
 var launchEditorEndpoint = require("react-dev-utils/launchEditorEndpoint");
 var formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
 var ErrorOverlay = require("react-error-overlay");
-var { debounce } = require("lodash");
+var lodash = require("lodash");
+var debounce = lodash.debounce;

 ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
  // Keep this sync with errorOverlayMiddleware.js
@@ -124,7 +125,7 @@ function handleWarnings(warnings) {

  // TODO: remove this workaround when we can upgrade to WebpackDevServer >= v3.3.0,
  // which includes proper `warningsFilter` support.
-  warnings = warnings.filter(w => !/export .* was not found in/.test(w));
+  warnings = warnings.filter(function(w){ return !/export .* was not found in/.test(w)});

  function printWarnings() {
    // Print warnings to the console.
@@ -198,7 +199,7 @@ function handleAvailableHash(hash) {
  mostRecentCompilationHash = hash;
 }

-const debouncedReload = debounce(() => {
+const debouncedReload = debounce(function() {
  window.location.reload();
 }, 1000);

@@ -18,8 +18,7 @@ import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 // TODO: import form coral-common/version, for some reason this fails currently.
 // Try again when we have a chance to upgrade typescript.
 import { version } from "../common/version";
-import { Config } from "./config";
-import { createClientEnv } from "./config";
+import { Config, createClientEnv } from "./config";
 import paths from "./paths";

 /**
@@ -392,7 +391,7 @@ export default function createWebpackConfig(
                      "@babel/typescript",
                      [
                        "@babel/env",
-                        { targets: { node: "10.0.0" }, modules: "commonjs" },
+                        { targets: { node: "current" }, modules: "commonjs" },
                      ],
                    ],
                    // This is a feature of `babel-loader` for webpack (not Babel itself).
@@ -450,19 +449,11 @@ export default function createWebpackConfig(
            {
              test: /\.js$/,
              include: /node_modules\//,
+              exclude: /node_modules\/(@babel|babel|core-js|regenerator-runtime)/,
              use: [
                {
                  loader: require.resolve("babel-loader"),
                  options: {
-                    // This will ensure that all packages in node_modules that
-                    // import lodash do so in a way that supports tree shaking.
-                    plugins: ["lodash"],
-                    presets: [
-                      [
-                        "@babel/env",
-                        { targets: "last 2 versions", modules: false },
-                      ],
-                    ],
                    cacheDirectory: true,
                  },
                },
@@ -712,8 +703,7 @@ export default function createWebpackConfig(
        sideEffects: true,
      },
      entry: [
-        /* Use minimal amount of polyfills (for IE) */
-        "intersection-observer", // also for Safari
+        // Polyfills are in the index.ts file.
        paths.appEmbedIndex,
      ],
      output: {
@@ -16,7 +16,7 @@ export default {
  appLoaders: resolveSrc("core/build/loaders"),
  appSrc: resolveSrc("."),
  appTsconfig: resolveSrc("core/client/tsconfig.json"),
-  appPolyfill: resolveSrc("core/build/polyfills.js"),
+  appPolyfill: resolveSrc("core/build/polyfills.ts"),
  appPublicPath: resolveSrc("core/build/publicPath.js"),
  appLocales: resolveSrc("locales"),
  appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
@@ -1,2 +0,0 @@
-require("@babel/polyfill");
-require("intersection-observer");
@@ -0,0 +1,6 @@
+import polyfillNodeListForEach from "../client/framework/helpers/polyfillNodeListForEach";
+
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+
+polyfillNodeListForEach();
@@ -7,6 +7,7 @@ const pickBy = require("lodash/pickBy");
 const flat = require("flat");
 const paths = require("./paths").default;
 const autoprefixer = require("autoprefixer");
+const postcssCalcFunction = require("postcss-calc-function").default;
 const postcssFontMagician = require("postcss-font-magician");
 const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
 const postcssPresetEnv = require("postcss-preset-env");
@@ -52,6 +53,8 @@ module.exports = {
    postcssNested(),
    // Sass style variables to be used in media queries.
    postcssAdvancedVariables({ variables: mediaQueryVariables }),
+    // Reduce some calc()
+    postcssCalcFunction(),
    // Provides a modern CSS environment.
    postcssPresetEnv(),
    // Does all the font handling logic.
@@ -1,20 +1,3 @@
-const lodashOptimizations = ["use-lodash-es", "lodash"];
-
 module.exports = {
  presets: ["@babel/react"],
-  plugins: ["@babel/syntax-dynamic-import"],
-  env: {
-    production: {
-      presets: [["@babel/env", { targets: "last 2 versions", modules: false }]],
-      plugins: [...lodashOptimizations],
-    },
-    development: {
-      presets: [["@babel/env", { targets: "last 2 versions", modules: false }]],
-      plugins: [...lodashOptimizations],
-    },
-    test: {
-      presets: [["@babel/env", { targets: { node: "current" } }]],
-      plugins: ["@babel/transform-modules-commonjs"],
-    },
-  },
 };
@@ -2,4 +2,7 @@
  body {
    margin: 0;
  }
+  input::-ms-clear, input::-ms-reveal {
+    display: none;
+  }
 }
@@ -4,7 +4,7 @@
    <title>Coral - Account</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="viewport" content="width=device-width" />
  </head>

  <body>
@@ -1,6 +1,8 @@
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";

+import injectConditionalPolyfills from "coral-framework/helpers/injectConditionalPolyfills";
+import potentiallyInjectAxe from "coral-framework/helpers/potentiallyInjectAxe";
 import { createManaged } from "coral-framework/lib/bootstrap";

 import App from "./App";
@@ -11,6 +13,9 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";

 async function main() {
+  await injectConditionalPolyfills();
+  // Potentially inject react-axe for runtime a11y checks.
+  await potentiallyInjectAxe();
  const ManagedCoralContextProvider = await createManaged({
    initLocalState,
    localesData,
@@ -3,8 +3,10 @@ import React, { FunctionComponent } from "react";
 import { HorizontalGutter, Typography } from "coral-ui/components";

 const NotFound: FunctionComponent = () => (
-  <HorizontalGutter>
-    <Typography variant="heading3">Not Found</Typography>
+  <HorizontalGutter container="main">
+    <Typography variant="heading3" container="h1">
+      Not Found
+    </Typography>
  </HorizontalGutter>
 );

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { Flex, HorizontalGutter, Icon, Typography } from "coral-ui/components";
@@ -10,7 +10,7 @@ const DownloadDescription: FunctionComponent = () => {
  return (
    <HorizontalGutter size="double">
      <Localized id="download-landingPage-title">
-        <div className={styles.title}>Download Your Comment History</div>
+        <h1 className={styles.title}>Download Your Comment History</h1>
      </Localized>
      <div className={styles.content}>
        <div className={styles.section}>
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import { Button, HorizontalGutter } from "coral-ui/components";
@@ -32,35 +32,35 @@ const DownloadRoute: FunctionComponent<Props> = ({ token }) => {

  if (state === "UNCHECKED") {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <HorizontalGutter size="double">
            <Loading />
          </HorizontalGutter>
        </div>
-      </div>
+      </main>
    );
  }
  if (state !== "VALID" || error) {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <HorizontalGutter size="double">
            <DownloadDescription />
            <Sorry />
          </HorizontalGutter>
        </div>
-      </div>
+      </main>
    );
  }

  return (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <DownloadDescription />
        <DownloadForm token={token!} />
      </div>
-    </div>
+    </main>
  );
 };

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { CallOut, Flex, Icon } from "coral-ui/components";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { Form } from "react-final-form";

@@ -35,36 +35,36 @@ const ConfirmRoute: React.FunctionComponent<Props> = ({ token }) => {

  if (state === "UNCHECKED") {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <Loading />
        </div>
-      </div>
+      </main>
    );
  }

  if (state !== "VALID" || error) {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <Sorry reason={error} />
        </div>
-      </div>
+      </main>
    );
  }

  return !finished ? (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <ConfirmForm token={token!} onSuccess={onSuccess} />
      </div>
-    </div>
+    </main>
  ) : (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <Success />
      </div>
-    </div>
+    </main>
  );
 };

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { Form } from "react-final-form";

@@ -35,36 +35,36 @@ const UnsubscribeRoute: React.FunctionComponent<Props> = ({ token }) => {

  if (state === "UNCHECKED") {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <Loading />
        </div>
-      </div>
+      </main>
    );
  }

  if (state !== "VALID" || error) {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <Sorry reason={error} />
        </div>
-      </div>
+      </main>
    );
  }

  return !finished ? (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <UnsubscribeForm token={token!} onSuccess={onSuccess} />
      </div>
-    </div>
+    </main>
  ) : (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <Success />
      </div>
-    </div>
+    </main>
  );
 };

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { Field, Form } from "react-final-form";

@@ -35,36 +35,36 @@ const ResetRoute: React.FunctionComponent<Props> = ({ token }) => {

  if (state === "UNCHECKED") {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <Loading />
        </div>
-      </div>
+      </main>
    );
  }

  if (state !== "VALID" || error) {
    return (
-      <div className={styles.container}>
+      <main className={styles.container}>
        <div className={styles.root}>
          <Sorry reason={error} />
        </div>
-      </div>
+      </main>
    );
  }

  return !finished ? (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <ResetPasswordForm token={token!} onSuccess={onSuccess} />
      </div>
-    </div>
+    </main>
  ) : (
-    <div className={styles.container}>
+    <main className={styles.container}>
      <div className={styles.root}>
        <Success />
      </div>
-    </div>
+    </main>
  );
 };

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { HorizontalGutter, Typography } from "coral-ui/components";
@@ -10,7 +10,7 @@ exports[`renders form 1`] = `
  <div
    className="MainLayout-centered"
  >
-    <div
+    <main
      className="ConfirmRoute-container"
    >
      <div
@@ -58,7 +58,7 @@ exports[`renders form 1`] = `
          </div>
        </form>
      </div>
-    </div>
+    </main>
  </div>
 </div>
 `;
@@ -73,7 +73,7 @@ exports[`renders missing confirm token 1`] = `
  <div
    className="MainLayout-centered"
  >
-    <div
+    <main
      className="ConfirmRoute-container"
    >
      <div
@@ -90,7 +90,9 @@ exports[`renders missing confirm token 1`] = `
          <div
            className="CallOut-root CallOut-colorError CallOut-fullWidth"
          >
-            <div>
+            <div
+              className="CallOut-inner"
+            >
              <span
                data-testid="invalid-link"
              >
@@ -100,7 +102,7 @@ exports[`renders missing confirm token 1`] = `
          </div>
        </div>
      </div>
-    </div>
+    </main>
  </div>
 </div>
 `;
@@ -10,7 +10,7 @@ exports[`renders form 1`] = `
  <div
    className="MainLayout-centered"
  >
-    <div
+    <main
      className="ResetRoute-container"
    >
      <div
@@ -115,7 +115,7 @@ Make sure it is unique and be sure to keep it secure.
          </form>
        </div>
      </div>
-    </div>
+    </main>
  </div>
 </div>
 `;
@@ -130,7 +130,7 @@ exports[`renders missing reset token 1`] = `
  <div
    className="MainLayout-centered"
  >
-    <div
+    <main
      className="ResetRoute-container"
    >
      <div
@@ -147,7 +147,9 @@ exports[`renders missing reset token 1`] = `
          <div
            className="CallOut-root CallOut-colorError CallOut-fullWidth"
          >
-            <div>
+            <div
+              className="CallOut-inner"
+            >
              <span
                data-testid="invalid-link"
              >
@@ -157,7 +159,7 @@ exports[`renders missing reset token 1`] = `
          </div>
        </div>
      </div>
-    </div>
+    </main>
  </div>
 </div>
 `;
@@ -10,7 +10,7 @@ exports[`renders form 1`] = `
  <div
    className="MainLayout-centered"
  >
-    <div
+    <main
      className="UnsubscribeRoute-container"
    >
      <div
@@ -48,7 +48,7 @@ exports[`renders form 1`] = `
          </form>
        </div>
      </div>
-    </div>
+    </main>
  </div>
 </div>
 `;
@@ -63,7 +63,7 @@ exports[`renders missing confirm token 1`] = `
  <div
    className="MainLayout-centered"
  >
-    <div
+    <main
      className="UnsubscribeRoute-container"
    >
      <div
@@ -80,7 +80,9 @@ exports[`renders missing confirm token 1`] = `
          <div
            className="CallOut-root CallOut-colorError CallOut-fullWidth"
          >
-            <div>
+            <div
+              className="CallOut-inner"
+            >
              <span
                data-testid="invalid-link"
              >
@@ -90,7 +92,7 @@ exports[`renders missing confirm token 1`] = `
          </div>
        </div>
      </div>
-    </div>
+    </main>
  </div>
 </div>
 `;
@@ -31,7 +31,9 @@ it("renders missing confirm token", async () => {
  replaceHistoryLocation("http://localhost/account/email/confirm");
  const { root } = await createTestRenderer();
  await waitForElement(() => within(root).getByTestID("invalid-link"));
+
  expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
 });

 it("renders form", async () => {
@@ -57,6 +59,7 @@ it("renders form", async () => {
    );
  });
  expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
  restMock.verify();
 });

@@ -98,6 +101,7 @@ it("renders error from server", async () => {
      );
    });
    restMock.verify();
+    expect(await within(root).axe()).toHaveNoViolations();
  }
 });

@@ -32,6 +32,7 @@ it("renders missing reset token", async () => {
  const { root } = await createTestRenderer();
  await waitForElement(() => within(root).getByTestID("invalid-link"));
  expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
 });

 it("renders form", async () => {
@@ -57,6 +58,7 @@ it("renders form", async () => {
    );
  });
  expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
  restMock.verify();
 });

@@ -98,6 +100,7 @@ it("renders error from server", async () => {
      );
    });
    restMock.verify();
+    expect(await within(root).axe()).toHaveNoViolations();
  }
 });

@@ -32,6 +32,7 @@ it("renders missing confirm token", async () => {
  const { root } = await createTestRenderer();
  await waitForElement(() => within(root).getByTestID("invalid-link"));
  expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
 });

 it("renders form", async () => {
@@ -53,6 +54,7 @@ it("renders form", async () => {
    await waitForElement(() => within(root).getByTestID("unsubscribe-form"));
  });
  expect(within(root).toJSON()).toMatchSnapshot();
+  expect(await within(root).axe()).toHaveNoViolations();
  restMock.verify();
 });

@@ -93,6 +95,7 @@ it("renders error from server", async () => {
      );
    });
    restMock.verify();
+    expect(await within(root).axe()).toHaveNoViolations();
  }
 });

@@ -1,8 +1,6 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { Typography } from "coral-ui/components";
-
 import ApprovedIcon from "./ApprovedIcon";
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
@@ -10,6 +8,7 @@ import Footer from "./Footer";
 import GoToCommentLink from "./GoToCommentLink";
 import Info from "./Info";
 import Timestamp from "./Timestamp";
+import Username from "./Username";

 interface Props {
  href: string;
@@ -18,10 +17,6 @@ interface Props {
  onGotoComment?: React.EventHandler<React.MouseEvent>;
 }

-const Username: FunctionComponent<{ username: string }> = ({ username }) => (
-  <strong>{username}</strong>
-);
-
 const ApprovedComment: FunctionComponent<Props> = props => (
  <DecisionItem icon={<ApprovedIcon />}>
    <Localized
@@ -31,9 +26,7 @@ const ApprovedComment: FunctionComponent<Props> = props => (
      <Info>{"Approved comment by <Username></Username>"}</Info>
    </Localized>
    <Footer>
-      <Typography variant="timestamp">
-        <Timestamp>{props.date}</Timestamp>
-      </Typography>
+      <Timestamp>{props.date}</Timestamp>
      <DotDivider />
      <GoToCommentLink href={props.href} onClick={props.onGotoComment} />
    </Footer>
@@ -1,3 +1,3 @@
 .root {
-  color: var(--palette-success-main);
+  color: var(--v2-palette-success-main);
 }
@@ -1,11 +1,13 @@
 import React, { FunctionComponent } from "react";

-import { Icon } from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";

 import styles from "./ApprovedIcon.css";

 const ApprovedIcon: FunctionComponent = () => (
-  <Icon className={styles.root}>check</Icon>
+  <Icon size="md" className={styles.root}>
+    check_circled
+  </Icon>
 );

 export default ApprovedIcon;
@@ -3,6 +3,6 @@
 }

 .historyIcon {
-  color: var(--palette-text-secondary);
-  margin-right: calc(1.5 * var(--mini-unit));
+  color: var(--v2-palette-text-secondary);
+  margin-right: 10px;
 }
@@ -1,7 +1,12 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { BaseButton, ClickOutside, Icon, Popover } from "coral-ui/components";
+import {
+  BaseButton,
+  ClickOutside,
+  Icon,
+  Popover,
+} from "coral-ui/components/v2";

 import DecisionHistoryQuery from "./DecisionHistoryQuery";

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";

-import { Delay, Flex, Spinner } from "coral-ui/components";
+import { Delay, Flex, Spinner } from "coral-ui/components/v2";

 import Main from "./Main";
 import Title from "./Title";
@@ -1,6 +1,5 @@
 .root {
-  padding: calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit))
-    calc(0.5 * var(--mini-unit)) 0;
+  padding: var(--v2-spacing-2) var(--v2-spacing-1);
 }

 .leftCol {
@@ -8,6 +7,6 @@
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
-  width: calc(3 * var(--mini-unit));
  padding-top: 3px;
+  margin-right: var(--v2-spacing-2);
 }
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";

-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";

 import styles from "./DecisionItem.css";

@@ -1,10 +1,12 @@
+$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+
 .root {
  margin: 0;
  padding: 0;
  list-style-type: none;

  & > * {
-    border-bottom: 1px solid var(--palette-divider);
+    border-bottom: 1px solid $decisionHistoryBorderColor;
  }
  & > *:last-child {
    border-bottom: 0;
@@ -1,7 +1,7 @@
 .root {
  height: 100%;
-  font-size: calc(12rem / var(--rem-base));
-  line-height: calc(12em / 12);
-  color: var(--palette-divider);
-  padding: 0 calc(0.5 * var(--mini-unit));
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-100);
+  padding: 0 var(--v2-spacing-1);
 }
@@ -1,3 +1,10 @@
 .root {
  padding: calc(1.5 * var(--mini-unit)) calc(2 * var(--mini-unit));
 }
+
+.text {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-body-short);
+}
@@ -1,16 +1,16 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { Flex, Typography } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";

 import styles from "./Empty.css";

 const Empty: FunctionComponent<{}> = () => (
  <Flex justifyContent="center" alignItems="center" className={styles.root}>
    <Localized id="decisionHistory-youWillSeeAList">
-      <Typography>
+      <div className={styles.text}>
        You will see a list of your post moderation actions here.
-      </Typography>
+      </div>
    </Localized>
  </Flex>
 );
@@ -1,2 +1,3 @@
 .root {
+  margin-top: var(--v2-spacing-1);
 }
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";

-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";

 import styles from "./Footer.css";

@@ -1,9 +1,10 @@
+$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+
 .root {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(14em / 12);
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-primary-main);
-  text-decoration: none;
+  line-height: var(--v2-line-height-reset);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-1);
+  color: $moderateCardDecisionHistoryLinkTextColor;
+  font-style: var(--v2-font-style-underline);
 }
@@ -1,8 +1,8 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import { Link } from "found";
 import React, { FunctionComponent } from "react";

-import { Icon, TextLink } from "coral-ui/components";
+import { Icon, TextLink } from "coral-ui/components/v2";

 import styles from "./GoToCommentLink.css";

@@ -1,6 +1,4 @@
 .root {
-  font-size: calc(14rem / var(--rem-base));
-  line-height: calc(16em / 12);
  /*
    Fallback begin

@@ -10,4 +8,9 @@
  word-break: break-all;
  /* Fallback end */
  word-break: break-word;
+  color: var(--v2-palette-text-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-body-short);
+  font-size: var(--v2-font-size-2);
 }
@@ -1,7 +1,5 @@
 import React, { FunctionComponent } from "react";

-import { Typography } from "coral-ui/components";
-
 import styles from "./Info.css";

 interface Props {
@@ -9,7 +7,7 @@ interface Props {
 }

 const Info: FunctionComponent<Props> = props => (
-  <Typography className={styles.root}>{props.children}</Typography>
+  <span className={styles.root}>{props.children}</span>
 );

 export default Info;
@@ -1,8 +1,6 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { Typography } from "coral-ui/components";
-
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
 import Footer from "./Footer";
@@ -10,6 +8,7 @@ import GoToCommentLink from "./GoToCommentLink";
 import Info from "./Info";
 import RejectedIcon from "./RejectedIcon";
 import Timestamp from "./Timestamp";
+import Username from "./Username";

 interface Props {
  href: string;
@@ -18,10 +17,6 @@ interface Props {
  onGotoComment?: React.EventHandler<React.MouseEvent>;
 }

-const Username: FunctionComponent<{ username: string }> = ({ username }) => (
-  <strong>{username}</strong>
-);
-
 const RejectedComment: FunctionComponent<Props> = props => (
  <DecisionItem icon={<RejectedIcon />}>
    <Localized
@@ -31,9 +26,7 @@ const RejectedComment: FunctionComponent<Props> = props => (
      <Info>{"Rejected comment by <Username></Username>"}</Info>
    </Localized>
    <Footer>
-      <Typography variant="timestamp">
-        <Timestamp>{props.date}</Timestamp>
-      </Typography>
+      <Timestamp>{props.date}</Timestamp>
      <DotDivider />
      <GoToCommentLink href={props.href} onClick={props.onGotoComment} />
    </Footer>
@@ -1,3 +1,3 @@
 .root {
-  color: var(--palette-error-main);
+  color: var(--v2-palette-error-main);
 }
@@ -1,11 +1,13 @@
 import React, { FunctionComponent } from "react";

-import { Icon } from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";

 import styles from "./RejectedIcon.css";

 const RejectedIcon: FunctionComponent = () => (
-  <Icon className={styles.root}>cancel</Icon>
+  <Icon size="md" className={styles.root}>
+    cancel
+  </Icon>
 );

 export default RejectedIcon;
@@ -1,16 +1,20 @@
+$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+$moderateCardDecisionHistoryBorderColor: var(--v2-colors-grey-300);
+
 .root {
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
  text-transform: uppercase;
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(2 * var(--mini-unit));
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-grey-main);
+  color: $moderateCardDecisionHistoryLinkTextColor;
  width: 100%;
-  border-top: 1px solid var(--palette-divider);
+  border-top: 1px solid $moderateCardDecisionHistoryBorderColor;
  text-align: center;
+  padding-top: var(--v2-spacing-1);
+  padding-bottom: var(--v2-spacing-1);

  &:disabled {
-    color: var(--palette-grey-lighter);
+    color: var(--v2-palette-grey-lighter);
  }
 }
@@ -1,7 +1,7 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { BaseButton } from "coral-ui/components";
+import { BaseButton } from "coral-ui/components/v2";

 import styles from "./ShowMoreButton.css";

@@ -1,8 +1,9 @@
+$timestampColor: var(--v2-colors-mono-100);
+
 .root {
-  color: var(--palette-text-secondary);
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(12rem / var(--rem-base));
-  line-height: calc(14em / 12);
-  letter-spacing: 0;
+  color: $timestampColor;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
 }
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";

-import { RelativeTime } from "coral-ui/components";
+import { Timestamp } from "coral-ui/components/v2";

 import styles from "./Timestamp.css";

@@ -9,7 +9,7 @@ interface Props {
 }

 const DecisionHistory: FunctionComponent<Props> = props => (
-  <RelativeTime className={styles.root} date={props.children} />
+  <Timestamp className={styles.root}>{props.children}</Timestamp>
 );

 export default DecisionHistory;
@@ -1,16 +1,23 @@
+$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200);
+
 .root {
-  padding: 0 calc(0.5 * var(--mini-unit));
-  background-color: #f2f2f2;
-  color: var(--palette-text-primary);
-  border-bottom: 1px solid var(--palette-grey-lighter);
+  background: $decisionHistoryTitleBackgroundColor;
+  padding: var(--v2-spacing-1);
+  color: var(--v2-palette-text-primary);
+  border-bottom: 1px solid $decisionHistoryBorderColor;
+  font-size: var(--v2-font-size-icon-medium);
+}
+
+.icon {
+  margin-right: var(--v2-spacing-2);
 }

 .text {
  text-transform: uppercase;
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(12em / 12);
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-text-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  color: var(--v2-palette-text-primary);
+  font-size: var(--v2-font-size-2);
+  line-height: 1;
+  font-family: var(--v2-font-family-primary);
 }
@@ -1,17 +1,17 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { Flex, Icon, Typography } from "coral-ui/components";
+import { Flex, Icon } from "coral-ui/components/v2";

 import styles from "./Title.css";

 const Title: FunctionComponent = () => (
  <Flex className={styles.root} alignItems="center">
-    <Icon>history</Icon>{" "}
+    <Icon className={styles.icon} size="md">
+      history
+    </Icon>
    <Localized id="decisionHistory-yourDecisionHistory">
-      <Typography container="span" className={styles.text}>
-        Your Decision History
-      </Typography>
+      <span className={styles.text}>Your Decision History</span>
    </Localized>
  </Flex>
 );
@@ -0,0 +1,9 @@
+$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900);
+
+.root {
+  color: $moderateCardDecisionHistoryColor;
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-body-short);
+  font-size: var(--v2-font-size-3);
+}
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+
+import styles from "./Username.css";
+
+interface Props {
+  username: string;
+}
+
+const Username: FunctionComponent<Props> = ({ username }) => (
+  <strong className={styles.root}>{username}</strong>
+);
+
+export default Username;
@@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `
    </Info>
  </Localized>
  <Footer>
-    <ForwardRef(forwardRef)
-      variant="timestamp"
-    >
-      <DecisionHistory>
-        2018-07-06T18:24:00.000Z
-      </DecisionHistory>
-    </ForwardRef(forwardRef)>
+    <DecisionHistory>
+      2018-07-06T18:24:00.000Z
+    </DecisionHistory>
    <Footer />
    <GoToCommentLink
      href="#"
@@ -3,7 +3,8 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
  className="ApprovedIcon-root"
+  size="md"
 >
-  check
+  check_circled
 </ForwardRef(forwardRef)>
 `;
@@ -9,9 +9,11 @@ exports[`renders correctly 1`] = `
  <Localized
    id="decisionHistory-youWillSeeAList"
  >
-    <ForwardRef(forwardRef)>
+    <div
+      className="Empty-text"
+    >
      You will see a list of your post moderation actions here.
-    </ForwardRef(forwardRef)>
+    </div>
  </Localized>
 </ForwardRef(forwardRef)>
 `;
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
+<span
  className="Info-root"
 >
  children
-</ForwardRef(forwardRef)>
+</span>
 `;
@@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `
    </Info>
  </Localized>
  <Footer>
-    <ForwardRef(forwardRef)
-      variant="timestamp"
-    >
-      <DecisionHistory>
-        2018-07-06T18:24:00.000Z
-      </DecisionHistory>
-    </ForwardRef(forwardRef)>
+    <DecisionHistory>
+      2018-07-06T18:24:00.000Z
+    </DecisionHistory>
    <Footer />
    <GoToCommentLink
      href="#"
@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
  className="RejectedIcon-root"
+  size="md"
 >
  cancel
 </ForwardRef(forwardRef)>
@@ -1,8 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
+<Timestamp
  className="Timestamp-root"
-  date="2018-07-06T18:24:00.000Z"
-/>
+  toggleAbsolute={true}
+>
+  2018-07-06T18:24:00.000Z
+</Timestamp>
 `;
@@ -5,19 +5,20 @@ exports[`renders correctly 1`] = `
  alignItems="center"
  className="Title-root"
 >
-  <ForwardRef(forwardRef)>
+  <ForwardRef(forwardRef)
+    className="Title-icon"
+    size="md"
+  >
    history
  </ForwardRef(forwardRef)>
-   
  <Localized
    id="decisionHistory-yourDecisionHistory"
  >
-    <ForwardRef(forwardRef)
+    <span
      className="Title-text"
-      container="span"
    >
      Your Decision History
-    </ForwardRef(forwardRef)>
+    </span>
  </Localized>
 </ForwardRef(forwardRef)>
 `;
@@ -3,6 +3,9 @@
    padding: 0;
    margin: 0;
  }
+  input::-ms-clear, input::-ms-reveal {
+    display: none;
+  }
 }

 .root {
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";

 import { PropTypesOf } from "coral-framework/types";
 import { LogoHorizontal } from "coral-ui/components";
-import { AppBar, Begin, Divider, End } from "coral-ui/components/AppBar";
+import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar";

 import { DecisionHistoryButton } from "./DecisionHistory";
 import NavigationContainer from "./Navigation";
@@ -1,7 +1,7 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { AppBarNavigation } from "coral-ui/components";
+import { AppBarNavigation } from "coral-ui/components/v2";

 import NavigationLink from "./NavigationLink";

@@ -1,7 +1,7 @@
 import { Link, LocationDescriptor } from "found";
 import React, { FunctionComponent } from "react";

-import { AppBarNavigationItem } from "coral-ui/components";
+import { AppBarNavigationItem } from "coral-ui/components/v2";

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

 const NavigationLink: FunctionComponent<Props> = props => (
-  <Link to={props.to} as={AppBarNavigationItem} activePropName="active">
+  <Link to={props.to} as={AppBarNavigationItem as any} activePropName="active">
    {props.children}
  </Link>
 );
@@ -1,11 +1,19 @@
+$userMenuButtonColor: var(--v2-colors-mono-100);
+
 .button {
  padding-top: 0;
  padding-bottom: 0;
-  margin-left: 5px;
+  margin-left: 15px;
 }
+
+.icon {
+  color: $userMenuButtonColor;
+}
+
 .buttonText {
-  font-size: calc(18rem / var(--rem-base));
-  letter-spacing: calc(-0.2em / 18);
+  font-family: var(--v2-font-family-secondary);
+  color: $userMenuButtonColor;
+  font-size: var(--v2-font-size-4);
  margin-left: 2px;
  margin-right: 1px;
 }
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import {
@@ -9,7 +9,7 @@ import {
  DropdownButton,
  DropdownDivider,
  Popover,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";

 import styles from "./UserMenu.css";

@@ -60,13 +60,15 @@ const UserMenu: FunctionComponent<Props> = props => (
          className={styles.button}
          onClick={toggleVisibility}
          ref={ref}
-          variant="regular"
-          size="small"
+          variant="text"
+          uppercase={false}
        >
-          <ButtonIcon size="lg">account_circle</ButtonIcon>
+          <ButtonIcon className={styles.icon} size="lg">
+            account_circle
+          </ButtonIcon>
          <span className={styles.buttonText}>{props.username}</span>
          {
-            <ButtonIcon size="lg">
+            <ButtonIcon className={styles.icon} size="lg">
              {visible ? "arrow_drop_up" : "arrow_drop_down"}
            </ButtonIcon>
          }
@@ -1,17 +1,8 @@
 .container {
-  width: 350px;
-  background-color: #f5f5f5;
-  border: 1px solid var(--palette-grey-lighter);
+  width: 385px;
+  background-color: var(--v2-colors-grey-100);
+  border: 1px solid var(--v2-colors-grey-300);
  margin-top: 70px;
-  padding: 0 calc(3 * var(--mini-unit)) calc(4 * var(--mini-unit))
-    calc(3 * var(--mini-unit));
+  padding: var(--v2-spacing-6);
  box-sizing: border-box;
 }
-
-.brandIcon {
-  display: inline-flex;
-  background: var(--palette-common-white);
-  padding: calc(0.5 * var(--mini-unit));
-  border: 1px solid var(--palette-grey-lighter);
-  margin-top: -42px;
-}
@@ -1,12 +1,6 @@
 import React, { FunctionComponent } from "react";

-import {
-  BrandMark,
-  BrandName,
-  Flex,
-  HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
+import { BrandName, Flex, HorizontalGutter } from "coral-ui/components/v2";

 import styles from "./AuthBox.css";

@@ -20,15 +14,10 @@ const AuthBox: FunctionComponent<Props> = ({ title, children }) => {
    <div data-testid="authBox">
      <Flex justifyContent="center">
        <HorizontalGutter className={styles.container} size="double">
-          <Flex justifyContent="center">
-            <div className={styles.brandIcon}>
-              <BrandMark size="lg" />
-            </div>
-          </Flex>
          <div>
-            <Typography align="center" variant="heading3">
-              {title}
-            </Typography>
+            <Flex justifyContent="center">
+              <div className="adminSignInTitle">{title}</div>
+            </Flex>
            <BrandName size="lg" align="center" />
          </div>
          {children}
@@ -1,7 +1,7 @@
 import React from "react";

 import { withInView } from "coral-framework/lib/intersection";
-import { BaseButton, Spinner } from "coral-ui/components";
+import { BaseButton, Spinner } from "coral-ui/components/v2";

 interface Props {
  inView: boolean | undefined;
@@ -1,25 +1,27 @@
+$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
+
 .root {
-  border: 1px solid var(--palette-success-main);
+  border: 1px solid $moderateCardButtonOutlineApproveColor;
  box-sizing: border-box;
-  border-radius: var(--round-corners);
+  border-radius: var(--v2-round-corners);
  width: 65px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
-  color: var(--palette-success-main);
+  color: $moderateCardButtonOutlineApproveColor;
  &:not(:disabled):active {
-    background-color: var(--palette-success-main);
-    color: var(--palette-common-white);
+    background-color: $moderateCardButtonOutlineApproveColor;
+    color: var(--v2-colors-pure-white);
  }
 }

 .invert {
-  background-color: var(--palette-success-main);
-  color: var(--palette-common-white);
+  background-color: $moderateCardButtonOutlineApproveColor;
+  color: var(--v2-colors-pure-white);
 }

 .icon {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
  color: inherit;
 }
@@ -1,9 +1,9 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { PropTypesOf } from "coral-framework/types";
-import { BaseButton, Icon } from "coral-ui/components";
+import { BaseButton, Icon } from "coral-ui/components/v2";

 import styles from "./ApproveButton.css";

@@ -1,13 +1,14 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";

-import { BanCommentUserMutation as MutationTypes } from "coral-admin/__generated__/BanCommentUserMutation.graphql";
 import {
  commitMutationPromiseNormalized,
  createMutation,
  MutationInput,
 } from "coral-framework/lib/relay";

+import { BanCommentUserMutation as MutationTypes } from "coral-admin/__generated__/BanCommentUserMutation.graphql";
+
 const clientMutationId = 0;

 const BanCommentUserMutation = createMutation(
@@ -1,9 +1,10 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

-import { CommentAuthorContainer_comment as CommentData } from "coral-admin/__generated__/CommentAuthorContainer_comment.graphql";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
-import { Tag } from "coral-ui/components";
+import { Tag } from "coral-ui/components/v2";
+
+import { CommentAuthorContainer_comment as CommentData } from "coral-admin/__generated__/CommentAuthorContainer_comment.graphql";

 import styles from "./CommentAuthorContainer.css";

@@ -17,11 +18,11 @@ const CommentAuthorContainer: FunctionComponent<Props> = ({ comment }) => {
  }
  return (
    <>
-      <Localized id="commentAuthor-status-banned">
-        <div className={styles.authorStatus}>
+      <div className={styles.authorStatus}>
+        <Localized id="commentAuthor-status-banned">
          <Tag color="error">BANNED</Tag>
-        </div>
-      </Localized>
+        </Localized>
+      </div>
    </>
  );
 };
--- a/Show More
+++ b/Show More