From cc33839f56d36184b8ad331e3e0c294c28e27c96 Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Sat, 24 Sep 2022 21:55:16 -0500
Subject: [PATCH 1/2] Small padding on mobile chat heading

---
 chat/package.json | 2 +-
 chat/src/App.css  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/chat/package.json b/chat/package.json
index 219c74b4b4..0bbac3f2f7 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
diff --git a/chat/src/App.css b/chat/src/App.css
index a77b5ff9e3..c32582e654 100644
--- a/chat/src/App.css
+++ b/chat/src/App.css
@@ -94,6 +94,10 @@ body {
 
 /* On mobile, hide the sidebar and make the input full-width. */
 @media screen and (max-width: 1100px) {
+  .App-heading {
+    padding: 0 1rem;
+  }
+
   .App-side {
     display: none;
   }

From d4c76391e1c92f096bb780f7df8cf2e84a904bae Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Sat, 24 Sep 2022 22:06:52 -0500
Subject: [PATCH 2/2] Move emoji and send button outside of textarea

---
 chat/package.json                    |  2 +-
 chat/src/features/chat/UserInput.css | 12 +++++--
 chat/src/features/chat/UserInput.tsx | 49 +++++++++++++---------------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/chat/package.json b/chat/package.json
index 0bbac3f2f7..f49e5106a5 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
diff --git a/chat/src/features/chat/UserInput.css b/chat/src/features/chat/UserInput.css
index 3d8d94ab96..6b479592a9 100644
--- a/chat/src/features/chat/UserInput.css
+++ b/chat/src/features/chat/UserInput.css
@@ -1,11 +1,17 @@
 .UserInput {
   position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.UserInput-input {
+  flex: 1;
+  margin-right: 2rem;
 }
 
 .UserInput-emoji {
   cursor: pointer;
-  position: absolute;
-  top: 12px;
-  right: 12px;
   font-size: 20px;
+  transform: rotateY(180deg);
+  margin-right: 1rem;
 }
\ No newline at end of file
diff --git a/chat/src/features/chat/UserInput.tsx b/chat/src/features/chat/UserInput.tsx
index ebccbd0ea0..7e6e8b3c4c 100644
--- a/chat/src/features/chat/UserInput.tsx
+++ b/chat/src/features/chat/UserInput.tsx
@@ -12,7 +12,7 @@ import { EmojiDrawer, QuickEmojis } from "../emoji";
 import "./UserInput.css";
 
 export function UserInput() {
-  const { messages, draft, sendMessage, updateDraft } = useChat();
+  const { draft, sendMessage, updateDraft } = useChat();
   const { reveal, hide, open } = useDrawer();
   const builtChatInput = useRef<HTMLTextAreaElement>(null);
   const { visible, addQuery } = useEmojis();
@@ -53,8 +53,8 @@ export function UserInput() {
     },
     [handleSendMessage]
   );
-  const handleOpenEmojiDrawer = useCallback(
-    () =>
+  const handleToggleEmojiDrawer = useCallback(() => {
+    if (open) {
       reveal({
         title: "Select an emoji",
         content: (
@@ -63,13 +63,12 @@ export function UserInput() {
             onClose={() => builtChatInput.current?.focus()}
           />
         ),
-      }),
-    []
-  );
-  const handleCloseEmojiDrawer = useCallback(() => {
-    builtChatInput.current?.focus();
-    hide();
-  }, [hide]);
+      });
+    } else {
+      builtChatInput.current?.focus();
+      hide();
+    }
+  }, [open]);
   const handleSelectEmoji = useCallback((emoji: string) => {
     updateDraft((prev) => `${prev} :${emoji}: `);
   }, []);
@@ -108,7 +107,7 @@ export function UserInput() {
       <textarea
         ref={builtChatInput}
         id="builtChatInput"
-        className="form-control"
+        className="UserInput-input form-control"
         style={{
           minHeight: 50,
           height: 50,
@@ -123,22 +122,18 @@ export function UserInput() {
         autoComplete="off"
         value={draft}
       />
-      {open ? (
-        <span
-          role="button"
-          onClick={handleCloseEmojiDrawer}
-          className="UserInput-emoji"
-          style={{ top: 6 }}
-        >
-          X
-        </span>
-      ) : (
-        <i
-          role="button"
-          onClick={handleOpenEmojiDrawer}
-          className="UserInput-emoji fas fa-smile-beam"
-        />
-      )}
+      <i
+        role="button"
+        onClick={handleToggleEmojiDrawer}
+        className="UserInput-emoji fas fa-smile-beam"
+      />
+      <button
+        className="btn btn-secondary"
+        disabled={draft.length === 0}
+        onClick={sendMessage}
+      >
+        <i className="UserInput-emoji fas fa-reply" />
+      </button>
     </form>
   );
 }