From f2fbce113e90d338a1837e867959755e926978ad Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 27 Apr 2023 10:22:59 -0700
Subject: [PATCH] fix(embed): set background color and height of chat embed.
 closes #2961

---
 web/pages/embed/chat/readwrite/index.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/pages/embed/chat/readwrite/index.tsx b/web/pages/embed/chat/readwrite/index.tsx
index 3c43d5dce..dc090c24e 100644
--- a/web/pages/embed/chat/readwrite/index.tsx
+++ b/web/pages/embed/chat/readwrite/index.tsx
@@ -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>