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

Implement gradient cover component #16778

Merged
merged 9 commits into from
Jul 31, 2023
Merged

Implement gradient cover component #16778

merged 9 commits into from
Jul 31, 2023

Conversation

smohamedjavid
Copy link
Member

fixes #16607

Summary

This PR implements the gradient cover component which is needed for wallet screen development.

Design

Link to Figma

Platforms

  • Android
  • iOS

Steps to test

  • Open Status
  • Navigate to Quo2 Preview > gradient > gradient cover

status: ready

@smohamedjavid smohamedjavid self-assigned this Jul 25, 2023
@status-im-auto
Copy link
Member

status-im-auto commented Jul 25, 2023 •
edited
Loading

Jenkins Builds

Click to see older builds (20)
❔ Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 80be867 #1 2023-07-25 17:59:48 ~6 min ios 📱ipa 📲
✔️ 80be867 #1 2023-07-25 17:59:58 ~6 min android-e2e 🤖apk 📲
✔️ 80be867 #1 2023-07-25 17:59:59 ~6 min android 🤖apk 📲
✔️ 80be867 #1 2023-07-25 18:01:40 ~8 min tests 📄log
✔️ 183665d #2 2023-07-25 19:34:29 ~5 min android 🤖apk 📲
✔️ 183665d #2 2023-07-25 19:35:39 ~6 min ios 📱ipa 📲
✔️ 183665d #2 2023-07-25 19:36:49 ~7 min android-e2e 🤖apk 📲
✔️ 183665d #2 2023-07-25 19:38:01 ~9 min tests 📄log
✔️ 5104106 #3 2023-07-26 10:08:59 ~6 min android-e2e 🤖apk 📲
✔️ 5104106 #3 2023-07-26 10:09:08 ~7 min android 🤖apk 📲
✔️ 5104106 #3 2023-07-26 10:10:11 ~8 min ios 📱ipa 📲
✔️ 5104106 #3 2023-07-26 10:11:08 ~9 min tests 📄log
✔️ d46b048 #4 2023-07-28 10:13:31 ~8 min android-e2e 🤖apk 📲
✔️ d46b048 #4 2023-07-28 10:13:46 ~8 min android 🤖apk 📲
✔️ d46b048 #4 2023-07-28 10:15:00 ~9 min tests 📄log
✔️ d46b048 #4 2023-07-28 10:20:07 ~14 min ios 📱ipa 📲
✔️ 4b88f84 #5 2023-07-28 14:56:40 ~6 min android-e2e 🤖apk 📲
✔️ 4b88f84 #5 2023-07-28 14:56:42 ~6 min android 🤖apk 📲
✔️ 4b88f84 #5 2023-07-28 14:59:32 ~9 min tests 📄log
✔️ 4b88f84 #5 2023-07-28 15:01:32 ~11 min ios 📱ipa 📲
❔ Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ d4ece43 #6 2023-07-28 17:03:00 ~6 min android-e2e 🤖apk 📲
✔️ d4ece43 #6 2023-07-28 17:04:23 ~7 min android 🤖apk 📲
✔️ d4ece43 #6 2023-07-28 17:04:30 ~7 min ios 📱ipa 📲
✔️ d4ece43 #6 2023-07-28 17:06:24 ~9 min tests 📄log
✔️ 7f089ea #7 2023-07-31 06:57:50 ~6 min ios 📱ipa 📲
✔️ 7f089ea #7 2023-07-31 06:59:54 ~9 min android 🤖apk 📲
✔️ 7f089ea #7 2023-07-31 07:00:01 ~9 min android-e2e 🤖apk 📲
✔️ 7f089ea #7 2023-07-31 07:00:36 ~9 min tests 📄log

@smohamedjavid smohamedjavid marked this pull request as ready for review July 25, 2023 18:03
J-Son89
J-Son89 approved these changes Jul 26, 2023
View reviewed changes
Copy link
Contributor

@J-Son89 J-Son89 left a comment

Choose a reason for hiding this comment

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

nice one @smohamedjavid! :)

