refactor: message input

OysterD3 · Mar 1, 2024 · 63664bf · 63664bf
1 parent c9a492b
commit 63664bf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/ChatRoom/MessageInput.tsx b/src/components/ChatRoom/MessageInput.tsx
@@ -98,16 +98,19 @@ const MessageInput = () => {
     <div className={bem()}>
       <Textarea
         ref={inputRef}
+        placeholder="Type a message..."
         onKeyDown={(e) => {
           if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             handleSendMessage();
           }
         }}
       />
-      <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
@@ -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;
+  }
 }