ListItem: less-aggressive mute treatment

tloncorp · Oct 4, 2024 · a7deed4 · a7deed4
1 parent 037a8fa
commit a7deed4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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: {