@smohamedjavid smohamedjavid force-pushed the feature/gradient-cover-component branch from 183665d to 5104106 Compare July 26, 2023 10:01
@smohamedjavid
Copy link
Member Author

@Francesca-G - Can you help us do a design review on this PR?

briansztamfater
briansztamfater approved these changes Jul 26, 2023
View reviewed changes
Copy link
Member

@briansztamfater briansztamfater left a comment

Choose a reason for hiding this comment

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

🚀

@smohamedjavid smohamedjavid force-pushed the feature/gradient-cover-component branch from 5104106 to d46b048 Compare July 28, 2023 10:04
@smohamedjavid
Copy link
Member Author

@Francesca-G - Appreciate your review of this component.

@Francesca-G
Copy link

@Francesca-G - Appreciate your review of this component.

Hello, sorry for the late reply. Due to issues related to some PRs I'm not able to review this for the time being, the PR instantly crashes after being installed.

They're investigating to solve it and as soon as I'm able to view it correctly I will review this :)

@Francesca-G
Copy link

@churik this PR has this same issue (crashing after installation)
Please let me know if in this case it's a problem on my side :)

@smohamedjavid
Copy link
Member Author

Interesting! 🤔

@Francesca-G - Can you try build #3?

#16778 (comment)

@Francesca-G
Copy link

@Francesca-G - Please try the latest build.

We found the commit (1c405d3) causing the crash.

CC: @churik

it works now, thank you 🙏

@siddarthkay
Copy link
Contributor

yeah its my mistake actually, in PR #16803 (comment)
E2E didn't catch it because it runs Android and the issue was in IOS

@siddarthkay siddarthkay mentioned this pull request Jul 28, 2023
Merged
Francesca-G
Francesca-G reviewed Jul 28, 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.

Everything looks good about the component itself.

The Yin Yan style (black and white) is missing from the color options, I don't know if you're planning on implementing that.

Also, I noticed this happening on Android: a half circle with opacity on the selected color (this happened with every color).

Screenshot_2023-07-28-17-18-16-383_im status ethereum pr

Full screenshot:

Screenshot_2023-07-28-17-18-16-383_im status ethereum pr copia

Hope this helps :)

@smohamedjavid
Copy link
Member Author

Everything looks good about the component itself.

Thanks a lot for the quick review @Francesca-G Duly appreciate it!

The Yin Yan style (black and white) is missing from the color options, I don't know if you're planning on implementing that.

Last month, we temporarily removed the Yin Yan (black and white) color as it caused some issues with syncing between Desktop and Mobile. We will add that color back into the customization color palette once the issue is resolved.

Also, I noticed this happening on Android: a half circle with opacity on the selected color (this happened with every color).

The color-picker component was added below the gradient for easy selection.

Can you check the color-picker component from your device? because the color-picker looks good on both simulator and physical device.

@Francesca-G
Copy link

Can you check the color-picker component from your device? because the color-picker looks good on both simulator and physical device

The color-picker component also looks like this (on Android only):

image_28-07-2023_17-53-03

@smohamedjavid
Copy link
Member Author

@Francesca-G - Can you help us check the color-picker component on other PR builds which are ready for design review? Because nightly won't have the "Quo2 preview" screen.

@Francesca-G
Copy link

@Francesca-G - Can you help us check the color-picker component on other PR builds which are ready for design review? Because nightly won't have the "Quo2 preview" screen.

I was only able to check this PR #16781 (comment) and this one also has the same issue with the color picker. Unfortunately I don't have any other build ready for design review at the moment.

@smohamedjavid
Copy link
Member Author

I was only able to check this PR #16781 (comment) and this one also has the same issue with the color picker. Unfortunately I don't have any other build ready for design review at the moment.

Thanks, @Francesca-G for checking other builds. It looks like this component is not behaving as expected in your device.

Please help us raise a bug as this issue is more of device-specific. Additionally, add a description regarding your phone model. This will help us debug the issue.

I hope the PR can be merged. If yes, approval would be much appreciated.

@smohamedjavid smohamedjavid force-pushed the feature/gradient-cover-component branch from 4b88f84 to d4ece43 Compare July 28, 2023 16:56
@status-im-auto
Copy link
Member

