From adea618a4458094eee16836b4dafec759e6a7db5 Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Sat, 1 Oct 2022 10:34:59 +0200
Subject: [PATCH] improved ui of chat text input

---
 .../ChatContainer/ChatContainer.module.scss   |  5 +-
 .../ChatTextField/ChatTextField.module.scss   | 56 ++++++--------
 .../chat/ChatTextField/ChatTextField.tsx      | 74 ++++++++++---------
 3 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss
index 44312d66e..01cce6488 100644
--- a/web/components/chat/ChatContainer/ChatContainer.module.scss
+++ b/web/components/chat/ChatContainer/ChatContainer.module.scss
@@ -40,13 +40,14 @@
 }
 
 .chatContainer {
-  display: grid;
-  grid-template-rows: 1fr 65px;
+  display: flex;
+  flex-direction: column;
   background-color: var(--theme-color-background-chat);
   height: 100%;
 }
 .virtuoso {
   width: auto;
+  flex-grow: 1;
   overflow-y: scroll;
   overflow-x: hidden;
 }
diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index b0fae308d..f3f7d922d 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -3,55 +3,41 @@
   display: flex;
   bottom: 0px;
   width: 100%;
-  padding: 0.3rem;
-  color: var(--theme-color-components-form-field-text);
-  border-radius: var(--theme-rounded-corners);
-  outline: 1px solid gray;
+  padding: 5px 1vw;
   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.6rem;
-    padding-right: calc(0.6rem + 44px);
-    background-color: var(--theme-color-components-form-field-background);
+    padding: 0.3rem;
+    background-color: inherit;
     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 {
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index 0bfc1a22a..f11770031 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/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}>
-        <Editable
-          onKeyDown={onKeyDown}
-          renderElement={renderElement}
-          placeholder="Chat message goes here..."
-          style={{ width: '100%' }}
-          autoFocus
-        />
-        <Popover
-          content={
-            <EmojiPicker onEmojiSelect={onEmojiSelect} onCustomEmojiSelect={onCustomEmojiSelect} />
-          }
-          trigger="click"
-          onVisibleChange={visible => setShowEmojis(visible)}
-          visible={showEmojis}
-        />
-      </Slate>
+      <div className={styles.inputWrap}>
+        <Slate editor={editor} value={defaultEditorValue}>
+          <Editable
+            onKeyDown={onKeyDown}
+            renderElement={renderElement}
+            placeholder="Chat message goes here..."
+            style={{ width: '100%' }}
+            autoFocus
+          />
+          <Popover
+            content={
+              <EmojiPicker
+                onEmojiSelect={onEmojiSelect}
+                onCustomEmojiSelect={onCustomEmojiSelect}
+              />
+            }
+            trigger="click"
+            onVisibleChange={visible => setShowEmojis(visible)}
+            visible={showEmojis}
+          />
+        </Slate>
 
-      <button
-        type="button"
-        className={styles.emojiButton}
-        title="Emoji picker button"
-        onClick={() => setShowEmojis(!showEmojis)}
-      >
-        <SmileOutlined />
-      </button>
-      <Button
-        className={styles.sendButton}
-        size="large"
-        type="ghost"
-        icon={<SendOutlined />}
-        onClick={sendMessage}
-      />
+        <div style={{ display: 'flex', paddingLeft: '5px' }}>
+          <button
+            type="button"
+            className={styles.emojiButton}
+            title="Emoji picker button"
+            onClick={() => setShowEmojis(!showEmojis)}
+          >
+            <SmileOutlined />
+          </button>
+          <button
+            type="button"
+            className={styles.emojiButton}
+            title="Send message Button"
+            onClick={sendMessage}
+          >
+            <SendOutlined />
+          </button>
+        </div>
+      </div>
     </div>
   );
 };