From 7a373ac57f0f74bcf367a8dec4b5a5834bf78302 Mon Sep 17 00:00:00 2001
From: nick-funk <nick.funk@outlook.com>
Date: Tue, 21 Apr 2020 15:40:24 -0600
Subject: [PATCH] Update configure checkboxes to new branding

CORL-903
---
 .../ConfigureStream/ConfigureStream.css       |  17 ++-
 .../ConfigureStream/ConfigureStream.tsx       |  66 +++++------
 .../ConfigureStream/ToggleConfig.css          |   8 ++
 .../ConfigureStream/ToggleConfig.tsx          |   8 +-
 .../WidthLimitedDescription.css               |   9 +-
 .../WidthLimitedDescription.tsx               |   8 +-
 .../renderConfigure.spec.tsx.snap             | 112 +++++++++---------
 .../configure/streamConfiguration.spec.tsx    |   2 +-
 src/locales/en-US/stream.ftl                  |   3 +-
 9 files changed, 126 insertions(+), 107 deletions(-)

diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.css b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.css
index 0d8f16aeb1..dd60e4e4c0 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.css
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.css
@@ -1,3 +1,18 @@
 .heading {
-  padding-bottom: calc(2 * var(--mini-unit));
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-4);
+  line-height: var(--v2-line-height-5);
+
+  color: var(--v2-colors-mono-500);
+
+  margin-bottom: var(--v2-spacing-3);
+}
+
+.liveUpdates {
+  margin-bottom: var(--v2-spacing-4);
+}
+
+.footer {
+  margin-bottom: var(--v2-spacing-6);
 }
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx
index dad2fda882..e1f6d9a9cd 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx
@@ -6,13 +6,8 @@ import { Form } from "react-final-form";
 import { purgeMetadata } from "coral-framework/lib/relay";
 import { PropTypesOf } from "coral-framework/types";
 import CLASSES from "coral-stream/classes";
