mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 21:03:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

styled chat join messages

Browse source
This commit is contained in:
t1enne 2022-10-03 10:15:00 +02:00
parent b52fe2fd06
commit b87076759c
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
View file

@ -1,4 +1,6 @@
.join {
padding: 5px;
.root {
padding: 10px 0px;
text-align: center;
font-size: .8rem;
font-style: italic;
}

12
web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
View file

@ -1,6 +1,7 @@
import { FC } from 'react';
import styles from './ChatJoinMessage.module.scss';
import { TeamOutlined } from '@ant-design/icons';
import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
import styles from './ChatJoinMessage.module.scss';
export type ChatJoinMessageProps = {
isAuthorModerator: boolean;
@ -13,12 +14,15 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
userColor,
displayName,
}) => {
const color = `var(--theme-user-colors-${userColor})`;
const color = `var(--theme-color-users-${userColor})`;
return (
<div className={styles.join}>
<div className={styles.root}>
<span style={{ color }}>
{displayName}
<span style={{ padding: '0 10px' }}>
<TeamOutlined />
</span>
<span style={{ fontWeight: 'bold' }}>{displayName}</span>
{isAuthorModerator && (
<span>
<ChatUserBadge badge="mod" userColor={userColor} />