mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 13:35:57 +03:00
Added alternative styling for own messages in chat
Added alternative styling for messages sent by self in chat Prettiered the file
This commit is contained in:
parent
577ce5718d
commit
c9938cf414
2 changed files with 17 additions and 4 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue