Add standalone join message with user badge

This commit is contained in:
Gabe Kangas
2022-08-21 15:50:22 -07:00
parent 1954169ca1
commit 6cc184ea6f
8 changed files with 82 additions and 6 deletions

View File

@@ -1,13 +0,0 @@
@import 'styles/mixins.scss';
.badge {
font-family: var(--theme-header-font-family);
font-weight: 500;
font-size: 0.4em;
text-transform: uppercase;
padding: 2px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
margin-left: 3px;
}

View File

@@ -1,18 +0,0 @@
import s from './ChatUserBadge.module.scss';
interface Props {
badge: string;
userColor: number;
}
export default function ChatUserBadge(props: Props) {
const { badge, userColor } = props;
const color = `var(--theme-user-colors-${userColor})`;
const style = { color, borderColor: color };
return (
<span style={style} className={s.badge}>
{badge}
</span>
);
}

View File

@@ -7,7 +7,7 @@ import s from './ChatUserMessage.module.scss';
import { formatTimestamp } from './messageFmt';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import ChatModerationActionMenu from '../ChatModerationActionMenu/ChatModerationActionMenu';
import ChatUserBadge from './ChatUserBadge';
import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
interface Props {
message: ChatMessage;