diff --git a/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss index d8a0fa355..f0e766a89 100644 --- a/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss +++ b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss @@ -3,9 +3,10 @@ .badge { font-family: var(--theme-text-display-font-family); font-weight: 500; - font-size: 0.4em; + font-size: 0.6rem; text-transform: uppercase; - padding: 2px; + padding: 1px; + padding-top: 0px; border-radius: 3px; border-width: 1px; border-style: solid; diff --git a/web/components/chat/ChatUserBadge/ChatUserBadge.tsx b/web/components/chat/ChatUserBadge/ChatUserBadge.tsx index 9a4e2aa07..7d02fb0ef 100644 --- a/web/components/chat/ChatUserBadge/ChatUserBadge.tsx +++ b/web/components/chat/ChatUserBadge/ChatUserBadge.tsx @@ -1,7 +1,8 @@ +import React from 'react'; import s from './ChatUserBadge.module.scss'; interface Props { - badge: string; + badge: React.ReactNode; userColor: number; } diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 229aa378d..d57d6e625 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx @@ -4,6 +4,7 @@ import { Highlight } from 'react-highlighter-ts'; import he from 'he'; import cn from 'classnames'; import { Tooltip } from 'antd'; +import { LinkOutlined } from '@ant-design/icons'; import s from './ChatUserMessage.module.scss'; import { formatTimestamp } from './messageFmt'; import { ChatMessage } from '../../../interfaces/chat-message.model'; @@ -36,10 +37,19 @@ export default function ChatUserMessage({ const formattedTimestamp = `Sent ${formatTimestamp(timestamp)}`; const [formattedMessage, setFormattedMessage] = useState(body); - const badgeStrings = [isAuthorModerator && 'mod', isAuthorAuthenticated && 'auth']; - const badges = badgeStrings - .filter(badge => !!badge) - .map(badge => ); + const badgeNodes = []; + if (isAuthorModerator) { + badgeNodes.push(); + } + if (isAuthorAuthenticated) { + badgeNodes.push( + } + userColor={displayColor} + />, + ); + } useEffect(() => { setFormattedMessage(he.decode(body)); @@ -57,7 +67,7 @@ export default function ChatUserMessage({
{displayName} - {badges} + {badgeNodes}
)}