Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(identifier): emoji hash line height #17386

Merged
merged 1 commit into from
Oct 4, 2023
Merged

fix(identifier): emoji hash line height #17386

merged 1 commit into from
Oct 4, 2023

Conversation

BalogunofAfrica
Copy link
Contributor

@BalogunofAfrica BalogunofAfrica commented Sep 21, 2023 •
edited
Loading

Fixes #17330, follow up to #17293

Summary

The identifier card height in the onboarding flow should match the design

Platforms

  • Android
  • iOS

status: ready

@BalogunofAfrica BalogunofAfrica self-assigned this Sep 21, 2023
@status-im-auto
Copy link
Member

status-im-auto commented Sep 21, 2023 •
edited
Loading

Jenkins Builds

Click to see older builds (12)
❔ Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ fb3afe5 #1 2023-09-21 15:09:36 ~6 min android 🤖apk 📲
✔️ fb3afe5 #1 2023-09-21 15:10:35 ~7 min ios 📱ipa 📲
✔️ fb3afe5 #1 2023-09-21 15:13:12 ~9 min android-e2e 🤖apk 📲
✔️ fb3afe5 #1 2023-09-21 15:16:26 ~12 min tests 📄log
✔️ dbc2073 #2 2023-09-27 08:03:07 ~6 min android 🤖apk 📲
✔️ dbc2073 #2 2023-09-27 08:03:29 ~6 min ios 📱ipa 📲
✔️ dbc2073 #2 2023-09-27 08:04:20 ~7 min android-e2e 🤖apk 📲
✔️ dbc2073 #2 2023-09-27 08:06:38 ~9 min tests 📄log
✔️ c881d3a #3 2023-09-28 11:53:00 ~5 min android 🤖apk 📲
✔️ c881d3a #3 2023-09-28 11:56:06 ~8 min android-e2e 🤖apk 📲
✔️ c881d3a #3 2023-09-28 11:57:16 ~9 min tests 📄log
✔️ c881d3a #3 2023-09-28 11:59:09 ~11 min ios 📱ipa 📲
❔ Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ ac7002b #4 2023-09-29 12:30:14 ~6 min ios 📱ipa 📲
✔️ ac7002b #4 2023-09-29 12:32:56 ~9 min android 🤖apk 📲
✔️ ac7002b #4 2023-09-29 12:33:05 ~9 min android-e2e 🤖apk 📲
✔️ ac7002b #4 2023-09-29 12:34:16 ~10 min tests 📄log
✔️ 1c105f5 #5 2023-10-04 07:36:42 ~6 min android-e2e 🤖apk 📲
✔️ 1c105f5 #5 2023-10-04 07:37:11 ~6 min ios 📱ipa 📲
✔️ 1c105f5 #5 2023-10-04 07:37:57 ~7 min android 🤖apk 📲
✔️ 1c105f5 #5 2023-10-04 07:40:10 ~9 min tests 📄log

flexsurfer
flexsurfer reviewed Sep 21, 2023
View reviewed changes
src/status_im2/contexts/onboarding/identifiers/profile_card/style.cljs
@@ -66,4 +66,5 @@
{:margin-top 2})))

(def emoji-hash
{:margin-top 12})
{:margin-top 12
:line-height 20.5})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure about .5 ?

Copy link
Contributor Author

@BalogunofAfrica BalogunofAfrica Sep 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, the lineHeight of 20.5 matches the designs' spacing and height.

The design uses regular images in a row for the emoji hash while we use text for this, and the lineHeight of the text used initially was 21.75 (paragraph-1 in typography).

@status-im-auto
Copy link
Member

74% of end-end tests have passed

Total executed tests: 43
Failed tests: 11
Passed tests: 32

IDs of failed tests: 702732,703495,703297,703503,702936,703202,702786,702947,702807,702731,702808

Failed tests (11)

Click to expand
  • Rerun failed tests

    • Class TestActivityMultipleDevicePR:

    1. test_navigation_jump_to, id: 702936

    Device 2: Looking for a message by text: open community
    Device 2: Find `BaseElement` by `xpath`: `//*[starts-with(@text,'open community')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@text='View']` 

    Test setup failed: medium/test_activity_center.py:175: in prepare_devices
    self.chat_2.chat_element_by_text(self.community_name).view_community_button.click()
../views/base_element.py:90: in click
    self.find_element().click()
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 2: BaseElement by xpath: `//*[starts-with(@text,'open community')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@text='View']` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    Device sessions

    2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947 

    Test setup failed: medium/test_activity_center.py:175: in prepare_devices
    self.chat_2.chat_element_by_text(self.community_name).view_community_button.click()
