Input alignment (#193)

* Fix buttons alignment

* Add message reaction key

* Add click outside picker

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -11,6 +11,7 @@ import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import { Reply } from "../../hooks/useReply";
 import { uintToImgUrl } from "../../utils/uintToImgUrl";
 import { ClearBtn } from "../Form/inputStyles";
@@ -54,14 +55,8 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
 
   const inputRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (showEmoji) {
-      window.addEventListener("click", () => setShowEmoji(false));
-    }
-    return () => {
-      window.removeEventListener("click", () => setShowEmoji(false));
-    };
-  }, [showEmoji]);
+  const ref = useRef(null);
+  useClickOutside(ref, () => setShowEmoji(false));
 
   const image = useMemo(
     () => (imageUint ? uintToImgUrl(imageUint) : ""),
@@ -211,7 +206,10 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
   return (
     <View>
       <SizeLimitModal />
+      <EmojiWrapper ref={ref}>
         <EmojiPicker addEmoji={addEmoji} showEmoji={showEmoji} />
+      </EmojiWrapper>
+
       <AddPictureInputWrapper>
         <PictureIcon />
         <AddPictureInput
@@ -295,11 +293,8 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
           </InputWrapper>
           <InputButtons>
             <ChatButton
-              onClick={(e) => {
-                e.stopPropagation();
-                if (!disabled) {
-                  setShowEmoji(!showEmoji);
-                }
+              onClick={() => {
+                if (!disabled) setShowEmoji(!showEmoji);
               }}
               disabled={disabled}
             >
@@ -325,9 +320,15 @@ const InputWrapper = styled.div`
   position: relative;
 `;
 
+const EmojiWrapper = styled.div`
+  position: absolute;
+  bottom: calc(100% - 6px);
+  right: 8px;
+`;
+
 const View = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   padding: 6px 8px 6px 10px;
   position: relative;
 `;
@@ -356,7 +357,7 @@ const Row = styled.div`
 
 const InputButtons = styled.div`
   display: flex;
-  align-items: center;
+  align-self: flex-end;
 
   button + button {
     margin-left: 4px;

packages/react-chat/src/components/Chat/EmojiPicker.tsx

@@ -23,9 +23,6 @@ export function EmojiPicker({ showEmoji, addEmoji }: EmojiPickerProps) {
         color={theme.tertiary}
         emojiSize={26}
         style={{
-          position: "absolute",
-          bottom: "100%",
-          right: "0",
           color: theme.secondary,
           height: low ? "200px" : "355px",
           overflow: "auto",

packages/react-chat/src/components/Messages/MessageReactions.tsx

@@ -21,6 +21,7 @@ export function MessageReactions({
       {messageReactions.map((reaction) => (
         <EmojiReaction
           className={`${isMyReactionIncluded(reaction) && "chosen"}`}
+          key={reaction.id}
         >
           <Emoji emoji={reaction} set={"twitter"} size={16} />
           <p>1</p>