feat: added support for customUserAgent (#2825 )

chore: bump 5.5.0 (#2822 )
Co-authored-by: Kim Gardner <kgardnr@gmail.com>
2026-09-13 13:10:43 +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
330 changed files with 8821 additions and 3815 deletions
@@ -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,18 +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__"
-  ],
-  "debug.node.autoAttach": "on",
+  "importSorter.generalConfiguration.exclude": ["d\\.ts$", "__generated__"],
  "search.exclude": {
    "package-lock.json": true
  },
+  "debug.node.autoAttach": "off"
 }
@@ -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"],
@@ -58,7 +58,7 @@ module.exports = {
              "@babel/typescript",
              [
                "@babel/env",
-                { targets: { node: "12.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.4.1",
+  "version": "5.5.0",
  "author": "The Coral Project",
  "homepage": "https://coralproject.net/",
  "sideEffects": [
@@ -131,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",
@@ -143,15 +143,13 @@
    "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",
@@ -220,12 +218,12 @@
    "@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",
@@ -249,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",
@@ -267,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",
@@ -289,8 +287,8 @@
    "flat": "^4.1.0",
    "fluent-intl-polyfill": "^0.1.0",
    "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",
@@ -298,7 +296,7 @@
    "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",
@@ -314,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",
@@ -326,32 +325,35 @@
    "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": "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",
@@ -379,7 +381,7 @@
    "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",
@@ -52,6 +52,9 @@ const args = [
  "--language",
  "typescript",
  "--no-watchman",
+  "--customScalars.Time=String",
+  "--customScalars.Cursor=unknown",
+  "--customScalars.Locale=string",
  "--src",
  program.src,
  "--artifactDirectory",
@@ -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: "12.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;
+  }
 }
@@ -1,6 +1,7 @@
 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";

@@ -12,6 +13,7 @@ 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({
@@ -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"
              >
@@ -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"
              >
@@ -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"
              >
@@ -1,10 +1,12 @@
+$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+
 .root {
  margin: 0;
  padding: 0;
  list-style-type: none;

  & > * {
-    border-bottom: 1px solid var(--v2-palette-decision-history-border);
+    border-bottom: 1px solid $decisionHistoryBorderColor;
  }
  & > *:last-child {
    border-bottom: 0;
@@ -2,6 +2,6 @@
  height: 100%;
  font-size: var(--v2-font-size-1);
  line-height: var(--v2-line-height-reset);
-  color: var(--v2-palette-timestamp);
+  color: var(--v2-colors-mono-100);
  padding: 0 var(--v2-spacing-1);
 }
@@ -1,8 +1,10 @@
+$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+
 .root {
  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: var(--v2-palette-link-text);
+  color: $moderateCardDecisionHistoryLinkTextColor;
  font-style: var(--v2-font-style-underline);
 }
@@ -1,12 +1,15 @@
+$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;
-  color: var(--v2-palette-link-text);
+  color: $moderateCardDecisionHistoryLinkTextColor;
  width: 100%;
-  border-top: 1px solid var(--v2-palette-decision-history-border);
+  border-top: 1px solid $moderateCardDecisionHistoryBorderColor;
  text-align: center;
  padding-top: var(--v2-spacing-1);
  padding-bottom: var(--v2-spacing-1);
@@ -1,5 +1,7 @@
+$timestampColor: var(--v2-colors-mono-100);
+
 .root {
-  color: var(--v2-palette-timestamp);
+  color: $timestampColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-bold);
  font-size: var(--v2-font-size-1);
@@ -1,8 +1,11 @@
+$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200);
+
 .root {
-  background: var(--v2-palette-decision-history-title-background);
+  background: $decisionHistoryTitleBackgroundColor;
  padding: var(--v2-spacing-1);
  color: var(--v2-palette-text-primary);
-  border-bottom: 1px solid var(--v2-palette-decision-history-border);
+  border-bottom: 1px solid $decisionHistoryBorderColor;
  font-size: var(--v2-font-size-icon-medium);
 }

@@ -1,5 +1,7 @@
+$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900);
+
 .root {
-  color: var(--v2-palette-username-emphasis);
+  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);
@@ -3,6 +3,9 @@
    padding: 0;
    margin: 0;
  }
+  input::-ms-clear, input::-ms-reveal {
+    display: none;
+  }
 }

 .root {
@@ -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,3 +1,5 @@
+$userMenuButtonColor: var(--v2-colors-mono-100);
+
 .button {
  padding-top: 0;
  padding-bottom: 0;
@@ -5,12 +7,12 @@
 }

 .icon {
-  color: var(--v2-palette-user-menu-button);
+  color: $userMenuButtonColor;
 }

 .buttonText {
  font-family: var(--v2-font-family-secondary);
-  color: var(--v2-palette-user-menu-button);
+  color: $userMenuButtonColor;
  font-size: var(--v2-font-size-4);
  margin-left: 2px;
  margin-right: 1px;
@@ -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,5 +1,7 @@
+$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
+
 .root {
-  border: 1px solid var(--v2-palette-button-outline-approve);
+  border: 1px solid $moderateCardButtonOutlineApproveColor;
  box-sizing: border-box;
  border-radius: var(--v2-round-corners);
  width: 65px;
@@ -7,15 +9,15 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  color: var(--v2-palette-button-outline-approve);
+  color: $moderateCardButtonOutlineApproveColor;
  &:not(:disabled):active {
-    background-color: var(--v2-palette-button-outline-approve);
+    background-color: $moderateCardButtonOutlineApproveColor;
    color: var(--v2-colors-pure-white);
  }
 }

 .invert {
-  background-color: var(--v2-palette-button-outline-approve);
+  background-color: $moderateCardButtonOutlineApproveColor;
  color: var(--v2-colors-pure-white);
 }

@@ -75,7 +75,7 @@ const FeatureCommentMutation = createMutation(
          getQueueConnection(store, "REJECTED", input.storyID),
        ].filter(c => c);
        connections.forEach(con =>
-          ConnectionHandler.deleteNode(con, input.commentID)
+          ConnectionHandler.deleteNode(con!, input.commentID)
        );
      },
    })
@@ -1,7 +1,9 @@
+$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500);
+
 .category {
  font-size: var(--v2-font-size-4);
  font-weight: var(--v2-font-weight-primary-regular);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-body-short);
-  color: var(--v2-palette-accordion-label);
+  color: $moderateCardFlagsCategoryColor;
 }
@@ -1,5 +1,8 @@
+$moderateCardFlagUsernameColor: var(--v2-colors-mono-900);
+$moderateCardReasonTextColor: var(--v2-colors-mono-500);
+
 .user {
-  color: var(--v2-palette-username-emphasis);
+  color: $moderateCardFlagUsernameColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-secondary-bold);
  font-family: var(--v2-font-family-secondary);
@@ -8,7 +11,7 @@
 }

 .details {
-  color: var(--v2-palette-reason-text);
+  color: $moderateCardReasonTextColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-regular);
  font-family: var(--v2-font-family-primary);
@@ -1,15 +1,20 @@
+$moderateCardIconColor: var(--v2-colors-mono-100);
+$moderateCardInReplyToColor: var(--v2-colors-mono-100);
+$moderateCardInReplyToUsernameColor: var(--v2-colors-mono-500);
+$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+
 .icon {
-  color: var(--v2-palette-label-regular);
+  color: $moderateCardIconColor;
 }
 .inReplyTo {
-  color: var(--v2-palette-label-regular);
+  color: $moderateCardInReplyToColor;
  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-reset);
 }
 .username {
-  color: var(--v2-palette-username-regular);
+  color: $moderateCardInReplyToUsernameColor;
  font-family: var(--v2-font-family-secondary);
  font-weight: var(--v2-font-weight-secondary-bold);
  font-size: var(--v2-font-size-3);
@@ -18,13 +23,13 @@
  padding: var(--spacing-1);

  &:hover {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
    border-radius: var(--round-corners);
    border-style: none;
  }

  &:active {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
    border-radius: var(--round-corners);
    border-style: none;
  }
@@ -1,3 +1,6 @@
+$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500);
+$moderateCardDetailsDividerColor: var(--v2-colors-grey-100);
+
 .detailsButton {
  font-size: var(--v2-font-size-1);
  font-family: var(--v2-font-family-primary);
@@ -12,7 +15,7 @@
 }

 .detailsButtonColorRegular {
-  border-color: var(--v2-palette-details-header);
+  border-color: $moderateCardDetailsHeaderColor;
 }

 .detailsText {
@@ -20,5 +23,5 @@
 }

 .detailsDivider {
-  border-color: var(--v2-palette-details-divider);
+  border-color: $moderateCardDetailsDividerColor;
 }
