woocommerce-ios icon indicating copy to clipboard operation
woocommerce-ios copied to clipboard

Inconsistent button fill color

Open designsimply opened this issue 4 years ago • 2 comments

In Dark Mode, the loading state for the Continue button should have a black fill but sometimes it's white.

Steps to reproduce:

  1. Go to My Store > Settings > Switch store.
  2. Select a different store.
  3. Tap Done.
  4. Expect the button fill to be black and show a spinner inside it similar to other areas of the app.

Result: the spinner is there but the button fill is white which doesn't match with other areas of the app.

White button fill in Switch Store Black button fill elsewhere
img_3952 img_3939

Tested with WCiOS 6.0.0.1 TestFlight beta, iPhone 6S, iOS 13.7.

designsimply avatar Feb 16 '21 02:02 designsimply

A related problem came up in WCiOS 7.0 beta testing where the continue button on the switch store screen is sometimes not readable in dark mode. Updating the background color would resolve this.

I got into a weird state when switching stores with the Continue button displaying white on white (apparently because the Jetpack connection was not working):

Screen Shot 2021-06-29 at Jun 29 7 17 03 PM

(internal reference: p5T066-2rI-p2#comment-8963 /hat tip @elibud)

designsimply avatar Jun 30 '21 01:06 designsimply

Tested this again with WCiOS 9.8 and still happens.

The problem seems to come because we subclass this button from WordPressUI's FancyAnimatedButton, specifically to get the activity indicator animation. While this is happening, the button is set to disabled (so the user can't tap again while the system is pulling WC data to switch sites) and the colour that applies to the button background to show this in the UI is:

(lldb) po actionButton.disabledBackgroundColor
UIExtendedGrayColorSpace 1 1

The first number being white, and the second number being alpha, in a 0-1 range, this translates to "white and opaque".

iamgabrielma avatar Aug 26 '22 09:08 iamgabrielma