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,6 +198,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
 
   return (
     <div className={styles.root}>
+      <div className={styles.inputWrap}>
         <Slate editor={editor} value={defaultEditorValue}>
           <Editable
             onKeyDown={onKeyDown}
@@ -208,7 +209,10 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
           />
           <Popover
             content={
-            <EmojiPicker onEmojiSelect={onEmojiSelect} onCustomEmojiSelect={onCustomEmojiSelect} />
+              <EmojiPicker
+                onEmojiSelect={onEmojiSelect}
+                onCustomEmojiSelect={onCustomEmojiSelect}
+              />
             }
             trigger="click"
             onVisibleChange={visible => setShowEmojis(visible)}
@@ -216,6 +220,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
           />
         </Slate>
 
+        <div style={{ display: 'flex', paddingLeft: '5px' }}>
           <button
             type="button"
             className={styles.emojiButton}
@@ -224,13 +229,16 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
           >
             <SmileOutlined />
           </button>
-      <Button
+          <button
-        className={styles.sendButton}
+            type="button"
-        size="large"
+            className={styles.emojiButton}
-        type="ghost"
+            title="Send message Button"
-        icon={<SendOutlined />}
             onClick={sendMessage}
-      />
+          >
+            <SendOutlined />
+          </button>
+        </div>
+      </div>
     </div>
   );
 };