feat: update unread count UX

src/common/component/ChannelIcon.js

@@ -1,12 +1,17 @@
 // import React from 'react';
-import hashIcon from "../../assets/icons/channel.svg?url";
+import HashIcon from "../../assets/icons/channel.svg";
-import lockHashIcon from "../../assets/icons/channel.private.svg?url";
+import LockHashIcon from "../../assets/icons/channel.private.svg";
-export default function ChannelIcon({ personal = false, ...rest }) {
+import styled from "styled-components";
+const Styled = styled.div`
+  display: flex;
+  &.muted path {
+    fill: #d0d5dd;
+  }
+`;
+export default function ChannelIcon({ personal = false, muted = false }) {
   return (
-    <img
+    <Styled className={muted ? "muted" : ""}>
-      src={personal ? lockHashIcon : hashIcon}
+      {personal ? <LockHashIcon /> : <HashIcon />}
-      alt="channel icon"
+    </Styled>
-      {...rest}
-    />
   );
 }

src/routes/chat/ChannelList/NavItem.js

@@ -127,11 +127,13 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
         onContextMenu={handleContextMenuEvent}
         ref={drop}
         key={id}
-        className={`link ${isActive ? "drop_over" : ""}`}
+        className={`link ${isActive ? "drop_over" : ""} ${
+          muted ? "muted" : ""
+        }`}
         to={`/chat/channel/${id}`}
       >
-        <div className="name" title={name}>
+        <div className={`name`} title={name}>
-          <ChannelIcon personal={!is_public} />
+          <ChannelIcon personal={!is_public} muted={muted} />
           <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
         </div>
         <div className="icons">

src/routes/chat/ChannelList/styled.js

@@ -50,7 +50,7 @@ const Styled = styled(NavLink)`
       height: 20px;
       min-width: 20px;
       border-radius: 50%;
-      background: #bfbfbf;
+      background: #22ccee;
       font-weight: 900;
       font-size: 10px;
       line-height: 10px;
@@ -62,8 +62,21 @@ const Styled = styled(NavLink)`
       }
     }
   }
-  &:hover > .icons > .setting {
+  &.muted {
-    visibility: visible;
+    .name .txt {
+      color: #d0d5dd;
+    }
+    .icons .badge {
+      background: #bfbfbf;
+    }
+  }
+  &:hover > .icons > {
+    .badge {
+      display: none;
+    }
+    .setting {
+      visibility: visible;
+    }
   }
 `;
 export default Styled;