@@ -56,9 +56,7 @@ const markers: Array<
    (c.revision &&
      c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SUSPECT_WORD && (
        <Localized id="moderate-marker-suspectWord" key={keyCounter++}>
-          <Marker color="reported" variant="filled">
-            Suspect Word
-          </Marker>
+          <Marker color="reported">Suspect Word</Marker>
        </Localized>
      )) ||
    null,
@@ -1,3 +1,11 @@
+$moderateCardTimestampColor: var(--v2-colors-mono-100);
+$moderateCardEditedColor: var(--v2-colors-mono-100);
+$moderateCardAuthorStatusColor: var(--v2-colors-mono-100);
+$moderateCardDecisionColor: var(--v2-colors-mono-500);
+$moderateCardStoryTitleColor: var(--v2-colors-mono-500);
+$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+$moderateCardLinkTextColor: var(--v2-colors-teal-700);
+
 .topBar {
  position: relative;
  margin-bottom: var(--v2-spacing-1);
@@ -15,13 +23,13 @@
  line-height: var(--v2-line-height-reset);

  &:hover {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
    border-radius: var(--v2-round-corners);
    border-style: none;
  }

  &:active {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
    border-radius: var(--v2-round-corners);
    border-style: none;
  }
@@ -76,7 +84,7 @@
 }

 .decision {
-  color: var(--v2-palette-label-emphasis);
+  color: $moderateCardDecisionColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-bold);
  font-family: var(--v2-font-family-primary);
@@ -114,7 +122,7 @@
  font-weight: var(--v2-font-weight-primary-semi-bold);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-reset);
-  color: var(--v2-palette-link-text);
+  color: $moderateCardLinkTextColor;
  text-transform: uppercase;
 }

@@ -133,7 +141,7 @@
 }

 .storyTitle {
-  color: var(--v2-palette-story-title);
+  color: $moderateCardStoryTitleColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-regular);
  font-family: var(--v2-font-family-primary);
@@ -157,7 +165,7 @@
 }

 .timestamp {
-  color: var(--v2-palette-timestamp);
+  color: $moderateCardTimestampColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-1);
@@ -165,7 +173,7 @@
 }

 .edited {
-  color: var(--v2-palette-timestamp);
+  color: $moderateCardEditedColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-1);
@@ -179,7 +187,7 @@

 .authorStatus {
  padding-right: var(--spacing-2);
-  color: var(--v2-palette-timestamp);
+  color: $moderateCardAuthorStatusColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-1);
@@ -1,5 +1,7 @@
+$moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
+
 .root {
-  border: 1px solid var(--v2-palette-button-outline-reject);
+  border: 1px solid $moderateCardButtonOutlineRejectColor;
  box-sizing: border-box;
  border-radius: var(--v2-round-corners);
  width: 65px;
@@ -7,15 +9,15 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  color: var(--v2-palette-button-outline-reject);
+  color: $moderateCardButtonOutlineRejectColor;
  &:not(:disabled):active {
-    background-color: var(--v2-palette-button-outline-reject);
+    background-color: $moderateCardButtonOutlineRejectColor;
    color: var(--v2-colors-pure-white);
  }
 }

 .invert {
-  background-color: var(--v2-palette-button-outline-reject);
+  background-color: $moderateCardButtonOutlineRejectColor;
  color: var(--v2-colors-pure-white);
 }

@@ -1,11 +1,14 @@
+$moderateCardCounterBadgeBackgroundAlert: var(--v2-colors-red-500);
+$moderateCardToxicityColor: var(--v2-colors-mono-500);
+
 .root {
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-semi-bold);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-body-short);
-  color: var(--v2-palette-accordion-label);
+  color: $moderateCardToxicityColor;
 }

 .likely {
-  color: var(--v2-palette-counter-badge-background-alert);
+  color: $moderateCardCounterBadgeBackgroundAlert;
 }
@@ -1,7 +1,9 @@
+$moderateCardUsernameColor: var(--v2-colors-mono-900);
+
 .root {
  font-size: var(--v2-font-size-3);
  font-weight: var(--v2-font-weight-secondary-bold);
  font-family: var(--v2-font-family-secondary);
  line-height: var(--v2-line-height-reset);
-  color: var(--v2-palette-username-emphasis);
+  color: $moderateCardUsernameColor;
 }
@@ -82,7 +82,6 @@ exports[`renders all markers 1`] = `
  >
    <withPropsOnChange(Marker)
      color="reported"
-      variant="filled"
    >
      Suspect Word
    </withPropsOnChange(Marker)>
@@ -1,3 +1,5 @@
+$tableBodyDisabledColor: var(--v2-colors-mono-100);
+
 .root {
-  color: var(--v2-palette-table-body-disabled);
+  color: $tableBodyDisabledColor;
 }
@@ -1,8 +1,11 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";

-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
+import {
+  graphql,
+  QueryRenderData,
+  QueryRenderer,
+} from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components/v2";

 import { UserDrawerAccountHistoryQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerAccountHistoryQuery.graphql";
@@ -29,7 +32,7 @@ const UserDrawerAccountHistoryQuery: FunctionComponent<Props> = ({
      `}
      variables={{ userID }}
      cacheConfig={{ force: true }}
