Comment badge to reflect mod and admin status.

## Issue
6467 Add status indicators for messages from creator, delegated moderator, global moderator

## Changes
- Added the required icons.
- Added tooltip.

## Notes
- I left out "creator" since we are already highlighting the creator's name.
- Note that currently the status is only available via websocket deltas. `comment.List` does not provide the data.
- When `comment.List` includes the info, regular comments will include the badges as well.

flow-typed/Comment.js

@@ -14,6 +14,9 @@ declare type Comment = {
   is_pinned: boolean,
   support_amount: number,
   replies: number, // number of direct replies (i.e. excluding nested replies).
+  is_moderator: boolean,
+  is_creator: boolean,
+  is_global_mod: boolean,
   is_fiat?: boolean,
 };
 

static/app-strings.json

@@ -1727,6 +1727,7 @@
   "Are you sure you want to view this content? Viewing will not unmute @%channel%": "Are you sure you want to view this content? Viewing will not unmute @%channel%",
   "View Content": "View Content",
   "Global": "Global",
+  "Global Admin": "Global Admin",
   "Moderator": "Moderator",
   "Global Unblock Channel": "Global Unblock Channel",
   "Global Block Channel": "Global Block Channel",

ui/component/comment/view.jsx

@@ -59,7 +59,9 @@ type Props = {
   stakedLevel: number,
   supportAmount: number,
   numDirectReplies: number,
-  isFiat: boolean
+  isModerator: boolean,
+  isGlobalMod: boolean,
+  isFiat: boolean,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -92,6 +94,8 @@ function Comment(props: Props) {
     stakedLevel,
     supportAmount,
     numDirectReplies,
+    isModerator,
+    isGlobalMod,
     isFiat,
   } = props;
 
@@ -225,6 +229,18 @@ function Comment(props: Props) {
         <div className="comment__body-container">
           <div className="comment__meta">
             <div className="comment__meta-information">
+              {isGlobalMod && (
+                <span className="comment__badge comment__badge--global-mod">
+                  <Icon icon={ICONS.BADGE_GLOBAL_MOD} size={20} tooltip customTooltipText={__('Global Admin')} />
+                </span>
+              )}
+
+              {isModerator && (
+                <span className="comment__badge comment__badge--mod">
+                  <Icon icon={ICONS.BADGE_MOD} size={20} tooltip customTooltipText={__('Moderator')} />
+                </span>
+              )}
+
               {!author ? (
                 <span className="comment__author">{__('Anonymous')}</span>
               ) : (

ui/component/commentsList/view.jsx

@@ -301,6 +301,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}
                   />
                 );

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}
                       />
                     );
                   })}

ui/component/common/icon-custom.jsx

@@ -2331,4 +2331,34 @@ export const icons = {
       <path d="M4.954 14.753l3.535 3.535-1.768 1.768-3.535-3.535z" />
     </g>
   ),
+  [ICONS.BADGE_GLOBAL_MOD]: buildIcon(
+    <g>
+      <path
+        d="M19.057,9.222,14.778,4.943l-13.4,13.4a.759.759,0,0,0-.217.451l-.4,3.611a.757.757,0,0,0,.836.836l3.611-.4a.759.759,0,0,0,.451-.217Z"
+        strokeWidth="1.5"
+      />
+      <path d="M15.313,5.477l4.063-4.062a2.269,2.269,0,0,1,3.209,3.209L18.523,8.687Z" strokeWidth="1.5" />
+      <path d="M13.513 3.678L20.322 10.487" strokeWidth="1.5" />
+      <path d="M5.466 18.534L16.918 7.082" strokeWidth="1.5" />
+      <path d="M8.687,5.477,4.624,1.415A2.269,2.269,0,0,0,1.415,4.624L5.477,8.687Z" strokeWidth="1.5" />
+      <path d="M10.487 3.678L3.678 10.487" strokeWidth="1.5" />
+      <path d="M9.73 9.73L7.082 7.082" strokeWidth="1.5" />
+      <path d="M12 7.72L9.222 4.943 4.943 9.222 7.72 12" strokeWidth="1.5" />
+      <path
+        d="M12,16.28l6.346,6.346a.759.759,0,0,0,.451.217l3.611.4a.757.757,0,0,0,.836-.836l-.4-3.611a.759.759,0,0,0-.217-.451L16.28,12"
+        strokeWidth="1.5"
+      />
+      <path d="M18.534 18.534L14.14 14.14" strokeWidth="1.5" />
+    </g>
+  ),
+  [ICONS.BADGE_MOD]: buildIcon(
+    <g>
+      <path d="M10.372 6.189L6.25 10.457 15.89 21.829 23.25 22.75 22.073 15.427 10.372 6.189z" strokeWidth="1.5" />
+      <path d="M3.085,9.464a1.483,1.483,0,0,0,2.134,2.061l6.183-6.4A1.483,1.483,0,1,0,9.268,3.061" strokeWidth="1.5" />
+      <path d="M18.448 18.113L8.311 8.323" strokeWidth="1.5" />
+      <path d="M7.28 9.39L3.137 5.389" strokeWidth="1.5" />
+      <path d="M9.341 7.256L5.198 3.255" strokeWidth="1.5" />
+      <path d="M0.750 3.171 A2.225 2.225 0 1 0 5.200 3.171 A2.225 2.225 0 1 0 0.750 3.171 Z" strokeWidth="1.5" />
+    </g>
+  ),
 };

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) {
       <div className="livestream-comment__body">
         {supportAmount > 0 && <ChannelThumbnail uri={authorUri} xsmall />}
         <div className="livestream-comment__info">
+          {isGlobalMod && (
+            <span className="comment__badge comment__badge--global-mod">
+              <Icon icon={ICONS.BADGE_GLOBAL_MOD} size={16} tooltip customTooltipText={__('Global Admin')} />
+            </span>
+          )}
+
+          {isModerator && (
+            <span className="comment__badge comment__badge--mod">
+              <Icon icon={ICONS.BADGE_MOD} size={16} tooltip customTooltipText={__('Moderator')} />
+            </span>
+          )}
+
           <Button
             className={classnames('button--uri-indicator comment__author', {
               'comment__author--creator': commentByOwnerOfContent,

ui/component/livestreamComments/view.jsx

@@ -197,6 +197,8 @@ export default function LivestreamComments(props: Props) {
                   commentId={comment.comment_id}
                   message={comment.comment}
                   supportAmount={comment.support_amount}
+                  isModerator={comment.is_moderator}
+                  isGlobalMod={comment.is_global_mod}
                   isFiat={comment.is_fiat}
                   commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                 />

ui/constants/icons.js

@@ -165,3 +165,5 @@ export const GLOBE = 'globe';
 export const RSS = 'rss';
 export const STAR = 'star';
 export const MUSIC = 'MusicCategory';
+export const BADGE_GLOBAL_MOD = 'BadgeGlobalMod';
+export const BADGE_MOD = 'BadgeMod';

ui/scss/component/_comments.scss

@@ -215,6 +215,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;