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.

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

Fix sticker pack installation buttons #8985

Conversation

marcusrbrown
Copy link
Contributor

@marcusrbrown marcusrbrown commented Sep 13, 2019

Fixes #8936

Summary

  • Removes extra margin on SNT icon
  • Fixes SNT icon display on owned sticker packs
  • Distinguishes between free and owned sticker packs and displays appropriate label

Steps to test

  • Open Status
  • Recover wallet with husband rough hotel obey annual you member reopen struggle air evoke taxi
  • Join public chat
  • Open Stickers
  • View Sticker Packs

status: ready

@marcusrbrown marcusrbrown requested a review from a team as a code owner September 13, 2019 05:54
@status-github-bot
Copy link

Hey @igetgames, and thank you so much for making your first pull request in status-react! ❤️ Please help us make your experience better by filling out this brief questionnaire https://goo.gl/forms/uWqNcVpVz7OIopXg2

@auto-assign auto-assign bot removed the request for review from a team September 13, 2019 05:54
@status-github-bot
Copy link

Pull Request Checklist

  • Have you updated the documentation, if impacted (e.g. docs.status.im)?

@status-im-auto
Copy link
Member

status-im-auto commented Sep 13, 2019

Jenkins Builds

Click to see older builds (36)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 52fd656 #1 2019-09-13 06:03:04 ~8 min ios 📦ipa 📲
✔️ 52fd656 #1 2019-09-13 06:08:32 ~13 min android-e2e 📦apk 📲
✔️ 52fd656 #1 2019-09-13 06:08:38 ~13 min android 📦apk 📲
52fd656 #2 2019-09-28 17:51:19 ~35 sec android 📄log
52fd656 #2 2019-09-28 17:51:23 ~33 sec linux 📄log
52fd656 #2 2019-09-28 17:51:23 ~35 sec ios 📄log
52fd656 #2 2019-09-28 17:51:30 ~36 sec macos 📄log
52fd656 #2 2019-09-28 17:51:33 ~36 sec windows 📄log
✔️ 52fd656 #2 2019-09-28 18:02:04 ~11 min android-e2e 📦apk 📲
7565812 #2 2019-09-13 23:17:12 ~24 sec android 📄log
7565812 #2 2019-09-13 23:17:13 ~21 sec ios 📄log
7565812 #2 2019-09-13 23:28:13 ~11 min android-e2e 📄log
e8822cd #3 2019-09-13 23:29:00 ~18 sec android 📄log
e8822cd #3 2019-09-13 23:29:05 ~20 sec ios 📄log
8bed445 #4 2019-09-13 23:37:55 ~22 sec ios 📄log
8bed445 #4 2019-09-13 23:37:55 ~26 sec android 📄log
✔️ 8bed445 #4 2019-09-13 23:48:35 ~11 min android-e2e 📦apk 📲
8bed445 #1 2019-09-15 22:01:22 ~35 sec android 📄log
8bed445 #1 2019-09-15 22:01:43 ~27 sec ios 📄log
✔️ 8bed445 #1 2019-09-15 22:14:03 ~12 min android-e2e 📦apk 📲
8bed445 #1 2019-09-17 06:51:10 ~41 sec windows 📄log
8bed445 #1 2019-09-17 06:51:27 ~35 sec macos 📄log
8bed445 #1 2019-09-17 06:54:38 ~4 min linux 📄log
fb26be1 #3 2019-09-28 20:38:16 ~23 sec ios 📄log
fb26be1 #3 2019-09-28 20:38:16 ~21 sec linux 📄log
fb26be1 #3 2019-09-28 20:38:17 ~18 sec macos 📄log
fb26be1 #3 2019-09-28 20:38:17 ~28 sec android 📄log
fb26be1 #3 2019-09-28 20:38:24 ~22 sec windows 📄log
✔️ fb26be1 #3 2019-09-28 20:48:28 ~10 min android-e2e 📦apk 📲
✔️ b9be6d7 #4 2019-09-28 20:56:52 ~8 min ios 📦ipa 📲
✔️ b9be6d7 #4 2019-09-28 21:00:29 ~11 min macos 📦dmg
b9be6d7 #4 2019-09-28 21:00:33 ~11 min windows 📄log
✔️ b9be6d7 #4 2019-09-28 21:02:23 ~13 min linux 📦App
b9be6d7 #4 2019-09-28 21:02:43 ~14 min android 📄log
✔️ b9be6d7 #4 2019-09-28 21:02:52 ~14 min android-e2e 📦apk 📲
b9be6d7 #5 2019-10-04 13:51:31 ~12 min android 📄log
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 3d56251 #5 2019-10-07 03:06:56 ~11 min macos 📦dmg
✔️ 3d56251 #5 2019-10-07 03:07:44 ~12 min ios 📦ipa 📲
3d56251 #6 2019-10-07 03:08:23 ~13 min android 📄log
✔️ 3d56251 #5 2019-10-07 03:08:33 ~13 min android-e2e 📦apk 📲
✔️ 3d56251 #5 2019-10-07 03:09:13 ~13 min linux 📦App
✔️ 3d56251 #5 2019-10-07 03:10:10 ~14 min windows 📦exe
✔️ 3d56251 #7 2019-10-08 08:04:36 ~11 min android 📦apk 📲
✔️ e71324c #6 2019-10-09 00:01:05 ~8 min ios 📦ipa 📲
✔️ e71324c #6 2019-10-09 00:04:43 ~12 min macos 📦dmg
✔️ e71324c #6 2019-10-09 00:06:08 ~13 min linux 📦App
✔️ e71324c #6 2019-10-09 00:06:30 ~13 min windows 📦exe
✔️ e71324c #8 2019-10-09 00:06:47 ~14 min android 📦apk 📲
✔️ e71324c #6 2019-10-09 00:06:54 ~14 min android-e2e 📦apk 📲

