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) &&