[Gekidou] bug fixes (#6249)

* Disable attempt to open User Profile screen

* Fix loading state alignment when switching servers

* Fix user is typing style and show in thread view

* Add additional space at the bottom of post list when CRT is disabled

* header back button position

* add margin bottom to typing component

app/components/navigation_header/header.tsx

@@ -90,9 +90,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     leftContainer: {
         height: '100%',
         justifyContent: 'center',
-        paddingLeft: 16,
         ...Platform.select({
             ios: {
+                paddingLeft: 16,
                 zIndex: 5,
                 position: 'absolute',
                 bottom: 0,

app/components/post_draft/typing/index.tsx

@@ -2,18 +2,15 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {
-    DeviceEventEmitter,
-    Platform,
-    Text,
-} from 'react-native';
+import {DeviceEventEmitter} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 
 import FormattedText from '@components/formatted_text';
 import {Events} from '@constants';
 import {TYPING_HEIGHT} from '@constants/post_draft';
 import {useTheme} from '@context/theme';
-import {makeStyleSheetFromTheme} from '@utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 type Props = {
     channelId: string;
@@ -23,20 +20,9 @@ type Props = {
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         typing: {
-            position: 'absolute',
-            paddingLeft: 10,
-            paddingTop: 3,
-            fontSize: 11,
-            ...Platform.select({
-                android: {
-                    marginBottom: 5,
-                },
-                ios: {
-                    marginBottom: 2,
-                },
-            }),
-            color: theme.centerChannelColor,
-            backgroundColor: 'transparent',
+            color: changeOpacity(theme.centerChannelColor, 0.7),
+            paddingHorizontal: 10,
+            ...typography('Body', 75),
         },
     };
 });
@@ -57,6 +43,7 @@ function Typing({
     const typingAnimatedStyle = useAnimatedStyle(() => {
         return {
             height: withTiming(typingHeight.value),
+            marginBottom: 4,
         };
     });
 
@@ -65,7 +52,7 @@ function Typing({
             return;
         }
 
-        const msgRootId = msg.parentId || '';
+        const msgRootId = msg.parentId || msg.rootId || '';
         if (rootId !== msgRootId) {
             return;
         }
@@ -84,7 +71,7 @@ function Typing({
             return;
         }
 
-        const msgRootId = msg.parentId || '';
+        const msgRootId = msg.parentId || msg.rootId || '';
         if (rootId !== msgRootId) {
             return;
         }
@@ -140,6 +127,9 @@ function Typing({
                     <FormattedText
                         id='msg_typing.isTyping'
                         defaultMessage='{user} is typing...'
+                        style={style.typing}
+                        ellipsizeMode='tail'
+                        numberOfLines={1}
                         values={{
                             user: nextTyping[0],
                         }}
@@ -151,6 +141,9 @@ function Typing({
                     <FormattedText
                         id='msg_typing.areTyping'
                         defaultMessage='{users} and {last} are typing...'
+                        style={style.typing}
+                        ellipsizeMode='tail'
+                        numberOfLines={1}
                         values={{
                             users: (nextTyping.join(', ')),
                             last,
@@ -163,15 +156,10 @@ function Typing({
 
     return (
         <Animated.View style={typingAnimatedStyle}>
-            <Text
-                style={style.typing}
-                ellipsizeMode='tail'
-                numberOfLines={1}
-            >
-                {renderTyping()}
-            </Text>
+            {renderTyping()}
         </Animated.View>
     );
 }
 
 export default React.memo(Typing);
+

app/constants/post_draft.ts

@@ -4,7 +4,7 @@
 export const MAX_MESSAGE_LENGTH_FALLBACK = 4000;
 export const DEFAULT_SERVER_MAX_FILE_SIZE = 50 * 1024 * 1024;// 50 Mb
 export const ICON_SIZE = 24;
-export const TYPING_HEIGHT = 26;
+export const TYPING_HEIGHT = 16;
 export const ACCESSORIES_CONTAINER_NATIVE_ID = 'channelAccessoriesContainer';
 export const THREAD_ACCESSORIES_CONTAINER_NATIVE_ID = 'threadAccessoriesContainer';
 

app/constants/screens.ts

@@ -93,7 +93,8 @@ export default {
     THREAD,
     THREAD_FOLLOW_BUTTON,
     THREAD_OPTIONS,
-    USER_PROFILE,
+
+    // USER_PROFILE,
     SNACK_BAR,
 };
 

app/screens/channel/channel_post_list/channel_post_list.tsx

@@ -29,6 +29,7 @@ type Props = {
 const edges: Edge[] = ['bottom'];
 const styles = StyleSheet.create({
     flex: {flex: 1},
+    containerStyle: {paddingTop: 12},
 });
 
 const ChannelPostList = ({
@@ -55,7 +56,7 @@ const ChannelPostList = ({
     const postList = (
         <PostList
             channelId={channelId}
-            contentContainerStyle={contentContainerStyle}
+            contentContainerStyle={[contentContainerStyle, !isCRTEnabled && styles.containerStyle]}
             isCRTEnabled={isCRTEnabled}
             footer={intro}
             lastViewedAt={lastViewedAt}

app/screens/channel/channel_post_list/intro/direct_channel/member/member.tsx

@@ -8,7 +8,6 @@ import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
 import CompassIcon from '@components/compass_icon';
 import ProfilePicture from '@components/profile_picture';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
-import {Screens} from '@constants';
 import {showModal} from '@screens/navigation';
 
 import type UserModel from '@typings/database/models/servers/user';
@@ -32,7 +31,8 @@ const styles = StyleSheet.create({
 const Member = ({containerStyle, size = 72, showStatus = true, theme, user}: Props) => {
     const intl = useIntl();
     const onPress = useCallback(() => {
-        const screen = Screens.USER_PROFILE;
+        // const screen = Screens.USER_PROFILE;
+        const screen = 'UserProfile';
         const title = intl.formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'});
         const passProps = {
             userId: user.id,

app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx

@@ -116,6 +116,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         height: 40,
         width: 40,
         justifyContent: 'center',
+        marginRight: 5,
     },
     tutorial: {
         top: -30,
@@ -404,7 +405,7 @@ const ServerItem = ({
                             }
                             {switching &&
                             <Loading
-                                style={styles.swithing}
+                                style={styles.switching}
                                 color={theme.buttonBg}
                             />
                             }