@messenger-box/slack-ui-mobile 6.5.1-alpha.0 → 7.2.1-alpha.0

package/lib/components/CustomDrawer/CustomDrawer.js

@@ -1,101 +1,219 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import React from 'react';
+import { Ionicons, MaterialIcons, AntDesign } from '@expo/vector-icons';
 import { TouchableHighlight } from 'react-native';
-import { VStack, HStack, IconButton, Text, Heading, Box, StatusBar, Avatar, Divider, } from 'native-base';
+import { SafeAreaView, VStack, HStack, Button, ButtonText, Text, Heading, Box, Avatar, Divider, FlatList, useLocationChange, } from '@admin-layout/gluestack-ui-mobile';
 import { useSelector } from 'react-redux';
-import { navigationRef } from '@common-stack/client-react';
-import { useNavigation } from '@react-navigation/native';
+import { NavigationRoutes } from '../../constants/routes';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { useDrawerLayout } from '../../hooks/useDrawerLayout';
-import { useLocationChange } from '@admin-layout/mobile-layout';
+import { useGetUserOrganizationsQuery, useGetOrganizationDetailQuery, } from '@messenger-box/platform-client';
 import { userSelector } from '@adminide-stack/user-auth0-client';
-const CustomDrawer = (props) => {
-    var _a, _b, _c, _d, _e;
+const CustomDrawerComponent = (props) => {
     const navigation = useNavigation();
     const user = useSelector(userSelector);
-    const currentRoute = (navigationRef === null || navigationRef === void 0 ? void 0 : navigationRef.isReady()) ? navigationRef === null || navigationRef === void 0 ? void 0 : navigationRef.getCurrentRoute() : null;
-    let currentOptions = (navigationRef === null || navigationRef === void 0 ? void 0 : navigationRef.isReady()) ? navigationRef === null || navigationRef === void 0 ? void 0 : navigationRef.getCurrentOptions() : null;
-    const { setOpen, appConfiguredRoutes } = useDrawerLayout();
+    const settings = useSelector((state) => state.settings);
+    const { open, setOpen, appConfiguredRoutes, orgName, setOrganizationDetail, organizationDetail } = useDrawerLayout();
     const { setLocationChange } = useLocationChange();
-    const goToOrganization = (orgName, navigationrOrg) => __awaiter(void 0, void 0, void 0, function* () {
-        setOpen(false);
-        setLocationChange({ configurableRoutes: appConfiguredRoutes, orgName: orgName });
-        navigation.setOptions({ orgName });
-        navigation.reset({
-            index: 0,
-            routes: [
-                {
-                    name: 'MainStack.Layout.Home',
-                    params: { orgName: orgName },
-                },
-            ],
-        });
-        // getOrganizationDetail({
-        //     variables: {
-        //         where: { name: orgName },
-        //     },
-        // })?.then((res: any) => {
-        //     setLocationChange({ configurableRoutes: appConfiguredRoutes, orgName: orgName });
-        //     navigation.reset({
-        //         index: 0,
-        //         routes: [
-        //             {
-        //                 name: 'MainStack.Layout.Home',
-        //                 params: { orgName: orgName, orgTitle: res?.data?.getOrganizationDetail?.title },
-        //             },
-        //         ],
-        //     });
-        // });
+    const { data: orgDetailData, refetch: _refetchOrgDetail } = useGetOrganizationDetailQuery({
+        variables: {
+            where: {
+                name: orgName,
+            },
+        },
+    });
+    const { data: userOrganizationsData, loading: isLoadingUsersOrganization, refetch: refetchUserOrganizations, } = useGetUserOrganizationsQuery({
+        //     //@ts-ignor
+        variables: { userId: user === null || user === void 0 ? void 0 : user.id },
+        //fetchPolicy: 'cache-and-network',
     });
-    const CreateOrganization = () => {
+    useFocusEffect(React.useCallback(() => {
+        refetchUserOrganizations({
+            userId: user === null || user === void 0 ? void 0 : user.id,
+        });
+        if (orgName)
+            _refetchOrgDetail({ where: { name: orgName } });
+    }, [orgName, open]));
+    React.useEffect(() => {
+        if (orgDetailData === null || orgDetailData === void 0 ? void 0 : orgDetailData.getOrganizationDetail)
+            setOrganizationDetail(orgDetailData === null || orgDetailData === void 0 ? void 0 : orgDetailData.getOrganizationDetail);
+    }, [orgDetailData === null || orgDetailData === void 0 ? void 0 : orgDetailData.getOrganizationDetail]);
+    // const goToOrganization = React.useCallback((orgName: any) => {
+    //     setOpen(false);
+    //     setLocationChange({ configurableRoutes: appConfiguredRoutes, orgName: orgName });
+    //     navigation.reset({
+    //         index: 0,
+    //         routes: [
+    //             {
+    //                 name: 'MainStack.Layout.Home',
+    //                 params: { orgName: orgName },
+    //             },
+    //         ],
+    //     });
+    // }, []);
+    const goToOrganization = React.useCallback((orgName) => {
+        setOpen(false);
+        navigation.navigate(NavigationRoutes.Home, { orgName });
+    }, []);
+    const addWorkSpace = React.useCallback(() => {
         setOpen(false);
-        navigation === null || navigation === void 0 ? void 0 : navigation.navigate('MainStack.CreateOrganization');
+        navigation === null || navigation === void 0 ? void 0 : navigation.navigate(NavigationRoutes.AddWorkSpace, { orgName });
+    }, [orgName]);
+    const renderWorkspaces = ({ item: o, index: i }) => {
+        var _a, _b, _c;
+        const title = (_a = o === null || o === void 0 ? void 0 : o.title) !== null && _a !== void 0 ? _a : o.name;
+        const matches = (_b = title === null || title === void 0 ? void 0 : title.match(/\b(\w)/g)) !== null && _b !== void 0 ? _b : '';
+        //const acronym: any = matches?.join('')?.substring(0, 2)?.toUpperCase() ?? ''; // JSON
+        const acronym = Array.isArray(matches) ? (_c = matches === null || matches === void 0 ? void 0 : matches.join('')) === null || _c === void 0 ? void 0 : _c.substring(0, 2) : ''; // JSON
+        return (<TouchableHighlight underlayColor={'transparent'} activeOpacity={0.5} key={i} onPress={() => goToOrganization(o.name)}>
+                <HStack px={'$2'} justifyContent="space-between" alignItems="center" w="100%" py={'$2'}>
+                    <HStack space={'sm'} alignItems="center">
+                        <Button 
+        // mx={'$2'}
+        px={'$0'} py={'$0'} size={'md'} bg={'transparent'}>
+                            <Avatar bg={'$trueGray300'} size={'md'} 
+        // borderRadius={o.name == orgName ? '$none' : '$lg'}
+        borderRadius={'$lg'} borderWidth={o.name == orgName ? '$2' : '$1'} borderColor={o.name == orgName ? '#000' : '#d3d3d3'} p={'$0'}>
+                                <Text fontWeight={'$extrabold'} color="$black" style={{ fontSize: 18 }}>
+                                    {acronym}
+                                </Text>
+                            </Avatar>
+
+                            {/* <ButtonText size="md" fontWeight={'$extrabold'} color="$black" style={{ fontSize: 18 }}>
+                {startCase(acronym)}
+            </ButtonText> */}
+                        </Button>
+                        <Text color="$black" style={{ fontSize: 16 }} w={'60%'} fontWeight={'$bold'}>
+                            {title}
+                        </Text>
+                    </HStack>
+                    <Button bg={'transparent'} size={'lg'} pr={'$1'}>
+                        <MaterialIcons size={30} name="more-vert" color={'#000'}/>
+                    </Button>
+                </HStack>
+            </TouchableHighlight>);
     };
     return (<Box flex={1} w={'100%'}>
-            <StatusBar barStyle="light-content"/>
-            <Box flex={1} safeArea>
-                {(props === null || props === void 0 ? void 0 : props.title) || (props === null || props === void 0 ? void 0 : props.headingTitle) ? (<Heading p={5} size={'lg'} color={((_a = props === null || props === void 0 ? void 0 : props.settings) === null || _a === void 0 ? void 0 : _a.navTheme) == 'dark' ? 'white' : props.titleColor}>
-                        {(_c = (_b = props === null || props === void 0 ? void 0 : props.headingTitle) !== null && _b !== void 0 ? _b : props === null || props === void 0 ? void 0 : props.title) !== null && _c !== void 0 ? _c : (_d = props === null || props === void 0 ? void 0 : props.settings) === null || _d === void 0 ? void 0 : _d.title}
-                    </Heading>) : null}
-                <VStack space={4}>
-                    {(props === null || props === void 0 ? void 0 : props.userOrganizations) &&
-            ((_e = props === null || props === void 0 ? void 0 : props.userOrganizations) === null || _e === void 0 ? void 0 : _e.map((o, i) => {
-                var _a;
-                const matches = o.title.match(/\b(\w)/g);
-                const acronym = matches.join('').substring(0, 2); // JSON
-                return (<TouchableHighlight underlayColor={'transparent'} activeOpacity={0.5} key={i} onPress={() => goToOrganization(o.name, props.navigation)}>
-                                    <HStack px="1" justifyContent="space-between" alignItems="center" w="100%">
-                                        <HStack alignItems="center">
-                                            <IconButton mx={2} px={2} py={2} size={12} bg={'transparent'} borderRadius={'lg'} borderWidth={o.name == (currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.orgKey) ? 1 : 1} borderColor={o.name == (currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.orgKey) ? '#000' : '#d3d3d3'} icon={<Avatar bg={'gray.300'} size={o.name == (currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.orgKey) ? 10 : 12} borderRadius={o.name == (currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.orgKey) ? 0 : 'lg'} p={2} _image={{ borderRadius: 0 }} _text={{ color: '#000', fontWeight: 800, fontSize: 18 }}>
-                                                        {acronym}
-                                                    </Avatar>}/>
-                                            <Text color="black" fontSize="18" fontWeight={'bold'}>
-                                                {(_a = o === null || o === void 0 ? void 0 : o.title) !== null && _a !== void 0 ? _a : o.name}
-                                            </Text>
-                                        </HStack>
-                                    </HStack>
-                                </TouchableHighlight>);
-            }))}
+            {/* <StatusBar style={'dark'} /> */}
+            <Box flex={1}>
+                <Heading p={'$5'} size={'lg'} color={props.titleColor || (settings === null || settings === void 0 ? void 0 : settings.navTheme) == 'dark' ? 'white' : 'black'}>
+                    Workspaces
+                </Heading>
+                <VStack flex={0.8} space={'sm'}>
+                    <FlatList flex={1} keyExtractor={(item, index) => String(index)} contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: 80,
+        }} data={(userOrganizationsData === null || userOrganizationsData === void 0 ? void 0 : userOrganizationsData.getUserOrganizations) &&
+            (userOrganizationsData === null || userOrganizationsData === void 0 ? void 0 : userOrganizationsData.getUserOrganizations.length) > 0
+            ? userOrganizationsData === null || userOrganizationsData === void 0 ? void 0 : userOrganizationsData.getUserOrganizations
+            : []} renderItem={renderWorkspaces} ListEmptyComponent={() => {
+            return (<Box bg={'#fff'} py={'$2'}>
+                                    <VStack space="sm">
+                                        <Box px="$4" py={'$5'}>
+                                            <Text>No Memebers found</Text>
+                                        </Box>
+                                    </VStack>
+                                </Box>);
+        }} key={'workspaces-list'}/>
+                    {/* {userOrganizationsData?.getUserOrganizations &&
+            userOrganizationsData?.getUserOrganizations?.length > 0 &&
+            userOrganizationsData?.getUserOrganizations?.map((o: any, i: any) => {
+                const matches: any = o?.title?.match(/\b(\w)/g) ?? '';
+                const acronym: any = matches?.join('')?.substring(0, 2)?.toUpperCase() ?? ''; // JSON
+                return (
+                    <TouchableHighlight
+                        underlayColor={'transparent'}
+                        activeOpacity={0.5}
+                        key={i}
+                        onPress={() => goToOrganization(o.name)}
+                    >
+                        <HStack px="1" justifyContent="space-between" alignItems="center" w="100%">
+                            <HStack alignItems="center">
+                                <IconButton
+                                    mx={2}
+                                    px={2}
+                                    py={2}
+                                    size={12}
+                                    bg={'transparent'}
+                                    borderRadius={'lg'}
+                                    borderWidth={o.name == orgName ? 2 : 1}
+                                    borderColor={o.name == orgName ? '#000' : '#d3d3d3'}
+                                    icon={
+                                        <Avatar
+                                            bg={'gray.300'}
+                                            size={o.name == orgName ? 10 : 12}
+                                            borderRadius={o.name == orgName ? 0 : 'lg'}
+                                            p={2}
+                                            _image={{ borderRadius: 0 }}
+                                            _text={{ color: '#000', fontWeight: 800, fontSize: 18 }}
+                                        >
+                                            {acronym}
+                                        </Avatar>
+                                    }
+                                />
+                                <Text color="black" fontSize="18" fontWeight={'bold'}>
+                                    {o?.title ?? o.name}
+                                </Text>
+                            </HStack>
+                            <IconButton
+                                size={'lg'}
+                                _icon={{
+                                    as: MaterialIcons,
+                                    name: 'more-vert',
+                                    color: '#000',
+                                }}
+                            />
+                        </HStack>
+                    </TouchableHighlight>
+                );
+            })} */}
                 </VStack>
-                <VStack flex={1} w={'100%'} space={2} position={'absolute'} bottom={10}>
+                <VStack flex={1} w={'100%'} space={'sm'} bg={'$white'} position={'absolute'} bottom={'$10'}>
                     <Divider w={'100%'}/>
-                    {(user === null || user === void 0 ? void 0 : user.accessToken) && (<HStack px="1" pt={1} justifyContent="space-between" alignItems="center" w="100%">
-                            <TouchableHighlight underlayColor={'transparent'} activeOpacity={0.5} style={{ width: '100%' }} onPress={() => CreateOrganization()}>
-                                <Text textAlign={'center'} color="black" fontSize="18" fontWeight={'bold'}>
-                                    Create Organization
-                                </Text>
-                            </TouchableHighlight>
-                        </HStack>)}
+                    {(user === null || user === void 0 ? void 0 : user.accessToken) && (<VStack space={'sm'}>
+                            <Button size={'sm'} variant={'solid'} bg={'transparent'} $pressed-bg={'$trueGray200'} justifyContent={'flex-start'} onPress={() => addWorkSpace()}>
+                                <AntDesign color="black" name="plus" size={22}/>
+                                <ButtonText pl={'$2'} style={{ color: 'black', fontSize: 15 }}>
+                                    Add a workspace
+                                </ButtonText>
+                            </Button>
+                            <Button size={'sm'} variant={'solid'} bg={'transparent'} $pressed-bg={'$trueGray200'} justifyContent={'flex-start'}>
+                                <Ionicons color="black" name="md-settings-outline" size={22}/>
+                                <ButtonText pl={'$2'} style={{ color: 'black', fontSize: 15 }}>
+                                    Preferences
+                                </ButtonText>
+                            </Button>
+                            <Button size={'sm'} variant={'solid'} bg={'transparent'} $pressed-bg={'$trueGray200'} justifyContent={'flex-start'}>
+                                <Ionicons color="black" name="help-circle-outline" size={22}/>
+                                <ButtonText pl={'$2'} style={{ color: 'black', fontSize: 15 }}>
+                                    Help
+                                </ButtonText>
+                            </Button>
+                            {/* <HStack px="1" pt={1} justifyContent="space-between" alignItems="center" w="100%">
+                <TouchableHighlight
+                    underlayColor={'transparent'}
+                    activeOpacity={0.5}
+                    style={{ width: '100%' }}
+                    onPress={() => CreateOrganization()}
+                >
+                    <Text textAlign={'center'} color="black" fontSize="18" fontWeight={'bold'}>
+                        Add a Workspace
+                    </Text>
+                </TouchableHighlight>
+            </HStack> */}
+                        </VStack>)}
                 </VStack>
             </Box>
         </Box>);
 };
-export default CustomDrawer;
+const CustomDrawer = (props) => {
+    const navigation = useNavigation();
+    const user = useSelector(userSelector);
+    const settings = useSelector((state) => state.settings);
+    return (<SafeAreaView flex={1}>
+            <Box flex={1} w={'100%'}>
+                {user && (user === null || user === void 0 ? void 0 : user.accessToken) ? <CustomDrawerComponent {...props}/> : <></>}
+            </Box>
+        </SafeAreaView>);
+};
+export default React.memo(CustomDrawer);
 //# sourceMappingURL=CustomDrawer.js.map

package/lib/components/CustomDrawer/CustomDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomDrawer.js","sourceRoot":"","sources":["../../../src/components/CustomDrawer/CustomDrawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomDrawer.js","sourceRoot":"","sources":["../../../src/components/CustomDrawer/CustomDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAgB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EACH,YAAY,EACZ,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EAEV,IAAI,EACJ,OAAO,EAEP,GAAG,EAEH,MAAM,EAEN,OAAO,EACP,QAAQ,EACR,iBAAiB,GACpB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAA+B,aAAa,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACtG,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EACH,4BAA4B,EAE5B,6BAA6B,GAEhC,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,YAAY,EAAuB,MAAM,mCAAmC,CAAC;AAEtF,MAAM,qBAAqB,GAAG,CAAC,KAAU,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,aAAa,EAAO,CAAC;IACxC,MAAM,IAAI,GAAQ,WAAW,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,WAAW,CAAM,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACpE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,GAC5F,eAAe,EAAE,CAAC;IACtB,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAClD,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,6BAA6B,CAAC;QACtF,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,IAAI,EAAE,OAAO;aAChB;SACJ;KACJ,CAAC,CAAC;IACH,MAAM,EACF,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EAAE,0BAA0B,EACnC,OAAO,EAAE,wBAAwB,GACpC,GAAQ,4BAA4B,CAAC;QAClC,kBAAkB;QAClB,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE,EAAE;QAC/B,mCAAmC;KACtC,CAAC,CAAC;IAEH,cAAc,CACV,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnB,wBAAwB,CAAC;YACrB,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE;SACnB,CAAC,CAAC;QACH,IAAI,OAAO;YAAE,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CACtB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB;YAAE,qBAAqB,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB,CAAC,CAAC;IAC1G,CAAC,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB,CAAC,CAAC,CAAC;IAE3C,iEAAiE;IACjE,sBAAsB;IACtB,wFAAwF;IACxF,yBAAyB;IACzB,oBAAoB;IACpB,oBAAoB;IACpB,gBAAgB;IAChB,iDAAiD;IACjD,gDAAgD;IAChD,iBAAiB;IACjB,aAAa;IACb,UAAU;IACV,UAAU;IAEV,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAY,EAAE,EAAE;QACxD,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAO,EAAE,EAAE;;QACpD,MAAM,KAAK,GAAG,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,KAAK,mCAAI,CAAC,CAAC,IAAI,CAAC;QACjC,MAAM,OAAO,GAAQ,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,SAAS,CAAC,mCAAI,EAAE,CAAC;QACnD,uFAAuF;QACvF,MAAM,OAAO,GAAQ,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,EAAE,CAAC,0CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO;QAE9F,OAAO,CACH,CAAC,kBAAkB,CACf,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAExC;gBAAA,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CACnF;oBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,QAAQ,CACpC;wBAAA,CAAC,MAAM;QACH,YAAY;QACZ,EAAE,CAAC,CAAC,IAAI,CAAC,CACT,EAAE,CAAC,CAAC,IAAI,CAAC,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,EAAE,CAAC,CAAC,aAAa,CAAC,CAKlB;4BAAA,CAAC,MAAM,CACH,EAAE,CAAC,CAAC,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC;QACX,qDAAqD;QACrD,YAAY,CAAC,CAAC,KAAK,CAAC,CACpB,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAC7C,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CACpD,CAAC,CAAC,CAAC,IAAI,CAAC,CAER;gCAAA,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACnE;oCAAA,CAAC,OAAO,CACZ;gCAAA,EAAE,IAAI,CACV;4BAAA,EAAE,MAAM,CAER;;4BAAA,CAAC;;4BAEe,CACpB;wBAAA,EAAE,MAAM,CACR;wBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CACxE;4BAAA,CAAC,KAAK,CACV;wBAAA,EAAE,IAAI,CACV;oBAAA,EAAE,MAAM,CACR;oBAAA,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAC5C;wBAAA,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,EAC5D;oBAAA,EAAE,MAAM,CACZ;gBAAA,EAAE,MAAM,CACZ;YAAA,EAAE,kBAAkB,CAAC,CACxB,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CACpB;YAAA,CAAC,kCAAkC,CACnC;YAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACT;gBAAA,CAAC,OAAO,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC,CACR,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAE5E;;gBACJ,EAAE,OAAO,CACT;gBAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAC3B;oBAAA,CAAC,QAAQ,CACL,IAAI,CAAC,CAAC,CAAC,CAAC,CACR,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAC7C,qBAAqB,CAAC,CAAC;YACnB,QAAQ,EAAE,CAAC;YACX,aAAa,EAAE,EAAE;SACpB,CAAC,CACF,IAAI,CAAC,CACD,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,oBAAoB;YAC3C,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,oBAAoB,CAAC,MAAM,IAAG,CAAC;YAClD,CAAC,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,oBAAoB;YAC7C,CAAC,CAAC,EAAE,CACX,CACD,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAC7B,kBAAkB,CAAC,CAAC,GAAG,EAAE;YACrB,OAAO,CACH,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CACtB;oCAAA,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CACd;wCAAA,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAClB;4CAAA,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CACjC;wCAAA,EAAE,GAAG,CACT;oCAAA,EAAE,MAAM,CACZ;gCAAA,EAAE,GAAG,CAAC,CACT,CAAC;QACN,CAAC,CAAC,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,EAE3B;oBAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmDS,CACd;gBAAA,EAAE,MAAM,CACR;gBAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CACvF;oBAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EACnB;oBAAA,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,KAAI,CAClB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAChB;4BAAA,CAAC,MAAM,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,EAAE,CAAC,CAAC,aAAa,CAAC,CAClB,WAAW,CAAC,CAAC,cAAc,CAAC,CAC5B,cAAc,CAAC,CAAC,YAAY,CAAC,CAC7B,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAE9B;gCAAA,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC9C;gCAAA,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1D;;gCACJ,EAAE,UAAU,CAChB;4BAAA,EAAE,MAAM,CACR;4BAAA,CAAC,MAAM,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,EAAE,CAAC,CAAC,aAAa,CAAC,CAClB,WAAW,CAAC,CAAC,cAAc,CAAC,CAC5B,cAAc,CAAC,CAAC,YAAY,CAAC,CAE7B;gCAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC5D;gCAAA,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1D;;gCACJ,EAAE,UAAU,CAChB;4BAAA,EAAE,MAAM,CACR;4BAAA,CAAC,MAAM,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,EAAE,CAAC,CAAC,aAAa,CAAC,CAClB,WAAW,CAAC,CAAC,cAAc,CAAC,CAC5B,cAAc,CAAC,CAAC,YAAY,CAAC,CAE7B;gCAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC5D;gCAAA,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1D;;gCACJ,EAAE,UAAU,CAChB;4BAAA,EAAE,MAAM,CACR;4BAAA,CAAC;;;;;;;;;;;wBAWW,CAChB;wBAAA,EAAE,MAAM,CAAC,CACZ,CACL;gBAAA,EAAE,MAAM,CACZ;YAAA,EAAE,GAAG,CACT;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,aAAa,EAAO,CAAC;IACxC,MAAM,IAAI,GAAQ,WAAW,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,WAAW,CAAM,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAAC;IAEpE,OAAO,CACH,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAClB;YAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CACpB;gBAAA,CAAC,IAAI,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAC7E;YAAA,EAAE,GAAG,CACT;QAAA,EAAE,YAAY,CAAC,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC"}

package/lib/components/LoadingSpinner/index.js

@@ -1,24 +1,20 @@
 import React from 'react';
-import { Box, Spinner, HStack, Heading, Center, Modal } from 'native-base';
-export const LoadingSpinnerDefault = () => (<Box flex={1} justifyContent={'center'} safeAreaTop>
-        <Spinner />
-    </Box>);
-const LoadingSpinner = ({ color = 'light' }) => {
-    return (<Center>
-            <Modal isOpen={true} _backdrop={{
-            _dark: {
-                bg: 'warmGray.50',
-            },
-            bg: 'coolGray.800',
-        }}>
-                <Modal.Content maxWidth="350" maxH="212">
-                    <Modal.Body justifyContent="center" alignItems={'center'}>
-                        <HStack space={2} justifyContent="center">
+import { Spinner, HStack, Heading, Center, Modal, ModalBackdrop, ModalContent, ModalBody, } from '@admin-layout/gluestack-ui-mobile';
+export const LoadingSpinnerDefault = () => (<Center flex={1} justifyContent="center" alignItems="center">
+        <Spinner color={'$blue500'}/>
+    </Center>);
+const LoadingSpinner = ({ color = '$blue500' }) => {
+    return (<Center flex={1}>
+            <Modal isOpen={true}>
+                <ModalBackdrop />
+                <ModalContent style={{ maxWidth: 350, maxHeight: 212 }}>
+                    <ModalBody justifyContent="center" alignItems={'center'}>
+                        <HStack space={'sm'} justifyContent="center">
                             <Spinner color={color} accessibilityLabel="Loading"/>
-                            <Heading fontSize="md">Loading</Heading>
+                            <Heading fontSize="$md">Loading</Heading>
                         </HStack>
-                    </Modal.Body>
-                </Modal.Content>
+                    </ModalBody>
+                </ModalContent>
             </Modal>
         </Center>);
 };

package/lib/components/LoadingSpinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CACvC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,WAAW,CAC/C;QAAA,CAAC,OAAO,CAAC,AAAD,EACZ;IAAA,EAAE,GAAG,CAAC,CACT,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAuB,EAAE,EAAE;IAChE,OAAO,CACH,CAAC,MAAM,CACH;YAAA,CAAC,KAAK,CACF,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC;YACP,KAAK,EAAE;gBACH,EAAE,EAAE,aAAa;aACpB;YACD,EAAE,EAAE,cAAc;SACrB,CAAC,CAEF;gBAAA,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CACpC;oBAAA,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CACrD;wBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CACrC;4BAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,SAAS,EACnD;4BAAA,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAC3C;wBAAA,EAAE,MAAM,CACZ;oBAAA,EAAE,KAAK,CAAC,IAAI,CAChB;gBAAA,EAAE,KAAK,CAAC,OAAO,CACnB;YAAA,EAAE,KAAK,CACX;QAAA,EAAE,MAAM,CAAC,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEH,OAAO,EAEP,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,aAAa,EACb,YAAY,EAKZ,SAAS,GAEZ,MAAM,mCAAmC,CAAC;AAM3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CACvC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CACxD;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,EAC/B;IAAA,EAAE,MAAM,CAAC,CACZ,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,GAAG,UAAU,EAAuB,EAAE,EAAE;IACnE,OAAO,CACH,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACZ;YAAA,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAChB;gBAAA,CAAC,aAAa,CAAC,AAAD,EACd;gBAAA,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CACnD;oBAAA,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CACpD;wBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,QAAQ,CACxC;4BAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,SAAS,EACnD;4BAAA,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAC5C;wBAAA,EAAE,MAAM,CACZ;oBAAA,EAAE,SAAS,CACf;gBAAA,EAAE,YAAY,CAClB;YAAA,EAAE,KAAK,CACX;QAAA,EAAE,MAAM,CAAC,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/NavigationHeader/InboxNavigationHeader.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<({ channelId, navigation, route, options, back, showToggle, showFilter, }: any) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ channelId, navigation, route, options, back, showToggle, showFilter, statusBarType, }: any) => React.JSX.Element>;
 export default _default;

package/lib/components/NavigationHeader/InboxNavigationHeader.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { VStack, HStack, Button, IconButton, Icon, Text, Box, Avatar, } from 'native-base';
+import { SafeAreaView, VStack, HStack, Button, Text, Box, Avatar, AvatarFallbackText, AvatarImage, AvatarBadge, } from '@admin-layout/gluestack-ui-mobile';
+import { StatusBar } from 'expo-status-bar';
 import { getHeaderTitle } from '@react-navigation/elements';
 import { MaterialIcons, AntDesign, Feather, Octicons } from '@expo/vector-icons';
+// import AddMemberToChannel from '../AddMemberToChannel';
 import { NavigationRoutes } from '../../constants/routes';
 import { startCase } from 'lodash-es';
 import { IRoomType, useViewChannelDetailQuery } from '@messenger-box/platform-client';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { useSelector } from 'react-redux';
-const InboxNavigationHeader = ({ channelId, navigation, route, options, back, showToggle = null, showFilter = null, }) => {
+const InboxNavigationHeader = ({ channelId, navigation, route, options, back, showToggle = null, showFilter = null, statusBarType = 'dark', }) => {
     var _a, _b, _c, _d, _e, _f;
     const { data: channelData, loading: channelLoading, refetch: reFetchChannel, } = useViewChannelDetailQuery({
         variables: {
@@ -60,69 +62,87 @@ const InboxNavigationHeader = ({ channelId, navigation, route, options, back, sh
             ? (_b = (_a = channelMembers[0]) === null || _a === void 0 ? void 0 : _a.picture) !== null && _b !== void 0 ? _b : null
             : null;
     }, [channelMembers]);
-    return (<Box borderBottomWidth={1} borderBottomColor={'gray.200'} safeAreaTop>
-            <VStack space={0}>
-                <HStack px="1" py="3" bg={'white'} justifyContent="space-between" alignItems="center" w="100%">
-                    {back ? (<IconButton 
+    return (<SafeAreaView>
+            <StatusBar style={statusBarType} backgroundColor={statusBarType == 'dark' ? 'white' : 'black'}/>
+            <Box borderBottomWidth={'$1'} borderBottomColor={'$trueGray200'}>
+                <VStack>
+                    <HStack px="$1" py="$3" bg={'$white'} justifyContent="space-between" alignItems="center" w="100%">
+                        {back ? (<Button bg={'transparent'} $pressed-bg="$trueGray200" $active-bg={'$trueGray200'} 
         //onPress={() => navigation?.goBack?.()}
         onPress={() => {
                 var _a;
                 return ((_a = route === null || route === void 0 ? void 0 : route.params) === null || _a === void 0 ? void 0 : _a.goToHome)
                     ? navigation === null || navigation === void 0 ? void 0 : navigation.navigate(NavigationRoutes.Home)
                     : navigation === null || navigation === void 0 ? void 0 : navigation.goBack();
-            }} icon={<Icon size={'lg'} as={MaterialIcons} name="keyboard-arrow-left" color="black"/>}/>) : showToggle ? (<IconButton mx={2} px={2} py={2} size={6} bg={'gray.300'} onPress={() => navigation.toggleDrawer()} icon={<Avatar bg={'transparent'} size={8} _text={{ color: '#000', fontWeight: 600 }}>
-                                    {acronym}
-                                </Avatar>}/>) : (<></>)}
+            }}>
+                                <MaterialIcons size={30} name="keyboard-arrow-left" color="black"/>
+                            </Button>) : showToggle ? (<Button mx={'$2'} px={'$2'} py={'$2'} size={'md'} bg={'$trueGray300'} $pressed-bg="$trueGray200" $active-bg={'$trueGray200'} onPress={() => navigation.toggleDrawer()}>
+                                <Avatar bg={'transparent'} size={'md'}>
+                                    <AvatarFallbackText style={{ color: '#000', fontWeight: '600' }}>
+                                        {acronym}
+                                    </AvatarFallbackText>
+                                </Avatar>
+                            </Button>) : (<></>)}
 
-                    <Box flex={1}>
-                        <Button variant={'ghost'} _pressed={{ backgroundColor: 'gray.200' }} justifyContent={'flex-start'} rounded={'xl'} p={0} onPress={() => navigation === null || navigation === void 0 ? void 0 : navigation.navigate(NavigationRoutes.InboxChannelDetail, { channelId })}>
-                            <>
-                                <HStack>
-                                    <Box>
-                                        {memberImage ? (<Avatar key={'inbox-channel-member-image-key'} size={'sm'} bg={'transparent'} _image={{
-                style: {
-                    width: 30,
-                    height: 30,
-                    borderRadius: 6,
-                    borderWidth: 2,
-                    borderColor: '#fff',
-                },
+                        <Box flex={1}>
+                            <Button bg={'transparent'} variant={'solid'} $pressed-bg="$trueGray200" $active-bg={'$trueGray200'} justifyContent={'flex-start'} rounded={'$xl'} p={'$0'} onPress={() => navigation === null || navigation === void 0 ? void 0 : navigation.navigate(NavigationRoutes.InboxChannelDetail, { channelId })}>
+                                <VStack>
+                                    <HStack alignItems="center">
+                                        <Box>
+                                            {memberImage ? (<Avatar key={'inbox-channel-member-image-key'} size={'sm'} bg={'transparent'}>
+                                                    <AvatarFallbackText>
+                                                        {startCase((_b = (_a = route === null || route === void 0 ? void 0 : route.params) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.charAt(0))}
+                                                    </AvatarFallbackText>
+                                                    <AvatarImage style={{
+                width: 30,
+                height: 30,
+                borderRadius: 6,
+                borderWidth: 2,
+                borderColor: '#fff',
             }} source={{
                 uri: memberImage,
-            }}>
-                                                {startCase((_b = (_a = route === null || route === void 0 ? void 0 : route.params) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.charAt(0))}
-                                                <Avatar.Badge bg="green.800"/>
-                                            </Avatar>) : channelType == IRoomType.Channel ? (<Text pl={2} pt={2}>
-                                                <Icon color="black" as={Octicons} name="hash" size="sm"/>
-                                            </Text>) : channelType === IRoomType.Private ? (<Text pl={2} pt={2}>
-                                                <Icon color="black" as={Octicons} name="lock" size={'sm'}/>
-                                            </Text>) : (<></>)}
-                                    </Box>
-                                    <Text px={2} color="black" flexWrap={'wrap'} fontSize="18" fontWeight="bold" noOfLines={1}>
-                                        {channelTitle}
-                                    </Text>
-                                </HStack>
+            }}/>
+                                                    <AvatarBadge style={{ width: 10, height: 10 }} bg="$green800"/>
+                                                </Avatar>) : channelType == IRoomType.Channel ? (<Text pl={'$2'}>
+                                                    <Octicons color="black" name="hash" size={18}/>
+                                                </Text>) : channelType === IRoomType.Private ? (<Text pl={'$2'}>
+                                                    <Octicons color="black" name="lock" size={18}/>
+                                                </Text>) : (<></>)}
+                                        </Box>
+                                        <Text px={'$2'} color="$black" flexWrap={'wrap'} style={{ fontSize: 18 }} fontWeight="$bold" numberOfLines={1}>
+                                            {channelTitle}
+                                        </Text>
+                                    </HStack>
+                                    <HStack>
+                                        {!memberImage && ((_c = channel === null || channel === void 0 ? void 0 : channel.members) === null || _c === void 0 ? void 0 : _c.length) > 0 && (<Text px={'$2'} color={'$trueGray600'}>
+                                                {(_d = channel === null || channel === void 0 ? void 0 : channel.members) === null || _d === void 0 ? void 0 : _d.length}{' '}
+                                                {((_e = channel === null || channel === void 0 ? void 0 : channel.members) === null || _e === void 0 ? void 0 : _e.length) > 1 ? 'members' : 'member'}
+                                            </Text>)}
+                                    </HStack>
+                                </VStack>
+                            </Button>
+                        </Box>
 
-                                {!memberImage && ((_c = channel === null || channel === void 0 ? void 0 : channel.members) === null || _c === void 0 ? void 0 : _c.length) > 0 && (<Text px={2} color={'gray.600'}>
-                                        {(_d = channel === null || channel === void 0 ? void 0 : channel.members) === null || _d === void 0 ? void 0 : _d.length} {((_e = channel === null || channel === void 0 ? void 0 : channel.members) === null || _e === void 0 ? void 0 : _e.length) > 1 ? 'members' : 'member'}
-                                    </Text>)}
-                            </>
+                        <Button variant="solid" bg={'transparent'} $pressed-bg="$trueGray200" $active-bg={'$trueGray200'} 
+    //$pressed-backgroundColor={'$trueGray600'}
+    size={'md'}>
+                            <Feather color={'black'} size={20} name="headphones"/>
                         </Button>
-                    </Box>
-
-                    <IconButton _pressed={{ backgroundColor: 'gray.200' }} size={'lg'} icon={<Icon color={'black'} size={'lg'} as={Feather} name="headphones"/>}/>
 
-                    {((_f = route === null || route === void 0 ? void 0 : route.params) === null || _f === void 0 ? void 0 : _f.addMember) && (<IconButton onPress={() => {
+                        {((_f = route === null || route === void 0 ? void 0 : route.params) === null || _f === void 0 ? void 0 : _f.addMember) && (<Button bg={'transparent'} $pressed-bg="transparent" $active-bg={'transparent'} onPress={() => {
                 var _a, _b, _c;
                 return navigation.navigate(NavigationRoutes.AddPeople, {
                     channelId: (_a = route === null || route === void 0 ? void 0 : route.params) === null || _a === void 0 ? void 0 : _a.channelId,
                     addMember: (_b = route === null || route === void 0 ? void 0 : route.params) === null || _b === void 0 ? void 0 : _b.addMember,
                     orgName: (_c = route === null || route === void 0 ? void 0 : route.params) === null || _c === void 0 ? void 0 : _c.orgName,
                 });
-            }} _pressed={{ backgroundColor: 'transparent' }} size={'lg'} icon={<Icon color={'black'} size={'lg'} as={AntDesign} name="addusergroup"/>}/>)}
-                </HStack>
-            </VStack>
-        </Box>);
+            }} size={'lg'}>
+                                <AntDesign color={'black'} size={20} name="addusergroup"/>
+                            </Button>)}
+                    </HStack>
+                </VStack>
+            </Box>
+        </SafeAreaView>);
 };
 export default React.memo(InboxNavigationHeader);
 //# sourceMappingURL=InboxNavigationHeader.js.map