+ {isGlobalMod && (
+
+
+
+ )}
+
+ {isModerator && (
+
+
+
+ )}
+
{!author ? (
{__('Anonymous')}
) : (
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 01075cf1c..ecccccc88 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -311,6 +311,8 @@ function CommentList(props: Props) {
isPinned={comment.is_pinned}
supportAmount={comment.support_amount}
numDirectReplies={comment.replies}
+ isModerator={comment.is_moderator}
+ isGlobalMod={comment.is_global_mod}
isFiat={comment.is_fiat}
/>
);
diff --git a/ui/component/commentsReplies/view.jsx b/ui/component/commentsReplies/view.jsx
index 932b8c94e..6e78e7dac 100644
--- a/ui/component/commentsReplies/view.jsx
+++ b/ui/component/commentsReplies/view.jsx
@@ -97,6 +97,8 @@ function CommentsReplies(props: Props) {
commentingEnabled={commentingEnabled}
supportAmount={comment.support_amount}
numDirectReplies={comment.replies}
+ isModerator={comment.is_moderator}
+ isGlobalMod={comment.is_global_mod}
/>
);
})}
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index a5f0d2d68..eef84239f 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -2348,4 +2348,34 @@ export const icons = {
),
+ [ICONS.BADGE_GLOBAL_MOD]: buildIcon(
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ [ICONS.BADGE_MOD]: buildIcon(
+
+
+
+
+
+
+
+
+ ),
};
diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx
index cf3b58b14..48d16cf2d 100644
--- a/ui/component/livestreamComment/view.jsx
+++ b/ui/component/livestreamComment/view.jsx
@@ -20,11 +20,25 @@ type Props = {
commentIsMine: boolean,
stakedLevel: number,
supportAmount: number,
+ isModerator: boolean,
+ isGlobalMod: boolean,
isFiat: boolean,
};
function LivestreamComment(props: Props) {
- const { claim, uri, authorUri, message, commentIsMine, commentId, stakedLevel, supportAmount, isFiat } = props;
+ const {
+ claim,
+ uri,
+ authorUri,
+ message,
+ commentIsMine,
+ commentId,
+ stakedLevel,
+ supportAmount,
+ isModerator,
+ isGlobalMod,
+ isFiat,
+ } = props;
const [mouseIsHovering, setMouseHover] = React.useState(false);
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
const { claimName } = parseURI(authorUri);
@@ -47,6 +61,18 @@ function LivestreamComment(props: Props) {
{supportAmount > 0 &&
}
+ {isGlobalMod && (
+
+
+
+ )}
+
+ {isModerator && (
+
+
+
+ )}
+
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 55110cefe..3936256b0 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -167,3 +167,5 @@ export const APPEARANCE = 'Appearance';
export const CONTENT = 'Content';
export const STAR = 'star';
export const MUSIC = 'MusicCategory';
+export const BADGE_GLOBAL_MOD = 'BadgeGlobalMod';
+export const BADGE_MOD = 'BadgeMod';
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index e99a2345a..9fde0fdb4 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -223,6 +223,22 @@ $thumbnailWidthSmall: 1rem;
}
}
+.comment__badge {
+ padding-right: var(--spacing-xxs);
+
+ .icon {
+ margin-bottom: -3px;
+ }
+}
+
+.comment__badge--global-mod {
+ color: var(--color-primary);
+}
+
+.comment__badge--mod {
+ color: var(--color-secondary);
+}
+
.comment__message {
word-break: break-word;
max-width: 35rem;