Update configure checkboxes to new branding

CORL-903

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);
 }

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,41 +36,42 @@ 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}
           />
           <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>

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;

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>

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);
 }

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;