fix(embed): set background color and height of chat embed. closes #2961

This commit is contained in:
Gabe Kangas 2023-04-27 10:22:59 -07:00
parent 1dc71004c9
commit f2fbce113e
No known key found for this signature in database
GPG Key ID: 4345B2060657F330

View File

@ -1,4 +1,6 @@
/* eslint-disable react/no-unknown-property */
import { useRecoilValue } from 'recoil';
import { useEffect } from 'react';
import { ChatMessage } from '../../../../interfaces/chat-message.model';
import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
import {
@ -30,8 +32,20 @@ export default function ReadWriteChatEmbed() {
const headerText = online ? streamTitle || name : name;
// This is a hack to force a specific body background color for just this page.
useEffect(() => {
document.body.classList.add('body-background');
}, []);
return (
<div>
<style jsx global>
{`
.body-background {
background: var(--theme-color-components-chat-background);
}
`}
</style>
<ClientConfigStore />
<Header name={headerText} chatAvailable chatDisabled={chatDisabled} online={videoAvailable} />
{currentUser && (
@ -42,7 +56,7 @@ export default function ReadWriteChatEmbed() {
chatUserId={currentUser.id}
isModerator={currentUser.isModerator}
showInput
height="80vh"
height="92vh"
chatAvailable={isChatAvailable}
/>
</div>