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

[Native Checkout] CTAs polish #800

Merged
merged 17 commits into from
Aug 16, 2019
Merged

[Native Checkout] CTAs polish #800

merged 17 commits into from
Aug 16, 2019

Conversation

cdolm92
Copy link
Contributor

@cdolm92 cdolm92 commented Aug 14, 2019

📲 What

This PR addresses the following:

  • Changing the label on the thanks screen to a button
  • CTAs are now aligned vertically when the device is in portrait mode
  • CTAs are now aligned horizontally when the device is in landscape mode
  • Add highlight states to checkout buttons using the checkout style buttons

🤔 Why

Closing out small visual issues found during the consolidation of Checkout button styles throughout the rest of the app.

👀 See

See snapshots below.

Thanks Screen Before 🐛 Thanks Screen After 🦋
Image from iOS (3) Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 29 27
CTA Portrait CTA Vertical
Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 25 59 Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 26 07
Manage Highlight Back this project
Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 26 42 Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 26 33
Fix Highlight View pledge Highlight
Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 34 27 Simulator Screen Shot - iPhone Xs - 2019-08-15 at 15 33 23

♿️ Accessibility

  • Tap targets use minimum of 44x44 pts dimensions
  • Works with VoiceOver
  • Supports Dynamic Type

✅ Acceptance criteria

  • To See Thanks Screen On the Explore screen tap on a project and back it. Scroll down to view the See All [CATEGORY] projects button.
  • Test CTAs in View Pledge Screen Navigate to your profile and tap on a non-live project in the backed section. If the device is in portrait mode CTAs should be vertical, if on landscape CTAs should be horizontal. Rotate device, check for CTAs to be aligned correctly.\
  • Highlight states Navigate to project screen. tap down on the CTA button. Compare button color to designs.

⏰ TODO

  • self-review
  • Will add screenshots
  • CTAs in View Pledge screen should be next to each other in landscape

@cdolm92 cdolm92 changed the title Ios button polish [Native Checkout] CTAs polish Aug 14, 2019
@cdolm92 cdolm92 marked this pull request as ready for review August 15, 2019 19:45
Copy link
Contributor

@justinswart justinswart left a comment

Choose a reason for hiding this comment

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

Looking good! Just the one suggestion really.

self.actionsStackViewAxis = Signal.merge(
self.viewDidLoadProperty.signal,
self.viewWillTransitionProperty.signal
).map { _ in AppEnvironment.current.device.orientation.isPortrait ? .vertical : .horizontal }
Copy link
Contributor

Choose a reason for hiding this comment

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

I think instead of inspecting the orientation we actually want to check the UITraitCollection's sizeClass.

So this would be horizontalSizeClass == .regular and for this we would have an input for traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?).

Copy link
Contributor

@justinswart justinswart left a comment

Choose a reason for hiding this comment

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

Nice!

@cdolm92 cdolm92 merged commit cc7ff5e into master Aug 16, 2019
@cdolm92 cdolm92 deleted the ios-button-polish branch August 16, 2019 16:48
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

2 participants