From a7deed4ff97bf67d33c20010d749d0ce9be36a40 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Fri, 4 Oct 2024 16:39:47 -0400
Subject: [PATCH] ListItem: less-aggressive mute treatment

---
 .../components/ListItem/ChannelListItem.tsx   | 18 ++------------
 .../src/components/ListItem/GroupListItem.tsx | 15 ++----------
 .../ui/src/components/ListItem/ListItem.tsx   | 24 +++++++++----------
 3 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/packages/ui/src/components/ListItem/ChannelListItem.tsx b/packages/ui/src/components/ListItem/ChannelListItem.tsx
index fdf1eb9b65..7365ac7d7c 100644
--- a/packages/ui/src/components/ListItem/ChannelListItem.tsx
+++ b/packages/ui/src/components/ListItem/ChannelListItem.tsx
@@ -53,23 +53,9 @@ export function ChannelListItem({
 
   return (
     <ListItem {...props} onPress={handlePress} onLongPress={handleLongPress}>
-      <ListItem.ChannelIcon
-        model={model}
-        useTypeIcon={useTypeIcon}
-        opacity={
-          logic.isMuted(model.volumeSettings?.level, 'channel') ? 0.2 : 1
-        }
-      />
+      <ListItem.ChannelIcon model={model} useTypeIcon={useTypeIcon} />
       <ListItem.MainContent>
-        <ListItem.Title
-          color={
-            logic.isMuted(model.volumeSettings?.level, 'channel')
-              ? '$tertiaryText'
-              : undefined
-          }
-        >
-          {title}
-        </ListItem.Title>
+        <ListItem.Title>{title}</ListItem.Title>
         {customSubtitle ? (
           <ListItem.Subtitle>{customSubtitle}</ListItem.Subtitle>
         ) : (
diff --git a/packages/ui/src/components/ListItem/GroupListItem.tsx b/packages/ui/src/components/ListItem/GroupListItem.tsx
index ae42a5825d..fa7a379000 100644
--- a/packages/ui/src/components/ListItem/GroupListItem.tsx
+++ b/packages/ui/src/components/ListItem/GroupListItem.tsx
@@ -28,20 +28,9 @@ export const GroupListItem = ({
       onPress={useBoundHandler(model, onPress)}
       onLongPress={useBoundHandler(model, onLongPress)}
     >
-      <ListItem.GroupIcon
-        model={model}
-        opacity={logic.isMuted(model.volumeSettings?.level, 'group') ? 0.2 : 1}
-      />
+      <ListItem.GroupIcon model={model} />
       <ListItem.MainContent>
-        <ListItem.Title
-          color={
-            logic.isMuted(model.volumeSettings?.level, 'group')
-              ? '$tertiaryText'
-              : undefined
-          }
-        >
-          {title}
-        </ListItem.Title>
+        <ListItem.Title>{title}</ListItem.Title>
         {customSubtitle && (
           <ListItem.Subtitle>{customSubtitle}</ListItem.Subtitle>
         )}
diff --git a/packages/ui/src/components/ListItem/ListItem.tsx b/packages/ui/src/components/ListItem/ListItem.tsx
index b8e5009c30..df282fc4d6 100644
--- a/packages/ui/src/components/ListItem/ListItem.tsx
+++ b/packages/ui/src/components/ListItem/ListItem.tsx
@@ -175,28 +175,26 @@ const ListItemCount = ({
   return (
     <Stack
       paddingHorizontal={'$m'}
-      backgroundColor={
-        count < 1 ? undefined : muted ? undefined : '$secondaryBackground'
-      }
+      backgroundColor={count < 1 ? undefined : '$secondaryBackground'}
       borderRadius="$l"
       {...rest}
     >
-      {muted ? (
-        <Icon type="Muted" customSize={[18, 18]} color="$tertiaryText" />
-      ) : (
-        <ListItemCountNumber hidden={!!(muted || count < 1)}>
+      <ListItemCountNumber hidden={count < 1}>
+        {muted && (
+          <Icon type="Muted" customSize={[12, 12]} color="$secondaryText" />
+        )}
+        <SizableText size="$s" color="$secondaryText">
           {numberWithMax(count, 99)}
-        </ListItemCountNumber>
-      )}
+        </SizableText>
+      </ListItemCountNumber>
     </Stack>
   );
 };
 
-const ListItemCountNumber = styled(SizableText, {
+const ListItemCountNumber = styled(XStack, {
   name: 'ListItemCountNumber',
-  size: '$s',
-  color: '$secondaryText',
-  textAlign: 'center',
+  gap: '$s',
+  alignItems: 'center',
   variants: {
     hidden: {
       true: {