chore: update UIs

public/index.html

@@ -58,7 +58,7 @@
   * {
     overflow: visible;
     border: none;
-    /* outline: none; */
+    outline: none;
     padding: 0;
     margin: 0;
     box-sizing: border-box;

src/routes/chat/ChannelChat/index.js

@@ -11,10 +11,10 @@ import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
 import EditIcon from "../../../assets/icons/edit.svg";
 // import alertIcon from "../../../assets/icons/alert.svg?url";
-import peopleIcon from "../../../assets/icons/people.svg?url";
-import pinIcon from "../../../assets/icons/pin.svg?url";
+import IconPeople from "../../../assets/icons/people.svg";
+import IconPin from "../../../assets/icons/pin.svg";
 // import searchIcon from "../../../assets/icons/search.svg?url";
-import headphoneIcon from "../../../assets/icons/headphone.svg?url";
+import IconHeadphone from "../../../assets/icons/headphone.svg";
 import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
 import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
 import addIcon from "../../../assets/icons/add.svg?url";
@@ -94,7 +94,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
               </li> */}
               <li className="tool">
                 <Tooltip tip="Voice/Video Chat" placement="left">
-                  <img src={headphoneIcon} alt="opt icon" />
+                  <IconHeadphone />
                 </Tooltip>
               </li>
               {/* <li className="tool">
@@ -124,16 +124,21 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   content={<PinList id={cid} />}
                 >
                   <li
-                    className={`tool ${pinCount > 0 ? "badge" : ""}`}
+                    className={`tool ${pinCount > 0 ? "badge" : ""} ${
+                      toolVisible == "pin" ? "active" : ""
+                    } `}
                     data-count={pinCount}
                   >
-                    <img src={pinIcon} alt="opt icon" />
+                    <IconPin />
                   </li>
                 </Tippy>
               </Tooltip>
-              <li className="tool" onClick={toggleMembersVisible}>
+              <li
+                className={`tool ${membersVisible ? "active" : ""}`}
+                onClick={toggleMembersVisible}
+              >
                 <Tooltip tip="Channel Members" placement="left">
-                  <img src={peopleIcon} alt="opt icon" />
+                  <IconPeople />
                 </Tooltip>
               </li>
             </ul>

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 {

src/routes/chat/Layout/styled.js

@@ -6,7 +6,7 @@ const Styled = styled.article`
   border-top-right-radius: 16px;
   border-bottom-right-radius: 16px;
   > .head {
-    box-sizing: content-box;
+    box-sizing: border-box;
     height: 56px;
     padding: 0 20px;
     /* box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); */
@@ -67,6 +67,12 @@ const Styled = styled.article`
         .tool {
           position: relative;
           cursor: pointer;
+          &.active svg path {
+            fill: #3f3f46;
+          }
+          &:not(.active):hover svg path {
+            fill: #51525c;
+          }
           &.badge:after {
             position: absolute;
             top: -8px;

src/routes/home/Menu.js

@@ -35,12 +35,12 @@ export default function Menu() {
   const { pathname } = useLocation();
   return (
     <StyledMenus>
-      <li className="menu">
-        <Tooltip placement="right" tip="Settings">
-          <NavLink to={`/setting?f=${pathname}`}>
+      <li className="menu link_navs">
+        <NavLink className="link" to={`/setting?f=${pathname}`}>
+          <Tooltip placement="right" tip="Settings">
             <img src={settingIcon} alt="setting icon" className="icon" />
-          </NavLink>
-        </Tooltip>
+          </Tooltip>
+        </NavLink>
         {/* {expand && (
           <span className="txt animate__animated animate__fadeIn">
             Settings

src/routes/home/index.js

@@ -46,7 +46,7 @@ export default function HomePage() {
       <StyledWrapper>
         <div className={`col left`}>
           <User uid={loginUid} />
-          <nav className="nav">
+          <nav className="link_navs">
             <NavLink className="link" to={"/chat"}>
               <Tooltip tip="Chat">
                 <img src={ChatIcon} alt="chat icon" />

src/routes/home/styled.js

@@ -3,7 +3,7 @@ const StyledWrapper = styled.div`
   display: flex;
   width: 100vw;
   height: 100vh;
-  background-color: #f5f6f7;
+  background-color: var(--rustchat-navs-bg);
   > .col {
     height: 100%;
     display: flex;
@@ -28,7 +28,7 @@ const StyledWrapper = styled.div`
     &.right {
       width: 100%;
     }
-    > .nav {
+    .link_navs {
       display: flex;
       flex-direction: column;
       gap: 4px;