[CORL-560] Update Admin > Config area to match new designs (#2514)

* Add solid background to Moderate > Config area headers CORL-560 * Update Config > General section text and font weight CORL-560 * Update ordering of Config > Moderation page items CORL-560 * Update text and font weights in Configure > Moderation page CORL-560 * Update text and font weight on Configure > Organization page CORL-560 * Update text and font weight on Configure > Banned and Suspect Words page CORL-560 * Update text and font weight on Configure > Authentication page CORL-560 * Update text and font weights on Configure > Email page CORL-560 * Update text and font weights on Configure > Advanced page CORL-560 * Repair tests around the styling changes made to the moderation config area CORL-560 * Fix capitalization on the Config > General page CORL-560 * Make email checkbox light themed so its text shows up on new headers CORL-560 * Update Header width to account for padding Prevents it from sticking out over the edge of the page layout CORL-560 * Align "Sort by" text to the drop down in Admin > Config > General > Reactions CORL-560 * Update Admin > Config > General snapshot to adjust for vertical aligned text Vertical flex aligned the "Sort by" text to a combo box in a previous changed CORL-560 * Rename "Perspective Toxic Comment Filter" header to "Toxic Comment Filter" CORL-560 * Use overlay scrolling if available to prevent scroll bar width popping CORL-560 * Remove overflow-y: overlay CORL-560 * Rename Akismet Spam Detection to Spam Detection CORL-560 * Make all non-complex text fields full width in Admin > Config CORL-560 * Remove Authentication Integrations header Area underneath was empty CORL-560 * Re-arrange SSO Key Field layout CORL-560 * Create new typography types for bodyShort and fieldDescription CORL-560 * Update Admin > Config to use bodyShort, fieldDescription typography CORL-560 * Add a slight padding on InputLabel CORL-560 * Add padding on either side of Admin > Config section content CORL-560
2026-08-01 13:00:55 +08:00 · 2019-09-06 12:29:27 -06:00
parent d2af78d3d7
commit aa8e1e2d7a
71 changed files with 3861 additions and 3575 deletions
@@ -24,7 +24,7 @@ we require users to create a password.
        Password
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        Must be at least 8 characters
      </p>
@@ -151,7 +151,7 @@ we require users to create a password.
                  Password
                </label>
                <p
-                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
                >
                  Must be at least 8 characters
                </p>
@@ -241,7 +241,7 @@ we require users to create a password.
        Password
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        Must be at least 8 characters
      </p>
@@ -353,7 +353,7 @@ GraphQL request (4:3)
        Password
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        Must be at least 8 characters
      </p>
@@ -438,7 +438,7 @@ we require users to create a password.
        Password
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        Must be at least 8 characters
      </p>
@@ -23,7 +23,7 @@ exports[`checks for invalid username 1`] = `
        Username
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
@@ -127,7 +127,7 @@ exports[`renders createUsername view 1`] = `
                  Username
                </label>
                <p
-                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
                >
                  You may use “_” and “.” Spaces not permitted.
                </p>
@@ -194,7 +194,7 @@ exports[`shows error when submitting empty form 1`] = `
        Username
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
@@ -283,7 +283,7 @@ GraphQL request (4:3)
        Username
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
@@ -345,7 +345,7 @@ exports[`successfully sets username 1`] = `
        Username
      </label>
      <p
-        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
@@ -122,21 +122,24 @@ exports[`renders configure advanced 1`] = `
            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
          >
            <legend
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
            >
-              Embed Code
+              Embed code
            </legend>
-            <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+            <div
+              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
            >
-              Copy and paste the code below into your CMS to embed Coral comment streams in
+              <p
+                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              >
+                Copy and paste the code below into your CMS to embed Coral comment streams in
 each of your site’s stories.
-            </p>
-            <textarea
-              className="EmbedCode-textArea"
-              readOnly={true}
-              rows={22}
-              value="<div id=\\"coral_thread\\"></div>
+              </p>
+              <textarea
+                className="EmbedCode-textArea"
+                readOnly={true}
+                rows={22}
+                value="<div id=\\"coral_thread\\"></div>
 <script type=\\"text/javascript\\">
  (function() {
      var d = document, s = d.createElement('script');
@@ -158,26 +161,27 @@ each of your site’s stories.
      (d.head || d.body).appendChild(s);
  })();
 </script>"
-            />
-            <div
-              className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-                data-color="primary"
-                data-variant="filled"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
+              />
+              <div
+                className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
              >
-                <span>
-                  Copy
-                </span>
-              </button>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+                  data-color="primary"
+                  data-variant="filled"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Copy
+                  </span>
+                </button>
+              </div>
            </div>
          </fieldset>
          <div
@@ -187,35 +191,39 @@ each of your site’s stories.
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <label
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
                htmlFor="configure-advanced-customCSSURL"
              >
                Custom CSS
              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-              >
-                URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.
-              </p>
              <div
-                className="TextField-root TextField-fullWidth"
+                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
              >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-advanced-customCSSURL"
-                  name="customCSSURL"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value=""
-                />
+                <p
+                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                >
+                  URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.
+                </p>
+                <div
+                  className="TextField-root TextField-fullWidth"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="TextField-input TextField-colorRegular"
+                    disabled={false}
+                    id="configure-advanced-customCSSURL"
+                    name="customCSSURL"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="text"
+                    value=""
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -226,64 +234,68 @@ each of your site’s stories.
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <label
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
                htmlFor="configure-advanced-liveUpdates"
              >
-                Comment Stream Live Updates
+                Comment stream live updates
              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+              <div
+                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
              >
-                When enabled, there will be real-time loading and updating of comments as new comments and replies are published
-              </p>
-              <div>
-                <div
-                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                <p
+                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
                >
-                  <input
-                    checked={true}
-                    className="RadioButton-input"
-                    disabled={false}
-                    id="live.enabled-true"
-                    name="live.enabled"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    type="radio"
-                    value={true}
-                  />
-                  <label
-                    className="RadioButton-label"
-                    htmlFor="live.enabled-true"
+                  When enabled, there will be real-time loading and updating of comments as new comments and replies are published
+                </p>
+                <div>
+                  <div
+                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                  >
-                    <span>
-                      On
-                    </span>
-                  </label>
-                </div>
-                <div
-                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                >
-                  <input
-                    checked={false}
-                    className="RadioButton-input"
-                    disabled={false}
-                    id="live.enabled-false"
-                    name="live.enabled"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    type="radio"
-                    value={false}
-                  />
-                  <label
-                    className="RadioButton-label"
-                    htmlFor="live.enabled-false"
+                    <input
+                      checked={true}
+                      className="RadioButton-input"
+                      disabled={false}
+                      id="live.enabled-true"
+                      name="live.enabled"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      type="radio"
+                      value={true}
+                    />
+                    <label
+                      className="RadioButton-label"
+                      htmlFor="live.enabled-true"
+                    >
+                      <span>
+                        On
+                      </span>
+                    </label>
+                  </div>
+                  <div
+                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                  >
-                    <span>
-                      Off
-                    </span>
-                  </label>
+                    <input
+                      checked={false}
+                      className="RadioButton-input"
+                      disabled={false}
+                      id="live.enabled-false"
+                      name="live.enabled"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      type="radio"
+                      value={false}
+                    />
+                    <label
+                      className="RadioButton-label"
+                      htmlFor="live.enabled-false"
+                    >
+                      <span>
+                        Off
+                      </span>
+                    </label>
+                  </div>
                </div>
              </div>
            </div>
@@ -295,37 +307,41 @@ each of your site’s stories.
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <label
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
                htmlFor="configure-advanced-allowedDomains"
              >
-                Permitted Domains
+                Permitted domains
              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+              <div
+                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
              >
-                Domains where your Coral instance is allowed to be embedded
+                <p
+                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                >
+                  Domains where your Coral instance is allowed to be embedded
 including the scheme (ex. http://localhost:3000, https://staging.domain.com,
 https://domain.com).
-              </p>
-              <div
-                className="TextField-root TextField-fullWidth"
-              >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-advanced-allowedDomains"
-                  name="allowedDomains"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value="http://localhost:8080"
-                />
+                </p>
+                <div
+                  className="TextField-root TextField-fullWidth"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="TextField-input TextField-colorRegular"
+                    disabled={false}
+                    id="configure-advanced-allowedDomains"
+                    name="allowedDomains"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="text"
+                    value="http://localhost:8080"
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -336,7 +352,7 @@ https://domain.com).
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <h1
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
              >
                Story creation
              </h1>
@@ -125,35 +125,39 @@ exports[`renders configure organization 1`] = `
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <label
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
                htmlFor="configure-organization-organization.name"
              >
-                Organization Name
+                Organization name
              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-              >
-                Your organization name will appear on emails sent by Coral to your community and organization members.
-              </p>
              <div
-                className="TextField-root TextField-fullWidth"
+                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
              >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-organization-organization.name"
-                  name="organization.name"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value="Coral"
-                />
+                <p
+                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                >
+                  Your organization name will appear on emails sent by Coral to your community and organization members.
+                </p>
+                <div
+                  className="TextField-root TextField-fullWidth"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="TextField-input TextField-colorRegular"
+                    disabled={false}
+                    id="configure-organization-organization.name"
+                    name="organization.name"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="text"
+                    value="Coral"
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -164,38 +168,42 @@ exports[`renders configure organization 1`] = `
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <label
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
                htmlFor="configure-organization-organization.contactEmail"
              >
-                Organization Email
+                Organization email
              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+              <div
+                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
              >
-                This email address will be used as in emails and across
+                <p
+                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                >
+                  This email address will be used as in emails and across
 the platform for community members to get in touch with
 the organization should they have any questions about the
 status of their accounts or moderation questions.
-              </p>
-              <div
-                className="TextField-root TextField-fullWidth"
-              >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-organization-organization.contactEmail"
-                  name="organization.contactEmail"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value="coral@test.com"
-                />
+                </p>
+                <div
+                  className="TextField-root TextField-fullWidth"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="TextField-input TextField-colorRegular"
+                    disabled={false}
+                    id="configure-organization-organization.contactEmail"
+                    name="organization.contactEmail"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="text"
+                    value="coral@test.com"
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -206,35 +214,39 @@ status of their accounts or moderation questions.
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <label
-                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
                htmlFor="configure-organization-organization.url"
              >
                Organization URL
              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-              >
-                Your organization url will appear on emails sent by Coral to your community and organization members.
-              </p>
              <div
-                className="TextField-root TextField-fullWidth"
+                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
              >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-organization-organization.url"
-                  name="organization.url"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value="https://test.com/"
-                />
+                <p
+                  className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+                >
+                  Your organization url will appear on emails sent by Coral to your community and organization members.
+                </p>
+                <div
+                  className="TextField-root TextField-fullWidth"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="TextField-input TextField-colorRegular"
+                    disabled={false}
+                    id="configure-organization-organization.url"
+                    name="organization.url"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="text"
+                    value="https://test.com/"
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -122,58 +122,62 @@ exports[`renders configure wordList 1`] = `
            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
          >
            <h1
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
            >
-              Banned Words and Phrases
+              Banned words and phrases
            </h1>
-            <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-            >
-              Comments containing a word or phrase in the banned words list are 
-              <strong>
-                automatically rejected and are not published
-              </strong>
-              .
-            </p>
            <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
            >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="configure-wordlist-banned"
-              >
-                Banned Word List
-              </label>
              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
              >
-                Separate banned words or phrases with a new line. Attempting to copy
-and paste a comma separated list? 
-                <a
-                  className="ExternalLink-root"
-                  href="#"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Learn how to convert your list
-to a new line separated list.
-                </a>
+                Comments containing a word or phrase in the banned words list are 
+                <strong>
+                  automatically rejected and are not published
+                </strong>
+                .
              </p>
-              <div>
-                <textarea
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="BannedWordListConfig-textArea WordListTextArea-textArea"
-                  disabled={false}
-                  id="configure-wordlist-banned"
-                  name="wordList.banned"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  spellCheck={false}
-                  value="fuck"
-                />
+              <div
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              >
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="configure-wordlist-banned"
+                >
+                  Banned word list
+                </label>
+                <p
+                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                >
+                  Separate banned words or phrases with a new line. Attempting to copy
+and paste a comma separated list? 
+                  <a
+                    className="ExternalLink-root"
+                    href="#"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Learn how to convert your list
+to a new line separated list.
+                  </a>
+                </p>
+                <div>
+                  <textarea
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="BannedWordListConfig-textArea WordListTextArea-textArea"
+                    disabled={false}
+                    id="configure-wordlist-banned"
+                    name="wordList.banned"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    spellCheck={false}
+                    value="fuck"
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -181,60 +185,64 @@ to a new line separated list.
            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
          >
            <h1
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
            >
-              Suspect Words and Phrases
+              Suspect words and phrases
            </h1>
-            <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-            >
-              Comments containing a word or phrase in the Suspect Words List
-are 
-              <strong>
-                placed into the Reported Queue for moderator review and are
-published (if comments are not pre-moderated).
-              </strong>
-            </p>
            <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
            >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="configure-wordlist-suspect"
-              >
-                Suspect Word List
-              </label>
              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
              >
-                Separate suspect words or phrases with a new line. Attempting to copy
-and paste a comma separated list? 
-                <a
-                  className="ExternalLink-root"
-                  href="#"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Learn how to convert your list
-to a new line separated list.
-                </a>
+                Comments containing a word or phrase in the Suspect Words List
+are 
+                <strong>
+                  placed into the Reported Queue for moderator review and are
+published (if comments are not pre-moderated).
+                </strong>
              </p>
-              <div>
-                <textarea
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="SuspectWordListConfig-textArea WordListTextArea-textArea"
-                  disabled={false}
-                  id="configure-wordlist-suspect"
-                  name="wordList.suspect"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  spellCheck={false}
-                  value="idiot
+              <div
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              >
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="configure-wordlist-suspect"
+                >
+                  Suspect word list
+                </label>
+                <p
+                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                >
+                  Separate suspect words or phrases with a new line. Attempting to copy
+and paste a comma separated list? 
+                  <a
+                    className="ExternalLink-root"
+                    href="#"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Learn how to convert your list
+to a new line separated list.
+                  </a>
+                </p>
+                <div>
+                  <textarea
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="SuspectWordListConfig-textArea WordListTextArea-textArea"
+                    disabled={false}
+                    id="configure-wordlist-suspect"
+                    name="wordList.suspect"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    spellCheck={false}
+                    value="idiot
 stupid"
-                />
+                  />
+                </div>
              </div>
            </div>
          </div>
@@ -187,7 +187,7 @@ it("change permitted domains to be empty", async () => {
  });

  const permittedDomainsField = within(advancedContainer).getByLabelText(
-    "Permitted Domains"
+    "Permitted domains"
  );

  // Let's change the permitted domains.
@@ -234,7 +234,7 @@ it("change permitted domains to include more domains", async () => {
  });

  const permittedDomainsField = within(advancedContainer).getByLabelText(
-    "Permitted Domains"
+    "Permitted domains"
  );

  // Let's change the permitted domains.
@@ -130,7 +130,7 @@ it("change site wide commenting", async () => {
  });

  const sitewideCommentingContainer = within(generalContainer).getAllByText(
-    "Sitewide Commenting",
+    "Sitewide commenting",
    { selector: "fieldset" }
  )[0];

@@ -138,7 +138,7 @@ it("change site wide commenting", async () => {
    "Off - Comment streams closed for new comments"
  );
  const contentField = within(sitewideCommentingContainer).getByLabelText(
-    "Sitewide Closed Comments Message"
+    "Sitewide closed comments message"
  );

  // Let's enable it.
@@ -191,13 +191,13 @@ it("change community guidlines", async () => {
  });

  const guidelinesContainer = within(generalContainer).getAllByText(
-    "Community Guidelines Summary",
+    "Community guidelines summary",
    { selector: "fieldset" }
  )[0];

  const onField = within(guidelinesContainer).getByLabelText("On");
  const contentField = within(guidelinesContainer).getByLabelText(
-    "Community Guidelines Summary"
+    "Community guidelines summary"
  );

  // Let's enable it.
@@ -244,7 +244,7 @@ it("change closed stream message", async () => {
  } = await createTestRenderer({ resolvers });

  const contentField = within(generalContainer).getByLabelText(
-    "Closed Stream Message"
+    "Closed comment stream message"
  );

  // Let's change the content.
@@ -284,7 +284,7 @@ it("change comment editing time", async () => {
  } = await createTestRenderer({ resolvers });

  const durationFieldset = within(generalContainer).getByText(
-    "Comment Edit Timeframe",
+    "Comment edit timeframe",
    { selector: "fieldset" }
  );
  const valueField = within(durationFieldset).getByLabelText("value");
@@ -353,15 +353,15 @@ it("change comment length limitations", async () => {
  });

  const commentLengthContainer = within(generalContainer).getByText(
-    "Comment Length",
+    "Comment length",
    { selector: "fieldset" }
  );
  const onField = within(commentLengthContainer).getByLabelText("On");
  const minField = within(commentLengthContainer).getByLabelText(
-    "Minimum Comment Length"
+    "Minimum comment length"
  );
  const maxField = within(commentLengthContainer).getByLabelText(
-    "Maximum Comment Length"
+    "Maximum comment length"
  );

  // Let's turn on and set some invalid values.
@@ -439,12 +439,12 @@ it("change closing comment streams", async () => {
  } = await createTestRenderer({ resolvers });

  const closingCommentStreamsContainer = within(generalContainer).getByText(
-    "Closing Comment Streams",
+    "Closing comment streams",
    { selector: "fieldset" }
  );
  const onField = within(closingCommentStreamsContainer).getByLabelText("On");
  const durationFieldset = within(closingCommentStreamsContainer).getByText(
-    "Close Comments After",
+    "Close comments after",
    { selector: "fieldset" }
  );
  const valueField = within(durationFieldset).getByLabelText("value");
@@ -503,7 +503,7 @@ it("handle server error", async () => {
  });

  const contentField = within(generalContainer).getByLabelText(
-    "Closed Stream Message"
+    "Closed comment stream message"
  );

  // Let's change the content.
@@ -177,13 +177,12 @@ it("change akismet settings", async () => {
    saveChangesButton,
  } = await createTestRenderer({ resolvers });

-  const akismetContainer = within(moderationContainer).getByText(
-    "Akismet Spam Detection Filter",
-    { selector: "fieldset" }
+  const akismetContainer = within(moderationContainer).getByTestID(
+    "akismet-config"
  );

  const onField = within(akismetContainer).getByLabelText("On");
-  const keyField = within(akismetContainer).getByLabelText("API Key");
+  const keyField = within(akismetContainer).getByLabelText("API key");
  const siteField = within(akismetContainer).getByLabelText("Site URL");

  // Let's turn it on.
@@ -260,19 +259,18 @@ it("change perspective settings", async () => {
    saveChangesButton,
  } = await createTestRenderer({ resolvers });

-  const perspectiveContainer = within(moderationContainer).getByText(
-    "Perspective Toxic Comment Filter",
-    { selector: "fieldset" }
+  const perspectiveContainer = within(moderationContainer).getByTestID(
+    "perspective-container"
  );

  const onField = within(perspectiveContainer).getByLabelText("On");
  const allowField = within(perspectiveContainer).getByLabelText("Allow");
-  const keyField = within(perspectiveContainer).getByLabelText("API Key");
+  const keyField = within(perspectiveContainer).getByLabelText("API key");
  const thresholdField = within(perspectiveContainer).getByLabelText(
-    "Toxicity Threshold"
+    "Toxicity threshold"
  );
  const endpointField = within(perspectiveContainer).getByLabelText(
-    "Custom Endpoint"
+    "Custom endpoint"
  );

  // Let's turn it on.
@@ -80,7 +80,7 @@ it("change organization name", async () => {
  } = await createTestRenderer({ resolvers });

  const organizationNameField = within(organizationContainer).getByLabelText(
-    "Organization Name"
+    "Organization name"
  );

  // Let's change some organization name.
@@ -140,7 +140,7 @@ it("change organization contact email", async () => {
  } = await createTestRenderer({ resolvers });

  const organizationEmailField = within(organizationContainer).getByLabelText(
-    "Organization Email"
+    "Organization email"
  );

  // Let's change some organization name.
@@ -83,10 +83,10 @@ it("change banned and suspect words", async () => {
  });

  const bannedField = within(wordListContainer).getByLabelText(
-    "Banned Word List"
+    "Banned word list"
  );
  const suspectField = within(wordListContainer).getByLabelText(
-    "Suspect Word List"
+    "Suspect word list"
  );

  // Let's change the wordlist contents.
@@ -119,7 +119,7 @@ exports[`renders form 1`] = `
              Username
            </label>
            <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+              className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
            >
              You may use “_” and “.”
            </p>
@@ -150,7 +150,7 @@ exports[`renders form 1`] = `
              Password
            </label>
            <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+              className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
            >
              Must be at least 8 characters
            </p>