chores: updates

src/common/component/ChannelModal/styled.js

@@ -18,6 +18,7 @@ const StyledWrapper = styled.div`
       top: 0;
       z-index: 99;
       background: #fff;
+      border-top-left-radius: var(--br);
       box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
       padding: 8px;
       width: calc(100% - 1px);

src/common/component/EmojiPicker.js

@@ -33,6 +33,8 @@ export default function EmojiPicker({ onSelect, ...rest }) {
     <StyledWrapper>
       {visible ? (
         <Picker
+          emojiSize={28}
+          emojiTooltip={true}
           // set="twitter"
           // data={data}
           // set="twitter"

src/common/component/FileMessage/index.js

@@ -23,7 +23,7 @@ export default function FileMessage({
   properties = { local_id: 0, name: "", size: 0, content_type: "" },
 }) {
   const [imageSize, setImageSize] = useState(null);
-  const [uploadinFile, setUploadinFile] = useState(false);
+  const [uploadingFile, setUploadingFile] = useState(false);
   const removeLocalMessage = useRemoveLocalMessage({ context, id: to });
   const {
     sendMessage,
@@ -46,7 +46,7 @@ export default function FileMessage({
   useEffect(() => {
     const handleUpSend = async ({ url, name, type }) => {
       try {
-        setUploadinFile(true);
+        setUploadingFile(true);
         if (type.startsWith("image")) {
           const size = await getImageSize(url);
           setImageSize(size);
@@ -56,9 +56,9 @@ export default function FileMessage({
           .then((blobFile) => new File([blobFile], name, { type }));
 
         await uploadFile(file);
-        setUploadinFile(false);
+        setUploadingFile(false);
       } catch (error) {
-        setUploadinFile(false);
+        setUploadingFile(false);
         console.log("fetch local file error", error);
       }
     };
@@ -97,9 +97,13 @@ export default function FileMessage({
   if (!content || !fromUser || !name) return null;
 
   console.log("file content", content, name, content_type, size);
+  const sending = uploadingFile || isSending;
+
   if (isImage(content_type, size))
     return (
       <Image
+        uploading={sending}
+        progress={progress}
         properties={{ ...imageSize, ...properties }}
         size={size}
         content={content}
@@ -107,7 +111,6 @@ export default function FileMessage({
         thumbnail={thumbnail}
       />
     );
-  const sending = uploadinFile || isSending;
   return (
     <Styled className={`file_message ${sending ? "sending" : ""}`}>
       <div className="basic">

src/common/component/ManageMembers.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import styled from "styled-components";
-// import { useOutsideClick } from "rooks";
+
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import { useSelector } from "react-redux";

src/common/component/MarkdownStyleOverride.js

@@ -16,7 +16,7 @@ const MarkdownOverrides = createGlobalStyle`
         margin: 0 ;
         padding: 0;
     }
-    p {
+    p,.toastui-editor.md-mode {
         margin:0 ;
     font-weight: 400;
     font-size: 14px;

src/common/component/styled/Menu.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 const StyledMenu = styled.ul`
-  z-index: 999;
+  /* z-index: 999; */
   display: flex;
   flex-direction: column;
   padding: 4px;

src/routes/chat/ChannelList/NavItem.js

@@ -108,6 +108,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       <Tippy
         interactive
         placement="right-start"
+        popperOptions={{ strategy: "fixed" }}
         offset={[offset.y, offset.x]}
         visible={contextMenuVisible}
         onClickOutside={hideContextMenu}

src/routes/resources/index.js

@@ -11,13 +11,7 @@ import FileBox from "../../common/component/FileBox";
 const checkFilter = (data, filter, channelMessage) => {
   console.log("filter data", data);
   let selected = true;
-  const {
+  const { mid, file_type, created_at, from_uid, properties } = data;
-    mid,
-    file_type,
-    created_at,
-    from_uid,
-    properties: { name },
-  } = data;
   const {
     name: nameFilter,
     type: typeFilter,
@@ -25,6 +19,7 @@ const checkFilter = (data, filter, channelMessage) => {
     from: fromFilter,
     channel: channelFilter,
   } = filter;
+  const name = properties ? properties.name : "";
   if (fromFilter && fromFilter != from_uid) {
     selected = false;
   }
@@ -99,13 +94,8 @@ function ResourceManagement({ fileMessages }) {
           if (!data) return null;
           const isSelected = checkFilter(data, filter, channelMessage);
           if (!isSelected) return null;
-          const {
+          const { mid, content, created_at, from_uid, properties } = data;
-            mid,
+          const { name, content_type, size } = properties ?? {};
-            content,
-            created_at,
-            from_uid,
-            properties: { name, content_type, size },
-          } = data;
           return (
             <FileBox
               preview={view == Views.grid}

src/routes/setting/ProfileBasicEditModal.js

@@ -53,13 +53,14 @@ export default function ProfileBasicEditModal({
         description={intro}
         buttons={
           <>
-            <Button onClick={closeModal}>Cancel</Button>
+            <Button className="cancel" onClick={closeModal}>
+              Cancel
+            </Button>
             <Button onClick={handleUpdate}>
               {isLoading ? "Updating" : `Done`}
             </Button>
           </>
         }
-        className="animate__animated animate__fadeInDown animate__faster"
       >
         <div className="input">
           <label htmlFor={valueKey}>{label}</label>