Redesign the user badges (authed, mods)

web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
-import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
 import styles from './ChatJoinMessage.module.scss';
+import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';
 
 // Lazy loaded components
 
@@ -31,7 +31,7 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
         <span style={{ fontWeight: 'bold' }}>{displayName}</span>
         {isAuthorModerator && (
           <span>
-            <ChatUserBadge badge="mod" userColor={userColor} />
+            <ModerationBadge userColor={userColor} />
           </span>
         )}
       </span>{' '}

web/components/chat/ChatUserBadge/AuthedUserBadge.tsx

@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+import React, { FC } from 'react';
+import { ChatUserBadge } from './ChatUserBadge';
+
+// Lazy loaded components
+
+const SafetyCertificateFilled = dynamic(() => import('@ant-design/icons/SafetyCertificateFilled'), {
+  ssr: false,
+});
+
+export type AuthedUserBadgeProps = {
+  userColor: number;
+};
+
+export const AuthedUserBadge: FC<AuthedUserBadgeProps> = ({ userColor }) => (
+  <ChatUserBadge badge={<SafetyCertificateFilled />} userColor={userColor} title="Moderator" />
+);

web/components/chat/ChatUserBadge/ChatUserBadge.module.scss

@@ -1,13 +1,15 @@
 .badge {
-  font-family: var(--theme-text-display-font-family);
-  font-weight: 500;
-  font-size: 0.5rem;
-  text-transform: uppercase;
+  color: white;
+  background-color: var(--color-owncast-palette-0);
+  height: 18px;
+  width: 18px;
+  border-radius: 2px;
+  text-align: center;
   padding: 2px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  border-radius: 3px;
-  border-width: 1px;
-  border-style: solid;
-  margin-left: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  margin-left: 5px;
+  font-size: 0.75rem;
 }

web/components/chat/ChatUserBadge/ChatUserBadge.stories.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ChatUserBadge } from './ChatUserBadge';
+import { ModerationBadge } from './ModerationBadge';
+import { AuthedUserBadge } from './AuthedUserBadge';
 
 export default {
   title: 'owncast/Chat/Messages/User Flag',
@@ -14,15 +16,26 @@ export default {
 } as ComponentMeta<typeof ChatUserBadge>;
 
 const Template: ComponentStory<typeof ChatUserBadge> = args => <ChatUserBadge {...args} />;
+const ModerationTemplate: ComponentStory<typeof ModerationBadge> = args => (
+  <ModerationBadge {...args} />
+);
 
-export const Moderator = Template.bind({});
+const AuthedTemplate: ComponentStory<typeof ModerationBadge> = args => (
+  <AuthedUserBadge {...args} />
+);
+
+export const Authenticated = AuthedTemplate.bind({});
+Authenticated.args = {
+  userColor: '3',
+};
+
+export const Moderator = ModerationTemplate.bind({});
 Moderator.args = {
-  badge: 'mod',
   userColor: '5',
 };
 
-export const Authenticated = Template.bind({});
-Authenticated.args = {
-  badge: 'auth',
+export const Generic = Template.bind({});
+Generic.args = {
+  badge: '?',
   userColor: '6',
 };

web/components/chat/ChatUserBadge/ChatUserBadge.tsx

@@ -4,14 +4,15 @@ import styles from './ChatUserBadge.module.scss';
 export type ChatUserBadgeProps = {
   badge: React.ReactNode;
   userColor: number;
+  title: string;
 };
 
-export const ChatUserBadge: FC<ChatUserBadgeProps> = ({ badge, userColor }) => {
-  const color = `var(--theme-user-colors-${userColor})`;
-  const style = { color, borderColor: color };
+export const ChatUserBadge: FC<ChatUserBadgeProps> = ({ badge, userColor, title }) => {
+  const color = `var(--theme-color-users-${userColor})`;
+  const style = { color };
 
   return (
-    <span style={style} className={styles.badge}>
+    <span style={style} className={styles.badge} title={title}>
       {badge}
     </span>
   );

web/components/chat/ChatUserBadge/ModerationBadge.tsx

@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+import React, { FC } from 'react';
+import { ChatUserBadge } from './ChatUserBadge';
+
+// Lazy loaded components
+
+const StarFilled = dynamic(() => import('@ant-design/icons/StarFilled'), {
+  ssr: false,
+});
+
+export type ModerationBadgeProps = {
+  userColor: number;
+};
+
+export const ModerationBadge: FC<ModerationBadgeProps> = ({ userColor }) => (
+  <ChatUserBadge badge={<StarFilled />} userColor={userColor} title="Moderator" />
+);

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -9,16 +9,13 @@ import linkifyHtml from 'linkify-html';
 import styles from './ChatUserMessage.module.scss';
 import { formatTimestamp } from './messageFmt';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
 import { accessTokenAtom } from '../../stores/ClientConfigStore';
 import { User } from '../../../interfaces/user.model';
+import { AuthedUserBadge } from '../ChatUserBadge/AuthedUserBadge';
+import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';
 
 // Lazy loaded components
 
-const LinkOutlined = dynamic(() => import('@ant-design/icons/LinkOutlined'), {
-  ssr: false,
-});
-
 const ChatModerationActionMenu = dynamic(
   () =>
     import('../ChatModerationActionMenu/ChatModerationActionMenu').then(
@@ -78,16 +75,10 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
 
   const badgeNodes = [];
   if (isAuthorModerator) {
-    badgeNodes.push(<ChatUserBadge key="mod" badge="mod" userColor={displayColor} />);
+    badgeNodes.push(<ModerationBadge key="mod" userColor={displayColor} />);
   }
   if (isAuthorAuthenticated) {
-    badgeNodes.push(
-      <ChatUserBadge
-        key="auth"
-        badge={<LinkOutlined title="authenticated" />}
-        userColor={displayColor}
-      />,
-    );
+    badgeNodes.push(<AuthedUserBadge key="auth" userColor={displayColor} />);
   }
 
   useEffect(() => {