improved ui of chat text input

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -40,13 +40,14 @@
 }
 
 .chatContainer {
-  display: grid;
+  display: flex;
-  grid-template-rows: 1fr 65px;
+  flex-direction: column;
   background-color: var(--theme-color-background-chat);
   height: 100%;
 }
 .virtuoso {
   width: auto;
+  flex-grow: 1;
   overflow-y: scroll;
   overflow-x: hidden;
 }

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -3,55 +3,41 @@
   display: flex;
   bottom: 0px;
   width: 100%;
-  padding: 0.3rem;
+  padding: 5px 1vw;
-  color: var(--theme-color-components-form-field-text);
-  border-radius: var(--theme-rounded-corners);
-  outline: 1px solid gray;
   overflow-x: hidden;
 
+  .inputWrap {
+    position: relative;
+    display: flex;
+    color: var(--theme-color-components-form-field-text);
+    background-color: var(--theme-color-palette-3);
+    border-radius: var(--theme-rounded-corners);
+    bottom: 0px;
+    width: 100%;
+    padding: 0.3rem;
+    overflow-x: hidden;
+    transition: box-shadow 90ms ease-in-out;
+    &:focus-within {
+      background-color: var(--theme-color-components-form-field-background);
+      // outline: 1px solid var(--theme-color-components-form-field-border);
+      box-shadow: inset 0px 0px 2px 2px var(--theme-color-palette-3);
+    }
+  }
+
   div[role='textbox'] {
     font-size: 0.9rem;
-    border-radius: 0.2rem;
+    padding: 0.3rem;
-    padding: 0.6rem;
+    background-color: inherit;
-    padding-right: calc(0.6rem + 44px);
-    background-color: var(--theme-color-components-form-field-background);
     border-color: var(--theme-color-components-form-field-border);
     box-shadow: 0;
     transition: box-shadow 50ms ease-in-out;
     &:focus {
-      box-shadow: inset 0px 0px 0x 1px var(--color-owncast-purple-700);
       outline: 1px solid var(--color-owncast-gray-500) !important;
     }
     & > p {
       margin: 0px;
     }
   }
-
-  .inputWrapper {
-    display: flex;
-    flex-direction: row;
-    position: relative;
-    margin-right: 0.3rem;
-    border-radius: 0.2rem;
-    & > div {
-      transition: box-shadow 0.2s ease-in-out;
-    }
-  }
-
-  .submitButtonWrapper {
-    display: flex;
-    padding: 6px 0;
-    justify-content: flex-end;
-  }
-}
-
-.sendButton {
-  display: none;
-
-  @media (max-width: 768px) {
-    display: inline;
-    margin-left: 5px;
-  }
 }
 
 .emojiButton {

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -1,5 +1,5 @@
 import { SendOutlined, SmileOutlined } from '@ant-design/icons';
-import { Button, Popover } from 'antd';
+import { Popover } from 'antd';
 import React, { FC, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Transforms, createEditor, BaseEditor, Text, Descendant, Editor, Node, Path } from 'slate';
@@ -198,39 +198,47 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
 
   return (
     <div className={styles.root}>
-      <Slate editor={editor} value={defaultEditorValue}>
+      <div className={styles.inputWrap}>
-        <Editable
+        <Slate editor={editor} value={defaultEditorValue}>
-          onKeyDown={onKeyDown}
+          <Editable
-          renderElement={renderElement}
+            onKeyDown={onKeyDown}
-          placeholder="Chat message goes here..."
+            renderElement={renderElement}
-          style={{ width: '100%' }}
+            placeholder="Chat message goes here..."
-          autoFocus
+            style={{ width: '100%' }}
-        />
+            autoFocus
-        <Popover
+          />
-          content={
+          <Popover
-            <EmojiPicker onEmojiSelect={onEmojiSelect} onCustomEmojiSelect={onCustomEmojiSelect} />
+            content={
-          }
+              <EmojiPicker
-          trigger="click"
+                onEmojiSelect={onEmojiSelect}
-          onVisibleChange={visible => setShowEmojis(visible)}
+                onCustomEmojiSelect={onCustomEmojiSelect}
-          visible={showEmojis}
+              />
-        />
+            }
-      </Slate>
+            trigger="click"
+            onVisibleChange={visible => setShowEmojis(visible)}
+            visible={showEmojis}
+          />
+        </Slate>
 
-      <button
+        <div style={{ display: 'flex', paddingLeft: '5px' }}>
-        type="button"
+          <button
-        className={styles.emojiButton}
+            type="button"
-        title="Emoji picker button"
+            className={styles.emojiButton}
-        onClick={() => setShowEmojis(!showEmojis)}
+            title="Emoji picker button"
-      >
+            onClick={() => setShowEmojis(!showEmojis)}
-        <SmileOutlined />
+          >
-      </button>
+            <SmileOutlined />
-      <Button
+          </button>
-        className={styles.sendButton}
+          <button
-        size="large"
+            type="button"
-        type="ghost"
+            className={styles.emojiButton}
-        icon={<SendOutlined />}
+            title="Send message Button"
-        onClick={sendMessage}
+            onClick={sendMessage}
-      />
+          >
+            <SendOutlined />
+          </button>
+        </div>
+      </div>
     </div>
   );
 };