worked on chat styling

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' }}

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;
+    }
+  }
 }

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)}>

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;
+}

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>
   );
 }

web/styles/variables.css

@@ -81,6 +81,6 @@
 
   /* Layout variables */
   --header-h: 64px;
-  --chat-w: 300px;
+  --chat-w: 320px;
   --chat-input-h: 40.5px;
 }