From b6aa20b0aa029c64c556c0fcfb09f6648e0b5a1d Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Tue, 17 May 2022 16:36:07 +0200
Subject: [PATCH] worked on chat styling

---
 web/components/chat/ChatContainer.tsx         |  1 -
 .../ChatTextField/ChatTextField.module.scss   | 12 ++++++++--
 .../chat/ChatTextField/ChatTextField.tsx      | 23 +++++++++++++++----
 web/components/ui/Sidebar/Sidebar.module.scss | 21 +++++++++++++++--
 web/components/ui/Sidebar/Sidebar.tsx         | 11 +++++----
 web/styles/variables.css                      |  2 +-
 6 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/web/components/chat/ChatContainer.tsx b/web/components/chat/ChatContainer.tsx
index 7c23f34c7..030c97125 100644
--- a/web/components/chat/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer.tsx
@@ -30,7 +30,6 @@ export default function ChatContainer(props: Props) {
 
   return (
     <div>
-      <h1>Chat</h1>
       <Spin spinning={loading} indicator={spinIcon} />
       <Virtuoso
         style={{ height: '80vh' }}
diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index 327f08fdc..107631a9a 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -1,4 +1,12 @@
 .root {
-  height: 2rem;
-  color: var(--black);
+  padding: .3rem;
+  color: var(--text-secondry);
+  div[role=textbox] {
+    padding: .6rem;
+    border-radius: .35rem;
+    background-color: var(--color-owncast-gray-700);
+    & > p {
+      margin: 0px;
+    }
+  }
 }
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index 1989c35ce..8c7d9702f 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.tsx
@@ -8,8 +8,9 @@ import EmojiPicker from './EmojiPicker';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom } from '../../stores/ClientConfigStore';
 import { MessageType } from '../../../interfaces/socket-events';
+import s from './ChatTextField.module.scss';
 
-type CustomElement = { type: 'paragraph'; children: CustomText[] };
+type CustomElement = { type: 'paragraph' | 'span'; children: CustomText[] };
 type CustomText = { text: string };
 
 declare module 'slate' {
@@ -103,6 +104,16 @@ export default function ChatTextField(props: Props) {
   const [editor] = useState(() => withImages(withReact(createEditor())));
 
   const size = 'small';
+  const EMPTY_VALUE = [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+      ],
+    },
+  ];
 
   const sendMessage = () => {
     if (!websocketService) {
@@ -142,12 +153,16 @@ export default function ChatTextField(props: Props) {
   };
 
   return (
-    <div>
-      <Slate editor={editor} value={[]} onChange={handleChange}>
+    <div className={s.root}>
+      <Slate
+        editor={editor}
+        value={[{ type: 'span', children: [{ text: 'hey' }] }]}
+        onChange={handleChange}
+      >
         <Editable
           onKeyDown={onKeyDown}
           renderElement={p => <Element {...p} />}
-          placeholder="Chat message goes here..."
+          // placeholder="Chat message goes here..."
         />
       </Slate>
       <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
diff --git a/web/components/ui/Sidebar/Sidebar.module.scss b/web/components/ui/Sidebar/Sidebar.module.scss
index 400e1a9a5..06d068422 100644
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/web/components/ui/Sidebar/Sidebar.module.scss
@@ -7,8 +7,25 @@
   .root {
     position: sticky;
     top: var(--header-h);
-    display: flex;
-    min-width: 300px !important;
+    display: block;
     max-height: calc(100vh - var(--header-h));
   }
 }
+/* 
+First div is .ant-layout-sider-children
+Only way to target it apparently
+*/
+.root > div {
+  display: flex;
+  flex-flow: column nowrap;
+  -moz-box-flex: 1 !important;
+  flex-grow: 1 !important;
+  height: 100% !important;
+}
+
+.chatHeader {
+  text-align: center;
+  color: var(--text-color-secondry);
+  border-bottom: 1px solid var(--color-owncast-gray-700);
+  font-variant: small-caps;
+}
diff --git a/web/components/ui/Sidebar/Sidebar.tsx b/web/components/ui/Sidebar/Sidebar.tsx
index a0aa4ad03..39f921ac2 100644
--- a/web/components/ui/Sidebar/Sidebar.tsx
+++ b/web/components/ui/Sidebar/Sidebar.tsx
@@ -18,13 +18,16 @@ export default function Sidebar() {
 
   return (
     <Sider
-      className={`${s.root}`}
+      className={s.root}
       collapsed={chatVisibility === ChatVisibilityState.Hidden}
       collapsedWidth={0}
-      width="100%"
+      width={320}
     >
-      <ChatContainer messages={messages} state={chatState} />
-      <ChatTextField />
+      <div className={s.chatHeader}>
+        <span>stream chat</span>
+      </div>
+        <ChatContainer messages={messages} state={chatState} />
+        <ChatTextField />
     </Sider>
   );
 }
diff --git a/web/styles/variables.css b/web/styles/variables.css
index d3d12dcd2..02f5e46db 100644
--- a/web/styles/variables.css
+++ b/web/styles/variables.css
@@ -81,6 +81,6 @@
 
   /* Layout variables */
   --header-h: 64px;
-  --chat-w: 300px;
+  --chat-w: 320px;
   --chat-input-h: 40.5px;
 }