diff --git a/client/coral-admin/src/components/CommentLabels.css b/client/coral-admin/src/components/CommentLabels.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/client/coral-admin/src/components/CommentLabels.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js
new file mode 100644
index 000000000..631cf3443
--- /dev/null
+++ b/client/coral-admin/src/components/CommentLabels.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CommentLabels.css';
+import Label from './Label';
+import FlagLabel from './FlagLabel';
+import cn from 'classnames';
+
+function isUserFlagged(actions) {
+ return actions.some((action) => action.__typename === 'FlagAction' && action.user);
+}
+
+function hasSuspectedWords(actions) {
+ return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter');
+}
+
+function hasHistoryFlag(actions) {
+ return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
+}
+
+const CommentLabels = ({className, status, actions, isReply}) => {
+ return (
+
+ {isReply && }
+ {status === 'PREMOD' && }
+ {isUserFlagged(actions) && User}
+ {hasSuspectedWords(actions) && Suspect}
+ {hasHistoryFlag(actions) && History}
+
+ );
+};
+
+CommentLabels.propTypes = {
+ className: PropTypes.string,
+ status: PropTypes.string,
+ actions: PropTypes.array,
+ isReply: PropTypes.bool,
+};
+
+export default CommentLabels;
diff --git a/client/coral-admin/src/components/FlagLabel.css b/client/coral-admin/src/components/FlagLabel.css
new file mode 100644
index 000000000..070e117d1
--- /dev/null
+++ b/client/coral-admin/src/components/FlagLabel.css
@@ -0,0 +1,4 @@
+.flag {
+ background: #d03235;
+}
+
diff --git a/client/coral-admin/src/components/FlagLabel.js b/client/coral-admin/src/components/FlagLabel.js
new file mode 100644
index 000000000..8a7864c8b
--- /dev/null
+++ b/client/coral-admin/src/components/FlagLabel.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './FlagLabel.css';
+import Label from './Label';
+import cn from 'classnames';
+
+const FlagLabel = ({iconName, children, className}) => {
+ return (
+
+ );
+};
+
+FlagLabel.propTypes = {
+ className: PropTypes.string,
+ children: PropTypes.node.isRequired,
+ iconName: PropTypes.string,
+};
+
+export default FlagLabel;
diff --git a/client/coral-admin/src/components/Label.css b/client/coral-admin/src/components/Label.css
new file mode 100644
index 000000000..fb6bd86ff
--- /dev/null
+++ b/client/coral-admin/src/components/Label.css
@@ -0,0 +1,26 @@
+.root {
+ display: inline-block;
+ color: white;
+ background: grey;
+ box-sizing: border-box;
+ padding: 2px 5px;
+ font-size: 12px;
+ height: 24px;
+ letter-spacing: 0.4px;
+ line-height: 22px;
+ background: #063B9A;
+ min-width: 80px;
+ text-align: center;
+}
+
+.icon {
+ font-size: 14px;
+ vertical-align: text-top;
+ margin: 0;
+ margin-right: 4px;
+}
+
+.isFlag {
+ background: #d03235;
+}
+
diff --git a/client/coral-admin/src/components/Label.js b/client/coral-admin/src/components/Label.js
new file mode 100644
index 000000000..9d1b736de
--- /dev/null
+++ b/client/coral-admin/src/components/Label.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Label.css';
+import {Icon} from 'coral-ui';
+import cn from 'classnames';
+
+const Label = ({iconName, children, className, isFlag}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+Label.propTypes = {
+ className: PropTypes.string,
+ isFlag: PropTypes.bool,
+ children: PropTypes.node.isRequired,
+ iconName: PropTypes.string,
+};
+
+export default Label;
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index a3edb4196..ce055e644 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
import {Link} from 'react-router';
import {Icon} from 'coral-ui';
-import ReplyBadge from 'coral-admin/src/components/ReplyBadge';
import FlagBox from 'coral-admin/src/components/FlagBox';
import styles from './styles.css';
-import CommentType from 'coral-admin/src/components/CommentType';
+import CommentLabels from 'coral-admin/src/components/CommentLabels';
import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
import Slot from 'coral-framework/components/Slot';
import {getActionSummary} from 'coral-framework/utils';
@@ -16,7 +15,6 @@ import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
import IfHasLink from 'coral-admin/src/components/IfHasLink';
import cn from 'classnames';
-import {getCommentType} from 'coral-admin/src/utils/comment';
import t, {timeago} from 'coral-framework/services/i18n';
@@ -66,7 +64,6 @@ class Comment extends React.Component {
const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
- const commentType = getCommentType(comment);
const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
@@ -109,8 +106,11 @@ class Comment extends React.Component {
}
- {comment.hasParent && }
-
+