fix: feedback by Dingyi

src/common/component/ChannelModal/styled.js

@@ -2,7 +2,6 @@ import styled from "styled-components";
 
 const StyledWrapper = styled.div`
   display: flex;
-  /* max-width: 604px; */
   max-height: 402px;
   background: #fff;
   box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
@@ -10,9 +9,7 @@ const StyledWrapper = styled.div`
   transition: all 0.5s ease;
   .left {
     width: 260px;
-    /* height: 100%; */
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
-    overflow-y: scroll;
     .search {
       position: sticky;
       top: 0;
@@ -34,15 +31,13 @@ const StyledWrapper = styled.div`
     .users {
       display: flex;
       flex-direction: column;
-      /* height: 260px; */
-      padding-bottom: 20px;
-      /* overflow-y: scroll; */
+      height: calc(100% - 52px - 10px);
+      overflow-y: scroll;
       .user {
         cursor: pointer;
         display: flex;
         align-items: center;
         padding: 0 16px;
-        /* margin: 0 4px; */
         width: -webkit-fill-available;
         border-radius: 4px;
         &:hover {
@@ -64,7 +59,6 @@ const StyledWrapper = styled.div`
       width: 344px;
       .desc {
         text-align: center;
-        /* padding: 0 20px; */
       }
     }
     > .title {

src/common/component/InviteLink.js

@@ -54,8 +54,13 @@ export default function InviteLink() {
         Share this link to invite people to this server.
       </span>
       <div className="link">
-        <Input readOnly placeholder="Generating" value={link} />
-        <Button onClick={copyLink} className="small">
+        <Input
+          readOnly
+          className={"large"}
+          placeholder="Generating"
+          value={link}
+        />
+        <Button onClick={copyLink} className="ghost small border_less">
           {linkCopied ? "Copied" : `Copy`}
         </Button>
       </div>

src/common/component/ManageMembers.js

@@ -22,8 +22,6 @@ const StyledWrapper = styled.section`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: calc(100vh - 94px);
-  overflow-y: scroll;
   .intro {
     display: flex;
     flex-direction: column;

src/common/component/styled/Button.js

@@ -47,6 +47,10 @@ const StyledButton = styled.button`
     background: none;
     color: #1fe1f9;
   }
+  &.border_less {
+    box-shadow: none;
+    border: none;
+  }
   &.cancel {
     border: 1px solid #e5e7eb;
     background: none;

src/common/component/styled/Input.js

@@ -43,9 +43,9 @@ const StyledInput = styled.input`
   }
   &.large {
     font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    padding: 10px 14px;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 11px 8px;
   }
   &.none {
     outline: none;

src/routes/home/index.js

@@ -1,6 +1,6 @@
 // import React from 'react';
 // import { useEffect } from "react";
-import { Outlet, NavLink, useLocation } from "react-router-dom";
+import { Outlet, NavLink, useLocation, useMatch } from "react-router-dom";
 import { useSelector } from "react-redux";
 import StyledWrapper from "./styled";
 import User from "./User";
@@ -20,6 +20,8 @@ import FolderIcon from "../../assets/icons/folder.svg";
 // const routes = ["/setting", "/setting/channel/:cid"];
 export default function HomePage() {
   usePWABadge();
+  const isHomePath = useMatch(`/`);
+  const isChatHomePath = useMatch(`/chat`);
   const { pathname } = useLocation();
   const {
     loginUid,
@@ -47,7 +49,8 @@ export default function HomePage() {
       </>
     );
   }
-  const chatNav = chatPath || "/chat";
+  // 有点绕
+  const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat";
   const contactNav = contactPath || "/contacts";
 
   return (
@@ -58,7 +61,10 @@ export default function HomePage() {
         <div className={`col left`}>
           <User uid={loginUid} />
           <nav className="link_navs">
-            <NavLink className="link" to={chatNav}>
+            <NavLink
+              className={`link ${isHomePath ? "active" : ""}`}
+              to={chatNav}
+            >
               <Tooltip tip="Chat">
                 <ChatIcon />
               </Tooltip>

src/routes/setting/config/Tooltip.js

@@ -19,6 +19,7 @@ import IconQuestion from "../../../assets/icons/question.svg";
 export default function Tooltip({ link = "#" }) {
   return (
     <Tippy
+      delay={[0, 500]}
       interactive
       arrow={roundArrow}
       placement="bottom"