-      render={({ error, props }: ReadyState<QueryTypes["response"]>) => {
+      render={({ error, props }: QueryRenderData<QueryTypes>) => {
        if (error) {
          return (
            <div className={styles.callout}>
@@ -1,6 +1,5 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";

 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components/v2";
@@ -30,7 +29,7 @@ const UserDrawerNotesQuery: FunctionComponent<Props> = ({ userID }) => {
      `}
      variables={{ userID }}
      cacheConfig={{ force: true }}
-      render={({ error, props }: ReadyState<QueryTypes["response"]>) => {
+      render={({ error, props }) => {
        if (error) {
          return (
            <div className={styles.callout}>
@@ -1,6 +1,5 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";

 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components/v2";
@@ -35,7 +34,7 @@ const UserHistoryDrawerAllCommentsQuery: FunctionComponent<Props> = ({
      `}
      variables={{ userID }}
      cacheConfig={{ force: true }}
-      render={({ error, props }: ReadyState<QueryTypes["response"]>) => {
+      render={({ error, props }) => {
        if (!props) {
          return (
            <div className={styles.root}>
@@ -1,8 +1,11 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";

-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
+import {
+  graphql,
+  QueryRenderData,
+  QueryRenderer,
+} from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components/v2";

 import { UserHistoryDrawerQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerQuery.graphql";
@@ -36,7 +39,7 @@ const UserHistoryDrawerQuery: FunctionComponent<Props> = ({
      `}
      variables={{ userID }}
      cacheConfig={{ force: true }}
-      render={({ props }: ReadyState<QueryTypes["response"]>) => {
+      render={({ props }: QueryRenderData<QueryTypes>) => {
        if (!props) {
          return (
            <div className={styles.root}>
@@ -1,12 +1,9 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";

 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components/v2";

-import { UserHistoryDrawerRejectedCommentsQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerRejectedCommentsQuery.graphql";
-
 import UserHistoryDrawerRejectedComments from "./UserHistoryDrawerRejectedComments";

 import styles from "./UserHistoryDrawerRejectedCommentsQuery.css";
@@ -35,7 +32,7 @@ const UserHistoryDrawerRejectedCommentsQuery: FunctionComponent<Props> = ({
      `}
      variables={{ userID }}
      cacheConfig={{ force: true }}
-      render={({ error, props }: ReadyState<QueryTypes["response"]>) => {
+      render={({ error, props }) => {
        if (!props) {
          return (
            <div className={styles.root}>
@@ -1,10 +1,12 @@
+$tableBodyTextColor: var(--v2-colors-mono-500);
+
 .root {
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-semi-bold);
-  color: var(--v2-palette-table-body-text);
+  color: $tableBodyTextColor;
 }

 .commenter {
-  color: var(--v2-palette-table-body-text);
+  color: $tableBodyTextColor;
  font-weight: var(--v2-font-weight-primary-regular);
 }
@@ -63,7 +63,7 @@ const BanUserMutation = createMutation(
                history: [
                  {
                    active: true,
-                    createdAt: new Date(),
+                    createdAt: new Date().toISOString(),
                    createdBy: {
                      id: viewer.id,
                      username: viewer.username,
@@ -63,7 +63,7 @@ const PremodUserMutation = createMutation(
                history: [
                  {
                    active: true,
-                    createdAt: new Date(),
+                    createdAt: new Date().toISOString(),
                    createdBy: {
                      id: viewer.id,
                      username: viewer.username,
@@ -63,7 +63,7 @@ const RemoveUserPremodMutation = createMutation(
                history: [
                  {
                    active: false,
-                    createdAt: new Date(),
+                    createdAt: new Date().toISOString(),
                    createdBy: {
                      id: viewer.id,
                      username: viewer.username,
@@ -11,23 +11,15 @@ exports[`renders correctly 1`] = `
      className="AuthBox-container"
      size="double"
    >
-      <ForwardRef(forwardRef)
-        justifyContent="center"
-      >
-        <div
-          className="AuthBox-brandIcon"
-        >
-          <withPropsOnChange(BrandMark)
-            size="lg"
-          />
-        </div>
-      </ForwardRef(forwardRef)>
      <div>
        <ForwardRef(forwardRef)
-          align="center"
-          variant="heading3"
+          justifyContent="center"
        >
-          title
+          <div
+            className="adminSignInTitle"
+          >
+            title
+          </div>
        </ForwardRef(forwardRef)>
        <withPropsOnChange(BrandName)
          align="center"
@@ -14,7 +14,7 @@ export default function getQueueConnection(
  store: RecordSourceSelectorProxy | RecordSourceProxy,
  queue: GQLMODERATION_QUEUE_RL | "REJECTED",
  storyID?: string | null
-): RecordProxy | null {
+): RecordProxy | null | undefined {
  const root = store.getRoot();
  if (queue === "REJECTED") {
    return ConnectionHandler.getConnection(root, "RejectedQueue_comments", {
@@ -24,10 +24,12 @@ export default function getQueueConnection(
  }
  const queuesRecord = root.getLinkedRecord("moderationQueues", { storyID })!;
  if (!queuesRecord) {
-    return null;
+    return undefined;
  }
-  return ConnectionHandler.getConnection(
-    queuesRecord.getLinkedRecord(queue.toLowerCase()),
-    "Queue_comments"
-  );
+
+  const queueRecord = queuesRecord.getLinkedRecord(queue.toLowerCase());
+  if (!queueRecord) {
+    return undefined;
+  }
+  return ConnectionHandler.getConnection(queueRecord, "Queue_comments");
 }
@@ -1,6 +1,7 @@
 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";

@@ -13,6 +14,7 @@ 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({
@@ -84,7 +84,7 @@ const ApproveCommentMutation = createMutation(
          getQueueConnection(store, "REJECTED", input.storyID),
        ].filter(c => c);
        connections.forEach(con =>
-          ConnectionHandler.deleteNode(con, input.commentID)
+          ConnectionHandler.deleteNode(con!, input.commentID)
        );
      },
    })
@@ -83,7 +83,7 @@ const RejectCommentMutation = createMutation(
          getQueueConnection(store, "UNMODERATED", input.storyID),
        ].filter(c => c);
        connections.forEach(con =>
-          ConnectionHandler.deleteNode(con, input.commentID)
+          ConnectionHandler.deleteNode(con!, input.commentID)
        );
      },
    })
@@ -1,9 +1,52 @@
+.title {
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  color: var(--v2-colors-mono-100);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-title);
+
+  padding-bottom: var(--v2-spacing-3);
+}
+
+.username {
+  font-size: var(--v2-font-size-6);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-900);
+
+  text-align: center;
+
+  padding-bottom: var(--v2-spacing-5);
+}
+
+.copy {
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-500);
+
+  text-align: center;
+}
+
 .lockIcon {
-  color: var(--palette-grey-dark);
+  color: var(--v2-colors-mono-900);
+  padding-bottom: var(--v2-spacing-2);
 }
+
 .noPermission {
-  color: var(--palette-grey-dark);
+  font-size: var(--v2-font-size-4);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-900);
+
+  text-align: center;
+
+  padding-bottom: var(--v2-spacing-5);
 }
+
 .contactAdmin {
-  color: var(--palette-grey-main);
+  padding-top: var(--v2-spacing-3);
 }
@@ -1,14 +1,9 @@
 import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
 import React, { FunctionComponent } from "react";

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

 import styles from "./Restricted.css";

@@ -18,17 +13,15 @@ interface Props {
 }

 const SignIn: FunctionComponent<Props> = ({ username, onSignInAs }) => {
-  const Username = () => (
-    <Typography variant="heading1" align="center">
-      {username}
-    </Typography>
-  );
+  const Username = () => <div className={styles.username}>{username}</div>;
  return (
    <AuthBox
      title={
-        <Localized id="restricted-currentlySignedInTo">
-          <span>Currently signed in to</span>
-        </Localized>
+        <div className={styles.title}>
+          <Localized id="restricted-currentlySignedInTo">
+            <span>Currently signed in to</span>
+          </Localized>
+        </div>
      }
    >
      <HorizontalGutter size="double">
@@ -39,38 +32,35 @@ const SignIn: FunctionComponent<Props> = ({ username, onSignInAs }) => {
            </Icon>
          </Flex>
          <Localized id="restricted-noPermissionInfo">
-            <Typography
-              variant="heading3"
-              align="center"
-              className={styles.noPermission}
-            >
+            <div className={styles.noPermission}>
              You do not have permission to access this page.
-            </Typography>
+            </div>
          </Localized>
        </div>
        <div>
          <Localized id="restricted-signedInAs" Username={<Username />}>
-            <Typography variant="bodyCopy" align="center" container="div">
+            <div className={styles.copy}>
              {"You are signed in as: <Username></Username>"}
-            </Typography>
+            </div>
          </Localized>
        </div>
        <Flex justifyContent="center">
          <Localized id="restricted-signInWithADifferentAccount">
-            <Button variant="filled" color="primary" onClick={onSignInAs}>
+            <Button
+              variant="regular"
+              color="regular"
+              size="large"
+              onClick={onSignInAs}
+            >
              Sign in with a different account
            </Button>
          </Localized>
        </Flex>
        <Localized id="restricted-contactAdmin">
-          <Typography
-            variant="bodyCopy"
-            align="center"
-            className={styles.contactAdmin}
-          >
+          <div className={cn(styles.copy, styles.contactAdmin)}>
            If you think this is an error, please contact your administrator for
            assistance.
-          </Typography>
+          </div>
        </Localized>
      </HorizontalGutter>
    </AuthBox>
@@ -3,13 +3,17 @@
 exports[`renders correctly 1`] = `
 <AuthBox
  title={
-    <Localized
-      id="restricted-currentlySignedInTo"
+    <div
+      className="Restricted-title"
    >
-      <span>
-        Currently signed in to
-      </span>
-    </Localized>
+      <Localized
+        id="restricted-currentlySignedInTo"
+      >
+        <span>
+          Currently signed in to
+        </span>
+      </Localized>
+    </div>
  }
 >
  <ForwardRef(forwardRef)
@@ -29,13 +33,11 @@ exports[`renders correctly 1`] = `
      <Localized
        id="restricted-noPermissionInfo"
      >
-        <ForwardRef(forwardRef)
-          align="center"
+        <div
          className="Restricted-noPermission"
-          variant="heading3"
        >
          You do not have permission to access this page.
-        </ForwardRef(forwardRef)>
+        </div>
      </Localized>
    </div>
    <div>
@@ -43,13 +45,11 @@ exports[`renders correctly 1`] = `
        Username={<Username />}
        id="restricted-signedInAs"
      >
-        <ForwardRef(forwardRef)
-          align="center"
-          container="div"
-          variant="bodyCopy"
+        <div
+          className="Restricted-copy"
        >
          You are signed in as: &lt;Username&gt;&lt;/Username&gt;
-        </ForwardRef(forwardRef)>
+        </div>
      </Localized>
    </div>
    <ForwardRef(forwardRef)
@@ -59,9 +59,10 @@ exports[`renders correctly 1`] = `
        id="restricted-signInWithADifferentAccount"
      >
        <ForwardRef(forwardRef)
-          color="primary"
+          color="regular"
          onClick={[Function]}
-          variant="filled"
+          size="large"
+          variant="regular"
        >
          Sign in with a different account
        </ForwardRef(forwardRef)>
@@ -70,13 +71,11 @@ exports[`renders correctly 1`] = `
    <Localized
      id="restricted-contactAdmin"
    >
-      <ForwardRef(forwardRef)
-        align="center"
-        className="Restricted-contactAdmin"
-        variant="bodyCopy"
+      <div
+        className="Restricted-copy Restricted-contactAdmin"
      >
        If you think this is an error, please contact your administrator for assistance.
-      </ForwardRef(forwardRef)>
+      </div>
    </Localized>
  </ForwardRef(forwardRef)>
 </AuthBox>
@@ -19,7 +19,7 @@ interface Props {
  viewer: PropTypesOf<typeof UserRole>["viewer"];
  settings: PropTypesOf<typeof UserStatus>["settings"];
  onUsernameClicked?: (userID: string) => void;
-  deletedAt?: string;
+  deletedAt?: string | null;
 }

 const UserRow: FunctionComponent<Props> = ({
@@ -1,8 +1,10 @@
+$configureHeadingBackgroundColor: var(--v2-colors-blue-500);
+
 .root {
 }

 .title {
-  background: var(--v2-palette-configure-heading-background);
+  background: $configureHeadingBackgroundColor;
  width: calc(100% - 2 * var(--v2-spacing-2));
  padding: var(--v2-spacing-2);
 }
@@ -1,6 +1,7 @@
 import { FormApi, FormState } from "final-form";
 import React from "react";

+import { LanguageCode } from "coral-common/helpers/i18n";
 import { CoralContext, withContext } from "coral-framework/lib/bootstrap";
 import { SubmitHookHandler } from "coral-framework/lib/form";
 import { MutationProp, withMutation } from "coral-framework/lib/relay";
@@ -31,7 +32,7 @@ class ConfigureRoute extends React.Component<Props, State> {
    await this.props.updateSettings({ settings: data });
    const localeFieldState = form.getFieldState("locale");
    if (localeFieldState && localeFieldState.dirty) {
-      await this.props.changeLocale(data.locale);
+      await this.props.changeLocale(data.locale as LanguageCode);
    }
    form.initialize(data);
  };
@@ -1,8 +1,11 @@
+$configureHeadingBackgroundColor: var(--v2-colors-blue-500);
+$configureHeadingForegroundColor: var(--v2-colors-pure-white);
+
 .root {
  border-style: none;
  margin: 0;
-  background: var(--v2-palette-configure-heading-background);
-  color: var(--v2-palette-configure-heading-foreground);
+  background: $configureHeadingBackgroundColor;
+  color: $configureHeadingForegroundColor;
  font-size: var(--v2-font-size-3);
  font-weight: var(--v2-font-weight-primary-bold);
  line-height: var(--v2-line-height-reset);
@@ -1,5 +1,7 @@
+$configBoxBorderColor: var(--v2-colors-grey-300);
+
 .root {
  border: 0;
-  border-bottom: 1px solid var(--v2-palette-config-box-border);
+  border-bottom: 1px solid $configBoxBorderColor;
  padding-top: 1px;
 }
@@ -1,5 +1,10 @@
+$sideNavItemColor: var(--v2-colors-mono-100);
+$sideNavBorderColor: var(--v2-colors-grey-300);
+$sideNavIndicatorColor: var(--v2-colors-coral-500);
+$sideNavActiveColor: var(--v2-colors-mono-500);
+
 .link {
-  color: var(--v2-palette-side-nav-item);
+  color: $sideNavItemColor;
  font-family: var(--v2-font-family-primary);
  font-size: var(--v2-font-size-4);
  line-height: var(--v2-line-height-title);
@@ -7,20 +12,20 @@
  display: inline-block;
  padding: var(--v2-spacing-2) var(--v2-spacing-2)
    var(--v2-spacing-2) calc(var(--v2-spacing-3) + 4px);
-  border-left: 1px solid var(--v2-palette-side-nav-border);
+  border-left: 1px solid $sideNavBorderColor;
  text-decoration: none;

  &:hover {
    cursor: pointer;
-    border-left: 2px solid var(--v2-palette-side-nav-indicator);
+    border-left: 2px solid $sideNavIndicatorColor;
    padding-left: calc(var(--v2-spacing-3) + 3px);
-    color: var(--v2-palette-side-nav-active);
+    color: $sideNavActiveColor;
  }
 }

 .linkActive, .linkActive:hover {
-  border-left: 4px solid var(--v2-palette-side-nav-indicator);
+  border-left: 4px solid $sideNavIndicatorColor;
  padding-left: var(--v2-spacing-3);
-  color: var(--v2-palette-side-nav-active);
+  color: $sideNavActiveColor;
  font-weight: var(--v2-font-weight-primary-bold);
 }
@@ -1,6 +1,5 @@
 .root {
  width: calc(31 * var(--mini-unit));
-  padding-top: calc(0.5 * var(--mini-unit));
  padding-right: calc(3 * var(--mini-unit));
  position: sticky;
  top: 0;
@@ -1,6 +1,9 @@
+$configureHeadingForegroundColor: var(--v2-colors-mono-500);
+$configureSubHeadingBorderColor: var(--v2-colors-grey-300);
+
 .root {
-  border-bottom: 1px solid var(--v2-palette-configure-sub-heading-border);
-  color: var(--v2-palette-configure-sub-heading-foreground);
+  border-bottom: 1px solid $configureSubHeadingBorderColor;
+  color: $configureHeadingForegroundColor;
  font-family: var(--v2-font-family-primary);
  font-size: var(--v2-font-size-3);
  font-weight: var(--v2-font-weight-primary-bold);
@@ -26,6 +26,7 @@ graphql`
      scraping {
        enabled
        proxyURL
+        customUserAgent
      }
      disableLazy
    }
@@ -117,6 +118,39 @@ const StoryCreationConfig: FunctionComponent<Props> = ({ disabled }) => (
        )}
      </Field>
    </FormField>
+    <FormField>
+      <FormFieldHeader>
+        <Localized id="configure-advanced-stories-custom-user-agent">
+          <Label htmlFor="configure-advanced-stories-custom-user-agent">
+            Custom Scraper User Agent Header
+          </Label>
+        </Localized>
+        <Localized
+          id="configure-advanced-stories-custom-user-agent-detail"
+          code={<code />}
+        >
+          <HelperText>
+            When specified, overrides the <code>User-Agent</code> header sent
+            with each scrape request.
+          </HelperText>
+        </Localized>
+      </FormFieldHeader>
+      <Field name="stories.scraping.customUserAgent" parse={parseEmptyAsNull}>
+        {({ input, meta }) => (
+          <TextFieldWithValidation
+            {...input}
+            id="configure-advanced-stories-custom-user-agent"
+            disabled={disabled}
+            fullWidth
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            meta={meta}
+          />
+        )}
+      </Field>
+    </FormField>
  </ConfigBox>
 );

@@ -0,0 +1,66 @@
+import { Localized } from "@fluent/react/compat";
+import { DateTime } from "luxon";
+import React, { FunctionComponent, useMemo } from "react";
+
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import {
+  FormField,
+  FormFieldFooter,
+  FormFieldHeader,
+  Label,
+  Textarea,
+} from "coral-ui/components/v2";
+
+interface Props {
+  content: string;
+  createdAt: string;
+  duration: number;
+}
+
+const Announcement: FunctionComponent<Props> = ({
+  content,
+  createdAt,
+  duration,
+}) => {
+  const { locales } = useCoralContext();
+  const formattedDate = useMemo(() => {
+    const disableAt = DateTime.fromISO(createdAt)
+      .plus({ seconds: duration })
+      .toJSDate();
+    return new Intl.DateTimeFormat(locales, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(new Date(disableAt));
+  }, [createdAt, duration]);
+  return (
+    <FormField>
+      <FormFieldHeader>
+        <Localized id="configure-general-announcements-current-label">
+          <Label htmlFor="configure-general-announcements-current-content">
+            Current announcement
+          </Label>
+        </Localized>
+      </FormFieldHeader>
+      <Textarea
+        fullwidth
+        disabled
+        name="configure-general-announcements-current-content"
+        value={content}
+      />
+      <Localized
+        id="configure-general-announcements-current-duration"
+        $timestamp={formattedDate}
+      >
+        <FormFieldFooter>
+          This announcement will automatically end on:{" "}
+          <strong>{formattedDate}</strong>
+        </FormFieldFooter>
+      </Localized>
+    </FormField>
+  );
+};
+
+export default Announcement;
@@ -0,0 +1,2 @@
+.root {
+}
@@ -0,0 +1,121 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useState } from "react";
+
+import {
+  graphql,
+  useMutation,
+  withFragmentContainer,
+} from "coral-framework/lib/relay";
+import {
+  Button,
+  CallOut,
+  FieldSet,
+  FormFieldDescription,
+} from "coral-ui/components/v2";
+
+import { AnnouncementConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AnnouncementConfigContainer_settings.graphql";
+
+import ConfigBox from "../../ConfigBox";
+import Header from "../../Header";
+import Announcement from "./Announcement";
+import AnnouncementFormModal from "./AnnouncementFormModal";
+import CreateAnnouncementMutaiton from "./CreateAnnouncementMutation";
+import DeleteAnnouncementMutaiton from "./DeleteAnnouncementMutation";
+
+interface Props {
+  settings: SettingsData;
+  disabled: boolean;
+}
+
+const AnnouncementConfigContainer: FunctionComponent<Props> = ({
+  settings,
+  disabled,
+}) => {
+  const createAnnouncement = useMutation(CreateAnnouncementMutaiton);
+  const deleteAnnouncement = useMutation(DeleteAnnouncementMutaiton);
+  const [showForm, setShowForm] = useState<boolean>(false);
+  const [submitError, setSubmitError] = useState(null);
+  const onClose = useCallback(() => {
+    setShowForm(false);
+  }, [showForm]);
+  const onCreate = useCallback(values => {
+    try {
+      setSubmitError(null);
+      createAnnouncement(values);
+      setShowForm(false);
+    } catch (error) {
+      setSubmitError(error.message);
+    }
+  }, []);
+  const onDelete = useCallback(() => {
+    try {
+      setSubmitError(null);
+      deleteAnnouncement();
+    } catch (error) {
+      setSubmitError(error.message);
+      setShowForm(false);
+    }
+  }, []);
+  return (
+    <ConfigBox
+      title={
+        <Localized id="configure-general-announcements-title">
+          <Header container={<legend />}>Community announcement</Header>
+        </Localized>
+      }
+      container={<FieldSet />}
+    >
+      <Localized id="configure-general-announcements-description">
+        <FormFieldDescription>
+          Add a temporary announcement that will appear at the top of all of
+          your organization’s comment streams for a specific amount of time.
+        </FormFieldDescription>
+      </Localized>
+      {!settings.announcement && (
+        <Localized id="configure-general-announcements-add">
+          <Button disabled={disabled} onClick={() => setShowForm(true)}>
+            Add announcement
+          </Button>
+        </Localized>
+      )}
+      <AnnouncementFormModal
+        open={!settings.announcement && showForm}
+        onSubmit={onCreate}
+        onClose={onClose}
+      />
+      {submitError && (
+        <CallOut fullWidth color="error">
+          {submitError}
+        </CallOut>
+      )}
+      {settings.announcement && settings.announcement.createdAt && (
+        <>
+          <Announcement
+            content={settings.announcement.content}
+            createdAt={settings.announcement.createdAt}
+            duration={settings.announcement.duration}
+          />
+          <Localized id="configure-general-announcements-delete">
+            <Button color="alert" onClick={onDelete}>
+              Remove announcement
+            </Button>
+          </Localized>
+        </>
+      )}
+    </ConfigBox>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment AnnouncementConfigContainer_settings on Settings {
+      announcement {
+        content
+        duration
+        createdAt
+      }
+    }
+  `,
+})(AnnouncementConfigContainer);
+
+export default enhanced;
@@ -0,0 +1,15 @@
+$announcement-modal-text: var(--v2-colors-mono-500);
+
+.root {
+  min-width: 500px;
+  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
+    var(--v2-spacing-3);
+}
+.title {
+  font-size: var(--v2-font-size-5);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $announcement-modal-text;
+  margin: 0;
+}
@@ -0,0 +1,138 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { Field, Form } from "react-final-form";
+
+import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
+import {
+  composeValidators,
+  required,
+  validateWholeNumberGreaterThan,
+} from "coral-framework/lib/validation";
+import {
+  Button,
+  Card,
+  CardCloseButton,
+  DURATION_UNIT,
+  DurationField,
+  FieldSet,
+  Flex,
+  FormField,
+  FormFieldHeader,
+  HorizontalGutter,
+  Label,
+  Modal,
+  ModalProps,
+  Textarea,
+} from "coral-ui/components/v2";
+
+import ValidationMessage from "../../ValidationMessage";
+
+import styles from "./AnnouncementFormModal.css";
+
+interface Props extends Partial<ModalProps> {
+  onSubmit: (values: any) => void;
+  onClose: () => void;
+}
+
+const AnnouncementForm: FunctionComponent<Props> = ({
+  onSubmit,
+  onClose,
+  ...rest
+}) => {
+  return (
+    <Modal {...rest}>
+      {({ firstFocusableRef }) => (
+        <Card className={styles.root}>
+          <Flex justifyContent="flex-end">
+            <CardCloseButton onClick={onClose} ref={firstFocusableRef} />
+          </Flex>
+          <Form
+            onSubmit={onSubmit}
+            initialValues={{ content: "", duration: 86400 }}
+          >
+            {({ handleSubmit, submitting, submitError }) => (
+              <form
+                autoComplete="off"
+                onSubmit={handleSubmit}
+                id="announcements-form"
+              >
+                <HorizontalGutter spacing={4}>
+                  <HorizontalGutter spacing={3}>
+                    <FormField>
+                      <FormFieldHeader>
+                        <Localized id="configure-general-announcements-title">
+                          <Label htmlFor="configure-general-announcements-content">
+                            Announcement text
+                          </Label>
+                        </Localized>
+                      </FormFieldHeader>
+
+                      <Field
+                        name="content"
+                        parse={parseEmptyAsNull}
+                        validate={required}
+                      >
+                        {({ input, meta }) => (
+                          <>
+                            <Textarea
+                              {...input}
+                              fullwidth
+                              id="configure-general-announcements-content"
+                            />
+                            <ValidationMessage meta={meta} fullWidth />
+                          </>
+                        )}
+                      </Field>
+                    </FormField>
+                    <FormField container={<FieldSet />}>
+                      <Localized id="configure-general-announcements-duration">
+                        <Label component="legend">
+                          Show this announcement for
+                        </Label>
+                      </Localized>
+
+                      <Field
+                        name="duration"
+                        validate={composeValidators(
+                          required,
+                          validateWholeNumberGreaterThan(0)
+                        )}
+                      >
+                        {({ input, meta }) => (
+                          <>
+                            <DurationField
+                              {...input}
+                              units={[
+                                DURATION_UNIT.HOUR,
+                                DURATION_UNIT.DAY,
+                                DURATION_UNIT.WEEK,
+                              ]}
+                              color={colorFromMeta(meta)}
+                            />
+                            <ValidationMessage meta={meta} fullWidth />
+                          </>
+                        )}
+                      </Field>
+                    </FormField>
+                  </HorizontalGutter>
+                  <Flex itemGutter justifyContent="flex-end">
+                    <Localized id="configure-general-announcements-cancel">
+                      <Button color="mono" variant="outline" onClick={onClose}>
+                        Cancel
+                      </Button>
+                    </Localized>
+                    <Localized id="configure-general-announcements-start">
+                      <Button type="submit">Start announcement</Button>
+                    </Localized>
+                  </Flex>
+                </HorizontalGutter>
+              </form>
+            )}
+          </Form>
+        </Card>
+      )}
+    </Modal>
+  );
+};
+
+export default AnnouncementForm;
@@ -0,0 +1,43 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { CreateAnnouncementMutation as MutationTypes } from "coral-admin/__generated__/CreateAnnouncementMutation.graphql";
+
+let clientMutationId = 0;
+
+const CreateAnnouncementMutation = createMutation(
+  "createAnnouncement",
+  (environment: Environment, input: MutationInput<MutationTypes>) =>
+    commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation CreateAnnouncementMutation($input: CreateAnnouncementInput!) {
+          createAnnouncement(input: $input) {
+            settings {
+              announcement {
+                id
+                content
+                createdAt
+                duration
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          content: input.content,
+          duration: input.duration,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    })
+);
+
+export default CreateAnnouncementMutation;
@@ -0,0 +1,38 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { DeleteAnnouncementMutation as MutationTypes } from "coral-admin/__generated__/DeleteAnnouncementMutation.graphql";
+
+let clientMutationId = 0;
+
+const DeleteAnnouncementMutation = createMutation(
+  "deleteAnnouncement",
+  (environment: Environment, input: MutationInput<MutationTypes>) =>
+    commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation DeleteAnnouncementMutation($input: DeleteAnnouncementInput!) {
+          deleteAnnouncement(input: $input) {
+            clientMutationId
+            settings {
+              announcement {
+                content
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        input: {
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    })
+);
+
+export default DeleteAnnouncementMutation;
@@ -0,0 +1,3 @@
+.root {
+  padding-top: var(--v2-spacing-4);
+}
@@ -10,6 +10,7 @@ import { HorizontalGutter } from "coral-ui/components";

 import { GeneralConfigContainer_settings as SettingsData } from "coral-admin/__generated__/GeneralConfigContainer_settings.graphql";

+import AnnouncementConfigContainer from "./AnnouncementConfigContainer";
 import ClosedStreamMessageConfig from "./ClosedStreamMessageConfig";
 import ClosingCommentStreamsConfig from "./ClosingCommentStreamsConfig";
 import CommentEditingConfig from "./CommentEditingConfig";
@@ -20,6 +21,8 @@ import ReactionConfigContainer from "./ReactionConfigContainer";
 import SitewideCommentingConfig from "./SitewideCommentingConfig";
 import StaffConfig from "./StaffConfig";

+import styles from "./GeneralConfigContainer.css";
+
 interface Props {
  submitting: boolean;
  settings: SettingsData;
@@ -32,9 +35,14 @@ const GeneralConfigContainer: React.FunctionComponent<Props> = ({
  const form = useForm();
  useMemo(() => form.initialize(purgeMetadata(settings)), []);
  return (
-    <HorizontalGutter size="double" data-testid="configure-generalContainer">
+    <HorizontalGutter
+      size="double"
+      data-testid="configure-generalContainer"
+      className={styles.root}
+    >
      <LocaleConfig disabled={submitting} />
      <SitewideCommentingConfig disabled={submitting} />
+      <AnnouncementConfigContainer disabled={submitting} settings={settings} />
      <GuidelinesConfig disabled={submitting} />
      <CommentLengthConfig disabled={submitting} />
      <CommentEditingConfig disabled={submitting} />
@@ -49,6 +57,7 @@ const GeneralConfigContainer: React.FunctionComponent<Props> = ({
 const enhanced = withFragmentContainer<Props>({
  settings: graphql`
    fragment GeneralConfigContainer_settings on Settings {
+      ...AnnouncementConfigContainer_settings
      ...LocaleConfig_formValues @relay(mask: false)
      ...GuidelinesConfig_formValues @relay(mask: false)
      ...CommentLengthConfig_formValues @relay(mask: false)
@@ -8,7 +8,7 @@ import {
  required,
  validateEmail,
 } from "coral-framework/lib/validation";
-import { FormField, InputLabel, TextField } from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components/v2";

 interface Props {
  disabled: boolean;
@@ -32,6 +32,7 @@ const EmailField: FunctionComponent<Props> = props => (
            color={colorFromMeta(meta)}
            disabled={props.disabled}
            fullWidth
+            data-testid="email-field"
          />
        </Localized>
        <ValidationMessage meta={meta} fullWidth />
@@ -9,8 +9,13 @@
  margin: 0;
 }
 .text {
-  composes: heading3 from "coral-ui/shared/typography.css";
  position: relative;
  background-color: #f5f5f5;
  padding: 0 var(--mini-unit);
+
+  font-size: var(--v2-font-size-4);
+  font-weight: var(--v2-font-weight-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-title);
+  color: var(--v2-colors-mono-100);
 }
@@ -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 "./HorizontalSeparator.css";

@@ -0,0 +1,17 @@
+.title {
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  color: var(--v2-colors-mono-100);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-title);
+
+  padding-bottom: var(--v2-spacing-3);
+}
+
+.orSeparator {
+  padding-bottom: var(--v2-spacing-5);
+}
+
+.loginButton {
+  padding-bottom: var(--v2-spacing-4);
+}
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";

 import AuthBox from "coral-admin/components/AuthBox";
 import { PropTypesOf } from "coral-framework/types";
-import { CallOut, HorizontalGutter } from "coral-ui/components";
+import { CallOut, HorizontalGutter } from "coral-ui/components/v2";

 import OrSeparator from "./OrSeparator";
 import SignInWithEmailContainer from "./SignInWithEmailContainer";
@@ -12,6 +12,8 @@ import SignInWithGoogleContainer from "./SignInWithGoogleContainer";
 import SignInWithOIDCContainer from "./SignInWithOIDCContainer";
 import Version from "./Version";

+import styles from "./SignIn.css";
+
 interface Props {
  error: string | null;
  emailEnabled?: boolean;
@@ -37,9 +39,11 @@ const SignIn: FunctionComponent<Props> = ({
    <>
      <AuthBox
        title={
-          <Localized id="login-signInTo">
-            <span>Sign in to</span>
-          </Localized>
+          <div className={styles.title}>
+            <Localized id="login-signInTo">
+              <span>Sign in to</span>
+            </Localized>
+          </div>
        }
      >
        <HorizontalGutter size="oneAndAHalf">
@@ -49,11 +53,23 @@ const SignIn: FunctionComponent<Props> = ({
            </CallOut>
          )}
          {emailEnabled && <SignInWithEmailContainer />}
-          {emailEnabled && oneClickIntegrationEnabled && <OrSeparator />}
+          {emailEnabled && oneClickIntegrationEnabled && (
+            <div className={styles.orSeparator}>
+              <OrSeparator />
+            </div>
+          )}
          {oneClickIntegrationEnabled && (
            <HorizontalGutter>
-              {facebookEnabled && <SignInWithFacebookContainer auth={auth} />}
-              {googleEnabled && <SignInWithGoogleContainer auth={auth} />}
+              {facebookEnabled && (
+                <div className={styles.loginButton}>
+                  <SignInWithFacebookContainer auth={auth} />
+                </div>
+              )}
+              {googleEnabled && (
+                <div className={styles.loginButton}>
+                  <SignInWithGoogleContainer auth={auth} />
+                </div>
+              )}
              {oidcEnabled && <SignInWithOIDCContainer auth={auth} />}
            </HorizontalGutter>
          )}
@@ -1,4 +1,20 @@
 .textLink {
-  color: var(--palette-primary-main);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  color: var(--v2-colors-teal-700);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
  text-decoration: underline;
-}
+}
+
+.container {
+  padding-bottom: var(--v2-spacing-5);
+}
+
+.field {
+  padding-bottom: var(--v2-spacing-4);
+}
+
+.field {
+  padding-bottom: var(--v2-spacing-4);
+}
@@ -19,8 +19,7 @@ import {
  FormField,
  HorizontalGutter,
  InputLabel,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";

 import EmailField from "../../EmailField";

@@ -42,36 +41,37 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
    <Form onSubmit={props.onSubmit}>
      {({ handleSubmit, submitting, submitError }) => (
        <form autoComplete="off" onSubmit={handleSubmit}>
-          <HorizontalGutter size="full">
+          <HorizontalGutter size="full" className={styles.container}>
            {submitError && (
              <CallOut color="error" fullWidth>
                {submitError}
              </CallOut>
            )}
-
-            <EmailField disabled={submitting} />
-            <Field name="password" validate={composeValidators(required)}>
-              {({ input, meta }) => (
-                <FormField>
-                  <Localized id="login-signIn-passwordLabel">
-                    <InputLabel htmlFor={input.name}>Password</InputLabel>
-                  </Localized>
-                  <Localized
-                    id="login-signIn-passwordTextField"
-                    attrs={{ placeholder: true }}
-                  >
-                    <PasswordField
-                      {...input}
-                      id={input.name}
-                      placeholder="Password"
-                      color={colorFromMeta(meta)}
-                      disabled={submitting}
-                      fullWidth
-                    />
-                  </Localized>
-                  <ValidationMessage meta={meta} fullWidth />
-                  <Flex justifyContent="flex-end">
-                    <Typography>
+            <div className={styles.field}>
+              <EmailField disabled={submitting} />
+            </div>
+            <div className={styles.field}>
+              <Field name="password" validate={composeValidators(required)}>
+                {({ input, meta }) => (
+                  <FormField>
+                    <Localized id="login-signIn-passwordLabel">
+                      <InputLabel htmlFor={input.name}>Password</InputLabel>
+                    </Localized>
+                    <Localized
+                      id="login-signIn-passwordTextField"
+                      attrs={{ placeholder: true }}
+                    >
+                      <PasswordField
+                        {...input}
+                        id={input.name}
+                        placeholder="Password"
+                        color={colorFromMeta(meta)}
+                        disabled={submitting}
+                        fullWidth
+                      />
+                    </Localized>
+                    <ValidationMessage meta={meta} fullWidth />
+                    <Flex justifyContent="flex-end">
                      <Localized id="login-signIn-forgot-password">
                        <Link
                          className={styles.textLink}
@@ -80,21 +80,20 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
                          Forgot your password?
                        </Link>
                      </Localized>
-                    </Typography>
-                  </Flex>
-                </FormField>
-              )}
-            </Field>
+                    </Flex>
+                  </FormField>
+                )}
+              </Field>
+            </div>
            <Button
-              variant="filled"
-              color="brand"
+              variant="regular"
+              color="regular"
              size="large"
              type="submit"
              disabled={submitting}
              fullWidth
            >
              <ButtonIcon size="md">email</ButtonIcon>
-
              <Localized id="login-signIn-signInWithEmail">
                <span>Sign in with Email</span>
              </Localized>
@@ -1,8 +1,18 @@
-.version {
-  width: 350px;
-  background-color: #f5f5f5;
-  border: 1px solid var(--palette-grey-lighter);
+.container {
+  width: 385px;
+  background-color: var(--v2-colors-grey-100);
+  border: 1px solid var(--v2-colors-grey-300);
  border-top: 0;
-  padding: var(--mini-unit);
+  padding-top: var(--v2-spacing-3);
+  padding-bottom: var(--v2-spacing-3);
+  padding-left: var(--v2-spacing-6);
+  padding-right: var(--v2-spacing-6);
  box-sizing: border-box;
+
+  text-align: center;
+  font-size: var(--v2-font-size-1);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-100);
 }
@@ -1,15 +1,15 @@
 import React, { FunctionComponent } from "react";

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

 import styles from "./Version.css";

 const Version: FunctionComponent = () => {
  return (
-    <Flex justifyContent="center">
-      <Typography className={styles.version} variant="detail" align="center">
+    <Flex justifyContent="center" alignItems="center">
+      <div className={styles.container}>
        {process.env.TALK_VERSION ? `v${process.env.TALK_VERSION}` : "Unknown"}
-      </Typography>
+      </div>
    </Flex>
  );
 };
@@ -4,13 +4,17 @@ exports[`renders correctly 1`] = `
 <React.Fragment>
  <AuthBox
    title={
-      <Localized
-        id="login-signInTo"
+      <div
+        className="SignIn-title"
      >
-        <span>
-          Sign in to
-        </span>
-      </Localized>
+        <Localized
+          id="login-signInTo"
+        >
+          <span>
+            Sign in to
+          </span>
+        </Localized>
+      </div>
    }
  >
    <ForwardRef(forwardRef)
@@ -54,7 +54,10 @@ const ModerationCountsSubscription = createSubscription(
        if (!queueProxy) {
          return;
        }
-        queueProxy.setValue(queueProxy.getValue("count") + change, "count");
+        queueProxy.setValue(
+          (queueProxy.getValue("count") as number) + change,
+          "count"
+        );
      },
    })
 );
@@ -5,11 +5,11 @@ import { SubBarNavigationItem } from "coral-ui/components/v2";

 interface Props {
  children: React.ReactNode;
-  to: string | LocationDescriptor;
+  to: LocationDescriptor;
 }

 const NavigationLink: FunctionComponent<Props> = props => (
-  <Link to={props.to} as={SubBarNavigationItem} activePropName="active">
+  <Link to={props.to} as={SubBarNavigationItem as any} activePropName="active">
    {props.children}
  </Link>
 );
@@ -20,5 +20,8 @@ export default function changeQueueCount(
  if (!queueProxy) {
    return;
  }
-  queueProxy.setValue(queueProxy.getValue("count") + change, "count");
+  queueProxy.setValue(
+    (queueProxy.getValue("count") as number) + change,
+    "count"
+  );
 }
@@ -19,7 +19,9 @@ function handleCommentLeftModerationQueue(
  if (!rootField) {
    return;
  }
-  const commentID = rootField.getLinkedRecord("comment")!.getValue("id")!;
+  const commentID = rootField
+    .getLinkedRecord("comment")!
+    .getValue("id")! as string;
  const commentInStore = store.get(commentID);
  if (commentInStore) {
    // Mark that the status of the comment was live updated.
@@ -25,7 +25,7 @@ const QueueViewNewMutation = createMutation(
        return;
      }
      viewNewEdges.forEach(edge => {
-        ConnectionHandler.insertEdgeBefore(connection, edge);
+        ConnectionHandler.insertEdgeBefore(connection, edge!);
      });
      connection.setLinkedRecords([], "viewNewEdges");
    });
@@ -32,7 +32,7 @@ const SingleModerateSubscription = createSubscription(
        const commentID = store
          .getRootField("commentStatusUpdated")!
          .getLinkedRecord("comment")!
-          .getValue("id")!;
+          .getValue("id")! as string;
        const commentInStore = store.get(commentID);
        if (commentInStore) {
          // Mark that the status of the comment was live updated.
@@ -1,6 +1,8 @@
+$tableBodyDisabledColor: var(--v2-colors-mono-100);
+
 .root {
  font-weight: var(--v2-font-weight-primary-regular);
-  color: var(--v2-palette-table-body-disabled);
+  color: $tableBodyDisabledColor;
 }

 .open {
@@ -1,3 +1,5 @@
+$tableHeaderAltTextColor: var(--v2-colors-mono-100);
+
 .titleColumn {
  width: 50%;
 }
@@ -13,5 +15,5 @@
 .clickToModerate {
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-semi-bold);
-  color: var(--v2-palette-table-header-alt-text);
+  color: $tableHeaderAltTextColor;
 }
@@ -447,7 +447,9 @@ exports[`shows server error 1`] = `
    <div
      className="CallOut-root CallOut-colorError CallOut-fullWidth"
    >
-      <div>
+      <div
+        className="CallOut-inner"
+      >
        server error

 GraphQL request (4:3)
@@ -39,6 +39,7 @@ we require users to create a password.
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
@@ -167,6 +168,7 @@ we require users to create a password.
                      autoComplete="off"
                      autoCorrect="off"
                      className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                      data-testid="password-field"
                      disabled={false}
                      id="password"
                      name="password"
@@ -258,6 +260,7 @@ we require users to create a password.
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
@@ -335,7 +338,9 @@ we require users to create a password.
    <div
      className="CallOut-root CallOut-colorError CallOut-fullWidth"
    >
-      <div>
+      <div
+        className="CallOut-inner"
+      >
        server error

 GraphQL request (4:3)
@@ -371,6 +376,7 @@ GraphQL request (4:3)
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
@@ -457,6 +463,7 @@ we require users to create a password.
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
@@ -262,7 +262,9 @@ exports[`shows server error 1`] = `
    <div
      className="CallOut-root CallOut-colorError CallOut-fullWidth"
    >
-      <div>
+      <div
+        className="CallOut-inner"
+      >
        server error

 GraphQL request (4:3)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Wyatt Johnson	86191e388a	feat: added support for customUserAgent (#2825 )	2020-02-05 16:35:57 +00:00
Wyatt JohnsonandKim Gardner	2bf3e34218	chore: bump 5.5.0 (#2822 ) Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-02-04 15:10:10 -05:00
Vinh	75818cf808	Use absolute graphql url to fix ie11 bug (#2823 ) * fix: use absolute graphql to fix ie11 bug * fix: improved url composition	2020-02-04 19:16:36 +00:00
Tessa Thornton	503eb0b06a	fix styling of icons and text in stream announcement (#2821 )	2020-02-04 12:53:27 -05:00
Wyatt Johnson	9cc3a57295	fix: fixed subheader text color (#2820 )	2020-02-04 17:04:43 +00:00
Wyatt Johnson	e42cb59661	feat: added config variable for perspective timeout (#2817 ) Added a configuration timeout variable for changing the perspective timeout number.	2020-02-04 00:21:14 +00:00
Tessa ThorntonandKim Gardner	a1a8652f7e	[CORL 547] org-wide announcements (#2813 ) * CRUD announcements * only show announcement if not disabled * make announcements dismissable * add announcement mutations * update announcement form logic * style announcements on stream * update snap * localize strings * close form if announcement is removed * move announcement config below sitewide commenting config * move date calculation inside useMemo * move announcementconfig code to announcementconfigcontainer * use coralContext for localStorage * fix type of announcement createdAt * move announcement form to modal * remove payload pruning from configure route * simplify announcement display logic * make validation message full width Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-02-03 13:12:25 -05:00
Wyatt JohnsonandKim Gardner	a7b2af85fc	fix: fixes bug related to migration error (#2816 ) When a user did not have any comments when the migration 1575649180000 hits, they are not migrated to get a `commentCounts` property. This migration finds those users without `commentCounts` and sets them to the empty comment counts. Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-01-30 18:53:34 -05:00
VinhandKim Gardner	516611e289	fix: set access token only once (#2815 ) Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-01-30 18:37:26 -05:00
Tessa Thornton	190010c898	change marker variant for suspect word badge (#2814 )	2020-01-30 18:23:42 -05:00
Vinh	2b1c9aea78	[CORL-832] IE11 Compatibility for the Embed Stream (#2801 ) * IE11 support * fix: types and tests * chore+fix: optimise polyfills and bugfixes for ie11 * chore+fix: fix docz, radically cleanup babel configs * fix: ie11 proxy bug * feat: normalize rte html * fix: css issues in ie11 * chore: improve bundle size * chore: upgrade coral rte * feat: make counts work in ie11 * fix: remove native password reveal in ie11 * fix: markdowneditor icons in ie11 * fix: ie11 brittleness in auth popup * fix: callout width in ie11 * test: fix snapshots	2020-01-29 17:42:32 -05:00
Felix DandKim Gardner	9c4a9753bb	New language swedish (#2798 ) * Adding Swedish translation * updated snap file for Swedish translation * Translated sv/auth.ftl and partially translated install.ftl and errors.ftl to swedish * Translated server/error completly and removed the swedish translation file install * Fixed merge conflict with Finnish language that was added before this PR was completed * Fixed wrong semi colon and white space Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-01-28 15:51:22 -05:00
Dan Zajdband	e43a3ddf75	Spanish translation fixes (#2812 )	2020-01-28 10:58:20 -05:00
jpkilpi	6364eced63	Finnish translation (#2811 ) * Initial Finnish translation * Added Finnish translation to test configuration	2020-01-23 12:45:23 -05:00
DzarrandKim Gardner	62ce3a2c49	Translations of server locales in french (#2807 ) Co-authored-by: Kim Gardner <kgardnr@gmail.com>	2020-01-21 17:22:25 -05:00
Nick Funk	48d815aebb	Refactor v2 css variable names into post css variables (#2791 ) We don't want to clog up the variables list with every design token from AirTable. Instead, more efficient to use Post CSS var's that compile down into the CSS bundle more efficiently. CORL-748	2020-01-20 21:09:10 +00:00
Nick Funk	38ccbd0ef8	Show new message when no comments and story closed (#2792 ) Show "There are no comments on this story." instead of "There are no comments yet. Why don't you write one?" CORL-787	2020-01-20 20:56:54 +00:00
Nick Funk	cfebe7733e	Fix radio button positioning on Firefox (#2805 ) Remove the top: 6px since it's unnecessary to vertically align the dot in the radio button. CORL-873	2020-01-20 18:27:44 +00:00
Nick FunkandWyatt Johnson	e7b83c6b39	[CORL-875] Semi-bold selected text on radio buttons (#2804 ) * Semi-bold selected text on radio buttons Makes it very obvious which item is selected. CORL-875 * fix: updated snapshots Co-authored-by: Wyatt Johnson <accounts+github@wyattjoh.ca>	2020-01-20 18:13:11 +00:00
Nick Funk	5c46884a97	Change load amounts for comments (#2800 ) Load 20 comments initially and on load more. Load 3 replies initially and on load more. CORL-864	2020-01-20 17:54:34 +00:00
Nick Funk	4bd929f3f0	[CORL-748] Update admin login to match new branding styles (#2788 ) * Update admin login to match new branding styles CORL-748 * Update admin login to match new branding styles CORL-748	2020-01-20 17:43:40 +00:00
Nick FunkandWyatt Johnson	785735d36a	[CORL-874] Align the sidebar and config content in Admin>Configure (#2803 ) * Align the sidebar and config content in Admin>Configure CORL-874 * fix: updated snapshots Co-authored-by: Wyatt Johnson <accounts+github@wyattjoh.ca>	2020-01-20 17:27:37 +00:00
Wyatt Johnson	20da16331e	fix: renamed migration file to ms format (#2802 )	2020-01-17 18:59:50 +00:00
Wyatt Johnson	a95694dff6	[CORL-867] Version SSL Bypass (#2797 ) * fix: move /api/version outside SSL wrap * chore: bump version	2020-01-15 23:22:37 +00:00