90% of end-end tests have passed

Total executed tests: 40
Failed tests: 4
Passed tests: 36

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

Failed tests (4)

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 TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_pin_messages, id: 702732 

    Test is not run, e2e blocker

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

    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 TestActivityCenterContactRequestMultipleDevicePR:

    1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851

    Device 2: Tap on found: Button
    Device 2: Find EditBox by accessibility id: profile-title-input 

    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:234: in create_user
    self.set_profile(username)
../views/sign_in_view.py:218: in set_profile
    self.profile_your_name_edit_box.set_value(username)
../views/base_element.py:352: in set_value
    self.find_element().set_value(value)
../views/base_element.py:80: in find_element
    raise NoSuchElementException(
 Device 2: EditBox by accessibility id: `profile-title-input` is not found on the screen



    Device sessions

    Passed tests (36)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_mute_chat, id: 703495
    Device sessions

    2. test_group_chat_send_image_save_and_share, id: 703297
    Device sessions

    3. test_group_chat_reactions, id: 703202
    Device sessions

    4. test_group_chat_join_send_text_messages_push, id: 702807
    Device sessions

    5. test_group_chat_offline_pn, id: 702808
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_activity_center_mentions, id: 702957
    Device sessions

    2. test_navigation_jump_to, id: 702936
    Device sessions

    3. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    Device sessions

    4. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_activity_center_contact_request_decline, id: 702850
    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_delete_via_long_press_relogin, id: 702784
    Device sessions

    4. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    5. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    7. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    8. test_1_1_chat_edit_message, id: 702855
    Device sessions

    9. test_1_1_chat_send_image_save_and_share, id: 703391
    Device sessions

    10. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    2. test_community_undo_delete_message, id: 702869
    Device sessions

    3. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    4. test_community_mute_community_and_channel, id: 703382
    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_mentions_push_notification, id: 702786
    Device sessions

    7. test_community_message_delete, id: 702839
    Device sessions

    8. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    9. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    10. test_community_message_edit, id: 702843
    Device sessions

    11. test_community_leave, id: 702845
    Device sessions

    12. test_community_unread_messages_badge, id: 702841
    Device sessions

    @briansztamfater briansztamfater mentioned this pull request Jul 28, 2023
    Merged
    @smohamedjavid
    [Feature] Implement Gradient Cover component
    b5a2a43 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    [Feature] Add test for Gradient Cover component
    df54b0a 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Preview data update
    1c3f66b 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Replace color with customization-color
    e095245 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Remove flex
    ea6ef38 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Update mock image for blur
    f75213c 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Upgrade react-native-linear-gradient library to v2.8.0
    18f9684 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Fix mock image for blur in preview
    e9aecdb 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid
    Sort requires
    7f089ea 
    Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
    @smohamedjavid smohamedjavid force-pushed the feature/gradient-cover-component branch from d4ece43 to 7f089ea Compare July 31, 2023 06:50
    Francesca-G
    Francesca-G approved these changes Jul 31, 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.

    Created a separate issue #16815 for the color picker bug on Android

    @smohamedjavid
    Copy link
    Member Author

    Thanks @Francesca-G!

    @smohamedjavid smohamedjavid merged commit 162f02e into develop Jul 31, 2023
    2 checks passed
    @smohamedjavid smohamedjavid deleted the feature/gradient-cover-component branch July 31, 2023 07:19
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Reviewers

    @OmarBasem OmarBasem OmarBasem approved these changes

    @erikseppanen erikseppanen erikseppanen approved these changes

    @briansztamfater briansztamfater briansztamfater approved these changes

    @J-Son89 J-Son89 J-Son89 approved these changes

    @Francesca-G Francesca-G Francesca-G approved these changes

    @jakubgs jakubgs Awaiting requested review from jakubgs jakubgs is a code owner

    Assignees

    @smohamedjavid smohamedjavid

    Labels
    feature feature requests
    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.

    Implement Quo2 Gradient / Gradient Cover component
    8 participants
    @smohamedjavid @status-im-auto @Francesca-G @J-Son89 @siddarthkay @erikseppanen @briansztamfater @OmarBasem