diff --git a/app/components/post_list/post/header/display_name/index.tsx b/app/components/post_list/post/header/display_name/index.tsx index cef84de99..fc39eeaac 100644 --- a/app/components/post_list/post/header/display_name/index.tsx +++ b/app/components/post_list/post/header/display_name/index.tsx @@ -5,6 +5,7 @@ import React, {useCallback} from 'react'; import {useIntl} from 'react-intl'; import {Keyboard, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native'; +import CustomStatusEmoji from '@components/custom_status/custom_status_emoji'; import FormattedText from '@components/formatted_text'; import {Screens} from '@constants'; import {openAsBottomSheet} from '@screens/navigation'; @@ -23,6 +24,8 @@ type HeaderDisplayNameProps = { userIconOverride?: string; userId: string; usernameOverride?: string; + showCustomStatusEmoji: boolean; + customStatus: UserCustomStatus; } const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { @@ -30,11 +33,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { displayName: { color: theme.centerChannelColor, flexGrow: 1, + marginRight: 5, ...typography('Body', 200, 'SemiBold'), }, + displayNameCustomEmojiWidth: { + maxWidth: '90%', + }, displayNameContainer: { maxWidth: '60%', - marginRight: 5, + flexDirection: 'row', + alignItems: 'center', }, displayNameContainerBotReplyWidth: { maxWidth: '50%', @@ -45,7 +53,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { displayNameContainerLandscapeBotReplyWidth: { maxWidth: '70%', }, - + customStatusEmoji: { + color: theme.centerChannelColor, + marginRight: 4, + }, }; }); @@ -54,6 +65,7 @@ const HeaderDisplayName = ({ location, rootPostAuthor, shouldRenderReplyButton, theme, userIconOverride, userId, usernameOverride, + showCustomStatusEmoji, customStatus, }: HeaderDisplayNameProps) => { const dimensions = useWindowDimensions(); const intl = useIntl(); @@ -85,12 +97,17 @@ const HeaderDisplayName = ({ }; const displayNameWidth = calcNameWidth(); - const displayNameStyle = [style.displayNameContainer, displayNameWidth]; + const displayNameContainerStyle = [style.displayNameContainer, displayNameWidth]; + + const displayNameStyle = showCustomStatusEmoji ? style.displayNameCustomEmojiWidth : null; if (displayName) { return ( - - + + {displayName} - - + + {showCustomStatusEmoji && ( + + )} + ); } diff --git a/app/components/post_list/post/header/header.tsx b/app/components/post_list/post/header/header.tsx index 7b9eaab89..1e54536f5 100644 --- a/app/components/post_list/post/header/header.tsx +++ b/app/components/post_list/post/header/header.tsx @@ -4,7 +4,6 @@ import React from 'react'; import {View} from 'react-native'; -import CustomStatusEmoji from '@components/custom_status/custom_status_emoji'; import FormattedTime from '@components/formatted_time'; import PostPriorityLabel from '@components/post_priority/post_priority_label'; import {CHANNEL, THREAD} from '@constants/screens'; @@ -67,11 +66,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { alignSelf: 'center', marginLeft: 6, }, - customStatusEmoji: { - color: theme.centerChannelColor, - marginRight: 4, - marginTop: 2, - }, }; }); @@ -89,11 +83,10 @@ const Header = (props: HeaderProps) => { const displayName = postUserDisplayName(post, author, teammateNameDisplay, enablePostUsernameOverride); const rootAuthorDisplayName = rootPostAuthor ? displayUsername(rootPostAuthor, currentUser.locale, teammateNameDisplay, true) : undefined; const customStatus = getUserCustomStatus(author); - const customStatusExpired = isCustomStatusExpired(author); const showCustomStatusEmoji = Boolean( isCustomStatusEnabled && displayName && customStatus && !(isSystemPost || author?.isBot || isAutoResponse || isWebHook), - ); + ) && !isCustomStatusExpired(author) && Boolean(customStatus?.emoji); return ( <> @@ -110,14 +103,9 @@ const Header = (props: HeaderProps) => { userIconOverride={post.props?.override_icon_url} userId={post.userId} usernameOverride={post.props?.override_username} + showCustomStatusEmoji={showCustomStatusEmoji} + customStatus={customStatus!} /> - {showCustomStatusEmoji && !customStatusExpired && Boolean(customStatus?.emoji) && ( - - )} {(!isSystemPost || isAutoResponse) &&