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