Add staff badge near comment author (#280)

app/javascript/components/Comments/Comment.tsx

@@ -9,6 +9,7 @@ import { ReplyFormState } from '../../reducers/replyFormReducer';
 
 import CommentEditForm from './CommentEditForm';
 import CommentFooter from './CommentFooter';
+import { StaffIcon } from '../common/Icons';
 
 interface Props {
   id: number;
@@ -16,6 +17,7 @@ interface Props {
   isPostUpdate: boolean;
   userFullName: string;
   userEmail: string;
+  userRole: number;
   createdAt: string;
   updatedAt: string;
 
@@ -68,6 +70,7 @@ class Comment extends React.Component<Props, State> {
       isPostUpdate,
       userFullName,
       userEmail,
+      userRole,
       createdAt,
       updatedAt,
     
@@ -88,6 +91,9 @@ class Comment extends React.Component<Props, State> {
         <div className="commentHeader">
           <Gravatar email={userEmail} size={28} className="gravatar" />
           <span className="commentAuthor">{userFullName}</span>
+          
+          { userRole > 0 && <StaffIcon /> }
+
           {
             isPostUpdate ?
               <span className="postUpdateBadge">

app/javascript/components/common/Icons.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import { BsReply } from 'react-icons/bs';
 import { FiEdit, FiDelete } from 'react-icons/fi';
@@ -7,6 +8,7 @@ import { TbLock, TbLockOpen } from 'react-icons/tb';
 import { MdContentCopy, MdDone, MdOutlineArrowBack } from 'react-icons/md';
 import { GrTest } from 'react-icons/gr';
 import { MdOutlineLibraryBooks } from "react-icons/md";
+import { MdVerified } from "react-icons/md";
 
 export const EditIcon = () => <FiEdit />;
 
@@ -28,4 +30,10 @@ export const BackIcon = () => <MdOutlineArrowBack />;
 
 export const ReplyIcon = () => <BsReply />;
 
-export const LearnMoreIcon = () => <MdOutlineLibraryBooks />;
+export const LearnMoreIcon = () => <MdOutlineLibraryBooks />;
+
+export const StaffIcon = () => (
+  <span title={I18n.t('common.user_staff')} className="staffIcon">
+    <MdVerified />
+  </span>
+);