chore: update UIs

src/routes/chat/ChannelList/NavItem.js

@@ -8,6 +8,8 @@ import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
 import InviteModal from "../../../common/component/ChannelInviteModal";
 import Tooltip from "../../../common/component/Tooltip";
+import IconSetting from "../../../assets/icons/setting.svg";
+import IconInvite from "../../../assets/icons/invite.from.channel.svg";
 // import { useDebounce} from "rooks";
 import { useReadMessageMutation } from "../../../app/services/message";
 import { useUpdateMuteSettingMutation } from "../../../app/services/contact";
@@ -161,19 +163,19 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
           <div className="icons">
             {inviteIconVisible && (
               <Tooltip placement="bottom" tip="Add Member">
-                <i
+                <IconInvite
                   className="icon invite"
                   data-id={id}
                   onClick={toggleInviteModalVisible}
-                ></i>
+                ></IconInvite>
               </Tooltip>
             )}
             <Tooltip placement="bottom" tip="Channel Setting">
-              <i
+              <IconSetting
                 className="icon setting"
                 data-id={id}
                 onClick={handleChannelSetting}
-              ></i>
+              ></IconSetting>
             </Tooltip>
             {unreads > 0 && (
               <i className={`badge ${isMentions ? "mention" : ""}`}>

src/routes/chat/ChannelList/styled.js

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
-import settingIcon from "../../../assets/icons/setting.svg?url";
-import inviteIcon from "../../../assets/icons/invite.from.channel.svg?url";
+
 const Styled = styled(NavLink)`
   position: relative;
   display: flex;
@@ -40,13 +39,8 @@ const Styled = styled(NavLink)`
       display: flex;
       width: 16px;
       height: 16px;
-      background-size: contain;
-
-      &.setting {
-        background-image: url(${settingIcon});
-      }
-      &.invite {
-        background-image: url(${inviteIcon});
+      &:hover path {
+        fill: #667085;
       }
     }
     > .badge {