@yenda
Copy link
Contributor

yenda commented Sep 13, 2019

@errorists does it fix the issue?

IMG_0028
IMG_0030
IMG_0029
IMG_0027

translations/en.json Outdated Show resolved Hide resolved
@errorists
Copy link
Contributor

So, on the buttons with the icon and SNT, the left margin is still too large, I believe that's caused by the left padding on the button. Would it help if I'd export the image asset without any padding? The alternative would be a conditional 0 left padding if there is an image inside or something to that effect.

@statustestbot
Copy link

98% of end-end tests have passed

Total executed tests: 46
Failed tests: 1
Passed tests: 45

Failed tests (1)

Click to expand
1. test_long_press_to_delete_public_chat

Device 1: Looking for a message by text: 'test message'
Device 1: Wait for ChatElementByText

Chat history is shown

Device sessions

Passed tests (45)

Click to expand
1. test_block_user_from_public_chat
Device sessions

2. test_filters_from_daap
Device sessions

3. test_copy_and_paste_messages
Device sessions

4. test_send_transaction_from_daap
Device sessions

5. test_deploy_contract_from_daap
Device sessions

6. test_open_transaction_on_etherscan
Device sessions

7. test_public_chat_messaging
Device sessions

8. test_long_press_to_delete_1_1_chat
Device sessions

9. test_password_in_logcat_sign_in
Device sessions

10. test_text_message_1_1_chat
Device sessions

11. test_add_to_contacts
Device sessions

12. test_sign_typed_message
Device sessions

13. test_unread_messages_counter_1_1_chat
Device sessions

14. test_ens_in_public_chat
Device sessions

15. test_logcat_send_transaction_from_daap
Device sessions

16. test_send_message_in_group_chat
Device sessions

17. test_logcat_send_transaction_from_wallet
Device sessions

18. test_send_token_with_7_decimals
Device sessions

19. test_offline_messaging_1_1_chat
Device sessions

20. test_modify_transaction_fee_values
Device sessions

21. test_send_eth_from_wallet_to_address
Device sessions

22. test_add_account_to_multiaccount_instance
Device sessions

23. test_manage_assets
Device sessions

24. test_send_emoji
Device sessions

25. test_search_chat_on_home
Device sessions

26. test_logcat_recovering_account
Device sessions

27. test_can_add_existing_ens
Device sessions

28. test_messaging_in_different_networks
Device sessions

29. test_logcat_sign_message_from_daap
Device sessions

30. test_switch_users_and_add_new_account
Device sessions

31. test_send_stt_from_wallet
Device sessions

