mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 13:35:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added alternative styling for own messages in chat

Browse source 
Added alternative styling for messages sent by self in chat

Prettiered the file
This commit is contained in:
t1enne 2022-06-28 09:05:04 +02:00
parent 577ce5718d
commit c9938cf414
2 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View file

@ -1,10 +1,10 @@
.root { .root {
font-size: 0.9rem; font-size: 0.9rem;
padding: 5px; padding: 5px;
padding-left: 1rem; padding-left: 1rem;
margin: 8px 5px; margin: 8px 5px;
border-left: 2px solid; border-left: 2px solid;
border-radius: 0.3rem;
.user { .user {
font: var(--theme-header-font-family); font: var(--theme-header-font-family);
color: var(--color-owncast-grey-100); color: var(--color-owncast-grey-100);
@ -29,3 +29,9 @@
} }
} }
} }
.ownMessage {
border-left: 0px;
border-right: 2px solid;
}

13
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View file

@ -2,6 +2,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Highlight } from 'react-highlighter-ts'; import { Highlight } from 'react-highlighter-ts';
import he from 'he'; import he from 'he';
import cn from 'classnames';
import { ChatMessage } from '../../../interfaces/chat-message.model'; import { ChatMessage } from '../../../interfaces/chat-message.model';
import { formatTimestamp } from './messageFmt'; import { formatTimestamp } from './messageFmt';
import s from './ChatUserMessage.module.scss'; import s from './ChatUserMessage.module.scss';
@ -17,12 +18,12 @@ export default function ChatUserMessage({
message, message,
highlightString, highlightString,
showModeratorMenu, showModeratorMenu,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
renderAsPersonallySent, // Move the border to the right and render a background renderAsPersonallySent, // Move the border to the right and render a background
}: Props) { }: Props) {
const { body, user, timestamp } = message; const { body, user, timestamp } = message;
const { displayName, displayColor } = user; const { displayName, displayColor } = user;
const color = `hsl(${displayColor}, 100%, 70%)`; const color = `hsl(${displayColor}, 100%, 65%)`;
const bgColor = `hsl(${displayColor}, 20%, 25%)`;
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`; const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
const [formattedMessage, setFormattedMessage] = useState<string>(body); const [formattedMessage, setFormattedMessage] = useState<string>(body);
@ -31,7 +32,13 @@ export default function ChatUserMessage({
}, [message]); }, [message]);
return ( return (
<div className={s.root} style={{ borderColor: color }} title={formattedTimestamp}> <div
className={cn(s.root, {
[s.ownMessage]: renderAsPersonallySent,
})}
style={{ borderColor: color, backgroundColor: bgColor }}
title={formattedTimestamp}
>
<div className={s.user} style={{ color }}> <div className={s.user} style={{ color }}>
{displayName} {displayName}
</div> </div>