Bid button styles

[gantgarrett]

Hey Michael,

I did some research on the Chakra UI button and with help from Google, I added a transparent background to the bid button. This may alleviate the confusing of the button when clicked.

Can you test the buttons on your end with the new change and let me know if you are still having the same issue with the buttons?

I did some tests on my end and it seems like the buttons are being fired on click without the hover state.

Let me know!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
spades-calculator	❌ Failed (Inspect)		Nov 17, 2022 at 3:51PM (UTC)

[mawil583]

@gantgarrett Do you have a way of testing this on an actual mobile device instead of chrome's devtools. The problem only exists on a real mobile device. When testing in Chrome's devtools, the problem doesn't exist, even before your fix.

Also, if all you're doing is making it transparent, that won't fix the problem. The problem isn't just the highlighting. The problem is that pressing and holding a button does not fire the onClick function. I suspect that there's a certain amount of time that has to pass while pressing-and-holding, in order for the highlight to be triggered. If you could increase that amount of time, that would fix it.

[mawil583]

@gantgarrett If you don't have a way of testing on a real mobile device, then I'd have to deploy your changes just for testing, which I don't want to do. So if that's the case, just pick up a different task.

[gantgarrett]

@gantgarrett Do you have a way of testing this on an actual mobile device instead of chrome's devtools. The problem only exists on a real mobile device. When testing in Chrome's devtools, the problem doesn't exist, even before your fix.

Also, if all you're doing is making it transparent, that won't fix the problem. The problem isn't just the highlighting. The problem is that pressing and holding a button does not fire the onClick function. I suspect that there's a certain amount of time that has to pass while pressing-and-holding, in order for the highlight to be triggered. If you could increase that amount of time, that would fix it.

[gantgarrett]

Hey Michael,

I tried using Browser Stack in order to test the button but you need to buy a premium plan in order to test for over 1 min. :(

My theory of the buttons are that on mobile, when you press/scroll over them it puts the button in a hover state. When the button gets highlighted, it is not really being pressed but hovered which can cause confusion on mobile devices.

That was my thought process and why I chose to go with a transparent background for the buttons.

Let me know your thoughts!

[mawil583]

@gantgarrett You don't need a paid program to test. Just connect your mobile device to your localhost:

https://prowe214.medium.com/tip-how-to-view-localhost-web-apps-on-your-phone-ad6b2c883a7c

[mawil583]

@gantgarrett There are also a bunch of YouTube walkthroughs. Here's one I came across:

https://youtu.be/y_Po6Gj8Gkg

[gantgarrett]

Hey Michael,

I tested the button on my mobile and I'm not having the hover issue any more.

Are you able to switch to my branch and test the buttons on your mobile now?

Let me know!

[mawil583]

Sure, but make sure you push your changes first.

[gantgarrett]

https://drafts.csswg.org/mediaqueries/#hover

Here's an article about media queries and hover. Let me know if this is what you have in mind? I will add code and have you review it.

[gantgarrett]

The latest changes are pushed. Media queries to disable hover on mobile and JS to make a check if the button is being hovered or not. Let me know if you have any questions!

[mawil583]

@gantgarrett I checked out your branch BidButtonStyles and this is what I'm seeing when I press and hold these buttons

https://user-images.githubusercontent.com/45023612/202353830-332c473f-c51a-4b43-ab19-24658fa9ecf8.MOV