[Gekidou] Updated styling opacities (#6240)

* Updated styling opacities

* Test fixes

* Observable pipe fix

app/components/channel_item/channel_item.tsx

@@ -65,7 +65,7 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         paddingRight: 20,
     },
     muted: {
-        color: changeOpacity(theme.sidebarText, 0.4),
+        color: changeOpacity(theme.sidebarText, 0.32),
     },
     badge: {
         borderColor: theme.sidebarBg,
@@ -80,7 +80,7 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         borderColor: theme.centerChannelBg,
     },
     mutedBadge: {
-        opacity: 0.4,
+        opacity: 0.32,
     },
     activeItem: {
         backgroundColor: changeOpacity(theme.sidebarTextActiveColor, 0.1),
@@ -122,7 +122,7 @@ const ChannelListItem = ({
     const styles = getStyleSheet(theme);
 
     // Make it brighter if it's not muted, and highlighted or has unreads
-    const isBright = !isMuted && (myChannel && (myChannel.isUnread || myChannel.mentionsCount > 0));
+    const isBright = myChannel && (myChannel.isUnread || myChannel.mentionsCount > 0);
 
     const height = useMemo(() => {
         let h = 40;

app/components/channel_item/index.ts

@@ -21,11 +21,12 @@ import type {WithDatabaseArgs} from '@typings/database/database';
 type EnhanceProps = WithDatabaseArgs & {
     channel: ChannelModel;
     showTeamName?: boolean;
+    isCategoryMuted?: boolean;
 }
 
 const observeIsMutedSetting = (mc: MyChannelModel) => mc.settings.observe().pipe(switchMap((s) => of$(s?.notifyProps?.mark_unread === 'mention')));
 
-const enhance = withObservables(['channel', 'showTeamName'], ({channel, database, showTeamName}: EnhanceProps) => {
+const enhance = withObservables(['channel', 'showTeamName', 'isCategoryMuted'], ({channel, database, showTeamName, isCategoryMuted}: EnhanceProps) => {
     const currentUserId = observeCurrentUserId(database);
     const myChannel = observeMyChannel(database, channel.id);
 
@@ -42,6 +43,7 @@ const enhance = withObservables(['channel', 'showTeamName'], ({channel, database
             }
             return observeIsMutedSetting(mc);
         }),
+        switchMap((muted) => of$(isCategoryMuted || muted)),
     );
 
     let teamDisplayName = of$('');

app/screens/home/channel_list/categories_list/categories/body/category_body.tsx

@@ -42,6 +42,7 @@ const CategoryBody = ({sortedChannels, category, hiddenChannelIds, limit, onChan
                 channel={item}
                 testID={`category.${category.displayName.replace(/ /g, '_').toLocaleLowerCase()}.channel_list_item`}
                 onPress={onChannelSwitch}
+                isCategoryMuted={category.muted}
             />
         );
     }, [onChannelSwitch]);

app/screens/home/channel_list/categories_list/categories/header/__snapshots__/header.test.tsx.snap

@@ -21,14 +21,17 @@ exports[`components/channel_list/categories/header should match snapshot 1`] = `
 >
   <View
     style={
-      Object {
-        "alignItems": "flex-start",
-        "flexDirection": "row",
-        "marginLeft": 16,
-        "marginTop": 12,
-        "paddingLeft": 2,
-        "paddingVertical": 8,
-      }
+      Array [
+        Object {
+          "alignItems": "flex-start",
+          "flexDirection": "row",
+          "marginLeft": 16,
+          "marginTop": 12,
+          "paddingLeft": 2,
+          "paddingVertical": 8,
+        },
+        null,
+      ]
     }
   >
     <Icon

app/screens/home/channel_list/categories_list/categories/header/header.tsx

@@ -34,6 +34,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         width: 20,
         height: 20,
     },
+    muted: {
+        opacity: 0.32,
+    },
 }));
 
 type Props = {
@@ -79,7 +82,7 @@ const CategoryHeader = ({category, hasChannels}: Props) => {
             onPress={toggleCollapse}
             testID={`category_header.${category.type}.collapsed.${category.collapsed}`}
         >
-            <View style={styles.container}>
+            <View style={[styles.container, category.muted ? styles.muted : null]}>
                 <AnimatedCompassIcon
                     name={'chevron-down'}
                     style={[styles.chevron, animatedStyle]}

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "mattermost-mobile",
       "version": "2.0.0",
       "hasInstallScript": true,
       "license": "Apache 2.0",