From 63664bfba8b74b652138d22db27106fe6690f0d8 Mon Sep 17 00:00:00 2001
From: Oyster Lee <oysterd3@gmail.com>
Date: Fri, 1 Mar 2024 21:03:32 +0800
Subject: [PATCH] refactor: message input

---
 src/components/ChatRoom/MessageInput.tsx |  9 ++++++---
 src/styles/components/message-input.scss | 10 +++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/ChatRoom/MessageInput.tsx b/src/components/ChatRoom/MessageInput.tsx
index c49cd4d..24430d0 100644
--- a/src/components/ChatRoom/MessageInput.tsx
+++ b/src/components/ChatRoom/MessageInput.tsx
@@ -98,6 +98,7 @@ const MessageInput = () => {
     <div className={bem()}>
       <Textarea
         ref={inputRef}
+        placeholder="Type a message..."
         onKeyDown={(e) => {
           if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
@@ -105,9 +106,11 @@ const MessageInput = () => {
           }
         }}
       />
-      <Button type="submit" onClick={handleSendMessage}>
-        Send
-      </Button>
+      <div className={bem('actions')}>
+        <Button size="sm" type="submit" onClick={handleSendMessage}>
+          Send
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/src/styles/components/message-input.scss b/src/styles/components/message-input.scss
index 2540e60..55c89c9 100644
--- a/src/styles/components/message-input.scss
+++ b/src/styles/components/message-input.scss
@@ -1,3 +1,11 @@
 .smartify-message-input {
-  @apply flex gap-2;
+  @apply flex flex-col gap-2 border-t;
+
+  .smartify-textarea {
+    @apply border-none focus-visible:ring-0;
+  }
+
+  &__actions {
+    @apply flex items-center gap-2 justify-end p-2;
+  }
 }