Redesign the user badges (authed, mods)

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" />
+);