diff --git a/src/views/preview/comment/comment.jsx b/src/views/preview/comment/comment.jsx index 4b498ac72..cbdeb7642 100644 --- a/src/views/preview/comment/comment.jsx +++ b/src/views/preview/comment/comment.jsx @@ -111,7 +111,10 @@ class Comment extends React.Component { visibility } = this.props; - const visible = visibility === 'visible'; + // we allow comments that are fully visible, or markedByFilter (flagged by + // our bad words filter, but not at the critical level of offensiveness) + const markedByFilter = visibility === 'markedbyfilter'; + const visible = markedByFilter || visibility === 'visible'; let commentText = content; if (replyUsername) { @@ -182,6 +185,7 @@ class Comment extends React.Component {
diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss index 34f913435..c78905e74 100644 --- a/src/views/preview/comment/comment.scss +++ b/src/views/preview/comment/comment.scss @@ -197,6 +197,19 @@ background: $reported-background; } } + + &.comment-bubble-markedbyfilter { + $markedbyfilter-outline: $ui-yellow; + $markedbyfilter-background: rgb(255, 254, 210); + + border-color: $markedbyfilter-outline; + background-color: $markedbyfilter-background; + + &:before { + border-color: $markedbyfilter-outline transparent $markedbyfilter-outline $markedbyfilter-outline; + background: $markedbyfilter-background; + } + } } .comment-content {