[Gekidou] find channels (default state) (#6191)

* Find channels unfiltered state

* ux feedback review

* Update snapshots after ux review

* Fix channel item textStyles

* Center Channel item content

* feedback review

app/components/channel_icon/dm_avatar/dm_avatar.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {View} from 'react-native';
 
 import ProfilePicture from '@components/profile_picture';
 import {useTheme} from '@context/theme';
@@ -11,26 +12,33 @@ import type UserModel from '@typings/database/models/servers/user';
 
 type Props = {
     author?: UserModel;
+    isInfo?: boolean;
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+    container: {marginLeft: 4},
     status: {
         backgroundColor: theme.sidebarBg,
         borderWidth: 0,
     },
+    statusInfo: {
+        backgroundColor: theme.centerChannelBg,
+    },
 }));
 
-const DmAvatar = ({author}: Props) => {
+const DmAvatar = ({author, isInfo}: Props) => {
     const theme = useTheme();
     const style = getStyleSheet(theme);
     return (
-        <ProfilePicture
-            author={author}
-            size={24}
-            showStatus={true}
-            statusSize={12}
-            statusStyle={style.status}
-        />
+        <View style={style.container}>
+            <ProfilePicture
+                author={author}
+                size={24}
+                showStatus={true}
+                statusSize={12}
+                statusStyle={[style.status, isInfo && style.statusInfo]}
+            />
+        </View>
     );
 };