32. test_login_with_new_account
Device sessions

33. test_start_chat_with_ens
Device sessions

34. test_add_contact_from_public_chat
Device sessions

35. test_send_two_transactions_one_after_another_in_dapp
Device sessions

36. test_password_in_logcat_creating_account
Device sessions

37. test_backup_recovery_phrase
Device sessions

38. test_offline_status
Device sessions

39. test_open_google_com_via_open_dapp
Device sessions

40. test_unread_messages_counter_public_chat
Device sessions

41. test_sign_message_from_daap
Device sessions

42. test_user_can_remove_profile_picture
Device sessions

43. test_share_contact_code_and_wallet_address
Device sessions

44. test_refresh_button_browsing_app_webview
Device sessions

45. test_backup_recovery_phrase_warning_from_wallet
Device sessions

@marcusrbrown
Copy link
Contributor Author

So, on the buttons with the icon and SNT, the left margin is still too large, I believe that's caused by the left padding on the button. Would it help if I'd export the image asset without any padding? The alternative would be a conditional 0 left padding if there is an image inside or something to that effect.

If the price icon is intended to be used in other places, reexporting it would be best. Let me know if you'd like me to add the conditional padding inside the price badge.

@dependency-lockfile-snitch
Copy link

desktop/js_files/yarn.lock and mobile/js_files/yarn.lock changed. Pinging @jakubgs, @pombeirp, and @corpetty

@yenda
Copy link
Contributor

yenda commented Sep 17, 2019

@errorists the message above was addressed to you, please provide the icon without padding

@rachelhamlin
Copy link
Contributor

@igetgames just so you're in the know, we're currently at our team offsite in Istanbul and responding a bit more slowly than usual this week. We'll get you the icon and I'll pay the bounty as soon as this is merged. Thanks for your patience!

@marcusrbrown
Copy link
Contributor Author

@rachelhamlin Understood, thanks for the heads up!

@errorists
Copy link
Contributor

@igetgames hey, sorry once again for the delay. Here's the updated asset, it's 16 by 16 in size without the added padding.

This is how the button's padding should look like, basically 6px horizontally and align in the middle vertically.
Screenshot 2019-09-23 at 08 19 53

@yenda
Copy link
Contributor

yenda commented Sep 28, 2019

Hey @igetgames ! Are you still planning on completing the issue?

@churik churik self-assigned this Oct 4, 2019
@statustestbot
Copy link

100% of end-end tests have passed

Total executed tests: 47
Failed tests: 0
Passed tests: 47

Passed tests (47)

Click to expand
1. test_block_user_from_public_chat
Device sessions

2. test_filters_from_daap
Device sessions

3. test_copy_and_paste_messages
Device sessions

4. test_send_transaction_from_daap
Device sessions

5. test_deploy_contract_from_daap
Device sessions

6. test_open_transaction_on_etherscan
Device sessions

7. test_public_chat_messaging
Device sessions

8. test_long_press_to_delete_1_1_chat
Device sessions

9. test_password_in_logcat_sign_in
Device sessions

10. test_text_message_1_1_chat
Device sessions

11. test_add_to_contacts
Device sessions

12. test_sign_typed_message
Device sessions

13. test_unread_messages_counter_1_1_chat
Device sessions

14. test_ens_in_public_chat
Device sessions

15. test_logcat_send_transaction_from_daap
Device sessions

16. test_send_message_in_group_chat
Device sessions

17. test_logcat_send_transaction_from_wallet
Device sessions

18. test_send_token_with_7_decimals
Device sessions

19. test_offline_messaging_1_1_chat
Device sessions

20. test_modify_transaction_fee_values
Device sessions

21. test_send_eth_from_wallet_to_address
Device sessions

22. test_add_account_to_multiaccount_instance
Device sessions

23. test_manage_assets
Device sessions

24. test_long_press_to_delete_public_chat
Device sessions

25. test_send_emoji
Device sessions

26. test_search_chat_on_home
Device sessions

27. test_logcat_recovering_account
Device sessions

28. test_can_add_existing_ens
Device sessions

29. test_messaging_in_different_networks
Device sessions

30. test_logcat_backup_recovery_phrase
Device sessions

31. test_logcat_sign_message_from_daap
Device sessions