../views/base_element.py:90: in click
    self.find_element().click()
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 2: BaseElement by xpath: `//*[starts-with(@text,'open community')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@text='View']` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    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 

    Test setup failed: critical/chats/test_group_chat.py:202: in prepare_devices
    self.chats[0] = self.homes[0].create_group_chat(user_names_to_add=[self.usernames[1], self.usernames[2]]</b>,
../views/home_view.py:412: in create_group_chat
    chat.chat_name_editbox.send_keys(group_chat_name)
../views/base_element.py:367: in send_keys
    self.find_element().send_keys(value)
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 1: EditBox by accessibility id: `chat-name-input` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    3. test_group_chat_send_image_save_and_share, id: 703297 

    Test setup failed: critical/chats/test_group_chat.py:202: in prepare_devices
    self.chats[0] = self.homes[0].create_group_chat(user_names_to_add=[self.usernames[1], self.usernames[2]]</b>,
../views/home_view.py:412: in create_group_chat
    chat.chat_name_editbox.send_keys(group_chat_name)
../views/base_element.py:367: in send_keys
    self.find_element().send_keys(value)
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 1: EditBox by accessibility id: `chat-name-input` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    4. test_group_chat_reactions, id: 703202 

    Test setup failed: critical/chats/test_group_chat.py:202: in prepare_devices
    self.chats[0] = self.homes[0].create_group_chat(user_names_to_add=[self.usernames[1], self.usernames[2]]</b>,
../views/home_view.py:412: in create_group_chat
    chat.chat_name_editbox.send_keys(group_chat_name)
../views/base_element.py:367: in send_keys
    self.find_element().send_keys(value)
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 1: EditBox by accessibility id: `chat-name-input` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    5. test_group_chat_join_send_text_messages_push, id: 702807

    Device 1: Tap on found: Button
    Device 1: Find EditBox by accessibility id: chat-name-input 

    Test setup failed: critical/chats/test_group_chat.py:202: in prepare_devices
    self.chats[0] = self.homes[0].create_group_chat(user_names_to_add=[self.usernames[1], self.usernames[2]]</b>,
../views/home_view.py:412: in create_group_chat
    chat.chat_name_editbox.send_keys(group_chat_name)
../views/base_element.py:367: in send_keys
    self.find_element().send_keys(value)
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 1: EditBox by accessibility id: `chat-name-input` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    Device sessions

    6. test_group_chat_offline_pn, id: 702808 

    Test setup failed: critical/chats/test_group_chat.py:202: in prepare_devices
    self.chats[0] = self.homes[0].create_group_chat(user_names_to_add=[self.usernames[1], self.usernames[2]]</b>,
../views/home_view.py:412: in create_group_chat
    chat.chat_name_editbox.send_keys(group_chat_name)
../views/base_element.py:367: in send_keys
    self.find_element().send_keys(value)
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 1: EditBox by accessibility id: `chat-name-input` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception



    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_mentions_push_notification, id: 702786

    # STEP: Invited member gets push notification with the mention and tap it
    Device 2: Getting PN by 'user_2' 

    critical/test_public_chat_browsing.py:1149: in test_community_mentions_push_notification
    self.errors.verify_no_errors()
base_test_case.py:191: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Push notification with the mention was not received by admin
E    Can not edit a message with a mention
E    Push notification with the mention was not received by the invited member

    [[Issue with username in PN, issue #6 in 15500]]

    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_community_discovery, id: 703503 

    Test is not run, e2e blocker

    [[reason: [NOTRUN] https://github.com//issues/17175]]

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_pin_messages, id: 702731 

    Test is not run, e2e blocker

    [[reason: [NOTRUN] Pin feature is in development]]

    Passed tests (32)

    Click to expand

    Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

    1. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    3. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    Class TestActivityMultipleDevicePRTwo:

    1. test_activity_center_mentions, id: 702957
    Device sessions

    2. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_several_images_send_reply, id: 703194
    Device sessions

    2. test_community_one_image_send_reply, id: 702859
    Device sessions

    3. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    4. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    5. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    6. test_community_message_delete, id: 702839
    Device sessions

    7. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    8. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    9. test_community_message_edit, id: 702843
    Device sessions

    10. test_community_unread_messages_badge, id: 702841
    Device sessions

    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_markdown_support, id: 702809
    Device sessions

    2. test_community_hashtag_links_to_community_channels, id: 702948
    Device sessions

    3. test_community_leave, id: 702845
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
    Device sessions

    2. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    3. test_community_undo_delete_message, id: 702869
    Device sessions

    4. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    5. test_community_mute_community_and_channel, id: 703382
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    3. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    4. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    5. test_1_1_chat_edit_message, id: 702855
    Device sessions

    6. test_1_1_chat_send_image_save_and_share, id: 703391
    Device sessions

    7. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    2. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    @churik
    Copy link
    Member

    churik commented Sep 22, 2023

    Best to send it to design review, as it is follow-up on design issue.

    e2e failures rare not related.

    Francesca-G
    Francesca-G reviewed Sep 25, 2023
    View reviewed changes
    Copy link

    @Francesca-G Francesca-G left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Card height still doesn't match:

    Screenshot 2023-09-25 alle 10 45 57

    I think the spacing between the elements in the card is different than design and that may affect card height.

    @BalogunofAfrica
    Copy link
    Contributor Author

    BalogunofAfrica commented Sep 25, 2023 •
    edited
    Loading

    @Francesca-G 🤔

    It seemed to match when I overlayed implementation against the design

    Screenshot 2023-09-25 at 10 13 36

    @Francesca-G
    Copy link

    @Francesca-G 🤔

    It seemed to match when I overlayed implementation against the design

    Screenshot 2023-09-25 at 10 13 36

    I did the same but this was the result on Figma
    Please let me know if it's a problem on my side :)

    @BalogunofAfrica BalogunofAfrica force-pushed the fix/identifier-emoji-hash-line-height branch 2 times, most recently from dbc2073 to c881d3a Compare September 28, 2023 11:47
    @BalogunofAfrica
    Copy link
    Contributor Author

    @Francesca-G Can you please retry 🙂. I just confirmed again and it matches the height.

    @Francesca-G
    Copy link

    @Francesca-G Can you please retry 🙂. I just confirmed again and it matches the height.

    it doesn't match on my side 🤔 I don't know if it's a screen res problem, I'm using an iPhone 13 to test this.

    As you can see all the alignments inside the card don't match the design as well, so I think that's affecting the card height (which should be 184px)

    Screenshot 2023-09-28 alle 14 09 54

    @siddarthkay
    Copy link
    Contributor

    Hi @Francesca-G
    I helped @BalogunofAfrica test this by using iPhone 11 Pro as reference.
    I would take a screenshot from simulator then paste it in figma and resize width to 375 and then compare.
    and cc @J-Son89 I think we were told by Design team to use that as a reference.

    @J-Son89
    Copy link
    Contributor

    J-Son89 commented Sep 28, 2023

    Hi @Francesca-G I helped @BalogunofAfrica test this by using iPhone 11 Pro as reference. I would take a screenshot from simulator then paste it in figma and resize width to 375 and then compare. and cc @J-Son89 I think we were told by Design team to use that as a reference.

    yes you need to be using iphone 11 Pro to verify with Figma in this way, otherwise the sizes won't work. Additionally the screenshot needs to be from the phone/simulator (e.g not the laptop screenshot) so that the size is correct.
    Afaik the iphone 13 won't be accurate here 👍

    @siddarthkay
    Copy link
    Contributor

    Just realised we have this documented here : https://github.com/status-im/status-mobile/blob/develop/doc/pixel-perfection.md

    @BalogunofAfrica BalogunofAfrica force-pushed the fix/identifier-emoji-hash-line-height branch from c881d3a to ac7002b Compare September 29, 2023 12:23
    @BalogunofAfrica
    Copy link
    Contributor Author

    Hi @Francesca-G 🙂. Can this be merged?

    @Francesca-G
    Copy link

    Hi @Francesca-G 🙂. Can this be merged?

    Yes, apologies again for the device resolution problem we encountered.
    Moving it to the Merge column 🚀

    @BalogunofAfrica BalogunofAfrica force-pushed the fix/identifier-emoji-hash-line-height branch from ac7002b to 1c105f5 Compare October 4, 2023 07:30
    @BalogunofAfrica BalogunofAfrica merged commit f065aa1 into develop Oct 4, 2023
    6 checks passed
    @BalogunofAfrica BalogunofAfrica deleted the fix/identifier-emoji-hash-line-height branch October 4, 2023 07:44
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Reviewers

    @smohamedjavid smohamedjavid smohamedjavid approved these changes

    @flexsurfer flexsurfer flexsurfer approved these changes

    @yqrashawn yqrashawn Awaiting requested review from yqrashawn

    @Francesca-G Francesca-G Awaiting requested review from Francesca-G

    Assignees

    @BalogunofAfrica BalogunofAfrica

    Labels
    None yet
    Projects
    Pipeline for QA
    Archived in project
    Legacy QA Automation Project
    Archived in project
    Milestone
    No milestone
    Development

    Successfully merging this pull request may close these issues.

    Onboarding identifier carousel spacing
    8 participants
    @BalogunofAfrica @status-im-auto @churik @Francesca-G @siddarthkay @J-Son89 @flexsurfer @smohamedjavid