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

Add Payment Method fill when menu is active #5981

Merged

Conversation

Santhosh-Sellavel
Copy link
Collaborator

@Santhosh-Sellavel Santhosh-Sellavel commented Oct 21, 2021

Details

Add fill background to Add Payment method when payment options are active.

Fixed Issues

$ #5915

Tests & QA Steps

  1. Go to Settings > Payments
  2. Tap or click on the Add Payment Method button
  3. Payment options will be shown, also now Add Payment Method will have active background fill

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

Screenshot 2021-10-23 at 12 32 07 AM

Mobile Web

Simulator Screen Shot - iPhone 12 - 2021-10-23 at 01 55 29

Desktop

Screenshot 2021-10-23 at 1 54 30 AM

iOS

Simulator Screen Shot - iPhone 12 - 2021-10-23 at 01 54 47

Android

Screenshot_1634934344

Sorry, something went wrong.

Unverified

No user is associated with the committer email.
@Santhosh-Sellavel Santhosh-Sellavel requested a review from a team as a code owner October 21, 2021 19:11
@MelvinBot MelvinBot requested review from Beamanator and removed request for a team October 21, 2021 19:11
@@ -26,6 +26,9 @@ const propTypes = {
/** Are we loading payments from the server? */
isLoadingPayments: PropTypes.bool,

/** Is payment options in menu visible to user? */
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Any other comment suggestion here? @Beamanator

Copy link
Contributor

@Beamanator Beamanator Oct 22, 2021

Choose a reason for hiding this comment

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

Hmm I'd probably change this to:

Suggested change
/** Is payment options in menu visible to user? */
/** Is the payment options menu open / active? */

Copy link
Contributor

@Beamanator Beamanator left a comment

Choose a reason for hiding this comment

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

A few tiny comments, but I also think @shawnborton and I may have confused you since here we decided we want the background color to be the color when the button is "active" (darker gray) and I see in the code you're using CONST.BUTTON_STATES.ACTIVE, but that ends up giving this effect:

Screen.Recording.2021-10-22.at.11.26.30.AM.mov

Is it easy to make the background that darker gray we see when clicking on the "Add payment menu" button?

@@ -26,6 +26,9 @@ const propTypes = {
/** Are we loading payments from the server? */
isLoadingPayments: PropTypes.bool,

/** Is payment options in menu visible to user? */
Copy link
Contributor

@Beamanator Beamanator Oct 22, 2021

Choose a reason for hiding this comment

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

Hmm I'd probably change this to:

Suggested change
/** Is payment options in menu visible to user? */
/** Is the payment options menu open / active? */

@Santhosh-Sellavel
Copy link
Collaborator Author

@Beamanator We have to use CONST.BUTTON_STATES.PRESSED to get Darker grey. Like this right?

Screenshot 2021-10-23 at 12 32 07 AM

Unverified

No user is associated with the committer email.
@Santhosh-Sellavel
Copy link
Collaborator Author

@Beamanator bump in case you missed, updated the PR. Let me know if am missing anything.

@Beamanator
Copy link
Contributor

Sorry for the delay @Santhosh-Sellavel - i'm back from some traveling :D will review again now!

Copy link
Contributor

@Beamanator Beamanator left a comment

Choose a reason for hiding this comment

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

Looks great 💪

@Beamanator Beamanator merged commit 66dc079 into Expensify:main Oct 27, 2021
@OSBotify
Copy link
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @Beamanator in version: 1.1.10-3 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 failure ❌
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @roryabraham in version: 1.1.11-1 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants