From 53e98b5298e678d30e2f1111d6f5b39bc8b617e8 Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Tue, 12 Apr 2022 16:04:55 +0800
Subject: [PATCH] feat: update unread count UX

---
 src/common/component/ChannelIcon.js    | 21 +++++++++++++--------
 src/routes/chat/ChannelList/NavItem.js |  8 +++++---
 src/routes/chat/ChannelList/styled.js  | 19 ++++++++++++++++---
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/common/component/ChannelIcon.js b/src/common/component/ChannelIcon.js
index 1a337635..7fe4c222 100644
--- a/src/common/component/ChannelIcon.js
+++ b/src/common/component/ChannelIcon.js
@@ -1,12 +1,17 @@
 // import React from 'react';
-import hashIcon from "../../assets/icons/channel.svg?url";
-import lockHashIcon from "../../assets/icons/channel.private.svg?url";
-export default function ChannelIcon({ personal = false, ...rest }) {
+import HashIcon from "../../assets/icons/channel.svg";
+import LockHashIcon from "../../assets/icons/channel.private.svg";
+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
-      src={personal ? lockHashIcon : hashIcon}
-      alt="channel icon"
-      {...rest}
-    />
+    <Styled className={muted ? "muted" : ""}>
+      {personal ? <LockHashIcon /> : <HashIcon />}
+    </Styled>
   );
 }
diff --git a/src/routes/chat/ChannelList/NavItem.js b/src/routes/chat/ChannelList/NavItem.js
index 3a53dd12..1012aa93 100644
--- a/src/routes/chat/ChannelList/NavItem.js
+++ b/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">
diff --git a/src/routes/chat/ChannelList/styled.js b/src/routes/chat/ChannelList/styled.js
index 53ba0f3a..d4e86839 100644
--- a/src/routes/chat/ChannelList/styled.js
+++ b/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;