chore: update UXs

src/common/component/ChannelInviteModal/InviteByEmail.js

@@ -1,22 +1,27 @@
-// import React from 'react'
+import { useEffect } from "react";
+import toast from "react-hot-toast";
 import styled from "styled-components";
 import useInviteLink from "../../hook/useInviteLink";
 const Styled = styled.div`
   padding: 16px 0;
   .input {
     position: relative;
-    button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    > .copy {
       position: absolute;
       right: 4px;
       top: 50%;
       transform: translateY(-50%);
-      &.copy {
-        padding-right: 8px;
-        background: none;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        color: #22ccee;
+      padding-right: 8px;
+      background: none;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #22ccee;
+      &:hover {
+        color: #088ab2;
       }
     }
     input {
@@ -70,6 +75,12 @@ export default function InviteByEmail({ cid = null }) {
     generateNewLink,
     generating,
   } = useInviteLink(cid);
+  useEffect(() => {
+    if (linkCopied) {
+      toast.success("Invite Link Copied!");
+    }
+  }, [linkCopied]);
+
   return (
     <Styled>
       <div className="invite">
@@ -79,11 +90,11 @@ export default function InviteByEmail({ cid = null }) {
             readOnly={true}
             disabled={!enableSMTP}
             type="email"
-            className="higher"
+            className="higher "
             placeholder={enableSMTP ? "Enter Email" : "Enable SMTP First"}
           />
-          <Button disabled={!enableSMTP} className="ghost small">
-            Invite
+          <Button disabled={!enableSMTP} className="send">
+            Send
           </Button>
         </div>
       </div>
@@ -97,7 +108,7 @@ export default function InviteByEmail({ cid = null }) {
             value={link}
           />
           <button className="copy" onClick={copyLink}>
-            {linkCopied ? `Copied` : `Copy`}
+            Copy
           </button>
         </div>
       </div>

src/common/component/ManageMembers.js

@@ -120,6 +120,11 @@ export default function ManageMembers({ cid = null }) {
       toast.success("delete successfully");
     }
   }, [removeSuccess]);
+  useEffect(() => {
+    if (copied) {
+      toast.success("Emial Copied!");
+    }
+  }, [copied]);
   useEffect(() => {
     if (removeMemberSuccess) {
       toast.success("remove member successfully");
@@ -127,11 +132,7 @@ export default function ManageMembers({ cid = null }) {
   }, [removeMemberSuccess]);
   const handleCopy = (str) => {
     copy(str);
-    // const tippyInstance = tippyRef.current._tippy;
-    setTimeout(() => {
-      console.log("tippy close");
-      hideAll();
-    }, 800);
+    hideAll();
   };
   const channel = channels.byId[cid] ?? null;
   const uids = channel
@@ -165,6 +166,8 @@ export default function ManageMembers({ cid = null }) {
               <div className="right">
                 <span className="role">{is_admin ? "Admin" : "User"}</span>
                 <Tippy
+                  duration={0}
+                  delay={[0, 0]}
                   interactive
                   placement="right-start"
                   trigger="click"
@@ -175,7 +178,7 @@ export default function ManageMembers({ cid = null }) {
                           className="item"
                           onClick={handleCopy.bind(null, email)}
                         >
-                          {copied ? "Copied" : `Copy Email`}
+                          Copy Email
                         </li>
                       )}
                       {/* <li className="item underline">Mute</li> */}

src/common/component/styled/Button.js

@@ -19,7 +19,7 @@ const StyledButton = styled.button`
     background-color: #22ccee;
   }
   &:disabled {
-    background-color: #a5f0fc;
+    background-color: #d0d5dd;
   }
   &.small {
     padding: 8px 14px;
@@ -30,6 +30,9 @@ const StyledButton = styled.button`
     border: none;
     background-color: #ef4444;
     color: #fff;
+    &:disabled {
+      background-color: #fecdca;
+    }
   }
   &.ghost {
     border: 1px solid #1fe1f9;

src/routes/settingChannel/DeleteConfirmModal.js

@@ -29,7 +29,12 @@ export default function DeleteConfirmModal({ id, closeModal }) {
         description="Are you sure want to delete this channel?"
         buttons={
           <>
-            <Button onClick={closeModal.bind(null, undefined)}>Cancel</Button>
+            <Button
+              onClick={closeModal.bind(null, undefined)}
+              className="cancel"
+            >
+              Cancel
+            </Button>
             <Button onClick={handleDelete} className="danger">
               {isLoading ? "Deleting" : `Delete`}
             </Button>