-import {
-  Button,
-  CallOut,
-  Flex,
-  HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";
+import { Button, CallOut } from "coral-ui/components/v3";
 
 import { LiveUpdatesConfigContainer } from "./LiveUpdatesConfig";
 import MessageBoxConfigContainer from "./MessageBoxConfig";
@@ -41,33 +36,10 @@ const ConfigureStream: FunctionComponent<Props> = ({
         onSubmit={handleSubmit}
         id="configure-form"
       >
-        <Flex justifyContent="space-between" alignItems="flex-start" itemGutter>
-          <Localized id="configure-stream-title-configureThisStream">
-            <Typography variant="heading2" className={styles.heading}>
-              Configure this Stream
-            </Typography>
-          </Localized>
-          <Localized id="configure-stream-apply">
-            <Button
-              className={CLASSES.configureCommentStream.applyButton}
-              color="success"
-              variant="filled"
-              type="submit"
-              disabled={submitting || pristine}
-            >
-              Apply
-            </Button>
-          </Localized>
-        </Flex>
-        <HorizontalGutter size="double">
-          {submitError && (
-            <CallOut
-              className={CLASSES.configureCommentStream.errorMessage}
-              color="error"
-            >
-              {submitError}
-            </CallOut>
-          )}
+        <Localized id="configure-stream-title-configureThisStream">
+          <div className={styles.heading}>Configure this Stream</div>
+        </Localized>
+        <div className={styles.liveUpdates}>
           <LiveUpdatesConfigContainer
             storySettings={storySettings}
             disabled={submitting}
@@ -75,7 +47,31 @@ const ConfigureStream: FunctionComponent<Props> = ({
           <PremodConfigContainer disabled={submitting} />
           <PremodLinksConfigContainer disabled={submitting} />
           <MessageBoxConfigContainer disabled={submitting} />
-        </HorizontalGutter>
+        </div>
+        <Localized id="configure-stream-update">
+          <Button
+            className={CLASSES.configureCommentStream.applyButton}
+            color="secondary"
+            variant="filled"
+            type="submit"
+            disabled={submitting || pristine}
+            upperCase
+            data-testid="configure-stream-apply"
+          >
+            Update
+          </Button>
+        </Localized>
+        <div className={styles.footer}>
+          {submitError && (
+            <CallOut
+              className={CLASSES.configureCommentStream.errorMessage}
+              color="negative"
+              icon={<Icon size="sm">error</Icon>}
+              titleWeight="semiBold"
+              title={submitError}
+            />
+          )}
+        </div>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.css b/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.css
index d67258ca6c..8b4a443c3d 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.css
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.css
@@ -1,3 +1,11 @@
+.title {
+  font-family: var(--v2-font-family-primary);
+  font-style: normal;
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: 1.15rem;
+  }
+
 .details {
   margin-top: 2.5px;
   margin-left: 25px;
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.tsx
index 848ecd72a3..736aed8284 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.tsx
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/ToggleConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { CheckBox, Typography } from "coral-ui/components";
+import { CheckBox } from "coral-ui/components/v2";
 
 import styles from "./ToggleConfig.css";
 
@@ -14,10 +14,8 @@ const ToggleConfig: FunctionComponent<Props> = (props) => {
   const { title, children, ...rest } = props;
   return (
     <div>
-      <CheckBox {...rest}>
-        <Typography variant="heading3" container="span">
-          {title}
-        </Typography>
+      <CheckBox {...rest} variant="streamBlue">
+        <div className={styles.title}>{title}</div>
       </CheckBox>
       {children && <div className={styles.details}>{children}</div>}
     </div>
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.css b/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.css
index b190ba289f..5f8f25031c 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.css
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.css
@@ -1,3 +1,10 @@
 .root {
-  max-width: 350px;
+  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-heigh-4);
+
+  color: var(--v2-colors-mono-100);
+
+  margin-bottom: var(--v2-spacing-3);
 }
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.tsx
index d860d9193a..83cecd7450 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.tsx
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/WidthLimitedDescription.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { CheckBox, Typography } from "coral-ui/components";
+import { CheckBox } from "coral-ui/components/v2";
 
 import styles from "./WidthLimitedDescription.css";
 
@@ -10,11 +10,7 @@ export interface Props extends Omit<PropTypesOf<typeof CheckBox>, "children"> {
 }
 
 const WidthLimitedDescription: FunctionComponent<Props> = (props) => {
-  return (
-    <Typography variant="detail" color="textSecondary" className={styles.root}>
-      {props.children}
-    </Typography>
-  );
+  return <div className={styles.root}>{props.children}</div>;
 };
 
 export default WidthLimitedDescription;
diff --git a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
index 57408f1996..2783f88d71 100644
--- a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
+++ b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
@@ -76,38 +76,20 @@ exports[`renders configure 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifySpaceBetween Flex-alignFlexStart gutter"
+          className="ConfigureStream-heading"
         >
-          <h1
-            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary ConfigureStream-heading"
-          >
-            Configure this Stream
-          </h1>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled coral coral-configureCommentStream-applyButton"
-            data-color="success"
-            data-variant="filled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Apply
-          </button>
+          Configure this Stream
         </div>
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-double"
+          className="ConfigureStream-liveUpdates"
         >
           <div>
             <div
-              className="CheckBox-root"
+              className="CheckBox-root CheckBox-streamBlue"
             >
               <input
                 checked={true}
-                className="CheckBox-input"
+                className="CheckBox-input CheckBox-streamBlue"
                 disabled={false}
                 id="live.enabled"
                 name="live.enabled"
@@ -118,42 +100,42 @@ exports[`renders configure 1`] = `
                 value={true}
               />
               <label
-                className="CheckBox-label"
+                className="CheckBox-label CheckBox-streamBlue"
                 htmlFor="live.enabled"
               >
                 <span
                   className="CheckBox-labelSpan"
                 >
-                  <span
-                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                  <div
+                    className="ToggleConfig-title"
                   >
                     <span>
                       Enable Live Updates for this Story
                     </span>
-                  </span>
+                  </div>
                 </span>
               </label>
             </div>
             <div
               className="ToggleConfig-details"
             >
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+              <div
+                className="WidthLimitedDescription-root"
               >
                 When enabled, the comments will be updated instantly
 as new comments and replies are submitted, instead of
 requiring a page refresh. You can disable this in the
 unusual situation of an article getting so much traffic that the comments are loading slowly.
-              </p>
+              </div>
             </div>
           </div>
           <div>
             <div
-              className="CheckBox-root"
+              className="CheckBox-root CheckBox-streamBlue"
             >
               <input
                 checked={false}
-                className="CheckBox-input"
+                className="CheckBox-input CheckBox-streamBlue"
                 disabled={false}
                 id="moderation"
                 name="moderation"
@@ -164,39 +146,39 @@ unusual situation of an article getting so much traffic that the comments are lo
                 value={false}
               />
               <label
-                className="CheckBox-label"
+                className="CheckBox-label CheckBox-streamBlue"
                 htmlFor="moderation"
               >
                 <span
                   className="CheckBox-labelSpan"
                 >
-                  <span
-                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                  <div
+                    className="ToggleConfig-title"
                   >
                     <span>
                       Enable Pre-Moderation
                     </span>
-                  </span>
+                  </div>
                 </span>
               </label>
             </div>
             <div
               className="ToggleConfig-details"
             >
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+              <div
+                className="WidthLimitedDescription-root"
               >
                 Moderators must approve any comment before it is published to this story.
-              </p>
+              </div>
             </div>
           </div>
           <div>
             <div
-              className="CheckBox-root"
+              className="CheckBox-root CheckBox-streamBlue"
             >
               <input
                 checked={false}
-                className="CheckBox-input"
+                className="CheckBox-input CheckBox-streamBlue"
                 disabled={false}
                 id="premodLinksEnable"
                 name="premodLinksEnable"
@@ -207,39 +189,39 @@ unusual situation of an article getting so much traffic that the comments are lo
                 value={false}
               />
               <label
-                className="CheckBox-label"
+                className="CheckBox-label CheckBox-streamBlue"
                 htmlFor="premodLinksEnable"
               >
                 <span
                   className="CheckBox-labelSpan"
                 >
-                  <span
-                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                  <div
+                    className="ToggleConfig-title"
                   >
                     <span>
                       Pre-Moderate Comments Containing Links
                     </span>
-                  </span>
+                  </div>
                 </span>
               </label>
             </div>
             <div
               className="ToggleConfig-details"
             >
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+              <div
+                className="WidthLimitedDescription-root"
               >
                 Moderators must approve any comment that contains a link before it is published to this story.
-              </p>
+              </div>
             </div>
           </div>
           <div>
             <div
-              className="CheckBox-root coral coral-configureMessageBox"
+              className="CheckBox-root CheckBox-streamBlue coral coral-configureMessageBox"
             >
               <input
                 checked={false}
-                className="CheckBox-input"
+                className="CheckBox-input CheckBox-streamBlue"
                 disabled={false}
                 id="messageBox.enabled"
                 name="messageBox.enabled"
@@ -250,19 +232,19 @@ unusual situation of an article getting so much traffic that the comments are lo
                 value={false}
               />
               <label
-                className="CheckBox-label"
+                className="CheckBox-label CheckBox-streamBlue"
                 htmlFor="messageBox.enabled"
               >
                 <span
                   className="CheckBox-labelSpan"
                 >
-                  <span
-                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                  <div
+                    className="ToggleConfig-title"
                   >
                     <span>
                       Enable Message Box for this Story
                     </span>
-                  </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -272,17 +254,33 @@ unusual situation of an article getting so much traffic that the comments are lo
               <div
                 className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
-                <p
-                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+                <div
+                  className="WidthLimitedDescription-root"
                 >
                   Add a message to the top of the comment box for your readers.
 Use this to suggest a discussion topic, ask a question or make
 announcements relating to the comments on this story.
-                </p>
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <button
+          className="BaseButton-root Button-base Button-filled Button-textSizeSmall Button-marginSizeSmall Button-colorSecondary Button-disabled Button-upperCase coral coral-configureCommentStream-applyButton"
+          data-testid="configure-stream-apply"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Update
+        </button>
+        <div
+          className="ConfigureStream-footer"
+        />
       </form>
       <hr
         className="HorizontalRule-root"
diff --git a/src/core/client/stream/test/configure/streamConfiguration.spec.tsx b/src/core/client/stream/test/configure/streamConfiguration.spec.tsx
index 914639eb9e..c55ff8038e 100644
--- a/src/core/client/stream/test/configure/streamConfiguration.spec.tsx
+++ b/src/core/client/stream/test/configure/streamConfiguration.spec.tsx
@@ -55,7 +55,7 @@ const createTestRenderer = async (
     const tabPane = await waitForElement(() =>
       within(testRenderer.root).getByTestID("current-tab-pane")
     );
-    const applyButton = within(tabPane).getByText("Apply");
+    const applyButton = within(tabPane).getByTestID("configure-stream-apply");
     const form = findParentWithType(applyButton, "form")!;
 
     return { testRenderer, tabPane, applyButton, form };
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 0dca9aca5a..16ae3993f2 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -482,7 +482,8 @@ profile-changeUsername-close = Close
 configure-stream-title = Configure this Comment Stream
 configure-stream-title-configureThisStream =
   Configure this Stream
-configure-stream-apply = Apply
+configure-stream-apply =
+configure-stream-update = Update
 
 configure-premod-title = Enable Pre-Moderation
 configure-premod-description =