refactor: new send input

src/routes/chat/ChannelChat/AddMemberModal.js

@@ -107,7 +107,7 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
         </ul>
         <Button
           disabled={selects.length == 0 || isAdding}
-          className="btn main"
+          className="btn"
           onClick={handleAddMembers}
         >
           {isAdding ? `Adding` : "Add"} to #{channel.name}

src/routes/chat/ChannelChat/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 
 import { useSelector } from "react-redux";
 import useChatScroll from "../../../common/hook/useChatScroll";
@@ -102,31 +102,34 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
         }
       >
         <StyledChannelChat>
-          <div className="wrapper" ref={ref}>
-            <div className="info">
-              <h2 className="title">Welcome to #{name} !</h2>
-              <p className="desc">This is the start of the #{name} channel. </p>
-              {/* <button className="edit">Edit Channel</button> */}
-            </div>
-            <div className="chat">
-              {[...msgIds]
-                .sort((a, b) => {
-                  return Number(a) - Number(b);
-                })
-                .map((mid, idx) => {
-                  const prev = idx == 0 ? null : messageData[msgIds[idx - 1]];
-                  const curr = messageData[mid];
-                  return renderMessageFragment({
-                    prev,
-                    curr,
-                    contextId: cid,
-                    context: "channel",
-                  });
-                })}
+          <div className="wrapper">
+            <div className="chat" ref={ref}>
+              <div className="info">
+                <h2 className="title">Welcome to #{name} !</h2>
+                <p className="desc">
+                  This is the start of the #{name} channel.{" "}
+                </p>
+                {/* <button className="edit">Edit Channel</button> */}
+              </div>
+              <div className="feed">
+                {[...msgIds]
+                  .sort((a, b) => {
+                    return Number(a) - Number(b);
+                  })
+                  .map((mid, idx) => {
+                    const prev = idx == 0 ? null : messageData[msgIds[idx - 1]];
+                    const curr = messageData[mid];
+                    return renderMessageFragment({
+                      prev,
+                      curr,
+                      contextId: cid,
+                      context: "channel",
+                    });
+                  })}
+              </div>
             </div>
+            <Send dragFiles={dragFiles} id={cid} type="channel" name={name} />
           </div>
-
-          <Send dragFiles={dragFiles} id={cid} type="channel" name={name} />
         </StyledChannelChat>
         {/* {unreads != 0 && (
         <StyledNotification>

src/routes/chat/ChannelChat/styled.js

@@ -104,46 +104,46 @@ export const StyledChannelChat = styled.article`
     display: flex;
     flex-direction: column;
     padding: 0 16px;
-    padding-bottom: 25px;
-    height: calc(100vh - 56px - 80px);
-    overflow-y: scroll;
-    overflow-x: visible;
-    .info {
-      padding-top: 114px;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 8px;
-      .title {
-        font-weight: bold;
-        font-size: 36px;
-        line-height: 44px;
-      }
-      .desc {
-        color: #78787c;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-      }
-      .edit {
-        color: #3c8ce7;
-        padding: 0;
-        border: none;
-        outline: none;
-        background: none;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
+    padding-bottom: 10px;
+    height: calc(100vh - 56px);
     .chat {
-      height: -webkit-fill-available;
       padding: 18px 0;
+      height: 100%;
+      height: -webkit-fill-available;
+      overflow: auto;
+      > .info {
+        padding-top: 114px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        .title {
+          font-weight: bold;
+          font-size: 36px;
+          line-height: 44px;
+        }
+        .desc {
+          color: #78787c;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 24px;
+        }
+        .edit {
+          color: #3c8ce7;
+          padding: 0;
+          border: none;
+          outline: none;
+          background: none;
+          font-style: normal;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+      > .feed {
+        /* display: flex;
+        flex-direction: column-reverse; */
+      }
     }
   }
-  .placeholder {
-    width: 100%;
-    height: 80px;
-  }
 `;

src/routes/chat/DMChat/index.js

@@ -69,13 +69,13 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
               });
             })}
         </div>
+        <Send
+          dragFiles={dragFiles}
+          type="user"
+          name={currUser?.name}
+          id={currUser?.uid}
+        />
       </StyledDMChat>
-      <Send
-        dragFiles={dragFiles}
-        type="user"
-        name={currUser?.name}
-        id={currUser?.uid}
-      />
     </Layout>
   );
 }

src/routes/chat/DMChat/styled.js

@@ -44,16 +44,16 @@ export const StyledHeader = styled.header`
 `;
 export const StyledDMChat = styled.article`
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  padding-top: 20px;
+  padding: 0 16px;
+  padding-bottom: 10px;
+  height: calc(100vh - 56px);
   > .chat {
-    display: flex;
-    flex-direction: column;
-    padding: 0 16px;
-    padding-top: 15px;
-    padding-bottom: 25px;
-    height: calc(100vh - 56px - 80px);
-    overflow-y: scroll;
-    overflow-x: visible;
+    padding: 18px 0;
+    height: 100%;
+    height: -webkit-fill-available;
+    overflow: auto;
   }
 `;