feat: update unread count UX

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}>
-          <ChannelIcon personal={!is_public} />
+        <div className={`name`} title={name}>
+          <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 {
-    visibility: visible;
+  &.muted {
+    .name .txt {
+      color: #d0d5dd;
+    }
+    .icons .badge {
+      background: #bfbfbf;
+    }
+  }
+  &:hover > .icons > {
+    .badge {
+      display: none;
+    }
+    .setting {
+      visibility: visible;
+    }
   }
 `;
 export default Styled;