mirror of
https://github.com/wassname/talk.git
synced 2026-07-25 13:30:59 +08:00
new admin branding (#2692)
* add comment revisions * add strings * update fixtures * fix fixtures * [CORL-629] Update admin moderation containers to use new branding tokens (#2600) * Convert the moderation card components to use new styles CORL-629 * Style the details area in the moderate card using new font and color styles CORL-629 * Update FlagDetails on Moderate Card to match new branding styles CORL-629 * Remove typography from ModerateCard Username CORL-629 * Remove unnecessary new typography tokens created while experimenting CORL-629 * Update background colors of username buttons on moderate card CORL-629 * Update approve reject buttons to use new colors CORL-629 * Fix alignment of username and "Reply to" in InReplyTo component CORL-629 * Update moderated by on moderate card to match new branding CORL-629 * Create distinct admin marker and counter components with new branding styles Update moderate card components to use these distinct newly branded styles. CORL-629 * Create independent Tabs control with new styling for admin area Use it on the moderate card details area. CORL-629 * Remove letter spacing from moderate card styles CORL-629 * Update "DETAILS" tab on moderate card to be named "INFO" CORL-629 * Update some missing v2 css variables CORL-629 * Tweak the spacing of the COMMENT link and title on the moderate card CORL-629 * Update details font color on moderate card CORL-629 * Update spacing on newly styled Admin Tab component CORL-629 * Update spacing of reply to username on the moderate card CORL-629 * Update moderate card comment text area minimum width and height CORL-629 * Update vertical divider on moderate card to updated branding CORL-629 * Introduce new bold open sans font face Downgrades all existing bold's to semi-bold as they were equivalent before. CORL-629 * Update moderate card details tabs to use new bold open sans font CORL-629 * Create an admin specific timestamp control that implements new branding CORL-629 * Migrate shared moderate card styles into child component files CORL-629 * [CORL-631] Update admin side main navigation to new branding styles (#2625) * Convert the moderation card components to use new styles CORL-629 * Style the details area in the moderate card using new font and color styles CORL-629 * Update FlagDetails on Moderate Card to match new branding styles CORL-629 * Remove typography from ModerateCard Username CORL-629 * Remove unnecessary new typography tokens created while experimenting CORL-629 * Update background colors of username buttons on moderate card CORL-629 * Update approve reject buttons to use new colors CORL-629 * Fix alignment of username and "Reply to" in InReplyTo component CORL-629 * Update moderated by on moderate card to match new branding CORL-629 * Create distinct admin marker and counter components with new branding styles Update moderate card components to use these distinct newly branded styles. CORL-629 * Create independent Tabs control with new styling for admin area Use it on the moderate card details area. CORL-629 * Remove letter spacing from moderate card styles CORL-629 * Update "DETAILS" tab on moderate card to be named "INFO" CORL-629 * Update some missing v2 css variables CORL-629 * Tweak the spacing of the COMMENT link and title on the moderate card CORL-629 * Update details font color on moderate card CORL-629 * Update spacing on newly styled Admin Tab component CORL-629 * Update spacing of reply to username on the moderate card CORL-629 * Update moderate card comment text area minimum width and height CORL-629 * Update vertical divider on moderate card to updated branding CORL-629 * Introduce new bold open sans font face Downgrades all existing bold's to semi-bold as they were equivalent before. CORL-629 * Update moderate card details tabs to use new bold open sans font CORL-629 * Create an admin specific timestamp control that implements new branding CORL-629 * Migrate shared moderate card styles into child component files CORL-629 * Update main navigation admin side to use new branding styles CORL-631 * Bring in some preliminary color and font styles for the search bar This helps it match navigation, but does not update all the sub-styles of the search bar's many child components. CORL-631 * [CORL-694] use new styles for decision history (#2644) * use new styles for decision history * remove reference to nonexistent variable * update snaps * [CORL 695] admin branding - user menu (#2650) * update user menu, popover, and dropdown to new design tokens * fix feature button colours * use v2 spacing vars * admin branding: tables (#2651) * update user menu, popover, and dropdown to new design tokens * fix feature button colours * use v2 spacing vars * style stories and users table * update snap * update user status font weight * remove duplicate declaration * fix line height references * update design tokens for text inputs and selects (#2658) * use box shadow instead of outline for focus states * Update snapshots to adjust for resolved merge conflicts * Bring new branding styles to button components (#2667) * Create preliminary filled and outline buttons that match branding * Add adornment button variant to newly branded button * Add the ghost variant to the newly branded button component * Add underlined variant to the newly branded button component * Remove external Icon composes property * Convert camel-case button variables to kebab-case * [CORL-672] Configuration pages new branding (#2673) * style config side nav * general configuration tab branding * organization tab branding * moderation configuration branding * banned/suspect words config branding * email config branding * advanced settings branding * auth config branding * move helpertext and fieldset components * add textarea component * add back gutters on table search * update snaps * fix header component to accept labels * use new spacing form components * use spacing components for advanced config * fix tests * fix line height of radio buttons * update validation message branding * update snaps * fix paths casing * try lowercase then * add docs for new form components * move description component * update snaps * move components to /ui/v2 * [CORL-673] Update the moderate area search menu to use new branding styles (#2672) * Create preliminary filled and outline buttons that match branding * Add adornment button variant to newly branded button * Add the ghost variant to the newly branded button component * Add underlined variant to the newly branded button component * Remove external Icon composes property * Convert camel-case button variables to kebab-case * Preliminarily migrate raw components into v2 to prep for branding updates CORL-673 * Preliminarily update the search results bar to use new branding tokens CORL-673 * Update styles to new branding on migrated v2 client-ui components CORL-673 * Update see all and moderate all search option icons CORL-673 * style config side nav * general configuration tab branding * organization tab branding * moderation configuration branding * banned/suspect words config branding * email config branding * advanced settings branding * auth config branding * move helpertext and fieldset components * add textarea component * add back gutters on table search * update snaps * fix header component to accept labels * use new spacing form components * use spacing components for advanced config * fix tests * fix line height of radio buttons * update validation message branding * update snaps * fix paths casing * try lowercase then * add docs for new form components * move description component * update snaps * move components to /ui/v2 * Set size="md" on the Icon component and not the Localized component CORL-673 * tag component * [CORL-669] user drawer + misc branding (#2686) * tag component * top of user drawer branding * recent history in drawer * add tooltips component * use correct spacing prop * history tabs * user history and rejected comments * move callout component' * moderator notes components * account history table * table user row * swap in tabs components * remove overflow:hidden on buttons * update snaps * replace overflow scroll with auto * clean up from rebasing vs master * fix ts * sort exports * fix confusing linting errors * update snaps * clean up nav bar design * adjust nav hover colors * comment content component * update nav hover styles * fix search bar border * clean up moderate card components * more user drawer cleanup * user role switcher * update textfield vars and variants * update components in community page * move clickoutside component * clean up stories table * moderate route components * single moderate view * queue components * delay component * relative time component * decision history components * user drawer components cleanup * configure components * clean up buttons * update snaps * add all exports * [CORL-674] admin branding: modals (#2695) * update hotkeys modal components * hotkeys modal * user status change modals * user status change modals * invite users modal * fix tests * fix incorrect i18n string * resolve merge conflicts * move fonts to devdeps * Fix username props interface * fix dom nesting in components * update formatting in strings * rewrite delay component as functional component * remove tslint comments * change configure header component props
This commit is contained in:
Tessa Thornton
Generated
+12
@@ -34509,6 +34509,18 @@
|
||||
"integrity": "sha512-oaqDlrGz0dhBvNlt6iEtWWs6zFSodhxPlYzK3gDoEBTAQvImWipOqeb4u2XI77sY+UZkS1wu6kAxJYUMySJ+iQ==",
|
||||
"dev": true
|
||||
},
|
||||
"typeface-nunito": {
|
||||
"version": "0.0.72",
|
||||
"resolved": "https://registry.npmjs.org/typeface-nunito/-/typeface-nunito-0.0.72.tgz",
|
||||
"integrity": "sha512-id43vYQiM9emQ6sbysLDRp8fb39Dk5yW/q6uSPHJnE1XVDSfrxYWFg/YiSoiaK+kO7wbuWb2HSjCAfH96Mabvg==",
|
||||
"dev": true
|
||||
},
|
||||
"typeface-open-sans": {
|
||||
"version": "0.0.75",
|
||||
"resolved": "https://registry.npmjs.org/typeface-open-sans/-/typeface-open-sans-0.0.75.tgz",
|
||||
"integrity": "sha512-0lLmB7pfj113OP4T78SbpSmC4OCdFQ0vUxdSXQccsSb6qF76F92iEuC/DghFgmPswTyidk8+Hwf+PS/htiJoRQ==",
|
||||
"dev": true
|
||||
},
|
||||
"typeface-source-sans-pro": {
|
||||
"version": "0.0.54",
|
||||
"resolved": "https://registry.npmjs.org/typeface-source-sans-pro/-/typeface-source-sans-pro-0.0.54.tgz",
|
||||
|
||||
@@ -365,6 +365,8 @@
|
||||
"typeface-source-sans-pro": "^0.0.54",
|
||||
"typescript": "3.3.4000",
|
||||
"typescript-snapshots-plugin": "^1.6.0",
|
||||
"typeface-nunito": "0.0.72",
|
||||
"typeface-open-sans": "0.0.75",
|
||||
"wait-for-expect": "^1.1.1",
|
||||
"webpack": "^4.30.0",
|
||||
"webpack-assets-manifest": "^3.1.1",
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Typography } from "coral-ui/components";
|
||||
|
||||
import ApprovedIcon from "./ApprovedIcon";
|
||||
import DecisionItem from "./DecisionItem";
|
||||
import DotDivider from "./DotDivider";
|
||||
@@ -10,6 +8,7 @@ import Footer from "./Footer";
|
||||
import GoToCommentLink from "./GoToCommentLink";
|
||||
import Info from "./Info";
|
||||
import Timestamp from "./Timestamp";
|
||||
import Username from "./Username";
|
||||
|
||||
interface Props {
|
||||
href: string;
|
||||
@@ -18,10 +17,6 @@ interface Props {
|
||||
onGotoComment?: React.EventHandler<React.MouseEvent>;
|
||||
}
|
||||
|
||||
const Username: FunctionComponent<{ username: string }> = ({ username }) => (
|
||||
<strong>{username}</strong>
|
||||
);
|
||||
|
||||
const ApprovedComment: FunctionComponent<Props> = props => (
|
||||
<DecisionItem icon={<ApprovedIcon />}>
|
||||
<Localized
|
||||
@@ -31,9 +26,7 @@ const ApprovedComment: FunctionComponent<Props> = props => (
|
||||
<Info>{"Approved comment by <Username></Username>"}</Info>
|
||||
</Localized>
|
||||
<Footer>
|
||||
<Typography variant="timestamp">
|
||||
<Timestamp>{props.date}</Timestamp>
|
||||
</Typography>
|
||||
<Timestamp>{props.date}</Timestamp>
|
||||
<DotDivider />
|
||||
<GoToCommentLink href={props.href} onClick={props.onGotoComment} />
|
||||
</Footer>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.root {
|
||||
color: var(--palette-success-main);
|
||||
color: var(--v2-palette-success-main);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Icon } from "coral-ui/components";
|
||||
import { Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./ApprovedIcon.css";
|
||||
|
||||
const ApprovedIcon: FunctionComponent = () => (
|
||||
<Icon className={styles.root}>check</Icon>
|
||||
<Icon size="md" className={styles.root}>
|
||||
check_circled
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export default ApprovedIcon;
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
}
|
||||
|
||||
.historyIcon {
|
||||
color: var(--palette-text-secondary);
|
||||
margin-right: calc(1.5 * var(--mini-unit));
|
||||
color: var(--v2-palette-text-secondary);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { BaseButton, ClickOutside, Icon, Popover } from "coral-ui/components";
|
||||
import {
|
||||
BaseButton,
|
||||
ClickOutside,
|
||||
Icon,
|
||||
Popover,
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import DecisionHistoryQuery from "./DecisionHistoryQuery";
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Delay, Flex, Spinner } from "coral-ui/components";
|
||||
import { Delay, Flex, Spinner } from "coral-ui/components/v2";
|
||||
|
||||
import Main from "./Main";
|
||||
import Title from "./Title";
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.root {
|
||||
padding: calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit))
|
||||
calc(0.5 * var(--mini-unit)) 0;
|
||||
padding: var(--v2-spacing-2) var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
.leftCol {
|
||||
@@ -8,6 +7,6 @@
|
||||
justify-content: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: calc(3 * var(--mini-unit));
|
||||
padding-top: 3px;
|
||||
margin-right: var(--v2-spacing-2);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Flex } from "coral-ui/components";
|
||||
import { Flex } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./DecisionItem.css";
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
list-style-type: none;
|
||||
|
||||
& > * {
|
||||
border-bottom: 1px solid var(--palette-divider);
|
||||
border-bottom: 1px solid var(--v2-palette-decision-history-border);
|
||||
}
|
||||
& > *:last-child {
|
||||
border-bottom: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.root {
|
||||
height: 100%;
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
line-height: calc(12em / 12);
|
||||
color: var(--palette-divider);
|
||||
padding: 0 calc(0.5 * var(--mini-unit));
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-palette-timestamp);
|
||||
padding: 0 var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
.root {
|
||||
padding: calc(1.5 * var(--mini-unit)) calc(2 * var(--mini-unit));
|
||||
}
|
||||
|
||||
.text {
|
||||
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-body-short);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Flex, Typography } from "coral-ui/components";
|
||||
import { Flex } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./Empty.css";
|
||||
|
||||
const Empty: FunctionComponent<{}> = () => (
|
||||
<Flex justifyContent="center" alignItems="center" className={styles.root}>
|
||||
<Localized id="decisionHistory-youWillSeeAList">
|
||||
<Typography>
|
||||
<div className={styles.text}>
|
||||
You will see a list of your post moderation actions here.
|
||||
</Typography>
|
||||
</div>
|
||||
</Localized>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
.root {
|
||||
margin-top: var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Flex } from "coral-ui/components";
|
||||
import { Flex } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./Footer.css";
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
.root {
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(14em / 12);
|
||||
letter-spacing: calc(0.2em / 12);
|
||||
color: var(--palette-primary-main);
|
||||
text-decoration: none;
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-1);
|
||||
color: var(--v2-palette-link-text);
|
||||
font-style: var(--v2-font-style-underline);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
|
||||
import { Link } from "found";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Icon, TextLink } from "coral-ui/components";
|
||||
import { Icon, TextLink } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./GoToCommentLink.css";
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
.root {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
line-height: calc(16em / 12);
|
||||
/*
|
||||
Fallback begin
|
||||
|
||||
@@ -10,4 +8,9 @@
|
||||
word-break: break-all;
|
||||
/* Fallback end */
|
||||
word-break: break-word;
|
||||
color: var(--v2-palette-text-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--v2-font-size-2);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Typography } from "coral-ui/components";
|
||||
|
||||
import styles from "./Info.css";
|
||||
|
||||
interface Props {
|
||||
@@ -9,7 +7,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const Info: FunctionComponent<Props> = props => (
|
||||
<Typography className={styles.root}>{props.children}</Typography>
|
||||
<span className={styles.root}>{props.children}</span>
|
||||
);
|
||||
|
||||
export default Info;
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Typography } from "coral-ui/components";
|
||||
|
||||
import DecisionItem from "./DecisionItem";
|
||||
import DotDivider from "./DotDivider";
|
||||
import Footer from "./Footer";
|
||||
@@ -10,6 +8,7 @@ import GoToCommentLink from "./GoToCommentLink";
|
||||
import Info from "./Info";
|
||||
import RejectedIcon from "./RejectedIcon";
|
||||
import Timestamp from "./Timestamp";
|
||||
import Username from "./Username";
|
||||
|
||||
interface Props {
|
||||
href: string;
|
||||
@@ -18,10 +17,6 @@ interface Props {
|
||||
onGotoComment?: React.EventHandler<React.MouseEvent>;
|
||||
}
|
||||
|
||||
const Username: FunctionComponent<{ username: string }> = ({ username }) => (
|
||||
<strong>{username}</strong>
|
||||
);
|
||||
|
||||
const RejectedComment: FunctionComponent<Props> = props => (
|
||||
<DecisionItem icon={<RejectedIcon />}>
|
||||
<Localized
|
||||
@@ -31,9 +26,7 @@ const RejectedComment: FunctionComponent<Props> = props => (
|
||||
<Info>{"Rejected comment by <Username></Username>"}</Info>
|
||||
</Localized>
|
||||
<Footer>
|
||||
<Typography variant="timestamp">
|
||||
<Timestamp>{props.date}</Timestamp>
|
||||
</Typography>
|
||||
<Timestamp>{props.date}</Timestamp>
|
||||
<DotDivider />
|
||||
<GoToCommentLink href={props.href} onClick={props.onGotoComment} />
|
||||
</Footer>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.root {
|
||||
color: var(--palette-error-main);
|
||||
color: var(--v2-palette-error-main);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Icon } from "coral-ui/components";
|
||||
import { Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./RejectedIcon.css";
|
||||
|
||||
const RejectedIcon: FunctionComponent = () => (
|
||||
<Icon className={styles.root}>cancel</Icon>
|
||||
<Icon size="md" className={styles.root}>
|
||||
cancel
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export default RejectedIcon;
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
.root {
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
text-transform: uppercase;
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(2 * var(--mini-unit));
|
||||
letter-spacing: calc(0.2em / 12);
|
||||
color: var(--palette-grey-main);
|
||||
color: var(--v2-palette-link-text);
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--palette-divider);
|
||||
border-top: 1px solid var(--v2-palette-decision-history-border);
|
||||
text-align: center;
|
||||
padding-top: var(--v2-spacing-1);
|
||||
padding-bottom: var(--v2-spacing-1);
|
||||
|
||||
&:disabled {
|
||||
color: var(--palette-grey-lighter);
|
||||
color: var(--v2-palette-grey-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { BaseButton } from "coral-ui/components";
|
||||
import { BaseButton } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./ShowMoreButton.css";
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
.root {
|
||||
color: var(--palette-text-secondary);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
line-height: calc(14em / 12);
|
||||
letter-spacing: 0;
|
||||
color: var(--v2-palette-timestamp);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { RelativeTime } from "coral-ui/components";
|
||||
import { RelativeTime } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./Timestamp.css";
|
||||
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
.root {
|
||||
padding: 0 calc(0.5 * var(--mini-unit));
|
||||
background-color: #f2f2f2;
|
||||
color: var(--palette-text-primary);
|
||||
border-bottom: 1px solid var(--palette-grey-lighter);
|
||||
background: var(--v2-palette-decision-history-title-background);
|
||||
padding: var(--v2-spacing-1);
|
||||
color: var(--v2-palette-text-primary);
|
||||
border-bottom: 1px solid var(--v2-palette-decision-history-border);
|
||||
font-size: var(--v2-font-size-icon-medium);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: var(--v2-spacing-2);
|
||||
}
|
||||
|
||||
.text {
|
||||
text-transform: uppercase;
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(12em / 12);
|
||||
letter-spacing: calc(0.2em / 12);
|
||||
color: var(--palette-text-primary);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
color: var(--v2-palette-text-primary);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: 1;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Flex, Icon, Typography } from "coral-ui/components";
|
||||
import { Flex, Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./Title.css";
|
||||
|
||||
const Title: FunctionComponent = () => (
|
||||
<Flex className={styles.root} alignItems="center">
|
||||
<Icon>history</Icon>{" "}
|
||||
<Icon className={styles.icon} size="md">
|
||||
history
|
||||
</Icon>
|
||||
<Localized id="decisionHistory-yourDecisionHistory">
|
||||
<Typography container="span" className={styles.text}>
|
||||
Your Decision History
|
||||
</Typography>
|
||||
<span className={styles.text}>Your Decision History</span>
|
||||
</Localized>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.root {
|
||||
color: var(--v2-palette-username-emphasis);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--v2-font-size-3);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import styles from "./Username.css";
|
||||
|
||||
interface Props {
|
||||
username: string;
|
||||
}
|
||||
|
||||
const Username: FunctionComponent<Props> = ({ username }) => (
|
||||
<strong className={styles.root}>{username}</strong>
|
||||
);
|
||||
|
||||
export default Username;
|
||||
+3
-7
@@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `
|
||||
</Info>
|
||||
</Localized>
|
||||
<Footer>
|
||||
<ForwardRef(forwardRef)
|
||||
variant="timestamp"
|
||||
>
|
||||
<DecisionHistory>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</DecisionHistory>
|
||||
</ForwardRef(forwardRef)>
|
||||
<DecisionHistory>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</DecisionHistory>
|
||||
<Footer />
|
||||
<GoToCommentLink
|
||||
href="#"
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
exports[`renders correctly 1`] = `
|
||||
<ForwardRef(forwardRef)
|
||||
className="ApprovedIcon-root"
|
||||
size="md"
|
||||
>
|
||||
check
|
||||
check_circled
|
||||
</ForwardRef(forwardRef)>
|
||||
`;
|
||||
|
||||
@@ -9,9 +9,11 @@ exports[`renders correctly 1`] = `
|
||||
<Localized
|
||||
id="decisionHistory-youWillSeeAList"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div
|
||||
className="Empty-text"
|
||||
>
|
||||
You will see a list of your post moderation actions here.
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</Localized>
|
||||
</ForwardRef(forwardRef)>
|
||||
`;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<ForwardRef(forwardRef)
|
||||
<span
|
||||
className="Info-root"
|
||||
>
|
||||
children
|
||||
</ForwardRef(forwardRef)>
|
||||
</span>
|
||||
`;
|
||||
|
||||
+3
-7
@@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `
|
||||
</Info>
|
||||
</Localized>
|
||||
<Footer>
|
||||
<ForwardRef(forwardRef)
|
||||
variant="timestamp"
|
||||
>
|
||||
<DecisionHistory>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</DecisionHistory>
|
||||
</ForwardRef(forwardRef)>
|
||||
<DecisionHistory>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</DecisionHistory>
|
||||
<Footer />
|
||||
<GoToCommentLink
|
||||
href="#"
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
exports[`renders correctly 1`] = `
|
||||
<ForwardRef(forwardRef)
|
||||
className="RejectedIcon-root"
|
||||
size="md"
|
||||
>
|
||||
cancel
|
||||
</ForwardRef(forwardRef)>
|
||||
|
||||
@@ -5,19 +5,20 @@ exports[`renders correctly 1`] = `
|
||||
alignItems="center"
|
||||
className="Title-root"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<ForwardRef(forwardRef)
|
||||
className="Title-icon"
|
||||
size="md"
|
||||
>
|
||||
history
|
||||
</ForwardRef(forwardRef)>
|
||||
|
||||
<Localized
|
||||
id="decisionHistory-yourDecisionHistory"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
<span
|
||||
className="Title-text"
|
||||
container="span"
|
||||
>
|
||||
Your Decision History
|
||||
</ForwardRef(forwardRef)>
|
||||
</span>
|
||||
</Localized>
|
||||
</ForwardRef(forwardRef)>
|
||||
`;
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
|
||||
|
||||
import { PropTypesOf } from "coral-framework/types";
|
||||
import { LogoHorizontal } from "coral-ui/components";
|
||||
import { AppBar, Begin, Divider, End } from "coral-ui/components/AppBar";
|
||||
import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar";
|
||||
|
||||
import { DecisionHistoryButton } from "./DecisionHistory";
|
||||
import NavigationContainer from "./Navigation";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { AppBarNavigation } from "coral-ui/components";
|
||||
import { AppBarNavigation } from "coral-ui/components/v2";
|
||||
|
||||
import NavigationLink from "./NavigationLink";
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Link, LocationDescriptor } from "found";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { AppBarNavigationItem } from "coral-ui/components";
|
||||
import { AppBarNavigationItem } from "coral-ui/components/v2";
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
.button {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-left: 5px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--v2-palette-user-menu-button);
|
||||
}
|
||||
|
||||
.buttonText {
|
||||
font-size: calc(18rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.2em / 18);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
color: var(--v2-palette-user-menu-button);
|
||||
font-size: var(--v2-font-size-4);
|
||||
margin-left: 2px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
DropdownButton,
|
||||
DropdownDivider,
|
||||
Popover,
|
||||
} from "coral-ui/components";
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./UserMenu.css";
|
||||
|
||||
@@ -60,13 +60,16 @@ const UserMenu: FunctionComponent<Props> = props => (
|
||||
className={styles.button}
|
||||
onClick={toggleVisibility}
|
||||
ref={ref}
|
||||
variant="regular"
|
||||
variant="plain"
|
||||
uppercase={false}
|
||||
size="small"
|
||||
>
|
||||
<ButtonIcon size="lg">account_circle</ButtonIcon>
|
||||
<ButtonIcon className={styles.icon} size="lg">
|
||||
account_circle
|
||||
</ButtonIcon>
|
||||
<span className={styles.buttonText}>{props.username}</span>
|
||||
{
|
||||
<ButtonIcon size="lg">
|
||||
<ButtonIcon className={styles.icon} size="lg">
|
||||
{visible ? "arrow_drop_up" : "arrow_drop_down"}
|
||||
</ButtonIcon>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
import { withInView } from "coral-framework/lib/intersection";
|
||||
import { BaseButton, Spinner } from "coral-ui/components";
|
||||
import { BaseButton, Spinner } from "coral-ui/components/v2";
|
||||
|
||||
interface Props {
|
||||
inView: boolean | undefined;
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
.root {
|
||||
border: 1px solid var(--palette-success-main);
|
||||
border: 1px solid var(--v2-palette-button-outline-approve);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--round-corners);
|
||||
border-radius: var(--v2-round-corners);
|
||||
width: 65px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--palette-success-main);
|
||||
color: var(--v2-palette-button-outline-approve);
|
||||
&:not(:disabled):active {
|
||||
background-color: var(--palette-success-main);
|
||||
color: var(--palette-common-white);
|
||||
background-color: var(--v2-palette-button-outline-approve);
|
||||
color: var(--v2-colors-pure-white);
|
||||
}
|
||||
}
|
||||
|
||||
.invert {
|
||||
background-color: var(--palette-success-main);
|
||||
color: var(--palette-common-white);
|
||||
background-color: var(--v2-palette-button-outline-approve);
|
||||
color: var(--v2-colors-pure-white);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { PropTypesOf } from "coral-framework/types";
|
||||
import { BaseButton, Icon } from "coral-ui/components";
|
||||
import { BaseButton, Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./ApproveButton.css";
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { graphql } from "react-relay";
|
||||
import { Environment } from "relay-runtime";
|
||||
|
||||
import { BanCommentUserMutation as MutationTypes } from "coral-admin/__generated__/BanCommentUserMutation.graphql";
|
||||
import {
|
||||
commitMutationPromiseNormalized,
|
||||
createMutation,
|
||||
MutationInput,
|
||||
} from "coral-framework/lib/relay";
|
||||
|
||||
import { BanCommentUserMutation as MutationTypes } from "coral-admin/__generated__/BanCommentUserMutation.graphql";
|
||||
|
||||
const clientMutationId = 0;
|
||||
|
||||
const BanCommentUserMutation = createMutation(
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { CommentAuthorContainer_comment as CommentData } from "coral-admin/__generated__/CommentAuthorContainer_comment.graphql";
|
||||
import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import { Tag } from "coral-ui/components";
|
||||
import { Tag } from "coral-ui/components/v2";
|
||||
|
||||
import { CommentAuthorContainer_comment as CommentData } from "coral-admin/__generated__/CommentAuthorContainer_comment.graphql";
|
||||
|
||||
import styles from "./CommentAuthorContainer.css";
|
||||
|
||||
|
||||
@@ -1,13 +1,52 @@
|
||||
$comment-content: var(--v2-colors-mono-900);
|
||||
$comment-blockquote-bg: var(--v2-colors-grey-100);
|
||||
$comment-highlight-bg: var(--v2-colors-yellow-500);
|
||||
$comment-link: var(--v2-palette-primary-main);
|
||||
$comment-link-active: var(--v2-palette-primary-darkest);
|
||||
|
||||
.root {
|
||||
composes: root from "coral-stream/shared/htmlContent.css";
|
||||
composes: bodyCommentV2 from "coral-ui/shared/typography.css";
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-body-comment);
|
||||
color: $comment-content;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
& * bold,
|
||||
& * strong {
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
}
|
||||
& * italic,
|
||||
& * em {
|
||||
font-style: italic;
|
||||
}
|
||||
blockquote {
|
||||
background-color: $comment-blockquote-bg;
|
||||
padding: var(--mini-unit);
|
||||
margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
|
||||
var(--mini-unit);
|
||||
border-radius: var(--round-corners);
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--palette-highlight);
|
||||
background-color: $comment-highlight-bg;
|
||||
padding: 0 2px;
|
||||
a {
|
||||
color: $comment-link;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--palette-primary-dark);
|
||||
background-color: var(--palette-highlight);
|
||||
color: $comment-link;
|
||||
background-color: $comment-highlight-bg;
|
||||
padding: 0 2px;
|
||||
&:hover {
|
||||
color: $comment-link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { memoize } from "lodash";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { createPurify } from "coral-common/utils/purify";
|
||||
import { Typography } from "coral-ui/components";
|
||||
|
||||
import styles from "./CommentContent.css";
|
||||
|
||||
@@ -131,10 +130,9 @@ const CommentContent: FunctionComponent<Props> = ({
|
||||
|
||||
// Finally we render the content of the Shadow DOM Tree
|
||||
return (
|
||||
<Typography
|
||||
<div
|
||||
className={cn(className, styles.root)}
|
||||
dangerouslySetInnerHTML={{ __html: node.innerHTML }}
|
||||
container="div"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import { HorizontalGutter, Timestamp } from "coral-ui/components";
|
||||
import { HorizontalGutter, Timestamp } from "coral-ui/components/v2";
|
||||
|
||||
import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql";
|
||||
import { CommentRevisionContainer_settings as SettingsData } from "coral-admin/__generated__/CommentRevisionContainer_settings.graphql";
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
right: 0px;
|
||||
top: 2px;
|
||||
|
||||
border: 1px solid var(--palette-grey-lighter);
|
||||
border: 1px solid var(--v2-palette-grey-main);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--round-corners);
|
||||
padding: 2px var(--spacing-2) 2px var(--spacing-2);
|
||||
@@ -11,22 +11,21 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
color: var(--v2-palette-grey-main);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: 1.2;
|
||||
letter-spacing: calc(0.2em / 14);
|
||||
color: var(--palette-grey-lighter);
|
||||
|
||||
|
||||
&:active {
|
||||
background-color: var(--palette-primary-lightest);
|
||||
border-color: var(--palette-primary-main);
|
||||
color: var(--palette-primary-main);
|
||||
background-color: var(--v2-palette-primary-lightest);
|
||||
border-color: var(--v2-palette-primary-main);
|
||||
color: var(--v2-palette-primary-main);
|
||||
}
|
||||
}
|
||||
|
||||
.invert {
|
||||
background-color: var(--palette-primary-main);
|
||||
border-color: var(--palette-primary-main);
|
||||
color: var(--palette-text-light) ;
|
||||
}
|
||||
background-color: var(--v2-palette-primary-main);
|
||||
border-color: var(--v2-palette-primary-main);
|
||||
color: var(--v2-palette-text-light);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { PropTypesOf } from "coral-framework/types";
|
||||
import { BaseButton } from "coral-ui/components";
|
||||
import { BaseButton } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./FeatureButton.css";
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.category {
|
||||
color: var(--palette-error-darkest);
|
||||
font-size: var(--v2-font-size-4);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
color: var(--v2-palette-accordion-label);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { HorizontalGutter, Typography } from "coral-ui/components";
|
||||
import { HorizontalGutter } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./FlagDetailsCategory.css";
|
||||
|
||||
interface Props {
|
||||
category: React.ReactNode;
|
||||
@@ -13,7 +15,7 @@ const FlagDetailsCategory: FunctionComponent<Props> = ({
|
||||
}) => {
|
||||
return (
|
||||
<HorizontalGutter size="half">
|
||||
<Typography variant="bodyCopyBold">{category}</Typography>
|
||||
<p className={styles.category}>{category}</p>
|
||||
<HorizontalGutter size="half">{children}</HorizontalGutter>
|
||||
</HorizontalGutter>
|
||||
);
|
||||
|
||||
@@ -6,7 +6,7 @@ import NotAvailable from "coral-admin/components/NotAvailable";
|
||||
import { TOXICITY_THRESHOLD_DEFAULT } from "coral-common/constants";
|
||||
import { withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import { GQLCOMMENT_FLAG_REASON } from "coral-framework/schema";
|
||||
import { HorizontalGutter } from "coral-ui/components";
|
||||
import { HorizontalGutter } from "coral-ui/components/v2";
|
||||
|
||||
import { FlagDetailsContainer_comment } from "coral-admin/__generated__/FlagDetailsContainer_comment.graphql";
|
||||
import { FlagDetailsContainer_settings } from "coral-admin/__generated__/FlagDetailsContainer_settings.graphql";
|
||||
|
||||
@@ -1,37 +1,35 @@
|
||||
.user {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-serif);
|
||||
line-height: calc(16em / 14);
|
||||
letter-spacing: calc(0.2em / 14);
|
||||
color: var(--palette-text-primary);
|
||||
color: var(--v2-palette-username-emphasis);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-title);
|
||||
padding-right: calc(0.5 * var(--mini-unit));
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(16em / 14);
|
||||
letter-spacing: calc(0.2em / 14);
|
||||
color: var(--palette-text-primary);
|
||||
font-style: italic;
|
||||
color: var(--v2-palette-reason-text);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-title);
|
||||
}
|
||||
|
||||
.flagger {
|
||||
line-height: var(--v2-line-height-reset);
|
||||
margin-right: var(--mini-unit);
|
||||
padding: var(--spacing-1);
|
||||
margin-left: calc(-1 * var(--spacing-1));
|
||||
line-height: calc(16rem / var(--rem-base));
|
||||
padding: var(--v2-spacing-1);
|
||||
margin-left: calc(-1 * var(--v2-spacing-1));
|
||||
|
||||
&:hover {
|
||||
background-color: var(--palette-grey-lightest);
|
||||
border-radius: var(--round-corners);
|
||||
background-color: var(--v2-palette-grey-lightest);
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--palette-grey-lighter);
|
||||
border-radius: var(--round-corners);
|
||||
background-color: var(--v2-palette-grey-lighter);
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { BaseButton } from "coral-ui/components";
|
||||
import { BaseButton } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./FlagDetailsEntry.css";
|
||||
|
||||
|
||||
@@ -1,13 +1,37 @@
|
||||
.icon {
|
||||
color: var(--palette-grey-main);
|
||||
color: var(--v2-palette-label-regular);
|
||||
}
|
||||
.inReplyTo {
|
||||
color: var(--palette-grey-main);
|
||||
color: var(--v2-palette-label-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
}
|
||||
.username {
|
||||
color: var(--palette-grey-main);
|
||||
color: var(--v2-palette-username-regular);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
|
||||
padding: var(--spacing-1);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--v2-palette-username-background-hover);
|
||||
border-radius: var(--round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--v2-palette-username-background-hover);
|
||||
border-radius: var(--round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.usernameButton {
|
||||
display: inline-flex;
|
||||
vertical-align: baseline;
|
||||
|
||||
margin-left: calc(-1 * var(--v2-spacing-1));
|
||||
}
|
||||
|
||||
@@ -8,6 +8,9 @@ import InReplyTo from "./InReplyTo";
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof InReplyTo> = {
|
||||
children: "Username",
|
||||
onUsernameClick: () => {
|
||||
return;
|
||||
},
|
||||
};
|
||||
const renderer = createRenderer();
|
||||
renderer.render(<InReplyTo {...props} />);
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Flex, Icon, Typography } from "coral-ui/components";
|
||||
import { BaseButton, Flex, Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./InReplyTo.css";
|
||||
|
||||
interface Props {
|
||||
children: string;
|
||||
onUsernameClick: () => void;
|
||||
}
|
||||
|
||||
const InReplyTo: FunctionComponent<Props> = ({ children }) => {
|
||||
const InReplyTo: FunctionComponent<Props> = ({ children, onUsernameClick }) => {
|
||||
const Username = () => (
|
||||
<Typography variant="heading5" container="span" className={styles.username}>
|
||||
{children}
|
||||
</Typography>
|
||||
<BaseButton onClick={onUsernameClick} className={styles.usernameButton}>
|
||||
<span className={styles.username}>{children}</span>
|
||||
</BaseButton>
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex alignItems="center">
|
||||
<Icon className={styles.icon}>reply</Icon>{" "}
|
||||
<Localized id="moderate-comment-inReplyTo" Username={<Username />}>
|
||||
<Typography
|
||||
variant="timestamp"
|
||||
container="span"
|
||||
className={styles.inReplyTo}
|
||||
>
|
||||
{"Reply to <Username></Username>"}
|
||||
</Typography>
|
||||
<span className={styles.inReplyTo}>
|
||||
Reply to
|
||||
<Username />
|
||||
</span>
|
||||
</Localized>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
.detailsButton {
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
line-height: 1.28;
|
||||
height: 100%;
|
||||
padding: 2px 0px;
|
||||
margin-left: var(--mini-unit);
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.1em / 12);
|
||||
|
||||
align-self: flex-end;
|
||||
text-transform: uppercase;
|
||||
&.detailsButtonColorRegular {
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.detailsButtonColorRegular {
|
||||
border-color: var(--v2-palette-details-header);
|
||||
}
|
||||
|
||||
.detailsText {
|
||||
color: var(--v2-palette-details-header);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detailsDivider {
|
||||
border-color: var(--palette-grey-lightest);
|
||||
border-color: var(--v2-palette-details-divider);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent, useCallback, useState } from "react";
|
||||
|
||||
import { useUUID } from "coral-framework/hooks";
|
||||
import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components";
|
||||
import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./Markers.css";
|
||||
|
||||
@@ -25,8 +25,8 @@ const Markers: FunctionComponent<Props> = ({ children, details }) => {
|
||||
<Button
|
||||
size="small"
|
||||
classes={{
|
||||
variantRegular: styles.detailsButton,
|
||||
colorRegular: styles.detailsButtonColorRegular,
|
||||
variantDefault: styles.detailsButton,
|
||||
colorDefault: styles.detailsButtonColorRegular,
|
||||
}}
|
||||
onClick={toggleDetails}
|
||||
aria-controls={uuid}
|
||||
|
||||
@@ -3,7 +3,7 @@ import React from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import { Marker, MarkerCount } from "coral-ui/components";
|
||||
import { Marker, MarkerCount } from "coral-ui/components/v2";
|
||||
|
||||
import { MarkersContainer_comment } from "coral-admin/__generated__/MarkersContainer_comment.graphql";
|
||||
import { MarkersContainer_settings } from "coral-admin/__generated__/MarkersContainer_settings.graphql";
|
||||
@@ -32,7 +32,7 @@ const markers: Array<
|
||||
c =>
|
||||
(c.status === "PREMOD" && (
|
||||
<Localized id="moderate-marker-preMod" key={keyCounter++}>
|
||||
<Marker color="primary">Pre-mod</Marker>
|
||||
<Marker color="pending">Pre-Mod</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
@@ -40,7 +40,7 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_LINKS && (
|
||||
<Localized id="moderate-marker-link" key={keyCounter++}>
|
||||
<Marker color="primary">Link</Marker>
|
||||
<Marker color="pending">Link</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
@@ -48,7 +48,7 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_BANNED_WORD && (
|
||||
<Localized id="moderate-marker-bannedWord" key={keyCounter++}>
|
||||
<Marker color="error">Banned word</Marker>
|
||||
<Marker color="reported">Banned Word</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
@@ -56,8 +56,8 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SUSPECT_WORD && (
|
||||
<Localized id="moderate-marker-suspectWord" key={keyCounter++}>
|
||||
<Marker color="error" variant="filled">
|
||||
Suspect word
|
||||
<Marker color="reported" variant="filled">
|
||||
Suspect Word
|
||||
</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
@@ -66,7 +66,7 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SPAM && (
|
||||
<Localized id="moderate-marker-spamDetected" key={keyCounter++}>
|
||||
<Marker color="error">Spam detected</Marker>
|
||||
<Marker color="reported">Spam Detected</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
@@ -74,7 +74,7 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_TOXIC && (
|
||||
<Localized id="moderate-marker-toxic" key={keyCounter++}>
|
||||
<Marker color="error">Toxic</Marker>
|
||||
<Marker color="reported">Toxic</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
@@ -82,7 +82,7 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_REPEAT_POST && (
|
||||
<Localized id="moderate-marker-repeatPost" key={keyCounter++}>
|
||||
<Marker color="error">Repeat comment</Marker>
|
||||
<Marker color="reported">Repeat comment</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
@@ -90,14 +90,14 @@ const markers: Array<
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_RECENT_HISTORY && (
|
||||
<Localized id="moderate-marker-recentHistory" key={keyCounter++}>
|
||||
<Marker color="error">Recent history</Marker>
|
||||
<Marker color="reported">Recent History</Marker>
|
||||
</Localized>
|
||||
)) ||
|
||||
null,
|
||||
c =>
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_OFFENSIVE && (
|
||||
<Marker key={keyCounter++} color="error">
|
||||
<Marker key={keyCounter++} color="reported">
|
||||
<Localized id="moderate-marker-offensive">
|
||||
<span>Offensive</span>
|
||||
</Localized>{" "}
|
||||
@@ -110,7 +110,7 @@ const markers: Array<
|
||||
c =>
|
||||
(c.revision &&
|
||||
c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM && (
|
||||
<Marker key={keyCounter++} color="error">
|
||||
<Marker key={keyCounter++} color="reported">
|
||||
<Localized id="moderate-marker-spam">
|
||||
<span>Spam</span>
|
||||
</Localized>{" "}
|
||||
|
||||
@@ -1,41 +1,51 @@
|
||||
.topBar {
|
||||
position: relative;
|
||||
margin-bottom: var(--mini-unit);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
.topBarMini {
|
||||
margin-bottom: var(--spacing-4);
|
||||
margin-bottom: var(--v2-spacing-4);
|
||||
}
|
||||
|
||||
.username {
|
||||
margin-right: var(--spacing-1);
|
||||
.usernameButton {
|
||||
margin-right: var(--mini-unit);
|
||||
padding: var(--spacing-1);
|
||||
margin-left: calc(-1 * var(--spacing-1));
|
||||
line-height: calc(16rem / var(--rem-base));
|
||||
margin-left: calc(-1 * var(--v2-spacing-1));
|
||||
|
||||
line-height: var(--v2-line-height-reset);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--palette-grey-lightest);
|
||||
border-radius: var(--round-corners);
|
||||
background-color: var(--v2-palette-username-background-hover);
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--palette-grey-lighter);
|
||||
border-radius: var(--round-corners);
|
||||
background-color: var(--v2-palette-username-background-hover);
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inReplyTo {
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: calc(2 * var(--mini-unit));
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: calc(5.5 * var(--mini-unit));
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
flex-grow: 1;
|
||||
|
||||
margin-right: calc(2 * var(--v2-spacing-5));
|
||||
}
|
||||
|
||||
.contentArea {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
.aside {
|
||||
@@ -54,7 +64,7 @@
|
||||
No reply to field, so we align below the fattest element
|
||||
which is the feature button.
|
||||
*/
|
||||
padding-top: calc((14rem / var(--rem-base)) + 7px + var(--spacing-4));
|
||||
padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4));
|
||||
}
|
||||
|
||||
.asideMiniWithReplyTo {
|
||||
@@ -62,27 +72,28 @@
|
||||
We have reply to field, so we align below the fattest
|
||||
element plus the reply to field.
|
||||
*/
|
||||
padding-top: calc(2 * (14rem / var(--rem-base)) + 5px + var(--spacing-4));
|
||||
padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4));
|
||||
}
|
||||
|
||||
.decision {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(16em / 14);
|
||||
letter-spacing: calc(0.2em / 14);
|
||||
color: var(--palette-text-primary);
|
||||
color: var(--v2-palette-label-emphasis);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: 1.14;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.separator {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
margin: 0 calc(2 * var(--mini-unit));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-1 * var(--v2-spacing-5));
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.ruledSeparator {
|
||||
border-right: 1px solid var(--palette-divider);
|
||||
border-right: 1px solid var(--v2-colors-grey-400);
|
||||
}
|
||||
|
||||
.root {
|
||||
@@ -94,62 +105,46 @@
|
||||
}
|
||||
|
||||
.dangling {
|
||||
background-color: var(--palette-grey-lightest);
|
||||
background-color: var(--v2-palette-grey-lightest);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(18em / 12);
|
||||
letter-spacing: calc(0.2em / 12);
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-palette-link-text);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.story {
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(18em / 12);
|
||||
letter-spacing: calc(0.2em / 12);
|
||||
.viewContext {
|
||||
padding-bottom: var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
.storyLabel {
|
||||
color: var(--v2-palette-grey-main);
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
text-transform: uppercase;
|
||||
color: var(--palette-grey-main);
|
||||
}
|
||||
|
||||
.storyTitle {
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(18em / 12);
|
||||
letter-spacing: calc(0.2em / 12);
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.moderatedBy {
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: var(--palette-text-primary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.moderatedByUsername {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: var(--palette-text-primary);
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
color: var(--v2-palette-story-title);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
.borderless {
|
||||
border-width: 0px;
|
||||
box-shadow: none;
|
||||
padding: var(--v2-spacing-2) 0;
|
||||
}
|
||||
|
||||
.miniButton {
|
||||
@@ -158,16 +153,24 @@
|
||||
}
|
||||
|
||||
.deleted {
|
||||
background: var(--palette-grey-lightest);
|
||||
background: var(--v2-palette-grey-lightest);
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: var(--palette-grey-lighter);
|
||||
color: var(--v2-palette-timestamp);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
}
|
||||
|
||||
.edited {
|
||||
color: var(--palette-grey-lighter);
|
||||
padding-left: var(--spacing-2)
|
||||
color: var(--v2-palette-timestamp);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
padding-left: var(--v2-spacing-2);
|
||||
}
|
||||
|
||||
.selected {
|
||||
@@ -176,5 +179,17 @@
|
||||
|
||||
.authorStatus {
|
||||
padding-right: var(--spacing-2);
|
||||
color: var(--v2-palette-timestamp);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
padding-left: var(--v2-spacing-2);
|
||||
}
|
||||
|
||||
.deleted {
|
||||
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-body-short);
|
||||
}
|
||||
|
||||
@@ -18,8 +18,7 @@ import {
|
||||
HorizontalGutter,
|
||||
TextLink,
|
||||
Timestamp,
|
||||
Typography,
|
||||
} from "coral-ui/components";
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import ApproveButton from "./ApproveButton";
|
||||
import CommentAuthorContainer from "./CommentAuthorContainer";
|
||||
@@ -146,10 +145,10 @@ const ModerateCard: FunctionComponent<Props> = ({
|
||||
}, [selected]);
|
||||
const commentBody = deleted ? (
|
||||
<Localized id="moderate-comment-deleted-body">
|
||||
<Typography>
|
||||
<div className={styles.deleted}>
|
||||
This comment is no longer available. The commenter has deleted their
|
||||
account.
|
||||
</Typography>
|
||||
</div>
|
||||
</Localized>
|
||||
) : (
|
||||
body
|
||||
@@ -185,10 +184,10 @@ const ModerateCard: FunctionComponent<Props> = ({
|
||||
})}
|
||||
>
|
||||
<Flex alignItems="center">
|
||||
{!hideUsername && (
|
||||
{!hideUsername && username && (
|
||||
<BaseButton
|
||||
onClick={commentAuthorClick}
|
||||
className={styles.username}
|
||||
className={styles.usernameButton}
|
||||
>
|
||||
<Username>{username}</Username>
|
||||
</BaseButton>
|
||||
@@ -197,9 +196,7 @@ const ModerateCard: FunctionComponent<Props> = ({
|
||||
<Timestamp>{createdAt}</Timestamp>
|
||||
{edited && (
|
||||
<Localized id="moderate-comment-edited">
|
||||
<Typography variant="timestamp" className={styles.edited}>
|
||||
(edited)
|
||||
</Typography>
|
||||
<span className={styles.edited}>(edited)</span>
|
||||
</Localized>
|
||||
)}
|
||||
<FeatureButton
|
||||
@@ -209,52 +206,60 @@ const ModerateCard: FunctionComponent<Props> = ({
|
||||
/>
|
||||
</Flex>
|
||||
{inReplyTo && inReplyTo.username && (
|
||||
<div>
|
||||
<BaseButton
|
||||
onClick={commentParentAuthorClick}
|
||||
className={styles.username}
|
||||
>
|
||||
<InReplyTo>{inReplyTo.username}</InReplyTo>
|
||||
</BaseButton>
|
||||
<div className={styles.inReplyTo}>
|
||||
<InReplyTo onUsernameClick={commentParentAuthorClick}>
|
||||
{inReplyTo.username}
|
||||
</InReplyTo>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CommentContent
|
||||
suspectWords={suspectWords}
|
||||
bannedWords={bannedWords}
|
||||
className={styles.content}
|
||||
>
|
||||
{commentBody}
|
||||
</CommentContent>
|
||||
<div className={styles.contentArea}>
|
||||
<CommentContent
|
||||
suspectWords={suspectWords}
|
||||
bannedWords={bannedWords}
|
||||
className={styles.content}
|
||||
>
|
||||
{commentBody}
|
||||
</CommentContent>
|
||||
<div className={styles.viewContext}>
|
||||
<Localized id="moderate-comment-viewContext">
|
||||
<TextLink
|
||||
className={styles.link}
|
||||
href={viewContextHref}
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</TextLink>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className={cn(styles.separator, {
|
||||
[styles.ruledSeparator]: !mini,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<HorizontalGutter>
|
||||
<div>
|
||||
<Localized id="moderate-comment-viewContext">
|
||||
<TextLink
|
||||
className={styles.link}
|
||||
href={viewContextHref}
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</TextLink>
|
||||
</Localized>
|
||||
</div>
|
||||
<HorizontalGutter spacing={3}>
|
||||
{showStory && (
|
||||
<div>
|
||||
<Localized id="moderate-comment-story">
|
||||
<span className={styles.story}>Story</span>
|
||||
</Localized>
|
||||
{": "}
|
||||
<span className={styles.storyTitle}>{storyTitle}</span>{" "}
|
||||
<Localized id="moderate-comment-moderateStory">
|
||||
<TextLink
|
||||
className={styles.link}
|
||||
href={storyHref}
|
||||
onClick={onModerateStory}
|
||||
>
|
||||
Moderate Story
|
||||
</TextLink>
|
||||
</Localized>
|
||||
<div className={styles.storyLabel}>
|
||||
<Localized id="moderate-comment-storyLabel">
|
||||
<span>Comment on</span>
|
||||
</Localized>
|
||||
<span>:</span>
|
||||
</div>
|
||||
<div className={styles.storyTitle}>{storyTitle}</div>
|
||||
<div>
|
||||
<Localized id="moderate-comment-moderateStory">
|
||||
<TextLink
|
||||
href={storyHref}
|
||||
onClick={onModerateStory}
|
||||
className={styles.link}
|
||||
>
|
||||
Moderate Story
|
||||
</TextLink>
|
||||
</Localized>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<MarkersContainer
|
||||
@@ -265,9 +270,6 @@ const ModerateCard: FunctionComponent<Props> = ({
|
||||
</HorizontalGutter>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(styles.separator, { [styles.ruledSeparator]: !mini })}
|
||||
/>
|
||||
<Flex
|
||||
className={cn(styles.aside, {
|
||||
[styles.asideWithoutReplyTo]: !inReplyTo,
|
||||
|
||||
@@ -15,8 +15,7 @@ import {
|
||||
withFragmentContainer,
|
||||
withMutation,
|
||||
} from "coral-framework/lib/relay";
|
||||
import { GQLUSER_STATUS } from "coral-framework/schema";
|
||||
import { GQLTAG } from "coral-framework/schema";
|
||||
import { GQLTAG, GQLUSER_STATUS } from "coral-framework/schema";
|
||||
|
||||
import {
|
||||
COMMENT_STATUS,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.button {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
text-transform: uppercase;
|
||||
font-size: var(--v2-font-size-2);
|
||||
}
|
||||
|
||||
@@ -2,11 +2,16 @@ import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent, useState } from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import { Flex, HorizontalGutter, Icon, Tab, TabBar } from "coral-ui/components";
|
||||
|
||||
import { ModerateCardDetailsContainer_comment as CommentData } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql";
|
||||
import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql";
|
||||
import { withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import {
|
||||
Flex,
|
||||
HorizontalGutter,
|
||||
Icon,
|
||||
Tab,
|
||||
TabBar,
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import CommentRevisionContainer from "./CommentRevisionContainer";
|
||||
import FlagDetailsContainer from "./FlagDetailsContainer";
|
||||
@@ -22,6 +27,8 @@ interface Props {
|
||||
hasRevisions: boolean;
|
||||
}
|
||||
|
||||
type DetailsTabs = "DETAILS" | "HISTORY";
|
||||
|
||||
const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
|
||||
comment,
|
||||
onUsernameClick,
|
||||
@@ -29,23 +36,23 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
|
||||
hasDetails,
|
||||
hasRevisions,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<"DETAILS" | "HISTORY">(
|
||||
const [activeTab, setActiveTab] = useState<DetailsTabs>(
|
||||
hasDetails ? "DETAILS" : "HISTORY"
|
||||
);
|
||||
|
||||
return (
|
||||
<HorizontalGutter>
|
||||
<TabBar
|
||||
variant="secondary"
|
||||
variant="default"
|
||||
activeTab={activeTab}
|
||||
onTabClick={id => setActiveTab(id as "DETAILS" | "HISTORY")}
|
||||
onTabClick={id => setActiveTab(id as DetailsTabs)}
|
||||
>
|
||||
{hasDetails && (
|
||||
<Tab tabID="DETAILS" classes={styles}>
|
||||
<Tab tabID="INFO" classes={styles}>
|
||||
<Flex alignItems="center" itemGutter>
|
||||
<Icon size="md">list</Icon>
|
||||
<Localized id="moderateCardDetails-tab-details">
|
||||
<span>Details</span>
|
||||
<Localized id="moderateCardDetails-tab-info">
|
||||
<span>Info</span>
|
||||
</Localized>
|
||||
</Flex>
|
||||
</Tab>
|
||||
|
||||
@@ -1,20 +1,21 @@
|
||||
$moderated-by: var(--v2-colors-mono-100);
|
||||
$moderated-by-username: var(--v2-colors-mono-900);
|
||||
|
||||
.moderatedBy {
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: var(--palette-text-primary);
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: $moderated-by;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.moderatedByUsername {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: var(--palette-text-primary);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: $moderated-by-username;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { withFragmentContainer } from "coral-framework/lib/relay";
|
||||
import { BaseButton } from "coral-ui/components";
|
||||
import { BaseButton } from "coral-ui/components/v2";
|
||||
|
||||
import { ModeratedByContainer_comment } from "coral-admin/__generated__/ModeratedByContainer_comment.graphql";
|
||||
import { ModeratedByContainer_viewer } from "coral-admin/__generated__/ModeratedByContainer_viewer.graphql";
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
.root {
|
||||
border: 1px solid var(--palette-error-main);
|
||||
border: 1px solid var(--v2-palette-button-outline-reject);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--round-corners);
|
||||
border-radius: var(--v2-round-corners);
|
||||
width: 65px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--palette-error-main);
|
||||
color: var(--v2-palette-button-outline-reject);
|
||||
&:not(:disabled):active {
|
||||
background-color: var(--palette-error-main);
|
||||
color: var(--palette-common-white);
|
||||
background-color: var(--v2-palette-button-outline-reject);
|
||||
color: var(--v2-colors-pure-white);
|
||||
}
|
||||
}
|
||||
|
||||
.invert {
|
||||
background-color: var(--palette-error-main);
|
||||
color: var(--palette-common-white);
|
||||
background-color: var(--v2-palette-button-outline-reject);
|
||||
color: var(--v2-colors-pure-white);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { PropTypesOf } from "coral-framework/types";
|
||||
import { BaseButton, Icon } from "coral-ui/components";
|
||||
import { BaseButton, Icon } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./RejectButton.css";
|
||||
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
.root {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
color: var(--v2-palette-accordion-label);
|
||||
}
|
||||
|
||||
.likely {
|
||||
color: var(--v2-palette-counter-badge-background-alert);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import cn from "classnames";
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Counter, Typography } from "coral-ui/components";
|
||||
import { Counter } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./ToxicityLabel.css";
|
||||
|
||||
const ToxicityCounter: FunctionComponent<{ score: number }> = ({ score }) => (
|
||||
<Counter>{Math.round(score * 100)}%</Counter>
|
||||
<Counter color="inherit">{Math.round(score * 100)}%</Counter>
|
||||
);
|
||||
|
||||
const ToxicityLabel: FunctionComponent<{
|
||||
@@ -18,26 +19,20 @@ const ToxicityLabel: FunctionComponent<{
|
||||
if (score > threshold) {
|
||||
return (
|
||||
<Localized id="moderate-toxicityLabel-likely" score={counter}>
|
||||
<Typography
|
||||
className={styles.root}
|
||||
variant="bodyCopy"
|
||||
color="errorDark"
|
||||
>
|
||||
Likely
|
||||
</Typography>
|
||||
<p className={cn(styles.root, styles.likely)}>Likely</p>
|
||||
</Localized>
|
||||
);
|
||||
} else if (score <= 0.5) {
|
||||
return (
|
||||
<Localized id="moderate-toxicityLabel-unlikely" score={counter}>
|
||||
<Typography className={styles.root}>Unlikely</Typography>
|
||||
<p className={styles.root}>Unlikely</p>
|
||||
</Localized>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Localized id="moderate-toxicityLabel-maybe" score={counter}>
|
||||
<Typography className={styles.root}>Maybe</Typography>
|
||||
<p className={styles.root}>Maybe</p>
|
||||
</Localized>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
.root {
|
||||
line-height: 1;
|
||||
color: var(--palette-grey-dark);
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-palette-username-emphasis);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import cn from "classnames";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Typography } from "coral-ui/components";
|
||||
|
||||
import styles from "./Username.css";
|
||||
|
||||
export interface UsernameProps {
|
||||
@@ -12,13 +10,7 @@ export interface UsernameProps {
|
||||
|
||||
const Username: FunctionComponent<UsernameProps> = props => {
|
||||
return (
|
||||
<Typography
|
||||
variant="heading4"
|
||||
className={cn(props.className, styles.root)}
|
||||
container="span"
|
||||
>
|
||||
{props.children}
|
||||
</Typography>
|
||||
<span className={cn(props.className, styles.root)}>{props.children}</span>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+2
-4
@@ -1,9 +1,8 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<ForwardRef(forwardRef)
|
||||
<div
|
||||
className="custom CommentContent-root"
|
||||
container="div"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "Hello <b>Bob</b><span>, you <mark>bad</mark> guy</span>",
|
||||
@@ -13,9 +12,8 @@ exports[`renders correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders empty words correctly 1`] = `
|
||||
<ForwardRef(forwardRef)
|
||||
<div
|
||||
className="custom CommentContent-root"
|
||||
container="div"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "Hello <b>Bob</b>, you bad guy",
|
||||
|
||||
@@ -14,13 +14,12 @@ exports[`renders correctly 1`] = `
|
||||
Username={<Username />}
|
||||
id="moderate-comment-inReplyTo"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
<span
|
||||
className="InReplyTo-inReplyTo"
|
||||
container="span"
|
||||
variant="timestamp"
|
||||
>
|
||||
Reply to <Username></Username>
|
||||
</ForwardRef(forwardRef)>
|
||||
Reply to
|
||||
<Username />
|
||||
</span>
|
||||
</Localized>
|
||||
</ForwardRef(forwardRef)>
|
||||
`;
|
||||
|
||||
+23
-23
@@ -53,16 +53,16 @@ exports[`renders all markers 1`] = `
|
||||
id="moderate-marker-preMod"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="primary"
|
||||
color="pending"
|
||||
>
|
||||
Pre-mod
|
||||
Pre-Mod
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-marker-link"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="primary"
|
||||
color="pending"
|
||||
>
|
||||
Link
|
||||
</withPropsOnChange(Marker)>
|
||||
@@ -71,35 +71,35 @@ exports[`renders all markers 1`] = `
|
||||
id="moderate-marker-bannedWord"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Banned word
|
||||
Banned Word
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-marker-suspectWord"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
variant="filled"
|
||||
>
|
||||
Suspect word
|
||||
Suspect Word
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-marker-spamDetected"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Spam detected
|
||||
Spam Detected
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-marker-toxic"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Toxic
|
||||
</withPropsOnChange(Marker)>
|
||||
@@ -108,7 +108,7 @@ exports[`renders all markers 1`] = `
|
||||
id="moderate-marker-repeatPost"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Repeat comment
|
||||
</withPropsOnChange(Marker)>
|
||||
@@ -117,13 +117,13 @@ exports[`renders all markers 1`] = `
|
||||
id="moderate-marker-recentHistory"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Recent history
|
||||
Recent History
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-marker-offensive"
|
||||
@@ -138,7 +138,7 @@ exports[`renders all markers 1`] = `
|
||||
</withPropsOnChange(Count)>
|
||||
</withPropsOnChange(Marker)>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-marker-spam"
|
||||
@@ -208,25 +208,25 @@ exports[`renders some markers 1`] = `
|
||||
id="moderate-marker-preMod"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="primary"
|
||||
color="pending"
|
||||
>
|
||||
Pre-mod
|
||||
Pre-Mod
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-marker-bannedWord"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Banned word
|
||||
Banned Word
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-marker-toxic"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Toxic
|
||||
</withPropsOnChange(Marker)>
|
||||
@@ -235,13 +235,13 @@ exports[`renders some markers 1`] = `
|
||||
id="moderate-marker-recentHistory"
|
||||
>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
Recent history
|
||||
Recent History
|
||||
</withPropsOnChange(Marker)>
|
||||
</Localized>
|
||||
<withPropsOnChange(Marker)
|
||||
color="error"
|
||||
color="reported"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-marker-offensive"
|
||||
|
||||
+319
-257
@@ -19,7 +19,7 @@ exports[`renders approved correctly 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -41,38 +41,49 @@ exports[`renders approved correctly 1`] = `
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
onUsernameClick={[Function]}
|
||||
@@ -81,9 +92,6 @@ exports[`renders approved correctly 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
|
||||
@@ -139,7 +147,7 @@ exports[`renders correctly 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -161,38 +169,49 @@ exports[`renders correctly 1`] = `
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
onUsernameClick={[Function]}
|
||||
@@ -201,9 +220,6 @@ exports[`renders correctly 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
|
||||
@@ -259,7 +275,7 @@ exports[`renders dangling correctly 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -281,38 +297,49 @@ exports[`renders dangling correctly 1`] = `
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
onUsernameClick={[Function]}
|
||||
@@ -321,9 +348,6 @@ exports[`renders dangling correctly 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
|
||||
@@ -379,7 +403,7 @@ exports[`renders rejected correctly 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -401,38 +425,49 @@ exports[`renders rejected correctly 1`] = `
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
onUsernameClick={[Function]}
|
||||
@@ -441,9 +476,6 @@ exports[`renders rejected correctly 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
|
||||
@@ -499,7 +531,7 @@ exports[`renders reply correctly 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -520,49 +552,59 @@ exports[`renders reply correctly 1`] = `
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
onClick={[Function]}
|
||||
<div
|
||||
className="ModerateCard-inReplyTo"
|
||||
>
|
||||
<InReplyTo
|
||||
onUsernameClick={[Function]}
|
||||
>
|
||||
<InReplyTo>
|
||||
Julian
|
||||
</InReplyTo>
|
||||
</ForwardRef(forwardRef)>
|
||||
Julian
|
||||
</InReplyTo>
|
||||
</div>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
onUsernameClick={[Function]}
|
||||
@@ -571,9 +613,6 @@ exports[`renders reply correctly 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside"
|
||||
@@ -629,7 +668,7 @@ exports[`renders story info 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -651,66 +690,82 @@ exports[`renders story info 1`] = `
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
content
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
<div
|
||||
className="ModerateCard-storyLabel"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
<Localized
|
||||
id="moderate-comment-storyLabel"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-story"
|
||||
>
|
||||
<span
|
||||
className="ModerateCard-story"
|
||||
>
|
||||
Story
|
||||
<span>
|
||||
Comment on
|
||||
</span>
|
||||
</Localized>
|
||||
<span>
|
||||
:
|
||||
</span>
|
||||
</Localized>
|
||||
:
|
||||
<span
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-storyTitle"
|
||||
>
|
||||
Cancer cured!
|
||||
</span>
|
||||
|
||||
<Localized
|
||||
id="moderate-comment-moderateStory"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="/story"
|
||||
onClick={[Function]}
|
||||
</div>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-moderateStory"
|
||||
>
|
||||
Moderate Story
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="/story"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Moderate Story
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
</div>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
@@ -720,9 +775,6 @@ exports[`renders story info 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
|
||||
@@ -778,7 +830,7 @@ exports[`renders tombstoned when comment is deleted 1`] = `
|
||||
alignItems="center"
|
||||
>
|
||||
<ForwardRef(forwardRef)
|
||||
className="ModerateCard-username"
|
||||
className="ModerateCard-usernameButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Username>
|
||||
@@ -800,44 +852,57 @@ exports[`renders tombstoned when comment is deleted 1`] = `
|
||||
/>
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
<div
|
||||
className="ModerateCard-contentArea"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-deleted-body"
|
||||
<CommentContent
|
||||
bannedWords={
|
||||
Array [
|
||||
"banned",
|
||||
]
|
||||
}
|
||||
className="ModerateCard-content"
|
||||
suspectWords={
|
||||
Array [
|
||||
"suspect",
|
||||
]
|
||||
}
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
This comment is no longer available. The commenter has deleted their account.
|
||||
</ForwardRef(forwardRef)>
|
||||
</Localized>
|
||||
</CommentContent>
|
||||
<Localized
|
||||
id="moderate-comment-deleted-body"
|
||||
>
|
||||
<div
|
||||
className="ModerateCard-deleted"
|
||||
>
|
||||
This comment is no longer available. The commenter has deleted their account.
|
||||
</div>
|
||||
</Localized>
|
||||
</CommentContent>
|
||||
<div
|
||||
className="ModerateCard-viewContext"
|
||||
>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-footer"
|
||||
>
|
||||
<ForwardRef(forwardRef)>
|
||||
<div>
|
||||
<Localized
|
||||
id="moderate-comment-viewContext"
|
||||
>
|
||||
<withPropsOnChange(TextLinkProps)
|
||||
className="ModerateCard-link"
|
||||
href="http://localhost/comment"
|
||||
target="_blank"
|
||||
>
|
||||
View Context
|
||||
</withPropsOnChange(TextLinkProps)>
|
||||
</Localized>
|
||||
</div>
|
||||
<ForwardRef(forwardRef)
|
||||
spacing={3}
|
||||
>
|
||||
<Relay(MarkersContainer)
|
||||
comment={Object {}}
|
||||
onUsernameClick={[Function]}
|
||||
@@ -846,9 +911,6 @@ exports[`renders tombstoned when comment is deleted 1`] = `
|
||||
</ForwardRef(forwardRef)>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ModerateCard-separator ModerateCard-ruledSeparator"
|
||||
/>
|
||||
<ForwardRef(forwardRef)
|
||||
alignItems="center"
|
||||
className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<span
|
||||
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
|
||||
className="Username-root"
|
||||
>
|
||||
Marvin
|
||||
</span>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.root {
|
||||
color: var(--palette-grey-light);
|
||||
color: var(--v2-palette-table-body-disabled);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { pick } from "lodash";
|
||||
import { graphql } from "react-relay";
|
||||
import { Environment } from "relay-runtime";
|
||||
|
||||
import { CreateModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/CreateModeratorNoteMutation.graphql";
|
||||
import { getViewer } from "coral-framework/helpers";
|
||||
import { CoralContext } from "coral-framework/lib/bootstrap";
|
||||
import {
|
||||
@@ -13,6 +12,8 @@ import {
|
||||
} from "coral-framework/lib/relay";
|
||||
import { GQLUser } from "coral-framework/schema";
|
||||
|
||||
import { CreateModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/CreateModeratorNoteMutation.graphql";
|
||||
|
||||
let clientMutationId = 0;
|
||||
|
||||
const CreateModeratorNoteMutation = createMutation(
|
||||
|
||||
@@ -2,7 +2,6 @@ import { pick } from "lodash";
|
||||
import { graphql } from "react-relay";
|
||||
import { Environment } from "relay-runtime";
|
||||
|
||||
import { DeleteModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/DeleteModeratorNoteMutation.graphql";
|
||||
import { CoralContext } from "coral-framework/lib/bootstrap";
|
||||
import {
|
||||
commitMutationPromiseNormalized,
|
||||
@@ -12,6 +11,8 @@ import {
|
||||
} from "coral-framework/lib/relay";
|
||||
import { GQLUser } from "coral-framework/schema";
|
||||
|
||||
import { DeleteModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/DeleteModeratorNoteMutation.graphql";
|
||||
|
||||
let clientMutationId = 0;
|
||||
|
||||
const DeleteModeratorNoteMutation = createMutation(
|
||||
|
||||
@@ -1,37 +1,57 @@
|
||||
$moderator-note-bg: var(--v2-colors-grey-100);
|
||||
$moderator-note-body: var(--v2-colors-mono-500);
|
||||
$moderator-note-dot: var(--v2-colors-mono-100);
|
||||
$moderator-note-username: var(--v2-colors-mono-900);
|
||||
|
||||
.root {
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: #f2f2f2;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
background-color: $moderator-note-bg;
|
||||
border-radius: 4px;
|
||||
padding: var(--spacing-4);
|
||||
padding: var(--v2-spacing-3);
|
||||
color: $moderator-note-body;
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
}
|
||||
|
||||
.bodyType {
|
||||
color: var(--palette-text-dark);
|
||||
}
|
||||
|
||||
.leftBy {
|
||||
padding-left: var(--spacing-4);
|
||||
padding-right: var(--spacing-1);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
padding-left: var(--v2-spacing-4);
|
||||
padding-right: var(--v2-spacing-1);
|
||||
position: relative;
|
||||
color: var(--palette-grey-main);
|
||||
color: $moderator-note-body;
|
||||
}
|
||||
|
||||
.leftBy:before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: var(--palette-grey-main);
|
||||
background-color: ;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: var(--spacing-1);
|
||||
left: var(--v2-spacing-1);
|
||||
background-color: $moderator-note-dot;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-family: var(--font-family-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--palette-grey-main);
|
||||
}
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--v2-font-size-3);
|
||||
color: $moderator-note-username;
|
||||
}
|
||||
|
||||
.footerLeft {
|
||||
padding-left: var(--v2-spacing-3);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent, useCallback } from "react";
|
||||
|
||||
import { Button, Flex, Icon, Timestamp, Typography } from "coral-ui/components";
|
||||
import { Button, Flex, Icon, Timestamp } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./ModeratorNote.css";
|
||||
|
||||
@@ -27,30 +27,27 @@ const ModeratorNote: FunctionComponent<Props> = ({
|
||||
}, [id]);
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.body}>
|
||||
<Typography variant="bodyCopy" className={styles.bodyType}>
|
||||
{body}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.body}>{body}</div>
|
||||
<Flex justifyContent="space-between">
|
||||
<Flex alignItems="center">
|
||||
<Flex alignItems="center" className={styles.footerLeft}>
|
||||
<Timestamp>{createdAt}</Timestamp>
|
||||
{moderator && (
|
||||
<>
|
||||
<Flex alignItems="center">
|
||||
<Localized id="moderatorNote-left-by">
|
||||
<Typography variant="timestamp" className={styles.leftBy}>
|
||||
Left by:
|
||||
</Typography>
|
||||
<div className={styles.leftBy}>Left by</div>
|
||||
</Localized>
|
||||
<Typography className={styles.username} variant="timestamp">
|
||||
{moderator}
|
||||
</Typography>
|
||||
</>
|
||||
<div className={styles.username}>{moderator}</div>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
{onDelete && (
|
||||
<Localized id="moderatorNote-delete">
|
||||
<Button size="small" color="primary" onClick={deleteNote}>
|
||||
<Button
|
||||
size="small"
|
||||
uppercase={false}
|
||||
variant="plain"
|
||||
onClick={deleteNote}
|
||||
>
|
||||
<Icon>delete</Icon>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
|
||||
@@ -1,29 +1,53 @@
|
||||
$recent-history-title: var(--v2-colors-mono-500);
|
||||
$recent-history-subtitle: var(--v2-colors-mono-100);
|
||||
$recent-history-info: var(--v2-colors-mono-500);
|
||||
$recent-history-triggered: var(--v2-palette-error-main);
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-3);
|
||||
margin: 0;
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
color: $recent-history-title;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: var(--palette-grey-main);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
color: $recent-history-subtitle;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
margin: 0;
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
}
|
||||
|
||||
.info {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: calc(24rem / var(--rem-base));
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: $recent-history-info;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amountLabel {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
color: $recent-history-info;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.triggered {
|
||||
color: var(--palette-error-main);
|
||||
color: $recent-history-triggered;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
color: var(--palette-text-primary);
|
||||
color: $recent-history-info;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@@ -4,12 +4,11 @@ import React, { FunctionComponent } from "react";
|
||||
|
||||
import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
HorizontalGutter,
|
||||
Tooltip,
|
||||
TooltipButton,
|
||||
Typography,
|
||||
} from "coral-ui/components";
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./RecentHistory.css";
|
||||
|
||||
@@ -29,42 +28,39 @@ const RecentHistory: FunctionComponent<Props> = ({
|
||||
const { scaled, unit } = reduceSeconds(timeFrame, [UNIT.DAYS]);
|
||||
|
||||
return (
|
||||
<Box mt={3}>
|
||||
<Localized id="moderate-user-drawer-recent-history-title">
|
||||
<Typography className={styles.title} variant="bodyCopyBold">
|
||||
Recent comment history
|
||||
</Typography>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-user-drawer-recent-history-calculated"
|
||||
$unit={unit}
|
||||
$value={scaled}
|
||||
>
|
||||
<Typography className={styles.subTitle} variant="bodyCopy">
|
||||
Calculated over the last {scaled} {unit}
|
||||
</Typography>
|
||||
</Localized>
|
||||
<Box mt={1}>
|
||||
<Box className={styles.info} mr={4}>
|
||||
<Typography
|
||||
<HorizontalGutter spacing={2}>
|
||||
<div>
|
||||
<Localized id="moderate-user-drawer-recent-history-title">
|
||||
<h3 className={styles.title}>Recent comment history</h3>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="moderate-user-drawer-recent-history-calculated"
|
||||
$unit={unit}
|
||||
$value={scaled}
|
||||
>
|
||||
<p className={styles.subTitle}>
|
||||
Calculated over the last {scaled} {unit}
|
||||
</p>
|
||||
</Localized>
|
||||
</div>
|
||||
<Flex spacing={3}>
|
||||
<div>
|
||||
<p
|
||||
className={cn(styles.amount, {
|
||||
[styles.triggered]: triggered,
|
||||
})}
|
||||
variant="bodyCopyBold"
|
||||
>
|
||||
{Math.round(rejectionRate * 100)}%
|
||||
</Typography>
|
||||
<Flex alignItems="center">
|
||||
</p>
|
||||
<Flex>
|
||||
<Localized id="moderate-user-drawer-recent-history-rejected">
|
||||
<Typography
|
||||
<span
|
||||
className={cn(styles.amountLabel, {
|
||||
[styles.triggered]: triggered,
|
||||
})}
|
||||
variant="bodyCopy"
|
||||
container="span"
|
||||
>
|
||||
Rejected
|
||||
</Typography>
|
||||
</span>
|
||||
</Localized>
|
||||
<Tooltip
|
||||
id="recentCommentHistory-rejectionPopover"
|
||||
@@ -97,19 +93,15 @@ const RecentHistory: FunctionComponent<Props> = ({
|
||||
)}
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box className={styles.info}>
|
||||
<Typography className={styles.amount} variant="bodyCopyBold">
|
||||
{submitted}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<p className={styles.amount}>{submitted}</p>
|
||||
<Localized id="moderate-user-drawer-recent-history-tooltip-submitted">
|
||||
<Typography className={styles.amountLabel} variant="bodyCopy">
|
||||
Submitted
|
||||
</Typography>
|
||||
<p className={styles.amountLabel}>Submitted</p>
|
||||
</Localized>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</Flex>
|
||||
</HorizontalGutter>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
$indicator-dot: var(--v2-colors-blue-400);
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
|
||||
@@ -15,24 +17,13 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
color: var(--palette-grey-dark);
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 3px solid transparent;
|
||||
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
}
|
||||
|
||||
.activeTab {
|
||||
color: var(--palette-primary-main);
|
||||
}
|
||||
|
||||
.tabIcon {
|
||||
margin-right: var(--spacing-2);
|
||||
margin-right: var(--v2-spacing-1);
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
@@ -41,7 +32,7 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100% - var(--spacing-2) - var(--spacing-3));
|
||||
height: calc(100% - var(--v2-spacing-2) - var(--v2-spacing-3));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -50,8 +41,8 @@
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
margin-bottom: var(--spacing-2);
|
||||
margin-top: var(--spacing-3);
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-top: var(--v2-spacing-3);
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
@@ -60,9 +51,9 @@
|
||||
}
|
||||
|
||||
.redDot {
|
||||
background-color: var(--palette-error-main);
|
||||
background-color: $indicator-dot;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
TabBar,
|
||||
TabContent,
|
||||
TabPane,
|
||||
} from "coral-ui/components";
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import UserDrawerAccountHistoryQuery from "./UserDrawerAccountHistoryQuery";
|
||||
import UserDrawerNotesQuery from "./UserDrawerNotesQuery";
|
||||
@@ -48,7 +48,8 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
|
||||
className={styles.tabBar}
|
||||
>
|
||||
<Tab tabID="ALL_COMMENTS" onTabClick={onTabChanged}>
|
||||
<div
|
||||
<Flex
|
||||
alignItems="center"
|
||||
className={cn(styles.tab, {
|
||||
[styles.activeTab]: currentTab === "ALL_COMMENTS",
|
||||
})}
|
||||
@@ -59,24 +60,26 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
|
||||
<Localized id="moderate-user-drawer-tab-all-comments">
|
||||
<span>All Comments</span>
|
||||
</Localized>
|
||||
</div>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab tabID="REJECTED_COMMENTS" onTabClick={onTabChanged}>
|
||||
<div
|
||||
<Flex
|
||||
alignItems="center"
|
||||
className={cn(styles.tab, {
|
||||
[styles.activeTab]: currentTab === "REJECTED_COMMENTS",
|
||||
})}
|
||||
>
|
||||
<Icon size="sm" className={styles.tabIcon}>
|
||||
cancel
|
||||
close
|
||||
</Icon>
|
||||
<Localized id="moderate-user-drawer-tab-rejected-comments">
|
||||
<span>Rejected</span>
|
||||
</Localized>
|
||||
</div>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab tabID="NOTES" onTabClick={onTabChanged}>
|
||||
<div
|
||||
<Flex
|
||||
alignItems="center"
|
||||
className={cn(styles.tab, {
|
||||
[styles.activeTab]: currentTab === "NOTES",
|
||||
})}
|
||||
@@ -90,13 +93,14 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
|
||||
</Localized>
|
||||
{notesCount > 0 && <div className={styles.redDot} />}
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab tabID="ACCOUNT_HISTORY" onTabClick={onTabChanged}>
|
||||
<div
|
||||
<Flex
|
||||
className={cn(styles.tab, {
|
||||
[styles.activeTab]: currentTab === "ACCOUNT_HISTORY",
|
||||
})}
|
||||
alignItems="center"
|
||||
>
|
||||
<Icon size="sm" className={styles.tabIcon}>
|
||||
history
|
||||
@@ -104,7 +108,7 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
|
||||
<Localized id="moderate-user-drawer-tab-account-history">
|
||||
<span>Account History</span>
|
||||
</Localized>
|
||||
</div>
|
||||
</Flex>
|
||||
</Tab>
|
||||
</TabBar>
|
||||
<TabContent activeTab={currentTab} className={styles.tabContent}>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
|
||||
|
||||
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
|
||||
import CLASSES from "coral-stream/classes";
|
||||
import { Tag } from "coral-ui/components";
|
||||
import { Tag } from "coral-ui/components/v2";
|
||||
|
||||
import { UserBadgesContainer_user as UserData } from "coral-admin/__generated__/UserBadgesContainer_user.graphql";
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "coral-ui/components";
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import { UserDrawerAccountHistory_user } from "coral-admin/__generated__/UserDrawerAccountHistory_user.graphql";
|
||||
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
|
||||
.callout {
|
||||
width: 100%;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
|
||||
import { ReadyState } from "react-relay";
|
||||
|
||||
import { graphql, QueryRenderer } from "coral-framework/lib/relay";
|
||||
import { CallOut, Spinner } from "coral-ui/components";
|
||||
import { CallOut, Spinner } from "coral-ui/components/v2";
|
||||
|
||||
import { UserDrawerAccountHistoryQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerAccountHistoryQuery.graphql";
|
||||
|
||||
|
||||
@@ -1,23 +1,9 @@
|
||||
.root {
|
||||
|
||||
}
|
||||
|
||||
.textArea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: calc(12 * var(--mini-unit));
|
||||
border-width: 1px;
|
||||
border-color: var(--palette-grey-main);
|
||||
padding: calc(0.5 * var(--mini-unit));
|
||||
border-radius: 2px;
|
||||
margin-bottom: var(--spacing-2);
|
||||
padding: var(--spacing-3);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
line-height: 1;
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: var(--palette-text-primary);
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
}
|
||||
|
||||
.textArea:focus {
|
||||
@@ -25,7 +11,6 @@
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: var(--spacing-2) 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin-bottom: var(--spacing-4);
|
||||
padding: var(--v2-spacing-2) 0;
|
||||
margin-bottom: var(--v2-spacing-4);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,25 @@
|
||||
import { FormApi } from "final-form";
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent, useCallback } from "react";
|
||||
import { Field, Form } from "react-final-form";
|
||||
|
||||
import { UserDrawerNotesContainer_user as UserData } from "coral-admin/__generated__/UserDrawerNotesContainer_user.graphql";
|
||||
import { UserDrawerNotesContainer_viewer as ViewerData } from "coral-admin/__generated__/UserDrawerNotesContainer_viewer.graphql";
|
||||
import {
|
||||
graphql,
|
||||
useMutation,
|
||||
withFragmentContainer,
|
||||
} from "coral-framework/lib/relay";
|
||||
import { required } from "coral-framework/lib/validation";
|
||||
import { Button, Flex, HorizontalGutter } from "coral-ui/components";
|
||||
import { FormApi } from "final-form";
|
||||
import { Field, Form } from "react-final-form";
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Flex,
|
||||
HorizontalGutter,
|
||||
Textarea,
|
||||
} from "coral-ui/components/v2";
|
||||
|
||||
import { UserDrawerNotesContainer_user as UserData } from "coral-admin/__generated__/UserDrawerNotesContainer_user.graphql";
|
||||
import { UserDrawerNotesContainer_viewer as ViewerData } from "coral-admin/__generated__/UserDrawerNotesContainer_viewer.graphql";
|
||||
|
||||
import CreateModeratorNoteMutation from "./CreateModeratorNoteMutation";
|
||||
import DeleteModeratorNoteMutation from "./DeleteModeratorNoteMutation";
|
||||
import ModeratorNote from "./ModeratorNote";
|
||||
@@ -58,18 +66,19 @@ const UserDrawerNotesContainer: FunctionComponent<Props> = ({
|
||||
data-testid="userdrawer-notes-form"
|
||||
>
|
||||
<Localized id="moderate-user-drawer-notes-field">
|
||||
<Field
|
||||
className={styles.textArea}
|
||||
id="suspendModal-message"
|
||||
component="textarea"
|
||||
name="body"
|
||||
validate={required}
|
||||
placeholder="Leave a note..."
|
||||
/>
|
||||
<Field id="suspendModal-message" name="body" validate={required}>
|
||||
{({ input }) => (
|
||||
<Textarea
|
||||
placeholder="Leave a note..."
|
||||
{...input}
|
||||
className={styles.textArea}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</Localized>
|
||||
<Flex justifyContent="flex-end">
|
||||
<Localized id="moderate-user-drawer-notes-button">
|
||||
<Button variant="filled" color="primary" type="submit">
|
||||
<Button size="medium" type="submit">
|
||||
Add note
|
||||
</Button>
|
||||
</Localized>
|
||||
@@ -77,7 +86,8 @@ const UserDrawerNotesContainer: FunctionComponent<Props> = ({
|
||||
</form>
|
||||
)}
|
||||
</Form>
|
||||
<HorizontalGutter size="double">
|
||||
<Divider />
|
||||
<HorizontalGutter spacing={4}>
|
||||
{user.moderatorNotes &&
|
||||
user.moderatorNotes
|
||||
.concat()
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { graphql, QueryRenderer } from "coral-framework/lib/relay";
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import { ReadyState } from "react-relay";
|
||||
|
||||
import { UserDrawerNotesQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerNotesQuery.graphql";
|
||||
import { graphql, QueryRenderer } from "coral-framework/lib/relay";
|
||||
import { CallOut, Spinner } from "coral-ui/components/v2";
|
||||
|
||||
import { CallOut, Spinner } from "coral-ui/components";
|
||||
import { UserDrawerNotesQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerNotesQuery.graphql";
|
||||
|
||||
import UserDrawerNotesContainer from "./UserDrawerNotesContainer";
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
$user-drawer-background: var(--v2-colors-pure-white);
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -10,5 +12,5 @@
|
||||
flex-flow: column nowrap;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: var(--palette-common-white);
|
||||
background-color: $user-drawer-background;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Card, Modal } from "coral-ui/components";
|
||||
import { Modal } from "coral-ui/components";
|
||||
import { Card } from "coral-ui/components/v2";
|
||||
|
||||
import UserHistoryDrawerQuery from "./UserHistoryDrawerQuery";
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user