fix(MM-49742): broken user avatar (#8356)

* fix(MM-49742): broken user avatar

* add border for both focused and unfocused for profile photo on the bottom tab bar
* status size reduced to 12 from default 14
* the size of the profile photo has been reduced from 28 to 22 to be inline with other icons on tab bar

* revert initial commit

* add unit test for Account

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

app/constants/view.ts

@@ -5,6 +5,9 @@ import {Platform} from 'react-native';
 
 export const BOTTOM_TAB_HEIGHT = 52;
 export const BOTTOM_TAB_ICON_SIZE = 31.2;
+export const BOTTOM_TAB_PROFILE_PHOTO_SIZE = 22;
+export const BOTTOM_TAB_STATUS_SIZE = 12;
+
 export const PROFILE_PICTURE_SIZE = 32;
 export const PROFILE_PICTURE_EMOJI_SIZE = 28;
 

app/screens/home/tab_bar/account.test.tsx

@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+
+import {BOTTOM_TAB_PROFILE_PHOTO_SIZE, BOTTOM_TAB_STATUS_SIZE} from '@constants/view';
+import {renderWithEverything, renderWithIntl} from '@test/intl-test-helper';
+import TestHelper from '@test/test_helper';
+import {changeOpacity} from '@utils/theme';
+
+import {Account, default as AccountWithDatabaseObservable} from './account';
+
+import type {UserModel} from '@database/models/server';
+import type Database from '@nozbe/watermelondb/Database';
+
+jest.mock('@components/profile_picture', () => 'ProfilePicture');
+
+const currentUser = {
+    id: 'user1',
+    username: 'testuser',
+} as UserModel;
+
+const theme = {
+    buttonBg: '#000',
+    centerChannelColor: '#fff',
+} as Theme;
+
+describe('Account', () => {
+    const centerChannelColorWithOpacity = changeOpacity(theme.centerChannelColor, 0.48);
+
+    it('should render correctly when focused', () => {
+        const wrapper = renderWithIntl(
+            <Account
+                currentUser={currentUser}
+                isFocused={true}
+                theme={theme}
+            />,
+        );
+
+        const container = wrapper.getByTestId('account-container');
+        expect(container.props.style).toContainEqual({borderColor: theme.buttonBg});
+    });
+
+    it('should render correctly when unfocused', () => {
+        const {getByTestId} = renderWithIntl(
+            <Account
+                currentUser={currentUser}
+                isFocused={false}
+                theme={theme}
+            />,
+        );
+
+        const container = getByTestId('account-container');
+        expect(container.props.style).toContainEqual({borderColor: centerChannelColorWithOpacity});
+    });
+
+    it('should render ProfilePicture with correct props', () => {
+        const {getByTestId} = renderWithIntl(
+            <Account
+                currentUser={currentUser}
+                isFocused={true}
+                theme={theme}
+            />,
+        );
+
+        const profilePicture = getByTestId('account-profile-picture');
+
+        expect(profilePicture.props.author).toEqual({id: 'user1', username: 'testuser'});
+        expect(profilePicture.props.showStatus).toBe(true);
+        expect(profilePicture.props.size).toBe(BOTTOM_TAB_PROFILE_PHOTO_SIZE);
+        expect(profilePicture.props.statusSize).toBe(BOTTOM_TAB_STATUS_SIZE);
+    });
+});
+
+describe('Account with database observable', () => {
+    let database: Database;
+
+    beforeAll(async () => {
+        const server = await TestHelper.setupServerDatabase();
+        database = server.database;
+    });
+
+    it('should render with the correct fake user when observing data from the database', () => {
+        const wrapper = renderWithEverything(
+            <AccountWithDatabaseObservable
+                theme={theme}
+                isFocused={true}
+            />, {database});
+
+        const profilePicture = wrapper.getByTestId('account-profile-picture');
+
+        expect(profilePicture.props.author.email).toContain('@simulator.amazonses.com');
+    });
+});

app/screens/home/tab_bar/account.tsx

@@ -6,8 +6,9 @@ import React from 'react';
 import {View} from 'react-native';
 
 import ProfilePicture from '@components/profile_picture';
+import {BOTTOM_TAB_PROFILE_PHOTO_SIZE, BOTTOM_TAB_STATUS_SIZE} from '@constants/view';
 import {observeCurrentUser} from '@queries/servers/user';
-import {makeStyleSheetFromTheme} from '@utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
 import type UserModel from '@typings/database/models/servers/user';
@@ -19,22 +20,32 @@ type Props = {
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
-    selected: {
+    container: {
         borderWidth: 2,
-        borderColor: theme.buttonBg,
         borderRadius: 20,
     },
+    focused: {
+        borderColor: theme.buttonBg,
+    },
+    unfocused: {
+        borderColor: changeOpacity(theme.centerChannelColor, 0.48),
+    },
 }));
 
-const Account = ({currentUser, isFocused, theme}: Props) => {
+export const Account = ({currentUser, isFocused, theme}: Props) => {
     const style = getStyleSheet(theme);
 
     return (
-        <View style={isFocused ? style.selected : undefined}>
+        <View
+            style={[isFocused ? style.focused : style.unfocused, style.container]}
+            testID='account-container'
+        >
             <ProfilePicture
+                testID='account-profile-picture'
                 author={currentUser}
                 showStatus={true}
-                size={28}
+                size={BOTTOM_TAB_PROFILE_PHOTO_SIZE}
+                statusSize={BOTTOM_TAB_STATUS_SIZE}
             />
         </View>
     );