Top bar UI (design review)

[alwx]

fixes #16782

• Adds more space between 'back' button and user avatar picture (full comment here)
• Changes the font for online/offline status mark (full comment here)
• Adds "offline" status when a user is offline

Platforms

• Android
• iOS

Areas that maybe impacted

Functional

• 1-1 chats
• public chats
• group chats

status: ready

[status-im-auto]

Jenkins Builds

Click to see older builds (11)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
❌	93ccc99	#1	2023-07-31 13:50:33	~3 min	tests	📄log
✔️	93ccc99	#1	2023-07-31 13:53:21	~6 min	android-e2e	🤖apk 📲
✔️	93ccc99	#1	2023-07-31 13:55:21	~8 min	android	🤖apk 📲
✔️	4bc6a16	#2	2023-07-31 14:06:11	~5 min	android-e2e	🤖apk 📲
✔️	4bc6a16	#2	2023-07-31 14:10:11	~9 min	android	🤖apk 📲
✔️	4bc6a16	#2	2023-07-31 14:10:34	~10 min	tests	📄log
✔️	4bc6a16	#2	2023-07-31 14:29:08	~28 min	ios	📱ipa 📲
✔️	afdac86	#4	2023-08-01 13:32:19	~5 min	android-e2e	🤖apk 📲
✔️	afdac86	#4	2023-08-01 13:32:59	~6 min	android	🤖apk 📲
✔️	afdac86	#4	2023-08-01 13:36:01	~9 min	tests	📄log
✔️	afdac86	#4	2023-08-01 13:38:54	~12 min	ios	📱ipa 📲

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	de10e55	#5	2023-08-02 14:16:14	~7 min	ios	📱ipa 📲
✔️	de10e55	#5	2023-08-02 14:18:03	~9 min	android-e2e	🤖apk 📲
✔️	de10e55	#5	2023-08-02 14:18:15	~9 min	android	🤖apk 📲
✔️	de10e55	#5	2023-08-02 14:18:48	~10 min	tests	📄log
✔️	5e5d6fc	#6	2023-08-02 15:10:57	~6 min	android-e2e	🤖apk 📲
✔️	5e5d6fc	#6	2023-08-02 15:10:58	~6 min	android	🤖apk 📲
✔️	5e5d6fc	#6	2023-08-02 15:13:58	~9 min	ios	📱ipa 📲
✔️	5e5d6fc	#6	2023-08-02 15:17:56	~13 min	tests	📄log

[status-im-auto]

88% of end-end tests have passed

Total executed tests: 40
Failed tests: 5
Passed tests: 35

IDs of failed tests: 702732,703133,702851,703495,702731 

Failed tests (5)

Click to expand

Rerun failed tests

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133

Test is not run, e2e blocker [[reason: [NOTRUN] Restoring communities issue: 16787; restoring contacts issue: 15500]]

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851

Device 2: Tap on found: Button Device 2: Find Button by accessibility id: create-new-profile medium/test_activity_center.py:87: in test_activity_center_contact_request_accept_swipe_mark_all_as_read self.device_2.create_user(second_user=True, username=new_username) ../views/sign_in_view.py:230: in create_user self.create_new_profile_button.click() ../views/base_element.py:91: in click self.find_element().click() ../views/base_element.py:80: in find_element raise NoSuchElementException( Device 2: Button by accessibility id: `create-new-profile` is not found on the screen Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_pin_messages, id: 702731

Test is not run, e2e blocker [[reason: [NOTRUN] Pin feature is in development]]

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732

Test is not run, e2e blocker [[reason: [NOTRUN] Pin feature is in development]]

2. test_group_chat_mute_chat, id: 703495

Device 2: Click until ChatMessageInput by accessibility id: chat-message-input will be presented Device 2: Looking for a message by text: Chat is unmuted now critical/chats/test_group_chat.py:607: in test_group_chat_mute_chat self.errors.verify_no_errors() base_test_case.py:183: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) New messages counter near chat name is not shown after unmute Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot Device 3: Steps, video, logs Failure screenshot

Passed tests (35)

Click to expand

Class TestActivityMultipleDevicePR:

1. test_activity_center_mentions, id: 702957

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

2. test_navigation_jump_to, id: 702936

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

3. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

4. test_activity_center_admin_notification_accept_swipe, id: 702958

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityOneDeviceMerged:

1. test_community_copy_and_paste_message_in_chat_input, id: 702742

Device sessions Device 1: Steps, video, logs

2. test_community_undo_delete_message, id: 702869

Device sessions Device 1: Steps, video, logs

3. test_community_navigate_to_channel_when_relaunch, id: 702846

Device sessions Device 1: Steps, video, logs

4. test_community_mute_community_and_channel, id: 703382

Device sessions Device 1: Steps, video, logs

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_decline, id: 702850

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

2. test_1_1_chat_text_message_delete_push_disappear, id: 702733

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

3. test_1_1_chat_delete_via_long_press_relogin, id: 702784

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

4. test_1_1_chat_push_emoji, id: 702813

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

5. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

7. test_1_1_chat_mute_chat, id: 703496

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

8. test_1_1_chat_edit_message, id: 702855

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

9. test_1_1_chat_send_image_save_and_share, id: 703391

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

10. test_1_1_chat_message_reaction, id: 702730

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityMultipleDeviceMerged:

1. test_community_several_images_send_reply, id: 703194

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

2. test_community_one_image_send_reply, id: 702859

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

3. test_community_emoji_send_copy_paste_reply, id: 702840

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

4. test_community_mark_all_messages_as_read, id: 703086

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

5. test_community_contact_block_unblock_offline, id: 702894

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

6. test_community_mentions_push_notification, id: 702786

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

7. test_community_message_delete, id: 702839

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

8. test_community_message_send_check_timestamps_sender_username, id: 702838

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

9. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

10. test_community_message_edit, id: 702843

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

11. test_community_leave, id: 702845

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

12. test_community_unread_messages_badge, id: 702841

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_send_image_save_and_share, id: 703297

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

2. test_group_chat_reactions, id: 703202

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

3. test_group_chat_join_send_text_messages_push, id: 702807

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

4. test_group_chat_offline_pn, id: 702808

Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

[qoqobolo]

Hey @alwx, thanks for the fixes!

ISSUE 1: Offline mark in channels and group chats

We should only display it for 1-1 chats

[alwx]

@qoqobolo oops, that's a good catch. Will update it in a sec.

[alwx]

@qoqobolo please recheck.
I suspect "Online" should also be shown only for 1-1 chats, right? (that's how I implemented it in this PR)

[qoqobolo]

I suspect "Online" should also be shown only for 1-1 chats, right? (that's how I implemented it in this PR)

Yeah, right. I was referring to the online status itself but didn't figure out how to get Online for channels and groups :)
Thank you, I'll recheck.

[qoqobolo]

Thanks @alwx, looks good to me now 👍
PR is ready for design review.

[Francesca-G]

Here's the Figma frame with the design review