32. test_switch_users_and_add_new_account
Device sessions

33. test_send_stt_from_wallet
Device sessions

34. test_login_with_new_account
Device sessions

35. test_start_chat_with_ens
Device sessions

36. test_add_contact_from_public_chat
Device sessions

37. test_send_two_transactions_one_after_another_in_dapp
Device sessions

38. test_password_in_logcat_creating_account
Device sessions

39. test_backup_recovery_phrase
Device sessions

40. test_offline_status
Device sessions

41. test_open_google_com_via_open_dapp
Device sessions

42. test_unread_messages_counter_public_chat
Device sessions

43. test_sign_message_from_daap
Device sessions

44. test_user_can_remove_profile_picture (TestRail link is not found)
Device sessions

45. test_share_contact_code_and_wallet_address
Device sessions

46. test_refresh_button_browsing_app_webview
Device sessions

47. test_backup_recovery_phrase_warning_from_wallet
Device sessions

@churik
Copy link
Member

churik commented Oct 4, 2019

@igetgames would you mind to rebase your PR to latest develop?
Seems that can be the reason why Android can't be built

@marcusrbrown
Copy link
Contributor Author

@igetgames would you mind to rebase your PR to latest develop?
Seems that can be the reason why Android can't be built

I've rebased against latest develop.

@jakubgs
Copy link
Member

jakubgs commented Oct 7, 2019

Your android build works, but the CI job fails due to a test failure:

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'create-react-class'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Module._load (internal/modules/cjs/loader.js:507:25)
    at Function.hookedLoader [as _load] (/home/jenkins/workspace/status-react_prs_android_PR-8985/target/test/test.js:14:10)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at /home/jenkins/workspace/status-react_prs_android_PR-8985/target/test/reagent/impl/util.js:22:168
    at Object.<anonymous> (/home/jenkins/workspace/status-react_prs_android_PR-8985/target/test/reagent/impl/util.js:28:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
Error encountered performing task 'doo' with profile(s): 'test'
Subprocess failed

@churik
Copy link
Member

churik commented Oct 8, 2019

@errorists would you mind to take a look?

@Serhy Serhy self-assigned this Oct 8, 2019
@Serhy
Copy link
Contributor

Serhy commented Oct 8, 2019

Tested with iOS12.4.1 and Android 8.1
↓ Free ↓ Install, Blue/Grey colour, green checkmark when sticker installed are aligned and displayed respectively between Sticker marked view and particular sticker view (sticker detail screen)

@errorists if you are OK with current state then lets merge PR?

@errorists
Copy link
Contributor

✅ just tested, looks good. thanks @igetgames

@jakubgs
Copy link
Member

jakubgs commented Oct 8, 2019

Please first squash all the commits into one. I won't merge this as 6 different commits.

@flexsurfer
Copy link
Member

thanks @igetgames , could you please squash commits please

@marcusrbrown marcusrbrown force-pushed the fix/8936-sticker-installation-buttons branch from 3d56251 to e71324c Compare October 8, 2019 23:52
@marcusrbrown
Copy link
Contributor Author

I was at work earlier and couldn't respond. Here's the squashed commit as requested.

- Fix sticker pack installation buttons
- Add "↓ Free" text and update "Install" text
- Distinguish between owned and free sticker sets
- Rename owned -> owned? in price-badge
- Add tiny-snt icon
- Update the sticker price badge icon and padding

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
@flexsurfer flexsurfer force-pushed the fix/8936-sticker-installation-buttons branch from e71324c to 22de1f7 Compare October 9, 2019 06:25
@flexsurfer flexsurfer merged commit 22de1f7 into status-im:develop Oct 9, 2019
@rachelhamlin
Copy link
Contributor

Hey, thanks so much @igetgames! Awesome work. I just paid this one out. Let me know if you'd like to take on any other issues.

@marcusrbrown marcusrbrown deleted the fix/8936-sticker-installation-buttons branch October 9, 2019 16:38
@marcusrbrown
Copy link
Contributor Author

Hey, thanks so much @igetgames! Awesome work. I just paid this one out. Let me know if you'd like to take on any other issues.

Thanks! It was fun diving into Status, and I definitely will be applying to work on other issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Fix installation buttons for sticker packs
10 participants