@@ -679,12 +679,12 @@ exports[`shows error when submitting empty form 1`] = `
-
Password
-
+
@@ -800,12 +800,12 @@ exports[`shows server error 1`] = `
-
Email Address
-
+
@@ -831,12 +831,12 @@ exports[`shows server error 1`] = `
-
Password
-
+
diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
index 4930417c1..9dab380b1 100644
--- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
@@ -90,7 +90,7 @@ exports[`renders community 1`] = `
>
@@ -1386,7 +1396,7 @@ each other's comments.
className="SelectField-root"
>
diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts
index 89a96d162..952ad0455 100644
--- a/src/core/client/admin/test/fixtures.ts
+++ b/src/core/client/admin/test/fixtures.ts
@@ -643,6 +643,7 @@ export const baseComment = createFixture({
COMMENT_DETECTED_BANNED_WORD: 0,
COMMENT_DETECTED_SUSPECT_WORD: 0,
COMMENT_REPORTED_OFFENSIVE: 0,
+ COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_REPORTED_SPAM: 0,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_REPEAT_POST: 0,
diff --git a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
index 90364cbf7..c48115cc3 100644
--- a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+++ b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
@@ -87,7 +87,7 @@ exports[`renders empty stories 1`] = `
>
= (props) => (
{...input}
id={input.name}
placeholder="Confirm Email Address"
- color={colorFromMeta(meta)}
+ color={streamColorFromMeta(meta)}
disabled={props.disabled}
fullWidth
/>
- = (props) => (
id={input.name}
placeholder="Email Address"
type="email"
- color={colorFromMeta(meta)}
+ color={streamColorFromMeta(meta)}
disabled={props.disabled}
fullWidth
/>
- = ({
diff --git a/src/core/client/auth/components/OrSeparator.css b/src/core/client/auth/components/OrSeparator.css
new file mode 100644
index 000000000..51de23a03
--- /dev/null
+++ b/src/core/client/auth/components/OrSeparator.css
@@ -0,0 +1,14 @@
+.or {
+ font-family: var(--v2-font-family-secondary);
+ font-style: normal;
+ font-weight: var(--v2-font-weight-secondary-bold);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-top: var(--v2-spacing-3);
+ margin-bottom: var(--v2-spacing-3);
+
+ text-align: center;
+}
diff --git a/src/core/client/auth/components/OrSeparator.tsx b/src/core/client/auth/components/OrSeparator.tsx
index 60b006d6f..d40fc4856 100644
--- a/src/core/client/auth/components/OrSeparator.tsx
+++ b/src/core/client/auth/components/OrSeparator.tsx
@@ -1,11 +1,14 @@
import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
import React, { FunctionComponent } from "react";
-import HorizontalSeparator from "./HorizontalSeparator";
+import styles from "./OrSeparator.css";
+
+import CLASSES from "coral-stream/classes";
const OrSeparator: FunctionComponent = () => (
- Or
+ Or
);
diff --git a/src/core/client/auth/components/SetPasswordField.css b/src/core/client/auth/components/SetPasswordField.css
new file mode 100644
index 000000000..020897566
--- /dev/null
+++ b/src/core/client/auth/components/SetPasswordField.css
@@ -0,0 +1,8 @@
+.description {
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-family-primary-regular);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-4);
+
+ color: var(--v2-colors-mono-100);
+}
diff --git a/src/core/client/auth/components/SetPasswordField.tsx b/src/core/client/auth/components/SetPasswordField.tsx
index f40558ffe..c397774c1 100644
--- a/src/core/client/auth/components/SetPasswordField.tsx
+++ b/src/core/client/auth/components/SetPasswordField.tsx
@@ -2,18 +2,16 @@ import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
-import { PasswordField } from "coral-framework/components";
-import {
- colorFromMeta,
- parseString,
- ValidationMessage,
-} from "coral-framework/lib/form";
+import { parseString, streamColorFromMeta } from "coral-framework/lib/form";
import {
composeValidators,
required,
validatePassword,
} from "coral-framework/lib/validation";
-import { FormField, InputDescription, InputLabel } from "coral-ui/components";
+import { FormField, InputLabel, PasswordField } from "coral-ui/components/v2";
+import { ValidationMessage } from "coral-ui/components/v3";
+
+import styles from "./SetPasswordField.css";
interface Props {
disabled: boolean;
@@ -31,21 +29,21 @@ const SetPasswordField: FunctionComponent = (props) => (
Password
-
+
{"Must be at least {$minLength} characters"}
-
+
- = (props) => (
Username
- You may use “_” and “.”
+ You may use “_” and “.”
-
-
- For your added security, we require users to add an email address to their accounts.
+ For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
-
-
+
+
-
-
-
- done
-
-
-
-
- Receive updates regarding any changes to your account
+ done
+
+
+
+
+ Receive updates regarding any changes to your account
(email address, username, password, etc.)
-
-
-
+
+
+
-
-
- done
-
+ done
+
+
+
+
+ Allow you to download your comments.
-
-
- Allow you to download your comments.
-
-
-
-
+
+
+
-
-
- done
-
+ done
+
+
+
+
+ Send comment notifications that you have chosen to receive.
-
-
- Send comment notifications that you have chosen to receive.
-
-
-
-
+
+
+
+
+
- Confirm Email Address
+ Confirm email address
-
- warning
-
-
- This field is required.
-
+
+ error
+
+
+ This field is required.
+
+
+
- Add Email Address
+ Add email address
@@ -171,90 +181,90 @@ exports[`checks for invalid email 1`] = `
onSubmit={[Function]}
>
-
- For your added security, we require users to add an email address to their accounts.
+ For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
-
-
+
- Create Username
+ Create username
@@ -82,51 +88,51 @@ exports[`renders createUsername view 1`] = `
data-testid="createUsername-container"
>
-
+
+ Create a username
+
- Create Username
+ Create username
@@ -167,27 +175,27 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
+ Your username is an identifier that will appear on all of your comments.
+
+
-
- Your username is an identifier that will appear on all of your comments.
-
Username
-
You may use “_” and “.” Spaces not permitted.
-
+
@@ -205,23 +213,29 @@ exports[`shows error when submitting empty form 1`] = `
/>
-
- warning
-
-
- This field is required.
-
+
+ error
+
+
+ This field is required.
+
+
- Create Username
+ Create username
@@ -242,47 +256,72 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
+ Your username is an identifier that will appear on all of your comments.
+
+
-
- Your username is an identifier that will appear on all of your comments.
-
- server error
+
+
+ error
+
+
+
+
+ server error
GraphQL request:4:3
3 | ) {
4 | setUsername(input: $input) {
| ^
5 | user {
+
+
+
+
Username
-
You may use “_” and “.” Spaces not permitted.
-
+
+
+
- Create Username
+ Create username
@@ -319,32 +360,32 @@ exports[`successfully sets username 1`] = `
onSubmit={[Function]}
>
+ Your username is an identifier that will appear on all of your comments.
+
+
-
- Your username is an identifier that will appear on all of your comments.
-
Username
-
You may use “_” and “.” Spaces not permitted.
-
+
+
- Create Username
+ Create username
diff --git a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
index 76f7fa9c8..18343a17c 100644
--- a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
@@ -7,80 +7,88 @@ exports[`renders forgot password view 1`] = `
data-testid="forgotPassword-container"
>
-
-
-
+ Go back to sign in page
+
+
diff --git a/src/core/client/auth/test/__snapshots__/linkAccount.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/linkAccount.spec.tsx.snap
index 84fe111b0..1c3f30bcb 100644
--- a/src/core/client/auth/test/__snapshots__/linkAccount.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/linkAccount.spec.tsx.snap
@@ -7,133 +7,122 @@ exports[`renders link account view 1`] = `
data-testid="linkAccount-container"
>
-
`;
@@ -301,174 +330,193 @@ exports[`renders sign in view 1`] = `
data-testid="signIn-container"
>
-
-
+
- Sign In
-
-
+
to join the conversation
-
-
+
+
-
+
+
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 2ba8a8d6e..07f71519d 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -5,240 +5,256 @@ exports[`auth configuration renders all auth enabled 1`] = `
className="Main-root"
data-testid="signUp-main"
>
-
`;
@@ -249,68 +265,78 @@ exports[`auth configuration renders only some social login enabled 1`] = `
data-testid="signUp-main"
>
-
Sign up with Facebook
-
-
+
+
+
Sign up with Google
-
-
+
`;
@@ -322,195 +348,211 @@ exports[`renders sign up form 1`] = `
data-testid="signUp-container"
>
-
-
+
- Sign Up
-
-
+
to join the conversation
-
-
+
+
-
+
+
diff --git a/src/core/client/auth/test/addEmailAddress.spec.tsx b/src/core/client/auth/test/addEmailAddress.spec.tsx
index 6538ce7a4..1ae525610 100644
--- a/src/core/client/auth/test/addEmailAddress.spec.tsx
+++ b/src/core/client/auth/test/addEmailAddress.spec.tsx
@@ -46,9 +46,9 @@ async function createTestRenderer(
);
const main = within(testRenderer.root).getByTestID(/.*-main/);
const form = within(main).getByType("form");
- const emailAddressField = within(form).getByLabelText("Email Address");
+ const emailAddressField = within(form).getByLabelText("Email address");
const confirmEmailAddressField = within(form).getByLabelText(
- "Confirm Email Address"
+ "Confirm email address"
);
return {
diff --git a/src/core/client/auth/test/forgotPassword.spec.tsx b/src/core/client/auth/test/forgotPassword.spec.tsx
index a9c2173de..65b9ad7ab 100644
--- a/src/core/client/auth/test/forgotPassword.spec.tsx
+++ b/src/core/client/auth/test/forgotPassword.spec.tsx
@@ -41,7 +41,7 @@ async function createTestRenderer(
);
const main = within(testRenderer.root).getByTestID(/.*-main/);
const form = within(main).queryByType("form")!;
- const emailField = within(form).getByLabelText("Email Address");
+ const emailField = within(form).getByLabelText("Email address");
return {
context,
diff --git a/src/core/client/auth/test/navigation.spec.tsx b/src/core/client/auth/test/navigation.spec.tsx
index cef8880b8..59b0b07b2 100644
--- a/src/core/client/auth/test/navigation.spec.tsx
+++ b/src/core/client/auth/test/navigation.spec.tsx
@@ -37,7 +37,7 @@ it("navigates to sign up form", async () => {
const container = await waitForElement(() =>
within(testRenderer.root).getByTestID("signIn-container")
);
- act(() => within(container).getByText("Sign Up").props.onClick({}));
+ act(() => within(container).getByText("Sign up").props.onClick({}));
await waitForElement(() =>
within(testRenderer.root).getByTestID("signUp-container")
);
@@ -48,7 +48,7 @@ it("navigates to sign in form", async () => {
const container = await waitForElement(() =>
within(testRenderer.root).getByTestID("signUp-container")
);
- act(() => within(container).getByText("Sign In").props.onClick({}));
+ act(() => within(container).getByText("Sign in").props.onClick({}));
await waitForElement(() =>
within(testRenderer.root).getByTestID("signIn-container")
);
diff --git a/src/core/client/auth/test/signIn.spec.tsx b/src/core/client/auth/test/signIn.spec.tsx
index da73fe3a9..713461f22 100644
--- a/src/core/client/auth/test/signIn.spec.tsx
+++ b/src/core/client/auth/test/signIn.spec.tsx
@@ -66,10 +66,10 @@ it("renders sign in view with error", async () => {
const { testRenderer, container } = await createTestRenderer({}, error);
within(container).getByText(error);
act(() => {
- within(testRenderer.root).getByText("Sign Up").props.onClick({});
+ within(testRenderer.root).getByText("Sign up").props.onClick({});
});
act(() => {
- within(testRenderer.root).getByText("Sign In").props.onClick({});
+ within(testRenderer.root).getByText("Sign in").props.onClick({});
});
const container2 = await waitForElement(() =>
within(testRenderer.root).getByTestID("signIn-container")
@@ -90,7 +90,7 @@ it("shows error when submitting empty form", async () => {
it("checks for invalid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "invalid-email" } });
});
@@ -105,7 +105,7 @@ it("checks for invalid email", async () => {
it("accepts valid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "hans@test.com" } });
});
@@ -122,7 +122,7 @@ it("accepts valid email", async () => {
it("shows server error", async () => {
const { form, main, context } = await createTestRenderer();
const { getByLabelText } = within(form!);
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
(i) => i.type === "button" && i.props.type === "submit"
@@ -167,7 +167,7 @@ it("submits form successfully", async () => {
const { form, context } = await createTestRenderer();
const { getByLabelText } = within(form!);
const accessToken = createAccessToken();
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
(i) => i.type === "button" && i.props.type === "submit"
diff --git a/src/core/client/auth/test/signUp.spec.tsx b/src/core/client/auth/test/signUp.spec.tsx
index b88cfffe7..c258d8322 100644
--- a/src/core/client/auth/test/signUp.spec.tsx
+++ b/src/core/client/auth/test/signUp.spec.tsx
@@ -67,7 +67,7 @@ it("shows error when submitting empty form", async () => {
it("checks for invalid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "invalid-email" } });
});
@@ -82,7 +82,7 @@ it("checks for invalid email", async () => {
it("accepts valid email", async () => {
const { container, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
act(() => {
emailAddressField.props.onChange({ target: { value: "hans@test.com" } });
});
@@ -196,7 +196,7 @@ it("accepts correct password", async () => {
it("shows server error", async () => {
const { context, main, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
const usernameField = getByLabelText("Username");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
@@ -246,7 +246,7 @@ it("submits form successfully", async () => {
const { context, form } = await createTestRenderer();
const { getByLabelText } = within(form!);
const accessToken = createAccessToken();
- const emailAddressField = getByLabelText("Email Address");
+ const emailAddressField = getByLabelText("Email address");
const usernameField = getByLabelText("Username");
const passwordField = getByLabelText("Password");
const submitButton = form!.find(
diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css
new file mode 100644
index 000000000..34e32274b
--- /dev/null
+++ b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css
@@ -0,0 +1,58 @@
+.bar {
+ background-color: var(--v2-colors-grey-600);
+ padding: var(--v2-spacing-4);
+
+ text-align: center;
+}
+
+.title {
+ font-family: var(--v2-font-family-secondary);
+ font-weight: var(--v2-font-weight-secondary-bold);
+ font-size: var(--v2-font-size-6);
+ line-height: var(--v2-line-height-9);
+
+ color: var(--v2-colors-pure-white);
+}
+
+.header {
+ font-family: var(--v2-font-family-secondary);
+ font-weight: var(--v2-font-weight-secondary-bold);
+ font-size: var(--v2-font-size-4);
+ line-height: var(--v2-line-height-6);
+
+ color: var(--v2-colors-pure-white);
+}
+
+.description {
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-regular);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-5);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-bottom: var(--v2-spacing-4);
+}
+
+.error {
+ margin-bottom: var(--v2-spacing-4);
+}
+
+.strong {
+ display: inline;
+
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-bold);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-5);
+
+ color: var(--v2-colors-mono-500);
+}
+
+.field {
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.actions {
+ padding-top: var(--v2-spacing-2);
+}
diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
index 8cb73f90b..428e84ce2 100644
--- a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
+++ b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
@@ -1,9 +1,9 @@
import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Form } from "react-final-form";
-import { Bar, Title } from "coral-auth/components//Header";
import ConfirmEmailField from "coral-auth/components/ConfirmEmailField";
import EmailField from "coral-auth/components/EmailField";
import Main from "coral-auth/components/Main";
@@ -15,17 +15,15 @@ import {
import { InvalidRequestError } from "coral-framework/lib/errors";
import { FormError, OnSubmit } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
-import {
- Button,
- CallOut,
- HorizontalGutter,
- Icon,
- Typography,
-} from "coral-ui/components";
+import CLASSES from "coral-stream/classes";
+import { Icon } from "coral-ui/components/v2";
+import { Button, CallOut } from "coral-ui/components/v3";
import SetEmailMutation from "./SetEmailMutation";
import { ListItem, UnorderedList } from "./UnorderedList";
+import styles from "./AddEmailAddress.css";
+
interface FormProps {
email: string;
}
@@ -59,60 +57,72 @@ const AddEmailAddressContainer: FunctionComponent = () => {
return (
-
+
-
-
+
+
)}
diff --git a/src/core/client/auth/views/CreatePassword/CreatePassword.css b/src/core/client/auth/views/CreatePassword/CreatePassword.css
new file mode 100644
index 000000000..27e49887b
--- /dev/null
+++ b/src/core/client/auth/views/CreatePassword/CreatePassword.css
@@ -0,0 +1,38 @@
+.bar {
+ background-color: var(--v2-colors-grey-600);
+ padding: var(--v2-spacing-4);
+
+ text-align: center;
+}
+
+.title {
+ font-family: var(--v2-font-family-secondary);
+ font-weight: var(--v2-font-weight-secondary-bold);
+ font-size: var(--v2-font-size-6);
+ line-height: var(--v2-line-height-9);
+
+ color: var(--v2-colors-pure-white);
+}
+
+.description {
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-regular);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-5);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-bottom: var(--v2-spacing-4);
+}
+
+.error {
+ margin-bottom: var(--v2-spacing-4);
+}
+
+.field {
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.actions {
+ padding-top: var(--v2-spacing-2);
+}
diff --git a/src/core/client/auth/views/CreatePassword/CreatePassword.tsx b/src/core/client/auth/views/CreatePassword/CreatePassword.tsx
index 58c7780b5..76415ebb4 100644
--- a/src/core/client/auth/views/CreatePassword/CreatePassword.tsx
+++ b/src/core/client/auth/views/CreatePassword/CreatePassword.tsx
@@ -1,23 +1,22 @@
import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
import { FORM_ERROR } from "final-form";
import React, { FunctionComponent, useCallback } from "react";
import { Form } from "react-final-form";
-import { Bar, Title } from "coral-auth/components//Header";
import Main from "coral-auth/components/Main";
import SetPasswordField from "coral-auth/components/SetPasswordField";
import useResizePopup from "coral-auth/hooks/useResizePopup";
import { FormError, OnSubmit } from "coral-framework/lib/form";
import { useMutation } from "coral-framework/lib/relay";
-import {
- Button,
- CallOut,
- HorizontalGutter,
- Typography,
-} from "coral-ui/components";
+import CLASSES from "coral-stream/classes";
+import { Icon } from "coral-ui/components/v2";
+import { Button, CallOut } from "coral-ui/components/v3";
import SetPasswordMutation from "./SetPasswordMutation";
+import styles from "./CreatePassword.css";
+
interface FormProps {
password: string;
}
@@ -41,33 +40,44 @@ const CreatePasswordContainer: FunctionComponent = () => {
return (
-
-
+
+
+
+ }
+ >
+
+ Don't have an account?
+
Sign Up
-
-
+
+
-
+
-
- Server Error
-
-
-
+ className="coral coral-login-error"
+ color="negative"
+ title="Server Error"
+ />
+
+
@@ -154,37 +209,51 @@ exports[`renders without email login 1`] = `
- }
- title={
}
+
-
-
- Sign In
-
-
- to join the conversation
-
-
-
+
+ }
+ title={
+
+ }
+ >
+
+
+ Sign In
+
+
+ to join the conversation
+
+
+
+
-
-
-
+
+
;
signInHref: string;
@@ -44,40 +43,74 @@ const SignUp: FunctionComponent = ({
facebookEnabled || googleEnabled || oidcEnabled;
return (
- }
- subtitle={
}
- >
-
- Sign Up
- to join the conversation
-
-
+
+ }
+ subtitle={
}
+ >
+
+
Sign Up
+
+ to join the conversation
+
+
+
+
{emailEnabled && (
-
+
}
+ textlink={
+
+ }
>
-
+
Already have an account?{" "}
-
+
Sign In
-
-
+
+
-
+
)}
-
- {emailEnabled &&
- {facebookEnabled &&
+ {emailEnabled &&
+ {facebookEnabled &&
= (props) => {
)}
diff --git a/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap b/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap
index f2a4822dc..3bd06dae2 100644
--- a/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap
+++ b/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap
@@ -4,69 +4,96 @@ exports[`renders correctly 1`] = `
- }
- title={
}
+
-
-
- Sign Up
-
-
- to join the conversation
-
-
-
-
}
>
-
+
+ Sign Up
+
+
+ to join the conversation
+
+
+
+
+
+ }
+ >
+
Already have an account?
-
Sign In
-
-
+
+
-
+
-
-
-
+
+
@@ -76,37 +103,51 @@ exports[`renders without email sign up 1`] = `
- }
- title={
}
+
-
-
- Sign Up
-
-
- to join the conversation
-
-
-
+
+ }
+ title={
+
+ }
+ >
+
+
+ Sign Up
+
+
+ to join the conversation
+
+
+
+
-
-
-
+
+
, "ref"> {
text: string;
+ inner?: React.ReactNode;
+ innerCopied?: React.ReactNode;
}
-interface State {
- copied: boolean;
-}
+const CopyButton: FunctionComponent = ({
+ text,
+ color,
+ size,
+ inner,
+ innerCopied,
+ ...rest
+}) => {
+ let timeout: any = null;
+ const [copied, setCopied] = useState(false);
-class CopyButton extends React.Component {
- private timeout: any = null;
+ // clear time out when we de-scope
+ useEffect(() => {
+ return function cleanup() {
+ clearTimeout(timeout);
+ };
+ }, [timeout]);
- public state: State = {
- copied: false,
- };
+ const timeoutCallback = useCallback(() => {
+ setCopied(false);
+ }, [setCopied]);
- public componentWillUnmount() {
- clearTimeout(this.timeout);
- }
+ const handleCopy = useCallback(() => {
+ setCopied(true);
+ clearTimeout(timeout);
+ timeout = setTimeout(timeoutCallback, 500);
+ }, [timeout, setCopied]);
- private handleCopy = () => {
- this.setCopied(true);
- clearTimeout(this.timeout);
- this.timeout = setTimeout(() => {
- this.setCopied(false);
- }, 500);
- };
+ const copyBody = useMemo(() => {
+ if (inner) {
+ return inner;
+ }
- private setCopied = (b: boolean) => {
- this.setState({
- copied: b,
- });
- };
-
- public render() {
- const { text, color, size, ...rest } = this.props;
- const { copied } = this.state;
return (
-
-
- {copied ? (
-
- Copied!
-
- ) : (
-
- Copy
-
- )}
-
-
+
+ Copy
+
);
- }
-}
+ }, [inner]);
+ const copiedBody = useMemo(() => {
+ if (innerCopied) {
+ return innerCopied;
+ }
+
+ return (
+
+ Copied!
+
+ );
+ }, [innerCopied]);
+
+ return (
+
+
+ {copied ? copiedBody : copyBody}
+
+
+ );
+};
export default CopyButton;
diff --git a/src/core/client/framework/components/FacebookButton.css b/src/core/client/framework/components/FacebookButton.css
index 53e1f7b0c..2f6a66d26 100644
--- a/src/core/client/framework/components/FacebookButton.css
+++ b/src/core/client/framework/components/FacebookButton.css
@@ -1,14 +1,33 @@
-.variantRegular {
- &:not(.disabled) {
- &.colorRegular {
- background-color: #3b5998;
- &.mouseHover {
- background-color: #4467b0;
- }
- &:active,
- &.active {
- background-color: #6583c3;
- }
- }
+.icon {
+ margin-right: var(--v2-spacing-2);
+
+ height: 1rem;
+ overflow: hidden;
+}
+
+.button {
+ border-style: solid;
+ border-width: 1px;
+
+ color: var(--v2-colors-pure-white);
+
+ &:not(.disabled),
+ &:not(:disabled) {
+ background-color: #3B5998;
+ border-color: #3B5998;
+ }
+
+ &:hover, &.mouseHover {
+ background-color: #4467b0;
+ border-color: #4467b0;
+ }
+ &:active, &.active {
+ background-color: #6583c3;
+ border-color: #6583c3;
+ }
+ &.disabled {
+ color: var(--v2-colors-grey-400);
+ background-color: var(--v2-colors-grey-200);
+ border-color: var(--v2-colors-grey-200);
}
}
diff --git a/src/core/client/framework/components/FacebookButton.tsx b/src/core/client/framework/components/FacebookButton.tsx
index 2d537392a..5185d5c52 100644
--- a/src/core/client/framework/components/FacebookButton.tsx
+++ b/src/core/client/framework/components/FacebookButton.tsx
@@ -1,13 +1,17 @@
+import cn from "classnames";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
-import { Button } from "coral-ui/components/v2";
+import CLASSES from "coral-stream/classes";
+import { Flex } from "coral-ui/components/v2";
+import { Button } from "coral-ui/components/v3";
import styles from "./FacebookButton.css";
interface Props {
onClick: PropTypesOf["onClick"];
children: React.ReactNode;
+ className?: string;
}
const facebookIcon = (
@@ -27,14 +31,19 @@ const facebookIcon = (
const FacebookButton: FunctionComponent = (props) => (
- {facebookIcon}
- {props.children}
+
+ {facebookIcon}
+ {props.children}
+
);
diff --git a/src/core/client/framework/components/GoogleButton.css b/src/core/client/framework/components/GoogleButton.css
index 299796b5a..b34e64098 100644
--- a/src/core/client/framework/components/GoogleButton.css
+++ b/src/core/client/framework/components/GoogleButton.css
@@ -1,14 +1,34 @@
-.variantRegular {
- &:not(.disabled) {
- &.colorRegular {
- background-color: #db4437;
- &.mouseHover {
- background-color: #e05f54;
- }
- &:active,
- &.active {
- background-color: #e57a71;
- }
- }
+.icon {
+ margin-right: var(--v2-spacing-2);
+
+ height: 1rem;
+ overflow: hidden;
+}
+
+.button {
+ border-style: solid;
+ border-width: 1px;
+
+ color: var(--v2-colors-pure-white);
+
+ &:not(.disabled),
+ &:not(:disabled) {
+ background-color: #db4437;
+ border-color: #db4437;
+ }
+
+ &:hover, &.mouseHover {
+ background-color: #e05f54;
+ border-color: #e05f54;
+ }
+ &:active, &.active {
+ background-color: #e57a71;
+ border-color: #e57a71;
+ }
+ &.disabled {
+ color: var(--v2-colors-grey-400);
+ background-color: var(--v2-colors-grey-200);
+ border-color: var(--v2-colors-grey-200);
}
}
+
diff --git a/src/core/client/framework/components/GoogleButton.tsx b/src/core/client/framework/components/GoogleButton.tsx
index c8af2ea66..00d418e14 100644
--- a/src/core/client/framework/components/GoogleButton.tsx
+++ b/src/core/client/framework/components/GoogleButton.tsx
@@ -1,7 +1,10 @@
+import cn from "classnames";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
-import { Button } from "coral-ui/components/v2";
+import CLASSES from "coral-stream/classes";
+import { Flex } from "coral-ui/components/v2";
+import { Button } from "coral-ui/components/v3";
import styles from "./GoogleButton.css";
@@ -12,8 +15,8 @@ interface Props {
const googleIcon = (
= (props) => (
- {googleIcon}
- {props.children}
+
+ {googleIcon}
+ {props.children}
+
);
diff --git a/src/core/client/framework/components/Markdown.css b/src/core/client/framework/components/Markdown.css
index 44869f50c..f8f6762de 100644
--- a/src/core/client/framework/components/Markdown.css
+++ b/src/core/client/framework/components/Markdown.css
@@ -1,8 +1,14 @@
.root {
- @mixin bodyCopy;
+ font-size: var(--v2-font-size-3);
+ font-weight: var(--v2-font-weight-primary-regular);
+ font-family: var(--v2-font-family-primary);
+ line-height: 1.375rem;
+
+ color: var(--v2-colors-mono-500);
+
b,
strong {
- font-weight: var(--font-weight-medium);
+ font-weight: var(--v2-font-weight-primary-bold);
}
h1 {
@mixin heading1;
@@ -19,6 +25,7 @@
h5 {
@mixin heading5;
}
+
*:first-child {
margin-top: 0;
}
@@ -30,7 +37,7 @@
padding: var(--mini-unit);
margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
var(--mini-unit);
- border-radius: var(--round-corners);
+ border-radius: var(--v2-round-corners);
&::after {
content: none;
}
diff --git a/src/core/client/framework/components/OIDCButton.css b/src/core/client/framework/components/OIDCButton.css
index fad5363f2..810b94aae 100644
--- a/src/core/client/framework/components/OIDCButton.css
+++ b/src/core/client/framework/components/OIDCButton.css
@@ -1,14 +1,26 @@
-.variantRegular {
- &:not(.disabled) {
- &.colorRegular {
- background-color: #0d5b8f;
- &.mouseHover {
- background-color: #106fae;
- }
- &:active,
- &.active {
- background-color: #1383cd;
- }
- }
+.button {
+ border-style: solid;
+ border-width: 1px;
+
+ color: var(--v2-colors-pure-white);
+
+ &:not(.disabled),
+ &:not(:disabled) {
+ background-color: var(--v2-colors-grey-500);
+ border-color: var(--v2-colors-grey-500);
+ }
+
+ &:hover, &.mouseHover {
+ background-color: var(--v2-colors-grey-400);
+ border-color: var(--v2-colors-grey-400);
+ }
+ &:active, &.active {
+ background-color: var(--v2-colors-grey-300);
+ border-color: var(--v2-colors-grey-300);
+ }
+ &.disabled {
+ color: var(--v2-colors-grey-400);
+ background-color: var(--v2-colors-grey-200);
+ border-color: var(--v2-colors-grey-200);
}
}
diff --git a/src/core/client/framework/components/OIDCButton.tsx b/src/core/client/framework/components/OIDCButton.tsx
index 13f9eab40..d2bca4a42 100644
--- a/src/core/client/framework/components/OIDCButton.tsx
+++ b/src/core/client/framework/components/OIDCButton.tsx
@@ -1,7 +1,9 @@
+import cn from "classnames";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
-import { Button } from "coral-ui/components";
+import CLASSES from "coral-stream/classes";
+import { Button } from "coral-ui/components/v3";
import styles from "./OIDCButton.css";
@@ -12,10 +14,14 @@ interface Props {
const OIDCButton: FunctionComponent = (props) => (
{props.children}
diff --git a/src/core/client/framework/components/__snapshots__/FacebookButton.spec.tsx.snap b/src/core/client/framework/components/__snapshots__/FacebookButton.spec.tsx.snap
index cdc860dd1..266cad799 100644
--- a/src/core/client/framework/components/__snapshots__/FacebookButton.spec.tsx.snap
+++ b/src/core/client/framework/components/__snapshots__/FacebookButton.spec.tsx.snap
@@ -1,35 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
-
-
-
-
- Login with Facebook
-
-
+
+
+ Login with Facebook
+
+
+
`;
diff --git a/src/core/client/framework/components/__snapshots__/GoogleButton.spec.tsx.snap b/src/core/client/framework/components/__snapshots__/GoogleButton.spec.tsx.snap
index 01cb9d26b..6b2b3706e 100644
--- a/src/core/client/framework/components/__snapshots__/GoogleButton.spec.tsx.snap
+++ b/src/core/client/framework/components/__snapshots__/GoogleButton.spec.tsx.snap
@@ -1,35 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
-
-
-
-
- Login with Google
-
-
+
+
+ Login with Google
+
+
+
`;
diff --git a/src/core/client/framework/components/__snapshots__/OIDCButton.spec.tsx.snap b/src/core/client/framework/components/__snapshots__/OIDCButton.spec.tsx.snap
index 8f509e60f..1a4b99562 100644
--- a/src/core/client/framework/components/__snapshots__/OIDCButton.spec.tsx.snap
+++ b/src/core/client/framework/components/__snapshots__/OIDCButton.spec.tsx.snap
@@ -1,23 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
-
Login with OIDC
-
+
`;
diff --git a/src/core/client/framework/lib/bootstrap/CoralContext.tsx b/src/core/client/framework/lib/bootstrap/CoralContext.tsx
index 1f77da3aa..3591c9ee6 100644
--- a/src/core/client/framework/lib/bootstrap/CoralContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/CoralContext.tsx
@@ -13,8 +13,8 @@ import { PostMessageService } from "coral-framework/lib/postMessage";
import { RestClient } from "coral-framework/lib/rest";
import { PromisifiedStorage } from "coral-framework/lib/storage";
import { TransitionControlData } from "coral-framework/testHelpers";
-import { UIContext } from "coral-ui/components";
import { ClickFarAwayRegister } from "coral-ui/components/ClickOutside";
+import { UIContext } from "coral-ui/components/v2";
export interface CoralContext {
/** relayEnvironment for our relay framework. */
diff --git a/src/core/client/framework/lib/form/helpers.tsx b/src/core/client/framework/lib/form/helpers.tsx
index 775e01a72..7e192f0a9 100644
--- a/src/core/client/framework/lib/form/helpers.tsx
+++ b/src/core/client/framework/lib/form/helpers.tsx
@@ -105,3 +105,6 @@ export const hasError = ({ touched, error, submitError }: FieldMeta) =>
export const colorFromMeta = (meta: FieldMeta) =>
hasError(meta) ? "error" : "regular";
+
+export const streamColorFromMeta = (meta: FieldMeta) =>
+ hasError(meta) ? "error" : "streamBlue";
diff --git a/src/core/client/stream/App/TabBar.css b/src/core/client/stream/App/TabBar.css
new file mode 100644
index 000000000..bd9816118
--- /dev/null
+++ b/src/core/client/stream/App/TabBar.css
@@ -0,0 +1,14 @@
+.smallTab {
+ padding-top: var(--v2-spacing-3);
+ padding-bottom: var(--v2-spacing-3);
+ padding-left: var(--v2-spacing-4);
+ padding-right: var(--v2-spacing-4);
+}
+
+.smallText {
+ font-family: var(--v2-font-family-secondary);
+ font-size: var(--v2-font-size-1);
+ line-height: var(--v2-line-height-1);
+
+ padding-top: var(--v2-spacing-1);
+}
diff --git a/src/core/client/stream/App/TabBar.tsx b/src/core/client/stream/App/TabBar.tsx
index 967bab723..f7d3fd721 100644
--- a/src/core/client/stream/App/TabBar.tsx
+++ b/src/core/client/stream/App/TabBar.tsx
@@ -4,7 +4,9 @@ import React, { FunctionComponent } from "react";
import { GQLSTORY_MODE } from "coral-framework/schema";
import CLASSES from "coral-stream/classes";
-import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components";
+import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components/v2";
+
+import styles from "./TabBar.css";
type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
@@ -18,55 +20,105 @@ export interface Props {
const AppTabBar: FunctionComponent = (props) => {
return (
-
-
- {props.mode === GQLSTORY_MODE.QA ? (
-
- Q&A
-
- ) : (
-
- )}
-
- {props.showProfileTab && (
-
+ {(matches) => (
+
-
- My Profile
-
-
- )}
- {props.showConfigureTab && (
-
-
- {(matches) =>
- matches ? (
+
+ {matches ? (
+ props.mode === GQLSTORY_MODE.QA ? (
+
+ Q&A
+
+ ) : (
+
+ )
+ ) : (
+
+
+ {props.mode === GQLSTORY_MODE.QA ? "live_help" : "forum"}
+
+ {props.mode === GQLSTORY_MODE.QA ? (
+
+ Q&A
+
+ ) : (
+
+ )}
+
+
+ {props.showProfileTab && (
+
+ {matches ? (
+
+ My Profile
+
+ ) : (
+
+
account_circle
+
+ My Profile
+
+
+ )}
+ {props.showConfigureTab && (
+
+ {matches ? (
Configure
) : (
- settings
- )
- }
-
-
+
+
settings
+
+ Configure
+
+
)}
-
+
);
};
diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts
index 1de1c61c7..4e5905501 100644
--- a/src/core/client/stream/classes.ts
+++ b/src/core/client/stream/classes.ts
@@ -38,6 +38,7 @@ const CLASSES = {
content: "coral coral-rte-content",
placeholder: "coral coral-rte-placeholder",
toolbar: "coral coral-rte-toolbar",
+ container: "coral coral-rte-container",
},
/**
@@ -278,6 +279,16 @@ const CLASSES = {
*/
reacted: "coral coral-reacted",
+ /**
+ * collapseToggle is the button to collapse and expand the display of a comment.
+ */
+ collapseToggle: {
+ $root: "coral coral-comment-collapse-toggle",
+ icon: "coral coral-comment-collapse-toggle-icon",
+ indent: "coral coral-comment-collapse-toggle-indent",
+ collapsed: "coral coral-comment-collapse-toggle-collapsed",
+ },
+
/**
* topBar is the uppper bar of the comment.
*/
@@ -703,15 +714,25 @@ const CLASSES = {
* myUsername is the username part of my profile.
*/
myUsername: {
+ title: "coral coral-myUsername-title",
username: "coral coral-myUsername",
editButton: "coral coral-myUsername-editButton",
+ change: "coral coral-myUsername-change",
+ tooSoon: "coral-myUsername-tooSoon",
form: {
$root: "coral coral-changeMyUsername",
+ heading: "coral coral-changeMyUsername-heading",
+ description: "coral coral-changeMyUsername-description",
+ label: "coral coral-changeMyUsername-label",
username: "coral coral-changeMyUsername-username",
cancelButton: "coral coral-changeMyUsername-cancelButton",
saveButton: "coral coral-changeMyUsername-saveButton",
closeButton: "coral coral-changeMyUsername-closeButton",
- errorMessage: "coral coral-changeMyEmail-errorMessage",
+ footer: "coral coral-changeMyUsername-footer",
+ errorMessage:
+ "coral coral-changeMyUsername-errorMessage coral-changeMyEmail-errorMessage",
+ successMessage: "coral coral-changeMyUsername-successMessage",
+ successCallOut: "coral coral-changeMyUsername-successCallOut",
},
},
@@ -720,11 +741,15 @@ const CLASSES = {
*/
myEmail: {
email: "coral coral-myEmail",
+ title: "coral coral-myEmail-title",
unverified: "coral coral-myEmail-unverified",
editButton: "coral coral-myEmail-editButton",
form: {
$root: "coral coral-changeMyEmail",
- currentEmail: "coral coral-changeMyEmail-currentEmail",
+ header: "coral coral-changeMyEmail-header",
+ footer: "coral coral-changeMyEmail-footer",
+ currentEmail: "coral coral-myEmail-currentEmail",
+ desc: "coral coral-changeMyEmail-desc",
cancelButton: "coral coral-changeMyEmail-cancelButton",
saveButton: "coral coral-changeMyEmail-saveButton",
errorMessage: "coral coral-changeMyEmail-errorMessage",
@@ -736,6 +761,9 @@ const CLASSES = {
*/
verifyEmail: {
$root: "coral coral-verifyEmail",
+ container: "coral coral-verifyEmail-container",
+ content: "coral coral-verifyEmail-content",
+ title: "coral coral-verifyEmail-title",
resendButton: "coral coral-verifyEmail-resendButton",
resentMessage: "coral coral-verifyEmail-resentMessage",
},
@@ -786,6 +814,7 @@ const CLASSES = {
*/
ignoredCommenters: {
$root: "coral coral-ignoredCommenters",
+ list: "coral coral-ignoredCommenters-list",
manageButton: "coral coral-ignoredComments-manageButton",
username: "coral coral-ignoredCommenters-username",
stopIgnoreButton: "coral coral-ignoredCommenters-stopIgnoreButton",
@@ -796,12 +825,15 @@ const CLASSES = {
*/
myPassword: {
$root: "coral coral-myPassword",
+ title: "coral coral-myPassword-title",
editButton: "coral coral-myPassword-editButton",
form: {
$root: "coral coral-changePassword",
+ footer: "coral coral-changePassword-footer",
cancelButton: "coral coral-changePassword-cancelButton",
forgotButton: "coral coral-changePassword-forgotButton",
changeButton: "coral coral-changePassword-changeButton",
+ successMessageContainer: "coral coral-changePassword-successContainer",
successMessage: "coral coral-changePassword-successMessage",
errorMessage: "coral coral-changePassword-errorMessage",
},
@@ -816,6 +848,7 @@ const CLASSES = {
requestButton: "coral coral-downloadCommentHistory-requestButton",
recentRequest: "coral coral-downloadCommentHistory-recentRequest",
requestLater: "coral coral-downloadCommentHistory-requestLater",
+ requestError: "coral coral-downloadCommentHistory-requestError",
},
/**
@@ -823,6 +856,9 @@ const CLASSES = {
*/
deleteMyAccount: {
$root: "coral coral-deleteMyAccount",
+ title: "coral coral-deleteMyAccount-title",
+ section: "coral coral-deleteMyAccount-section",
+ content: "coral coral-deleteMyAccount-content",
requestButton: "coral coral-deleteMyAccount-requestButton",
cancelRequestButton: "coral coral-deleteMyAccount-cancelRequestButton",
},
@@ -833,8 +869,10 @@ const CLASSES = {
*/
pendingAccountDeletion: {
$root: "coral coral-pendingAccountDeletion",
+ container: "coral coral-pendingAccountDeletion-container",
cancelRequestButton:
"coral coral-pendingAccountDeletion-cancelRequestButton",
+ icon: "coral coral-pendingAccountDeletion-cancelRequestIcon",
},
/**
@@ -843,9 +881,15 @@ const CLASSES = {
deleteMyAccountModal: {
$root: "coral coral-deleteMyAccountModal",
header: "coral coral-deleteMyAccountModal-header",
+ headerText: "coral coral-deleteMyAccountModal-headerText",
+ subHeaderText: "coral coral-deleteMyAccountModal-subHeaderText",
+ body: "coral coral-deleteMyAccountModal-body",
+ sectionContent: "coral coral-deleteMyAccountModal-sectionContent",
+ sectionHeader: "coral coral-deleteMyAccountModal-sectionHeader",
cancelButton: "coral coral-deleteMyAccountModal-cancelButton",
proceedButton: "coral coral-deleteMyAccountModal-proceedButton",
doneButton: "coral coral-deleteMyAccountModal-doneButton",
+ stepBar: "coral coral-deleteMyAccountModal-stepBar",
deleteMyAccountButton: "coral coral-deleteMyAccount-deleteMyAccountButton",
},
@@ -874,6 +918,7 @@ const CLASSES = {
$root: "coral coral-configureCommentStream",
applyButton: "coral coral-configureCommentStream-applyButton",
errorMessage: "coral coral-configureCommentStream-errorMessage",
+ successMessage: "coral coral-configureCommentStream-successMessage",
},
/**
@@ -906,6 +951,32 @@ const CLASSES = {
* validation message that shows up on form errors.
*/
validationMessage: "coral-validation-message",
+
+ login: {
+ signIn: {
+ noAccount: "coral coral-login-signIn-noAccount",
+ },
+ signUp: {
+ alreadyHaveAccount: "coral coral-login-signUp-alreadyHaveAccount",
+ },
+ signInWithEmail: {
+ forgotPassword: "coral coral-login-signInWithEmail-forgotPassword",
+ },
+ bar: "coral coral-login-bar",
+ title: "coral coral-login-title",
+ header: "coral coral-login-header",
+ subBar: "coral coral-login-subBar",
+ orSeparator: "coral coral-login-orSeparator",
+ description: "coral coral-login-description",
+ field: "coral coral-login-field",
+ errorContainer: "coral coral-login-errorContainer",
+ error: "coral coral-login-error",
+ facebookButton: "coral coral-login-facebookButton",
+ googleButton: "coral coral-login-googleButton",
+ oidcButton: "coral coral-login-oidcButton",
+ },
+
+ moderateStream: "coral coral-general-moderateStreamLink",
};
export default CLASSES;
diff --git a/src/core/client/stream/common/MessageBox/MessageBox.css b/src/core/client/stream/common/MessageBox/MessageBox.css
index f64604985..63a3c19fd 100644
--- a/src/core/client/stream/common/MessageBox/MessageBox.css
+++ b/src/core/client/stream/common/MessageBox/MessageBox.css
@@ -1,12 +1,18 @@
+$commentsMessageBoxBackground: var(--v2-colors-grey-700);
+
+
.root {
- display: flex;
position: relative;
+
+ display: flex;
justify-content: flex-start;
align-items: center;
- padding: var(--spacing-3);
+
+ padding: var(--v2-spacing-3);
box-sizing: border-box;
width: 100%;
- background-color: var(--palette-text-primary);
- border-top-right-radius: 1px;
- border-top-left-radius: 1px;
+
+ background-color: $commentsMessageBoxBackground;
+ border-top-right-radius: var(--v2-round-corners);
+ border-top-left-radius: var(--v2-round-corners);
}
diff --git a/src/core/client/stream/common/MessageBox/MessageBoxContent.css b/src/core/client/stream/common/MessageBox/MessageBoxContent.css
index d19893572..cb7774b58 100644
--- a/src/core/client/stream/common/MessageBox/MessageBoxContent.css
+++ b/src/core/client/stream/common/MessageBox/MessageBoxContent.css
@@ -1,4 +1,8 @@
+$commentsMessageBoxColor: var(--v2-colors-pure-white);
+
.root {
composes: root from "~coral-stream/shared/htmlContent.css";
- color: var(--palette-text-light);
+
+ color: $commentsMessageBoxColor;
+ font-weight: var(--v2-font-weight-primary-semi-bold);
}
diff --git a/src/core/client/stream/tabs/Configure/ModerateStreamContainer.tsx b/src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx
similarity index 70%
rename from src/core/client/stream/tabs/Configure/ModerateStreamContainer.tsx
rename to src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx
index e94202adf..0da7512df 100644
--- a/src/core/client/stream/tabs/Configure/ModerateStreamContainer.tsx
+++ b/src/core/client/stream/common/ModerateStream/ModerateStreamContainer.tsx
@@ -3,20 +3,23 @@ import React, { FunctionComponent, useMemo } from "react";
import { graphql } from "react-relay";
import { getModerationLink } from "coral-framework/helpers";
-import { ExternalLink } from "coral-framework/lib/i18n/components";
import {
withFragmentContainer,
withLocalStateContainer,
} from "coral-framework/lib/relay";
-import { Typography } from "coral-ui/components";
+import CLASSES from "coral-stream/classes";
+import { Ability, can } from "coral-stream/permissions";
+import { Button } from "coral-ui/components/v3";
import { ModerateStreamContainer_settings } from "coral-stream/__generated__/ModerateStreamContainer_settings.graphql";
import { ModerateStreamContainer_story } from "coral-stream/__generated__/ModerateStreamContainer_story.graphql";
+import { ModerateStreamContainer_viewer } from "coral-stream/__generated__/ModerateStreamContainer_viewer.graphql";
import { ModerateStreamContainerLocal } from "coral-stream/__generated__/ModerateStreamContainerLocal.graphql";
interface Props {
local: ModerateStreamContainerLocal;
settings: ModerateStreamContainer_settings;
+ viewer: ModerateStreamContainer_viewer | null;
story: ModerateStreamContainer_story;
}
@@ -24,6 +27,7 @@ const ModerateStreamContainer: FunctionComponent = ({
local: { accessToken },
settings,
story: { id },
+ viewer,
}) => {
const href = useMemo(() => {
let link = getModerationLink({ storyID: id });
@@ -38,14 +42,23 @@ const ModerateStreamContainer: FunctionComponent = ({
return link;
}, [accessToken, settings, id]);
+ if (!viewer || !can(viewer, Ability.MODERATE)) {
+ return null;
+ }
+
return (
-
-
-
- Moderate this stream
-
-
-
+
+ Moderate
+
);
};
@@ -69,6 +82,11 @@ const enhanced = withFragmentContainer({
id
}
`,
+ viewer: graphql`
+ fragment ModerateStreamContainer_viewer on User {
+ role
+ }
+ `,
})(
withLocalStateContainer(graphql`
fragment ModerateStreamContainerLocal on Local {
diff --git a/src/core/client/stream/common/Timestamp.tsx b/src/core/client/stream/common/Timestamp.tsx
index e89697f6c..491f02d98 100644
--- a/src/core/client/stream/common/Timestamp.tsx
+++ b/src/core/client/stream/common/Timestamp.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent, useCallback } from "react";
import { useViewerEvent } from "coral-framework/lib/events";
import { ShowAbsoluteTimestampEvent } from "coral-stream/events";
-import { Timestamp as BaseTimestamp } from "coral-ui/components";
+import { Timestamp as BaseTimestamp } from "coral-ui/components/v2";
import { PropTypesOf } from "coral-ui/types";
const TimeStamp: FunctionComponent> = (
@@ -10,15 +10,12 @@ const TimeStamp: FunctionComponent> = (
) => {
const emitEvent = useViewerEvent(ShowAbsoluteTimestampEvent);
const handleOnToggle = useCallback(
- (absolute: boolean) => {
- if (absolute) {
+ (showAbsolute: boolean) => {
+ if (showAbsolute) {
emitEvent();
}
- if (props.onToggleAbsolute) {
- return props.onToggleAbsolute(absolute);
- }
},
- [props.onToggleAbsolute, emitEvent]
+ [props.toggleAbsolute, emitEvent]
);
return = (
props
) => {
const Username = () => (
-
- {props.username}
-
+ {props.username}
);
return (
-
-
- {"Signed in as
+
+
+ Signed in as
- {props.showLogoutButton && (
-
- }
- >
-
+ Sign Out "}
-
-
- )}
-
+
+ {"Not you? Sign Out "}
+
+
+ )}
+
+
;
}
-export class UserBoxContainer extends Component {
+interface State {
+ showLogout: boolean;
+}
+
+export class UserBoxContainer extends Component {
private handleFocus = () => this.props.setAuthPopupState({ focus: true });
private handleBlur = () => this.props.setAuthPopupState({ focus: false });
private handleClose = () => this.props.setAuthPopupState({ open: false });
diff --git a/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.css b/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.css
index 744ca0556..48b6829de 100644
--- a/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.css
+++ b/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.css
@@ -1,3 +1,19 @@
.joinText {
- margin-right: var(--mini-unit);
+ font-family: var(--v2-font-family-secondary);
+ font-weight: var(--v2-font-weight-secondary-bold);
+ font-size: var(--v2-font-size-4);
+ line-height: var(--v2-line-height-4);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-right: var(--v2-spacing-3);
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.actions {
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.register {
+ margin-right: var(--v2-spacing-1);
}
diff --git a/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx b/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx
index cfb968f83..10ace0a0d 100644
--- a/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx
@@ -1,9 +1,10 @@
import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
-import { Button, Flex, Typography } from "coral-ui/components";
-import MatchMedia from "coral-ui/components/MatchMedia";
+import { Flex } from "coral-ui/components/v2";
+import { Button } from "coral-ui/components/v3";
import styles from "./UserBoxUnauthenticated.css";
@@ -17,45 +18,40 @@ const UserBoxUnauthenticated: FunctionComponent = (
props
) => {
return (
-
-
-
-
- Join the conversation
-
-
-
- |
-
-
-
-
- Sign in
-
+
+
+ Join the conversation
- {props.showRegisterButton && (
-
+
+ {props.showRegisterButton && (
+
+
+ Register
+
+
+ )}
+
- Register
+ Sign in
- )}
+
);
};
diff --git a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
index 84a96640f..7bffdaaab 100644
--- a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
+++ b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
@@ -1,68 +1,66 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly with logout button 1`] = `
-
- Signed in as <Username></Username>.
-
+ Signed in as
+
-
-
-
-
+
+ Not you? <button>Sign Out</button>
+
+
+
+
`;
exports[`renders correctly without logout button 1`] = `
-
- Signed in as <Username></Username>.
-
+ Signed in as
+
-
+
+
+
`;
diff --git a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index ff70d1849..b2069ef86 100644
--- a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -4,55 +4,51 @@ exports[`renders correctly 1`] = `
-
+
+ Join the conversation
+
+
+
-
- Join the conversation
-
+ Register
+
-
- |
-
-
-
-
- Sign in
-
-
-
-
- Register
-
-
+
+ Sign in
+
+
+
`;
@@ -60,41 +56,35 @@ exports[`renders correctly hides showRegisterButton 1`] = `
-
+
+ Join the conversation
+
+
+
-
- Join the conversation
-
+ Sign in
+
-
- |
-
-
-
-
- Sign in
-
-
+
`;
diff --git a/src/core/client/stream/common/ValidationMessage.ts b/src/core/client/stream/common/ValidationMessage.ts
index 2fb67d519..1378fb96b 100644
--- a/src/core/client/stream/common/ValidationMessage.ts
+++ b/src/core/client/stream/common/ValidationMessage.ts
@@ -2,7 +2,7 @@ import cn from "classnames";
import { withProps } from "recompose";
import CLASSES from "coral-stream/classes";
-import { ValidationMessage } from "coral-ui/components";
+import { ValidationMessage } from "coral-ui/components/v3";
import { PropTypesOf } from "coral-ui/types";
/**
diff --git a/src/core/client/stream/permissions.tsx b/src/core/client/stream/permissions.tsx
index b449fa42a..280b2e9b4 100644
--- a/src/core/client/stream/permissions.tsx
+++ b/src/core/client/stream/permissions.tsx
@@ -30,5 +30,9 @@ export const Ability = mapValues(permissionMap, (_, key) => key) as {
* Example: `can(props.me, Ability.CHANGE_ROLE)`.
*/
export function can(viewer: { role: GQLUSER_ROLE_RL }, ability: AbilityType) {
+ if (!viewer) {
+ return false;
+ }
+
return permissionMap[ability].includes(viewer.role as GQLUSER_ROLE);
}
diff --git a/src/core/client/stream/shared/htmlContent.css b/src/core/client/stream/shared/htmlContent.css
index c53c10ccf..478b32747 100644
--- a/src/core/client/stream/shared/htmlContent.css
+++ b/src/core/client/stream/shared/htmlContent.css
@@ -1,22 +1,32 @@
+$commentsQuoteBackground: var(--v2-colors-grey-200);
+$commentsLinkColor: var(--v2-colors-stream-blue-500);
+$commentsLinkColorHovered: var(--v2-colors-stream-blue-700);
+
.root {
- composes: bodyCopy from "~coral-ui/shared/typography.css";
- color: var(--palette-text-dark);
+ 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.45rem;
+ color: var(--v2-colors-mono-500);
+
overflow-wrap: break-word;
b,
strong {
- font-weight: var(--font-weight-medium);
+ font-weight: var(--v2-font-weight-primary-semi-bold);
}
+
i
em {
font-style: italic;
}
blockquote {
- background-color: var(--palette-grey-lightest);
+ background-color: $commentsQuoteBackground;
padding: var(--mini-unit);
margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
var(--mini-unit);
- border-radius: var(--round-corners);
+ border-radius: var(--v2-round-corners);
&::after {
content: none;
}
@@ -25,9 +35,9 @@
}
}
a {
- color: var(--palette-primary-main);
+ color: $commentsLinkColor;
&:hover {
- color: var(--palette-primary-dark);
+ color: $commentsLinkColorHovered;
}
}
& :global(.coral-rte-spoiler) {
diff --git a/src/core/client/stream/tabs/Comments/Comment/AnsweredTag.css b/src/core/client/stream/tabs/Comments/Comment/AnsweredTag.css
new file mode 100644
index 000000000..69d654dc4
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/AnsweredTag.css
@@ -0,0 +1,16 @@
+.answeredTag {
+ color: #03ab61;
+ background: #e6faf1;
+
+ border-color: #03ab61;
+ border-style: solid;
+ border-radius: 2px;
+ border-width: 1px;
+
+ text-transform: uppercase;
+}
+
+.tagIcon {
+ margin-right: var(--v2-spacing-1);
+ color: var(--v2-colors-green-500);
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/AnsweredTag.tsx b/src/core/client/stream/tabs/Comments/Comment/AnsweredTag.tsx
new file mode 100644
index 000000000..8a834e5c1
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/AnsweredTag.tsx
@@ -0,0 +1,27 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import { Flex, Icon, Tag } from "coral-ui/components/v2";
+
+import styles from "./AnsweredTag.css";
+
+interface Props {
+ collapsed?: boolean;
+}
+
+const AnsweredTag: FunctionComponent
= ({ collapsed }) => {
+ return collapsed ? (
+ check
+ ) : (
+
+
+
+ check
+
+ answered
+
+
+ );
+};
+
+export default AnsweredTag;
diff --git a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
index dfb9e3d1a..5bc0b8767 100644
--- a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
import { graphql } from "react-relay";
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
-import { Tag } from "coral-ui/components";
+import { Tag } from "coral-ui/components/v2";
import { AuthorBadgesContainer_comment as CommentData } from "coral-stream/__generated__/AuthorBadgesContainer_comment.graphql";
diff --git a/src/core/client/stream/tabs/Comments/Comment/ButtonsBar.tsx b/src/core/client/stream/tabs/Comments/Comment/ButtonsBar.tsx
index b66658c46..d4ffc6981 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ButtonsBar.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ButtonsBar.tsx
@@ -1,11 +1,22 @@
import React, { FunctionComponent } from "react";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
-const ButtonsBar: FunctionComponent = (props) => {
+interface Props {
+ className?: string;
+ children?: any;
+}
+
+const ButtonsBar: FunctionComponent = ({ className, children }) => {
return (
-
- {props.children}
+
+ {children}
);
};
diff --git a/src/core/client/stream/tabs/Comments/Comment/CollapsableComment.tsx b/src/core/client/stream/tabs/Comments/Comment/CollapsableComment.tsx
new file mode 100644
index 000000000..f9f34d2e3
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/CollapsableComment.tsx
@@ -0,0 +1,20 @@
+import { FunctionComponent, ReactElement, useCallback, useState } from "react";
+
+interface InjectedCollapsableCommentProps {
+ collapsed: boolean;
+ toggleCollapsed: () => void;
+}
+
+interface Props {
+ children(props: InjectedCollapsableCommentProps): ReactElement;
+}
+
+const CollapsableComment: FunctionComponent = ({ children }) => {
+ const [collapsed, setCollapsed] = useState(false);
+ const toggleCollapsed = useCallback(() => {
+ setCollapsed(!collapsed);
+ }, [collapsed]);
+ return children({ collapsed, toggleCollapsed });
+};
+
+export default CollapsableComment;
diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.css b/src/core/client/stream/tabs/Comments/Comment/Comment.css
index 3e0b41e2c..adb02edb9 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Comment.css
+++ b/src/core/client/stream/tabs/Comments/Comment/Comment.css
@@ -1,4 +1,7 @@
+$commentTimestampColor: var(--v2-colors-grey-500);
+
.root {
+ flex: 1;
}
.highlight {
@@ -11,3 +14,12 @@
.footer:not(:empty) {
margin-top: var(--mini-unit);
}
+
+.timestamp {
+ font-family: var(--v2-font-family-primary);
+ font-style: normal;
+ font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-3);
+ color: $commentTimestampColor;
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
index 1b3235c93..6ec260b9f 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
@@ -23,6 +23,7 @@ export interface CommentProps {
highlight?: boolean;
parentAuthorName?: string | null;
userTags?: React.ReactNode;
+ collapsed?: boolean;
}
const Comment: FunctionComponent = (props) => {
@@ -45,7 +46,9 @@ const Comment: FunctionComponent = (props) => {
{props.userTags}
-
+
{props.createdAt}
{props.showEditedMarker && (
@@ -55,12 +58,12 @@ const Comment: FunctionComponent = (props) => {
{props.topBarRight && {props.topBarRight}
}
+
{props.parentAuthorName && (
)}
-
{props.body || ""}
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css
index b00ce95a3..25ded7b35 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css
@@ -1,12 +1,15 @@
+$commenterActionEditColor: var(--v2-colors-stream-blue-500);
+$commenterActionEditColorActive: var(--v2-colors-stream-blue-300);
+
.tagIcon {
margin-right: var(--v2-spacing-1);
}
.answeredTag {
- color: #03AB61;
- background: #E6FAF1;
+ color: #03ab61;
+ background: #e6faf1;
- border-color: #03AB61;
+ border-color: #03ab61;
border-style: solid;
border-radius: 2px;
border-width: 1px;
@@ -17,3 +20,31 @@
.removeAnswered {
width: 100%;
}
+
+.editButton {
+ color: $commenterActionEditColor;
+ &:hover,
+ &.mouseHover {
+ color: $commenterActionEditColorActive;
+ }
+ &:active,
+ &.active {
+ color: $commenterActionEditColorActive;
+ }
+}
+
+.editIcon {
+ margin-right: var(--v2-spacing-1);
+}
+
+.actionBar {
+ min-width: 150px;
+}
+
+.actionButton {
+ padding: var(--v2-spacing-1);
+}
+
+.staticUsername {
+ color: var(--v2-colors-mono-100);
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
index 22ac5d659..7b0203b61 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
@@ -50,6 +50,10 @@ function createDefaultProps(add: DeepPartial = {}): Props {
tags: [],
lastViewerAction: null,
deleted: false,
+ viewerActionPresence: {
+ dontAgree: false,
+ flag: false,
+ },
},
settings: {
disableCommenting: {
@@ -62,6 +66,8 @@ function createDefaultProps(add: DeepPartial = {}): Props {
localReply: false,
disableReplies: false,
onRemoveAnswered: undefined,
+ collapsed: undefined,
+ toggleCollapsed: noop as any,
},
add
);
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
index 3b1f518d1..813eee9ae 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
@@ -23,7 +23,7 @@ import {
withShowAuthPopupMutation,
} from "coral-stream/mutations";
import { Ability, can } from "coral-stream/permissions";
-import { Button, Flex, HorizontalGutter, Icon, Tag } from "coral-ui/components";
+import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
import { CommentContainer_comment as CommentData } from "coral-stream/__generated__/CommentContainer_comment.graphql";
import { CommentContainer_settings as SettingsData } from "coral-stream/__generated__/CommentContainer_settings.graphql";
@@ -31,9 +31,11 @@ import { CommentContainer_story as StoryData } from "coral-stream/__generated__/
import { CommentContainer_viewer as ViewerData } from "coral-stream/__generated__/CommentContainer_viewer.graphql";
import { isPublished } from "../helpers";
+import AnsweredTag from "./AnsweredTag";
import UserBadgesContainer from "./AuthorBadgesContainer";
import ButtonsBar from "./ButtonsBar";
import EditCommentFormContainer from "./EditCommentForm";
+import FeaturedTag from "./FeaturedTag";
import IndentedComment from "./IndentedComment";
import CaretContainer, {
RejectedTombstoneContainer,
@@ -42,9 +44,9 @@ import PermalinkButtonContainer from "./PermalinkButton";
import ReactionButtonContainer from "./ReactionButton";
import ReplyButton from "./ReplyButton";
import ReplyCommentFormContainer from "./ReplyCommentForm";
-import ReportButtonContainer from "./ReportButton";
+import ReportFlowContainer, { ReportButton } from "./ReportFlow";
import ShowConversationLink from "./ShowConversationLink";
-import { UsernameWithPopoverContainer } from "./Username";
+import { UsernameContainer, UsernameWithPopoverContainer } from "./Username";
import UserTagsContainer from "./UserTagsContainer";
import styles from "./CommentContainer.css";
@@ -74,12 +76,15 @@ interface Props {
hideReportButton?: boolean;
hideModerationCarat?: boolean;
onRemoveAnswered?: () => void;
+ collapsed?: boolean;
+ toggleCollapsed?: () => void;
}
interface State {
showReplyDialog: boolean;
showEditDialog: boolean;
editable: boolean;
+ showReportFlow: boolean;
}
export class CommentContainer extends Component {
@@ -89,6 +94,7 @@ export class CommentContainer extends Component {
showReplyDialog: false,
showEditDialog: false,
editable: this.isEditable(),
+ showReportFlow: false,
};
constructor(props: Props) {
@@ -187,6 +193,17 @@ export class CommentContainer extends Component {
return false;
};
+ private onReportButtonClicked = () => {
+ this.setState({
+ showReportFlow: !this.state.showReportFlow,
+ });
+ };
+ private onCloseReportFlow = () => {
+ this.setState({
+ showReportFlow: false,
+ });
+ };
+
public render() {
const {
comment,
@@ -200,6 +217,7 @@ export class CommentContainer extends Component {
viewer,
className,
hideAnsweredTag,
+ collapsed,
} = this.props;
const { showReplyDialog, showEditDialog, editable } = this.state;
const hasFeaturedTag = Boolean(
@@ -233,25 +251,10 @@ export class CommentContainer extends Component {
const commentTags = (
<>
{hasFeaturedTag && !isQA && (
-
-
-
+
-
-
- check
-
- answered
-
-
+ {
this.props.viewer &&
can(this.props.viewer, Ability.MODERATE) &&
!this.props.hideModerationCarat;
+
if (showEditDialog) {
return (
@@ -306,16 +310,41 @@ export class CommentContainer extends Component
{
{!comment.deleted && (
+ {
)
}
+ staticTopBarRight={commentTags}
topBarRight={
{commentTags}
{editable && (
-
+ edit
+
+
+
)}
{showCaret && (
{
justifyContent="space-between"
className={CLASSES.comment.actionBar.$root}
>
-
+
{
settings.disableCommenting.enabled ||
story.isClosed
}
- className={CLASSES.comment.actionBar.replyButton}
+ className={cn(
+ styles.actionButton,
+ CLASSES.comment.actionBar.replyButton
+ )}
/>
)}
{!banned &&
!suspended &&
!this.props.hideReportButton && (
-
@@ -430,6 +476,13 @@ export class CommentContainer extends Component {
}
/>
)}
+ {this.state.showReportFlow && (
+ {
{showRemoveAnswered && (
({ eventEmitter }))(
scheduledDeletionDate
...UsernameWithPopoverContainer_viewer
...ReactionButtonContainer_viewer
- ...ReportButtonContainer_viewer
+ ...ReportFlowContainer_viewer
+ ...ReportButton_viewer
...CaretContainer_viewer
}
`,
@@ -523,15 +577,21 @@ const enhanced = withContext(({ eventEmitter }) => ({ eventEmitter }))(
total
}
}
+ viewerActionPresence {
+ dontAgree
+ flag
+ }
...ReplyCommentFormContainer_comment
...EditCommentFormContainer_comment
...ReactionButtonContainer_comment
- ...ReportButtonContainer_comment
+ ...ReportFlowContainer_comment
+ ...ReportButton_comment
...CaretContainer_comment
...RejectedTombstoneContainer_comment
...AuthorBadgesContainer_comment
...UserTagsContainer_comment
...UsernameWithPopoverContainer_comment
+ ...UsernameContainer_comment
}
`,
settings: graphql`
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentToggle.css b/src/core/client/stream/tabs/Comments/Comment/CommentToggle.css
new file mode 100644
index 000000000..acc7a2294
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentToggle.css
@@ -0,0 +1,27 @@
+.root {
+ padding: var(--v2-spacing-2);
+ width: 100%;
+ background: var(--v2-colors-grey-100);
+
+ &.mouseHover,
+ &:hover {
+ background: var(--v2-colors-grey-200);
+ }
+}
+
+.icon {
+ color: var(--v2-colors-grey-500);
+}
+
+.timestamp {
+ font-family: var(--v2-font-family-primary);
+ font-style: normal;
+ font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-3);
+ color: var(--v2-colors-grey-500);
+}
+
+.inner {
+ flex: 1;
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx
new file mode 100644
index 000000000..d6b9b9a93
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx
@@ -0,0 +1,67 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import CLASSES from "coral-stream/classes";
+import { BaseButton, Flex, Icon, RelativeTime } from "coral-ui/components/v2";
+
+import EditedMarker from "./EditedMarker";
+import TopBarLeft from "./TopBarLeft";
+
+import styles from "./CommentToggle.css";
+
+export interface Props {
+ className?: string;
+ username: React.ReactNode;
+ body: string | null;
+ createdAt: string;
+ topBarRight?: React.ReactNode;
+ footer?: React.ReactNode;
+ showEditedMarker?: boolean;
+ highlight?: boolean;
+ parentAuthorName?: string | null;
+ userTags?: React.ReactNode;
+ collapsed?: boolean;
+ toggleCollapsed?: () => void;
+}
+
+const CommentToggle: FunctionComponent = (props) => {
+ return (
+
+
+
+ add
+
+
+
+
+ {props.username && props.username}
+ {props.userTags}
+
+
+
+
+ {props.topBarRight && {props.topBarRight}
}
+
+
+
+ );
+};
+
+export default CommentToggle;
diff --git a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
index 7f56c1acb..54026e197 100644
--- a/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
@@ -17,7 +17,7 @@ import {
Message,
MessageIcon,
RelativeTime,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
import { PropTypesOf } from "coral-ui/types";
import {
@@ -104,7 +104,6 @@ const EditCommentForm: FunctionComponent = (props) => {
= ({
}
onClick={onBan}
className={CLASSES.moderationDropdown.banUserButton}
+ classes={{
+ root: styles.label,
+ mouseHover: styles.mouseHover,
+ }}
>
Ban User
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.css b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.css
index f446e503f..8a37de0e0 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.css
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.css
@@ -1,26 +1,64 @@
+$commentsModerationApprovedColor: var(--v2-colors-green-500);
+$commentsModerationRejectedColor: var(--v2-colors-red-500);
+$commentsModerationFeaturedColor: var(--v2-colors-stream-blue-500);
+
+.label {
+ color: var(--v2-colors-mono-500);
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-regular);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-3);
+
+ text-align: left;
+}
+
+.featured {
+ color: $commentsModerationFeaturedColor;
+ font-weight: var(--v2-font-weight-primary-bold);
+}
+
.approved {
- color: var(--palette-success-dark);
- font-weight: var(--font-weight-bold);
+ color: $commentsModerationApprovedColor;
+ font-weight: var(--v2-font-weight-primary-bold);
&:disabled {
opacity: 1.0;
}
}
+
.approveIcon {
padding-top: 1px;
margin-bottom: -1px;
}
-.rejectIcon {
- padding-top: 1px;
- margin-bottom: -1px;
-}
+
.rejected {
- color: var(--palette-error-dark);
- font-weight: var(--font-weight-bold);
+ color: $commentsModerationRejectedColor;
+ font-weight: var(--v2-font-weight-primary-bold);
&:disabled {
opacity: 1.0;
}
}
-.featured {
- color: var(--palette-primary-dark);
- font-weight: var(--font-weight-bold);
+
+.rejectIcon {
+ padding-top: 1px;
+ margin-bottom: -1px;
+}
+
+.link {
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-regular);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-stream-blue-500);
+
+ text-decoration: underline;
+}
+
+.mouseHover {
+ background-color: var(--v2-colors-stream-blue-100);
+}
+
+.linkIcon {
+ padding-top: 1px;
+ color: var(--v2-colors-stream-blue-500);
}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx
index 08c84f1b1..cead605a1 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx
@@ -8,7 +8,7 @@ import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
import { GQLSTORY_MODE } from "coral-framework/schema";
import CLASSES from "coral-stream/classes";
import { GotoModerationEvent } from "coral-stream/events";
-import { DropdownButton, DropdownDivider, Icon } from "coral-ui/components";
+import { DropdownButton, DropdownDivider, Icon } from "coral-ui/components/v2";
import { ModerationActionsContainer_comment } from "coral-stream/__generated__/ModerationActionsContainer_comment.graphql";
import { ModerationActionsContainer_story } from "coral-stream/__generated__/ModerationActionsContainer_story.graphql";
@@ -100,10 +100,11 @@ const ModerationActionsContainer: FunctionComponent = ({
star
}
- className={cn(
- styles.featured,
- CLASSES.moderationDropdown.unfeatureButton
- )}
+ className={cn(CLASSES.moderationDropdown.unfeatureButton)}
+ classes={{
+ root: cn(styles.label, styles.featured),
+ mouseHover: styles.mouseHover,
+ }}
onClick={onUnfeature}
disabled={isQA}
>
@@ -113,7 +114,11 @@ const ModerationActionsContainer: FunctionComponent = ({
) : (
);
export default ReplyButton;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css
new file mode 100644
index 000000000..aebce832c
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css
@@ -0,0 +1,4 @@
+.rteContent {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
index 2a05ad984..3d63a6ba0 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
@@ -22,7 +22,7 @@ import {
Flex,
HorizontalGutter,
MatchMedia,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
import { PropTypesOf } from "coral-ui/types";
import {
@@ -33,6 +33,8 @@ import RemainingCharactersContainer from "../../RemainingCharacters";
import RTEContainer from "../../RTE";
import ReplyTo from "./ReplyTo";
+import styles from "./ReplyCommentForm.css";
+
interface FormProps {
body: string;
}
@@ -102,13 +104,14 @@ const ReplyCommentForm: FunctionComponent = (props) => {
placeholder="Write a reply"
ref={props.rteRef}
disabled={submitting || props.disabled}
+ contentClassName={styles.rteContent}
/>
{props.disabled ? (
<>
{props.disabledMessage && (
-
+
{props.disabledMessage}
)}
@@ -119,14 +122,12 @@ const ReplyCommentForm: FunctionComponent = (props) => {
(meta.error ||
(meta.submitError &&
!meta.dirtySinceLastSubmit)) && (
-
+
{meta.error || meta.submitError}
)}
{submitError && (
-
- {submitError}
-
+ {submitError}
)}
{props.max && (
= (props) => {
>
);
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyTo.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyTo.spec.tsx.snap
index 2d4219932..aeb5357c8 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyTo.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyTo.spec.tsx.snap
@@ -11,14 +11,13 @@ exports[`renders correctly 1`] = `
- Replying to: <Username></Username>
-
+ Replying to <Username></Username>
+
`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.css b/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.css
deleted file mode 100644
index 54cc14d34..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.callout {
- min-height: calc(10 * var(--mini-unit));
-}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx
index 17c3317a4..f4d081116 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx
@@ -2,12 +2,11 @@ import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React from "react";
-import { Button, CallOut, Flex, HorizontalGutter } from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";
+import { CallOut } from "coral-ui/components/v3";
import { SubmitStatus } from "../helpers/getSubmitStatus";
-import styles from "./ReplyEditSubmitStatus.css";
-
interface Props {
status: SubmitStatus;
buttonClassName?: string;
@@ -15,7 +14,11 @@ interface Props {
onDismiss: () => void;
}
-function getMessage(status: SubmitStatus, inReviewClassName = "") {
+function getMessage(
+ status: SubmitStatus,
+ inReviewClassName = "",
+ onDismiss: () => void
+) {
switch (status) {
case "RETRY":
throw new Error(`Invalid status ${status}`);
@@ -24,15 +27,21 @@ function getMessage(status: SubmitStatus, inReviewClassName = "") {
// falls through
case "IN_REVIEW":
return (
-
-
- Your comment has been submitted and will be reviewed by a moderator
-
-
+ check}
+ onClose={onDismiss}
+ titleWeight="semiBold"
+ title={
+
+
+ Your comment has been submitted and will be reviewed by a
+ moderator
+
+
+ }
+ />
);
case "APPROVED":
case null:
@@ -43,20 +52,5 @@ function getMessage(status: SubmitStatus, inReviewClassName = "") {
}
export default function ReplyEditSubmitStatus(props: Props) {
- return (
-
- {getMessage(props.status, props.inReviewClassName)}
-
-
-
-
- );
+ return getMessage(props.status, props.inReviewClassName, props.onDismiss);
}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.css b/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.css
deleted file mode 100644
index 87d04bed5..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.variantGhost {
- &.colorRegular {
- color: var(--palette-error-main);
- opacity: 1;
- }
-}
\ No newline at end of file
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.spec.tsx
deleted file mode 100644
index 830d82d66..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import ReportButton from "./ReportButton";
-
-it("renders report button", () => {
- const props: PropTypesOf = {
- reported: false,
- };
- const renderer = createRenderer();
- renderer.render( = {
- reported: true,
- };
- const renderer = createRenderer();
- renderer.render(, "ref"> {
- reported: boolean;
-
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
-}
-
-class ReportButton extends React.Component {
- public render() {
- const {
- reported,
- accessKey,
- active,
- forwardRef: ref,
- ...rest
- } = this.props;
- return (
-
-
- flag
-
- {!reported && (
-
- )}
- {reported && (
-
- )}
-
- );
- }
-}
-
-export default withForwardRef(ReportButton);
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonContainer.tsx
deleted file mode 100644
index 4ca156f89..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonContainer.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import { graphql } from "react-relay";
-
-import { withFragmentContainer } from "coral-framework/lib/relay";
-import {
- ShowAuthPopupMutation,
- withShowAuthPopupMutation,
-} from "coral-stream/mutations";
-
-import { ReportButtonContainer_comment as CommentData } from "coral-stream/__generated__/ReportButtonContainer_comment.graphql";
-import { ReportButtonContainer_viewer as ViewerData } from "coral-stream/__generated__/ReportButtonContainer_viewer.graphql";
-
-import ReportButton from "./ReportButton";
-import ReportButtonWithPopover from "./ReportButtonWithPopover";
-
-interface ReportButtonContainerProps {
- comment: CommentData;
- viewer: ViewerData | null;
- showAuthPopup: ShowAuthPopupMutation;
- className?: string;
- reportedClassName?: string;
-}
-
-class ReportButtonContainer extends React.Component<
- ReportButtonContainerProps
-> {
- private get loggedIn() {
- return Boolean(this.props.viewer);
- }
- private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
-
- public render() {
- const { className, reportedClassName = "" } = this.props;
- const reported =
- this.props.comment.viewerActionPresence &&
- (this.props.comment.viewerActionPresence.flag ||
- this.props.comment.viewerActionPresence.dontAgree);
-
- return this.loggedIn ? (
- ({
- viewer: graphql`
- fragment ReportButtonContainer_viewer on User {
- id
- }
- `,
- comment: graphql`
- fragment ReportButtonContainer_comment on Comment {
- ...ReportCommentFormContainer_comment
- id
- viewerActionPresence {
- dontAgree
- flag
- }
- }
- `,
- })(ReportButtonContainer)
-);
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonWithPopover.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonWithPopover.tsx
deleted file mode 100644
index 5ed9996d7..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonWithPopover.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Localized } from "@fluent/react/compat";
-import React from "react";
-
-import { ClickOutside, Popover } from "coral-ui/components";
-import { PropTypesOf } from "coral-ui/types";
-
-import ReportPopover from "../ReportPopover";
-import ReportButton from "./ReportButton";
-
-interface Props {
- comment: { id: string } & PropTypesOf["comment"];
- reported: boolean;
- className?: string;
-}
-
-const ReportButtonWithPopover: React.FunctionComponent = ({
- comment,
- reported,
- className,
-}) => {
- const popoverID = `report-popover-${comment.id}`;
- return (
-
- );
-};
-
-export default ReportButtonWithPopover;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportButton/__snapshots__/ReportButton.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/ReportButton/__snapshots__/ReportButton.spec.tsx.snap
deleted file mode 100644
index 299f6b832..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportButton/__snapshots__/ReportButton.spec.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders report button 1`] = `
-) =>
+ commitMutationPromiseNormalized(environment, {
+ mutation: graphql`
+ mutation CreateCommentDisagreeMutation(
+ $input: CreateCommentDontAgreeInput!
+ ) {
+ createCommentDontAgree(input: $input) {
+ comment {
+ id
+ viewerActionPresence {
+ dontAgree
+ }
+ }
+ clientMutationId
+ }
+ }
+ `,
+ variables: {
+ input: {
+ commentID: input.commentID,
+ commentRevisionID: input.commentRevisionID,
+ additionalDetails: input.additionalDetails,
+ clientMutationId: (clientMutationId++).toString(),
+ },
+ },
+ })
+);
+
+export default CreateCommentDisagreeMutation;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/CreateCommentDontAgreeMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDontAgreeMutation.ts
similarity index 100%
rename from src/core/client/stream/tabs/Comments/Comment/ReportPopover/CreateCommentDontAgreeMutation.ts
rename to src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDontAgreeMutation.ts
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts
new file mode 100644
index 000000000..fd767a227
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts
@@ -0,0 +1,43 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+ commitMutationPromiseNormalized,
+ createMutation,
+ MutationInput,
+} from "coral-framework/lib/relay";
+
+import { CreateCommentFlagMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentFlagMutation.graphql";
+
+let clientMutationId = 0;
+
+const CreateCommentFlagMutation = createMutation(
+ "createCommentFlag",
+ (environment: Environment, input: MutationInput) =>
+ commitMutationPromiseNormalized(environment, {
+ mutation: graphql`
+ mutation CreateCommentFlagMutation($input: CreateCommentFlagInput!) {
+ createCommentFlag(input: $input) {
+ comment {
+ id
+ viewerActionPresence {
+ flag
+ }
+ }
+ clientMutationId
+ }
+ }
+ `,
+ variables: {
+ input: {
+ commentID: input.commentID,
+ commentRevisionID: input.commentRevisionID,
+ reason: input.reason,
+ additionalDetails: input.additionalDetails,
+ clientMutationId: (clientMutationId++).toString(),
+ },
+ },
+ })
+);
+
+export default CreateCommentFlagMutation;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/PropagateMount.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/PropagateMount.tsx
similarity index 100%
rename from src/core/client/stream/tabs/Comments/Comment/ReportPopover/PropagateMount.tsx
rename to src/core/client/stream/tabs/Comments/Comment/ReportFlow/PropagateMount.tsx
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css
new file mode 100644
index 000000000..384b0f4c0
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css
@@ -0,0 +1,12 @@
+.icon {
+ margin-right: var(--v2-spacing-1);
+}
+
+.reported {
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-red-500);
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx
new file mode 100644
index 000000000..f77ca711a
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx
@@ -0,0 +1,115 @@
+import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import CLASSES from "coral-stream/classes";
+import {
+ ShowAuthPopupMutation,
+ withShowAuthPopupMutation,
+} from "coral-stream/mutations";
+import { Flex, Icon } from "coral-ui/components/v2";
+import { Button } from "coral-ui/components/v3";
+
+import { ReportButton_comment } from "coral-stream/__generated__/ReportButton_comment.graphql";
+import { ReportButton_viewer } from "coral-stream/__generated__/ReportButton_viewer.graphql";
+
+import styles from "./ReportButton.css";
+
+interface Props {
+ onClick: () => void;
+ open?: boolean | null;
+
+ showAuthPopup: ShowAuthPopupMutation;
+ comment: ReportButton_comment;
+ viewer: ReportButton_viewer | null;
+}
+
+const ReportButton: FunctionComponent = ({
+ onClick,
+ showAuthPopup,
+ comment,
+ viewer,
+ open,
+}) => {
+ const onClickReport = useCallback(() => {
+ onClick();
+ }, []);
+
+ const isLoggedIn = useMemo(() => {
+ return Boolean(viewer);
+ }, [viewer]);
+
+ const isReported = useMemo(() => {
+ return (
+ comment.viewerActionPresence &&
+ (comment.viewerActionPresence.flag ||
+ comment.viewerActionPresence.dontAgree)
+ );
+ }, [comment]);
+
+ const signIn = useCallback(() => {
+ showAuthPopup({ view: "SIGN_IN" });
+ }, [showAuthPopup]);
+
+ if (isReported) {
+ return (
+
+
+
+ flag
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ flag
+
+
+
+
+ );
+};
+
+const enhanced = withShowAuthPopupMutation(
+ withFragmentContainer({
+ viewer: graphql`
+ fragment ReportButton_viewer on User {
+ id
+ }
+ `,
+ comment: graphql`
+ fragment ReportButton_comment on Comment {
+ id
+ viewerActionPresence {
+ dontAgree
+ flag
+ }
+ }
+ `,
+ })(ReportButton)
+);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css
new file mode 100644
index 000000000..a853d0c35
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css
@@ -0,0 +1,81 @@
+.root {
+ background-color: var(--v2-colors-grey-100);
+ padding: var(--v2-spacing-3);
+}
+
+.title {
+ display: block;
+
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-bold);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.heading {
+ display: block;
+
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-bold);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-bottom: var(--v2-spacing-1);
+}
+
+.detail {
+ display: inline-block;
+
+ 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-3);
+
+ color: var(--v2-colors-mono-500);
+
+ margin-bottom: var(--v2-spacing-1);
+}
+
+.list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ margin-top: var(--v2-spacing-2);
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.textAreaContainer {
+ margin-top: var(--v2-spacing-2);
+ margin-bottom: var(--v2-spacing-3);
+}
+
+.textareaInfo {
+ margin-top: -2px;
+ text-align: right;
+}
+
+.textarea {
+ width: 100%;
+ height: 60px;
+ box-sizing: border-box;
+ border: 1px solid var(--v2-colors-grey-300);
+ border-radius: var(--v2-round-corners);
+
+ font-family: var(--v2-font-family-primary);
+ font-weight: var(--v2-font-weight-primary-bold);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-mono-500);
+}
+
+.cancel {
+ margin-right: var(--v2-spacing-2);
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx
new file mode 100644
index 000000000..046d068ac
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx
@@ -0,0 +1,234 @@
+import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
+import { get } from "lodash";
+import React, { FunctionComponent } from "react";
+import { Field, FieldProps, Form } from "react-final-form";
+
+import { OnSubmit } from "coral-framework/lib/form";
+import { validateMaxLength } from "coral-framework/lib/validation";
+import CLASSES from "coral-stream/classes";
+import { Flex, RadioButton } from "coral-ui/components/v2";
+import { Button, ValidationMessage } from "coral-ui/components/v3";
+
+import styles from "./ReportCommentForm.css";
+
+const RadioField: FunctionComponent,
+ "validate" | "name" | "value" | "disabled" | "children"
+>> = ({ name, value, disabled, children }) => (
+
+ {({ input }) => (
+
+ )}
+
+);
+
+interface Props {
+ id: string;
+ onCancel: () => void;
+ onSubmit: OnSubmit;
+}
+
+export interface FormProps {
+ reason:
+ | "COMMENT_REPORTED_OFFENSIVE"
+ | "COMMENT_REPORTED_SPAM"
+ | "COMMENT_REPORTED_OTHER"
+ | "DISAGREE";
+ additionalDetails?: string;
+}
+
+class ReportCommentForm extends React.Component {
+ public render() {
+ const { onCancel, onSubmit, id } = this.props;
+ return (
+
+
+ )}
+
+
+ );
+ }
+}
+
+export default ReportCommentForm;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx
new file mode 100644
index 000000000..fa7edf330
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx
@@ -0,0 +1,101 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent, useCallback, useState } from "react";
+import { graphql } from "react-relay";
+
+import { InvalidRequestError } from "coral-framework/lib/errors";
+import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
+import { Icon } from "coral-ui/components/v2";
+import { CallOut } from "coral-ui/components/v3";
+
+import { ReportCommentFormContainer_comment } from "coral-stream/__generated__/ReportCommentFormContainer_comment.graphql";
+
+import CreateCommentDisagreeMutation from "./CreateCommentDisagreeMutation";
+import CreateCommentFlagMutation from "./CreateCommentFlagMutation";
+import ReportCommentForm from "./ReportCommentForm";
+
+interface Props {
+ comment: ReportCommentFormContainer_comment;
+ onClose: () => void;
+}
+
+const ReportCommentFormContainer: FunctionComponent = ({
+ comment,
+ onClose,
+}) => {
+ const [done, setDone] = useState(false);
+ const dontAgreeMutation = useMutation(CreateCommentDisagreeMutation);
+ const flagMutation = useMutation(CreateCommentFlagMutation);
+
+ const onSubmit = useCallback(
+ async (input, form) => {
+ try {
+ if (input.reason === "DISAGREE") {
+ await dontAgreeMutation({
+ commentID: comment.id,
+ // revision is guaranteed since we are able to interact with it
+ commentRevisionID: comment.revision!.id,
+ additionalDetails: input.additionalDetails,
+ });
+ } else {
+ await flagMutation({
+ commentID: comment.id,
+ // revision is guaranteed since we are able to interact with it
+ commentRevisionID: comment.revision!.id,
+ reason: input.reason,
+ additionalDetails: input.additionalDetails,
+ });
+ }
+ setDone(true);
+ } catch (error) {
+ if (error instanceof InvalidRequestError) {
+ return error.invalidArgs;
+ }
+ // eslint-disable-next-line no-console
+ console.error(error);
+ }
+
+ return undefined;
+ },
+ [setDone]
+ );
+
+ if (!done) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+const enhanced = withFragmentContainer({
+ comment: graphql`
+ fragment ReportCommentFormContainer_comment on Comment {
+ id
+ revision {
+ id
+ }
+ }
+ `,
+})(ReportCommentFormContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportFlowContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportFlowContainer.tsx
new file mode 100644
index 000000000..32803a1db
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportFlowContainer.tsx
@@ -0,0 +1,51 @@
+import React, { FunctionComponent, useCallback } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import { ReportFlowContainer_comment } from "coral-stream/__generated__/ReportFlowContainer_comment.graphql";
+import { ReportFlowContainer_viewer } from "coral-stream/__generated__/ReportFlowContainer_viewer.graphql";
+
+import ReportCommentFormContainer from "./ReportCommentFormContainer";
+
+interface Props {
+ viewer: ReportFlowContainer_viewer | null;
+ comment: ReportFlowContainer_comment;
+ onClose: () => void;
+}
+
+const ReportFlowContainer: FunctionComponent = ({
+ viewer,
+ comment,
+ onClose,
+}) => {
+ if (!viewer) {
+ return null;
+ }
+
+ const onFormClose = useCallback(() => {
+ onClose();
+ }, [onClose]);
+
+ return ({
+ viewer: graphql`
+ fragment ReportFlowContainer_viewer on User {
+ id
+ }
+ `,
+ comment: graphql`
+ fragment ReportFlowContainer_comment on Comment {
+ ...ReportCommentFormContainer_comment
+ id
+ viewerActionPresence {
+ dontAgree
+ flag
+ }
+ }
+ `,
+})(ReportFlowContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/index.ts b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/index.ts
new file mode 100644
index 000000000..cd0269dce
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/index.ts
@@ -0,0 +1,2 @@
+export { default, default as ReportFlowContainer } from "./ReportFlowContainer";
+export { default as ReportButton } from "./ReportButton";
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/CreateCommentFlagMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/CreateCommentFlagMutation.ts
deleted file mode 100644
index 822a71b4c..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/CreateCommentFlagMutation.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { pick } from "lodash";
-import { graphql } from "react-relay";
-import { Environment } from "relay-runtime";
-
-import { CoralContext } from "coral-framework/lib/bootstrap";
-import {
- commitMutationPromiseNormalized,
- createMutationContainer,
- MutationInput,
- MutationResponsePromise,
-} from "coral-framework/lib/relay";
-import { ReportCommentEvent } from "coral-stream/events";
-
-import { CreateCommentFlagMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentFlagMutation.graphql";
-
-export type CreateCommentFlagInput = MutationInput;
-
-const mutation = graphql`
- mutation CreateCommentFlagMutation($input: CreateCommentFlagInput!) {
- createCommentFlag(input: $input) {
- comment {
- id
- viewerActionPresence {
- flag
- }
- }
- clientMutationId
- }
- }
-`;
-
-let clientMutationId = 0;
-
-async function commit(
- environment: Environment,
- input: CreateCommentFlagInput,
- { eventEmitter }: CoralContext
-) {
- const reportCommentEvent = ReportCommentEvent.begin(eventEmitter, {
- reason: input.reason,
- commentID: input.commentID,
- });
- try {
- const result = await commitMutationPromiseNormalized(
- environment,
- {
- mutation,
- variables: {
- input: {
- ...pick(input, [
- "commentID",
- "commentRevisionID",
- "reason",
- "additionalDetails",
- ]),
- clientMutationId: (clientMutationId++).toString(),
- },
- },
- }
- );
- reportCommentEvent.success();
- return result;
- } catch (error) {
- reportCommentEvent.error({ message: error.message, code: error.code });
- throw error;
- }
-}
-
-export const withCreateCommentFlagMutation = createMutationContainer(
- "createCommentFlag",
- commit
-);
-
-export type CreateCommentFlagMutation = (
- input: CreateCommentFlagInput
-) => MutationResponsePromise;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.css
deleted file mode 100644
index 344ee6132..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.root {
- width: 260px;
-}
-
-.title {
- padding-right: calc(2 * var(--mini-unit));
-}
-
-.list {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-
-.detail {
- display: block;
- color: var(--palette-text-secondary);
-}
-
-.textarea {
- width: 100%;
- height: 60px;
- box-sizing: border-box;
- border: 1px solid var(--palette-grey-light);
-}
-
-.textareaInfo {
- margin-top: -2px;
- text-align: right;
-}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx
deleted file mode 100644
index c2d259bf1..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { Localized } from "@fluent/react/compat";
-import { get } from "lodash";
-import React, { FunctionComponent } from "react";
-import { Field, FieldProps, Form } from "react-final-form";
-
-import { OnSubmit } from "coral-framework/lib/form";
-import { validateMaxLength } from "coral-framework/lib/validation";
-import CLASSES from "coral-stream/classes";
-import ValidationMessage from "coral-stream/common/ValidationMessage";
-import {
- Button,
- Flex,
- HorizontalGutter,
- RadioButton,
- Typography,
-} from "coral-ui/components";
-
-import PropagateMount from "./PropagateMount";
-
-import styles from "./ReportCommentForm.css";
-
-const RadioField: FunctionComponent,
- "validate" | "name" | "value" | "disabled" | "children"
->> = ({ name, value, disabled, children }) => (
-
- {({ input }) => (
-
- )}
-
-);
-
-interface Props {
- id: string;
- onCancel: () => void;
- onResize: () => void;
- onSubmit: OnSubmit;
-}
-
-export interface FormProps {
- reason:
- | "COMMENT_REPORTED_OFFENSIVE"
- | "COMMENT_REPORTED_SPAM"
- | "COMMENT_REPORTED_OTHER"
- | "DISAGREE";
- additionalDetails?: string;
-}
-
-class ReportCommentForm extends React.Component {
- public render() {
- const { onCancel, onSubmit, onResize, id } = this.props;
- return (
-
- )}
-
- );
- }
-}
-
-export default ReportCommentForm;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentFormContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentFormContainer.tsx
deleted file mode 100644
index cd8e02c4b..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentFormContainer.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { EventEmitter2 } from "eventemitter2";
-import React, { Component } from "react";
-import { graphql } from "react-relay";
-
-import { withContext } from "coral-framework/lib/bootstrap";
-import { InvalidRequestError } from "coral-framework/lib/errors";
-import { withFragmentContainer } from "coral-framework/lib/relay";
-import { PropTypesOf } from "coral-framework/types";
-import { ShowReportPopoverEvent } from "coral-stream/events";
-
-import { ReportCommentFormContainer_comment as CommentData } from "coral-stream/__generated__/ReportCommentFormContainer_comment.graphql";
-
-import {
- CreateCommentDontAgreeMutation,
- withCreateCommentDontAgreeMutation,
-} from "./CreateCommentDontAgreeMutation";
-import {
- CreateCommentFlagMutation,
- withCreateCommentFlagMutation,
-} from "./CreateCommentFlagMutation";
-import ReportCommentForm from "./ReportCommentForm";
-import ThankYou from "./ThankYou";
-
-interface Props {
- eventEmitter: EventEmitter2;
- comment: CommentData;
- createCommentFlag: CreateCommentFlagMutation;
- createCommentDontAgree: CreateCommentDontAgreeMutation;
- onClose: () => void;
- onResize: () => void;
-}
-
-interface State {
- done: boolean;
-}
-
-export class ReportCommentFormContainer extends Component {
- public state = {
- done: false,
- };
-
- private handleOnSubmit: PropTypesOf<
- typeof ReportCommentForm
- >["onSubmit"] = async (input, form) => {
- try {
- if (input.reason === "DISAGREE") {
- await this.props.createCommentDontAgree({
- commentID: this.props.comment.id,
- // revision is guaranteed since we are able to interact with it
- commentRevisionID: this.props.comment.revision!.id,
- additionalDetails: input.additionalDetails,
- });
- } else {
- await this.props.createCommentFlag({
- commentID: this.props.comment.id,
- // revision is guaranteed since we are able to interact with it
- commentRevisionID: this.props.comment.revision!.id,
- reason: input.reason,
- additionalDetails: input.additionalDetails,
- });
- }
- this.setState({ done: true });
- } catch (error) {
- if (error instanceof InvalidRequestError) {
- return error.invalidArgs;
- }
- // eslint-disable-next-line no-console
- console.error(error);
- }
- return undefined;
- };
-
- public componentDidMount() {
- ShowReportPopoverEvent.emit(this.props.eventEmitter, {
- commentID: this.props.comment.id,
- });
- }
-
- public componentDidUpdate(prevProps: Props, prevState: State) {
- // Reposition popper after switching view.
- if (this.state.done && !prevState.done) {
- this.props.onResize();
- }
- }
-
- public render() {
- if (!this.state.done) {
- return (
-
- );
- }
- return ({
- comment: graphql`
- fragment ReportCommentFormContainer_comment on Comment {
- id
- revision {
- id
- }
- }
- `,
- })(ReportCommentFormContainer)
- )
- )
-);
-export type ReportCommentFormContainerProps = PropTypesOf;
-export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.css b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.css
deleted file mode 100644
index e2002d3f1..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.root {
- padding: calc(1 * var(--mini-unit));
-}
-
-.close {
- position: absolute;
- top: calc(0.5 * var(--mini-unit));
- right: calc(0.5 * var(--mini-unit));
-}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.spec.tsx
deleted file mode 100644
index 14a20a817..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { removeFragmentRefs } from "coral-framework/testHelpers";
-import { PropTypesOf } from "coral-framework/types";
-
-import ReportPopover from "./ReportPopover";
-
-const ReportPopoverN = removeFragmentRefs(ReportPopover);
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- comment: {},
- onClose: noop,
- onResize: noop,
- };
- const renderer = createRenderer();
- renderer.render(["comment"];
- onClose: () => void;
- onResize: () => void;
-}
-
-const ReportPopover: FunctionComponent = ({
- onClose,
- onResize,
- comment,
-}) => {
- return (
-
-
- close
-
-
- );
-};
-
-export default ReportPopover;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.css b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.css
deleted file mode 100644
index 4a8c62909..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.root {
- width: 260px;
-}
-
-.title {
- padding-right: calc(2 * var(--mini-unit));
-}
-
-.dismiss {
- margin-top: -3px;
-}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.spec.tsx
deleted file mode 100644
index eb3ba3d87..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import ThankYou from "./ThankYou";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- onDismiss: noop,
- };
- const renderer = createRenderer();
- renderer.render( {
- public render() {
- const { onDismiss } = this.props;
- const Content: FunctionComponent = ({ children }) => (
-
- {children}
- {" "}
-
-
- );
-
- return (
-
-
-
-
-
-
- );
- }
-}
-
-export default ReportForm;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ReportPopover.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ReportPopover.spec.tsx.snap
deleted file mode 100644
index b66256282..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ReportPopover.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
- close
-
-
-
-`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ThankYou.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ThankYou.spec.tsx.snap
deleted file mode 100644
index 045619fee..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ThankYou.spec.tsx.snap
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
-
-
-
-`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/index.ts b/src/core/client/stream/tabs/Comments/Comment/ReportPopover/index.ts
deleted file mode 100644
index f6769b653..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReportPopover/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ReportPopover";
diff --git a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css
new file mode 100644
index 000000000..795c33462
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css
@@ -0,0 +1,24 @@
+$commentsConversationLinkColor: var(--v2-colors-stream-blue-500);
+$commentsConversationLinkColorHovered: var(--v2-colors-stream-blue-700);
+$commentsConversationLinkColorActive: var(--v2-colors-stream-blue-800);
+
+.conversationLink {
+ &.colorRegular {
+ color: $commentsConversationLinkColor;
+ }
+
+ &:not(.disabled) {
+ &.colorRegular {
+ &.mouseHover {
+ color: $commentsConversationLinkColorHovered;
+ & > span {
+ text-decoration: underline;
+ }
+ }
+ &.active,
+ &:active {
+ color: $commentsConversationLinkColorActive;
+ }
+ }
+ }
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
index 915897f66..bd80c9439 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
@@ -1,7 +1,15 @@
import { Localized } from "@fluent/react/compat";
-import React, { EventHandler, FunctionComponent, MouseEvent } from "react";
+import cn from "classnames";
+import React, {
+ EventHandler,
+ FunctionComponent,
+ MouseEvent,
+ useMemo,
+} from "react";
-import { Button } from "coral-ui/components";
+import { Button } from "coral-ui/components/v2";
+
+import styles from "./ShowConversationLink.css";
export interface ShowConversationLinkProps {
id?: string;
@@ -13,13 +21,24 @@ export interface ShowConversationLinkProps {
const ShowConversationLink: FunctionComponent = (
props
) => {
+ const classesOverride = useMemo(
+ () => ({
+ colorRegular: styles.colorRegular,
+ active: styles.active,
+ mouseHover: styles.mouseHover,
+ disabled: styles.disabled,
+ }),
+ [styles]
+ );
+
return (
-`;
-
-exports[`renders disabled reply when story is closed 1`] = `
-
-
-
-
-
-
-
-
-
-
- }
- indentLevel={1}
- parentAuthorName={null}
- showEditedMarker={false}
+ toggleCollapsed={[Function]}
topBarRight={
+
+`;
+
+exports[`renders disabled reply when story is closed 1`] = `
+
+
+
+
+
+
+
+
+
+
+ }
+ indentLevel={1}
+ parentAuthorName={null}
+ showEditedMarker={false}
+ staticTopBarRight={
+
+ }
+ toggleCollapsed={[Function]}
+ topBarRight={
+
+
+ }
+ username={
+
+
+
-
@@ -1092,18 +1686,11 @@ exports[`renders in reply to 1`] = `
indentLevel={1}
parentAuthorName="ParentAuthor"
showEditedMarker={false}
- topBarRight={
-
-
- }
- username={
+ staticTopBarRight={
-
+ }
+ toggleCollapsed={[Function]}
+ topBarRight={
+
+
+ }
+ username={
+
+
+
-
@@ -1347,18 +2099,11 @@ exports[`renders username and body 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
- topBarRight={
-
-
- }
- username={
+ staticTopBarRight={
-
+ }
+ toggleCollapsed={[Function]}
+ topBarRight={
+
+
+ }
+ username={
+
+
+
-
@@ -1605,18 +2503,11 @@ exports[`shows conversation link 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
- topBarRight={
-
-
- }
- username={
+ staticTopBarRight={
-
+ }
+ toggleCollapsed={[Function]}
+ topBarRight={
+
+
+ }
+ username={
+
+
In reply to <Username></Username>
-
+
`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap
index 3f9f26e99..4c56d941e 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap
@@ -2,13 +2,37 @@
exports[`renders correctly 1`] = `
-
+
+
`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap
index 1a4e05415..efe31d029 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap
@@ -1,27 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
-
-
reply
-
-
-
+
+
+
+
+
`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap
index 52db00883..23e92c8c5 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap
@@ -6,12 +6,21 @@ exports[`renders correctly 1`] = `
>
Read More of this Conversation >
diff --git a/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.css b/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.css
new file mode 100644
index 000000000..968fa8d80
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.css
@@ -0,0 +1,33 @@
+.showCommentButton {
+ margin-top: var(--v2-spacing-3);
+}
+
+.outlined {
+ &.colorSecondary {
+ border-style: solid;
+ border-width: 1px;
+
+ &:not(.disabled),
+ &:not(:disabled) {
+ background-color: transparent;
+ border-color: var(--v2-colors-grey-500);
+ color: var(--v2-colors-grey-500);
+ }
+
+ &:hover, &.mouseHover {
+ background-color: var(--v2-colors-grey-500);
+ border-color: var(--v2-colors-grey-500);
+ color: var(--v2-colors-pure-white);
+ }
+ &:active, &.active {
+ background-color: var(--v2-colors-grey-600);
+ border-color: var(--v2-colors-grey-600);
+ color: var(--v2-colors-pure-white);
+ }
+ &.disabled {
+ background-color: var(--v2-colors-pure-white);
+ border-color: var(--v2-colors-grey-400);
+ color: var(--v2-colors-grey-400);
+ }
+ }
+}
diff --git a/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx b/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx
index b4c023240..b47f71ab1 100644
--- a/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx
@@ -2,6 +2,7 @@ import { Localized } from "@fluent/react/compat";
import React, {
FunctionComponent,
ReactNode,
+ useCallback,
useEffect,
useState,
} from "react";
@@ -10,79 +11,106 @@ import { graphql } from "react-relay";
import { usePrevious } from "coral-framework/hooks";
import { withFragmentContainer } from "coral-framework/lib/relay";
import CLASSES from "coral-stream/classes";
-import { CallOut } from "coral-ui/components";
+import { Button, Tombstone } from "coral-ui/components/v3";
import { IgnoredTombstoneOrHideContainer_comment as CommentData } from "coral-stream/__generated__/IgnoredTombstoneOrHideContainer_comment.graphql";
import { IgnoredTombstoneOrHideContainer_viewer as ViewerData } from "coral-stream/__generated__/IgnoredTombstoneOrHideContainer_viewer.graphql";
+import styles from "./IgnoredTombstoneOrHideContainer.css";
+
interface Props {
viewer: ViewerData | null;
comment: CommentData;
children: ReactNode;
+ singleConversationView?: boolean;
}
-/**
- * useTombstone is a React hook that determines whether or not
- * to show a tombstone instead of hiding the comment.
- *
- * @param hide boolean if comment should be hidden
- */
-const useTombstone = (hide: boolean) => {
- const [tombstone, setTombstone] = useState
(false);
- const prevHide = usePrevious(hide);
-
- useEffect(() => {
- // When we first rendered this comment but then hide it,
- // show a tombstone instead.
- if (!tombstone && hide === true && prevHide === false) {
- setTombstone(true);
- }
- }, [hide, prevHide, tombstone, setTombstone]);
- return tombstone;
-};
-
const IgnoredTombstoneOrHideContainer: FunctionComponent = ({
viewer,
comment,
children,
+ singleConversationView,
}) => {
const deleted = Boolean(!comment.author);
if (deleted) {
return (
<>
-
+
+
{children}
);
}
- const hide = Boolean(
+ const ignored = Boolean(
comment.author &&
viewer &&
viewer.ignoredUsers.some((u) => Boolean(u.id === comment.author!.id))
);
- const tombstone = useTombstone(hide);
+ const [tombstone, setTombstone] = useState(false);
+ const [forceVisible, setForceVisible] = useState(false);
+ const previouslyIgnored = usePrevious(ignored);
- if (!hide) {
+ useEffect(() => {
+ if (singleConversationView && ignored) {
+ setTombstone(true);
+ }
+
+ // When we first rendered this comment but then hide it,
+ // show a tombstone instead.
+ if (!tombstone && ignored === true && previouslyIgnored === false) {
+ setTombstone(true);
+ }
+ }, [ignored, previouslyIgnored, tombstone, setTombstone]);
+
+ const onShowComment = useCallback(() => {
+ setForceVisible(true);
+ }, [setForceVisible]);
+
+ if (!ignored || forceVisible) {
return <>{children};
}
if (tombstone) {
return (
-
+
+
+ {singleConversationView && (
+
+
+
+ )}
+
);
}
return null;
diff --git a/src/core/client/stream/tabs/Comments/Indent.css b/src/core/client/stream/tabs/Comments/Indent.css
index 9b07bb0db..e0745f802 100644
--- a/src/core/client/stream/tabs/Comments/Indent.css
+++ b/src/core/client/stream/tabs/Comments/Indent.css
@@ -1,39 +1,41 @@
.root {
}
+.collapsed {
+}
+
+.open {
+ padding-left: var(--v2-spacing-1);
+}
+
.level1 {
- padding-left: var(--mini-unit);
- border-left: 3px solid var(--palette-grey-darkest);
+ margin-left: var(--v2-spacing-5);
+ border-left: 2px solid var(--v2-colors-grey-600);
}
.level2 {
- padding-left: var(--mini-unit);
- margin-left: var(--mini-unit);
- border-left: 3px solid var(--palette-grey-dark);
+ margin-left: calc(var(--v2-spacing-5) + var(--v2-spacing-2));
+ border-left: 2px solid var(--v2-colors-grey-500);
}
.level3 {
- padding-left: var(--mini-unit);
- margin-left: calc(2 * var(--mini-unit));
- border-left: 3px solid var(--palette-grey-main);
+ margin-left: calc(var(--v2-spacing-5) + 2 * var(--v2-spacing-2));
+ border-left: 2px solid #8e9ba5;
}
.level4 {
- padding-left: var(--mini-unit);
- margin-left: calc(3 * var(--mini-unit));
- border-left: 3px solid var(--palette-grey-light);
+ margin-left: calc(var(--v2-spacing-5) + 3 * var(--v2-spacing-2));
+ border-left: 2px solid #b8bcbd;
}
.level5 {
- padding-left: var(--mini-unit);
- margin-left: calc(4 * var(--mini-unit));
- border-left: 3px solid var(--palette-grey-lighter);
+ margin-left: calc(var(--v2-spacing-5) + 4 * var(--v2-spacing-2));
+ border-left: 2px solid #cccfd0;
}
.level6 {
- padding-left: var(--mini-unit);
- margin-left: calc(5 * var(--mini-unit));
- border-left: 3px solid var(--palette-grey-lightest);
+ margin-left: calc(var(--v2-spacing-5) + 5 * var(--v2-spacing-2));
+ border-left: 2px solid #e1e2e3;
}
.noBorder {
diff --git a/src/core/client/stream/tabs/Comments/Indent.tsx b/src/core/client/stream/tabs/Comments/Indent.tsx
index 06f362c24..833f41647 100644
--- a/src/core/client/stream/tabs/Comments/Indent.tsx
+++ b/src/core/client/stream/tabs/Comments/Indent.tsx
@@ -10,6 +10,7 @@ export interface IndentProps {
level?: number;
noBorder?: boolean;
children: React.ReactNode;
+ collapsed?: boolean;
}
const levels = [
@@ -35,6 +36,8 @@ const Indent: FunctionComponent = (props) => {
{props.children}
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css
index 48b669c4e..a8e0f8de1 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css
@@ -1,11 +1,33 @@
.root {
}
-.loadMore {
- padding-left: var(--mini-unit);
- padding-bottom: var(--mini-unit);
+.rootParent {
+ padding-bottom: var(--v2-spacing-2);
}
-.showMoreButton {
- text-transform: uppercase;
+.parentList {
+ padding-bottom: var(--v2-spacing-2);
+}
+
+.parentContainer {
+ margin-bottom: var(--v2-spacing-2);
+}
+
+.targetComment {
+ margin-left: calc(var(--v2-spacing-4) - 1.5px);
+}
+
+.loadMore {
+ padding-left: var(--v2-spacing-2);
+ padding-bottom: var(--v2-spacing-2);
+}
+
+.showMoreContainer {
+ margin-left: -7px;
+
+ padding-bottom: var(--v2-spacing-2);
+}
+
+.showMoreIcon {
+ color: var(--v2-colors-mono-100);
}
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
index 79550b7be..2f18b6209 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
@@ -11,19 +11,16 @@ import {
withPaginationContainer,
} from "coral-framework/lib/relay";
import CLASSES from "coral-stream/classes";
-import Counter from "coral-stream/common/Counter";
import { ShowMoreOfConversationEvent } from "coral-stream/events";
import {
SetCommentIDMutation,
withSetCommentIDMutation,
} from "coral-stream/mutations";
-import {
- CommentContainer,
- RootParent,
- UserTagsContainer,
-} from "coral-stream/tabs/Comments/Comment";
+import { CommentContainer } from "coral-stream/tabs/Comments/Comment";
+import IgnoredTombstoneOrHideContainer from "coral-stream/tabs/Comments/IgnoredTombstoneOrHideContainer";
import LocalReplyListContainer from "coral-stream/tabs/Comments/ReplyList/LocalReplyListContainer";
-import { Button, Flex, HorizontalGutter } from "coral-ui/components";
+import { Counter, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
+import { Button } from "coral-ui/components/v3";
import { ConversationThreadContainer_comment as CommentData } from "coral-stream/__generated__/ConversationThreadContainer_comment.graphql";
import { ConversationThreadContainer_settings as SettingsData } from "coral-stream/__generated__/ConversationThreadContainer_settings.graphql";
@@ -61,8 +58,6 @@ const ConversationThreadContainer: FunctionComponent
= ({
loadMoreEvent.success();
} catch (error) {
loadMoreEvent.error({ message: error.message, code: error.code });
- // eslint-disable-next-line no-console
- console.error(error);
}
}, [loadMore, beginLoadMoreEvent]);
const parents = comment.parents.edges.map((edge) => edge.node);
@@ -89,80 +84,94 @@ const ConversationThreadContainer: FunctionComponent = ({
className={cn(CLASSES.conversationThread.$root, styles.root)}
data-testid={dataTestID}
>
-
-
- )}
- {remaining > 0 && (
-
-
-
- {remaining > 1 && {remaining} }
-
-
- )}
-
-
- {parents.map((parent, i) => (
- 0}>
-
+
+ {rootParent && (
+
+
+
+ )}
+
+
+
+ more_vert
+
+
+ {remaining > 1 && {remaining} }
+
+ )}
+
+
+ {parents.map((parent) => (
+
+
+
+
+
+
+
+
))}
-
-
-
+
+
+
+
+
+
);
};
@@ -205,6 +214,7 @@ const enhanced = withContext((ctx) => ({
) {
id
...CommentContainer_comment
+ ...IgnoredTombstoneOrHideContainer_comment
rootParent {
id
author {
@@ -213,6 +223,8 @@ const enhanced = withContext((ctx) => ({
}
createdAt
...UserTagsContainer_comment
+ ...CommentContainer_comment
+ ...IgnoredTombstoneOrHideContainer_comment
}
parentCount
parents(last: $count, before: $cursor)
@@ -222,6 +234,7 @@ const enhanced = withContext((ctx) => ({
id
...CommentContainer_comment
...LocalReplyListContainer_comment
+ ...IgnoredTombstoneOrHideContainer_comment
}
}
}
@@ -231,6 +244,7 @@ const enhanced = withContext((ctx) => ({
fragment ConversationThreadContainer_viewer on User {
...CommentContainer_viewer
...LocalReplyListContainer_viewer
+ ...IgnoredTombstoneOrHideContainer_viewer
}
`,
},
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.css b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.css
index aec259d9b..4a87098ca 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.css
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.css
@@ -7,19 +7,31 @@
padding-left: calc(2 * var(--mini-unit));
}
-.title1 {
- font-size: calc(14rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(20em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
+.header {
+ padding-top: var(--v2-spacing-2);
+ padding-bottom: var(--v2-spacing-2);
}
-.title2 {
- font-size: calc(18rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(20em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
+
+.title {
+ font-family: var(--v2-font-family-primary);
+ font-style: normal;
+ font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-size: var(--v2-font-size-2);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-mono-500);
+
+ text-align: center;
+}
+
+@media (min-width: $breakpoints-xs) {
+ .title {
+ font-family: var(--v2-font-family-primary);
+ font-style: normal;
+ font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-size: var(--v2-font-size-3);
+ line-height: var(--v2-line-height-3);
+
+ color: var(--v2-colors-mono-500);
+ }
}
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
index 489d32a69..ce315898c 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
@@ -6,13 +6,8 @@ import { PropTypesOf } from "coral-framework/types";
import CLASSES from "coral-stream/classes";
import UserBoxContainer from "coral-stream/common/UserBox";
import ReplyListContainer from "coral-stream/tabs/Comments/ReplyList";
-import {
- Button,
- CallOut,
- Flex,
- HorizontalGutter,
- Typography,
-} from "coral-ui/components";
+import { Flex, HorizontalGutter } from "coral-ui/components/v2";
+import { Button, CallOut } from "coral-ui/components/v3";
import ConversationThreadContainer from "./ConversationThreadContainer";
@@ -52,37 +47,40 @@ const PermalinkView: FunctionComponent
= ({
size="double"
>
-
-
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.css b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.css
index dc8871712..bb9c9b696 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.css
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.css
@@ -7,11 +7,11 @@
display: flex;
justify-content: center;
align-items: center;
- left: calc(-1 * var(--mini-unit) - var(--mini-unit) - 1px);
- background-color: var(--palette-common-white);
- width: calc(2 * var(--mini-unit));
+ left: calc(-1 * var(--v2-spacing-2) - var(--v2-spacing-2) - 1px);
+ background-color: var(--v2-colors-pure-white);
+ width: calc(2 * var(--v2-spacing-2));
height: 23px;
- color: var(--palette-grey-main);
+ color: var(--v2-colors-grey-500);
}
.end {
@@ -24,8 +24,8 @@
}
.circle {
- width: var(--mini-unit);
- height: var(--mini-unit);
+ width: var(--v2-spacing-2);
+ height: var(--v2-spacing-2);
fill: currentColor;
stroke: currentColor;
}
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.css b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.css
index 4814310c3..95d2c5fc4 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.css
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.css
@@ -1,7 +1,7 @@
.root {
- border-left: 2px solid var(--palette-grey-main);
- padding-left: var(--mini-unit);
- margin-left: calc(0.5 * var(--mini-unit));
+ border-left: 2px solid var(--v2-colors-grey-500);
+ padding-left: var(--v2-spacing-2);
+ margin-left: calc(0.5 * var(--v2-spacing-2));
}
.dotted {
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap b/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
index e49d07f3d..283c4492b 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
@@ -11,52 +11,43 @@ exports[`renders comment not found 1`] = `
/>