[NT-574] Fix various spacing issues on Pledge screen #952

ifbarrera · 2019-11-18T15:51:50Z

📲 What

Fixes a few spacing issues we were seeing on the pledge screen.

spacing after the payment methods
button height on the PledgeCreditCardView and AddNewCardView should be consistent now

🤔 Why

Design/visual cleanup.

🛠 How

Updating the PledgeCreditCardView to use a layout guide instead of a spacer view in the stack view. The layout guide will now serve as a "spacer" in the scenario where the unavailable card label is shown.

👀 See

Trello, screenshots, external resources?

Before 🐛	After 🦋

♿️ Accessibility

Tap targets use minimum of 44x44 pts dimensions

🏎 Performance

N/A

✅ Acceptance criteria

Navigate to pledge screen and verify that the spacing after the payment methods section is reasonable

cdolm92 · 2019-11-19T23:15:10Z

The spacing still looks a little large, let me know what you think:

…NT-574 # Conflicts: # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_NeedsConversion_IsFalse_lang_en_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_NeedsConversion_IsTrue_lang_ja_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_de_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_de_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_en_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_es_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_es_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_fr_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_fr_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_ja_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_ja_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_de_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_de_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_en_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_en_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_es_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_es_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_fr_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_fr_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_ja_device_phone4_7inch_LoggedIn@2x.png

…NT-574

cdolm92 · 2019-11-20T19:45:06Z

Kickstarter-iOS/Views/Controllers/PledgeViewControllerTests.swift

+    let mockService = MockService(fetchGraphCreditCardsResponse: userEnvelope)
+    let project = Project.template
+      |> \.availableCardTypes .~ [GraphUserCreditCard.CreditCardType.discover.rawValue]
+    let device = Device.phone4inch


Can we test for the other devices?

cdolm92 · 2019-11-20T19:46:21Z

Kickstarter-iOS/Views/Controllers/PledgeViewControllerTests.swift

+        (.template |> \.id .~ "123")
+      )
+      |> \.availableCardTypes .~ [GraphUserCreditCard.CreditCardType.discover.rawValue]
+    let device = Device.phone4_7inch


…NT-574

…NT-574 # Conflicts: # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_NeedsConversion_IsFalse_lang_en_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_NeedsConversion_IsTrue_lang_ja_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_de_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_de_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_en_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_es_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_es_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_fr_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_fr_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_ja_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsFalse_lang_ja_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_de_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_de_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_en_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_en_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_es_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_es_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_fr_device_pad_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_fr_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_PledgeContext_NeedsConversion_IsTrue_lang_ja_device_phone4_7inch_LoggedIn@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_de_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_de_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_en_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_en_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_es_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_es_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_fr_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_fr_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_ja_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsFalse_lang_ja_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_de_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_de_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_en_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_en_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_es_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_es_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_fr_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_fr_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_ja_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_NeedsConversion_IsTrue_lang_ja_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_de_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_de_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_en_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_en_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_es_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_es_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_fr_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_fr_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_ja_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.PledgeViewControllerTests/testView_UpdateContext_withConversionLabel_lang_ja_device_phone4_7inch@2x.png

justinswart

Cool! Good idea to use UILayoutGuide, should remember that in future for tricky layout stuff.

ifbarrera added 7 commits November 14, 2019 16:14

Fixing spacing using needsSpacer

bed96ba

Spacer

446359e

Use layout margin instead of spacer, remove spacer output

cc2bb49

Screenshot tests

84dc643

Payment source button heights & screenshots

68b690a

Formatting

14c2fe3

Cleanup

8344384

ifbarrera assigned cdolm92 Nov 18, 2019

ifbarrera added the needs review label Nov 18, 2019

ifbarrera requested review from cdolm92, justinswart and Scollaco and removed request for cdolm92 November 18, 2019 15:52

ifbarrera added 4 commits November 20, 2019 10:54

Remove spacer on Add New Card view & tests

36b6016

Formatting

956965f

Merge branch 'master' of https://github.com/kickstarter/ios-oss into …

6d4f22c

…NT-574

cdolm92 suggested changes Nov 20, 2019

View reviewed changes

ifbarrera added 2 commits November 20, 2019 16:42

Merge branch 'master' of https://github.com/kickstarter/ios-oss into …

5d6c718

…NT-574

Adding more screenshots

e72ea23

ifbarrera requested a review from cdolm92 November 20, 2019 21:52

ifbarrera added 2 commits November 21, 2019 11:36

Screenshots

44f9d97

justinswart approved these changes Nov 21, 2019

View reviewed changes

cdolm92 approved these changes Nov 21, 2019

View reviewed changes

ifbarrera merged commit b9a29f2 into master Nov 21, 2019

ifbarrera deleted the NT-574 branch November 21, 2019 18:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NT-574] Fix various spacing issues on Pledge screen #952

[NT-574] Fix various spacing issues on Pledge screen #952

ifbarrera commented Nov 18, 2019

cdolm92 commented Nov 19, 2019

cdolm92 Nov 20, 2019

cdolm92 Nov 20, 2019

justinswart left a comment

[NT-574] Fix various spacing issues on Pledge screen #952

[NT-574] Fix various spacing issues on Pledge screen #952

Conversation

ifbarrera commented Nov 18, 2019

📲 What

🤔 Why

🛠 How

👀 See

♿️ Accessibility

🏎 Performance

✅ Acceptance criteria

cdolm92 commented Nov 19, 2019

cdolm92 Nov 20, 2019

Choose a reason for hiding this comment

cdolm92 Nov 20, 2019

Choose a reason for hiding this comment

justinswart left a comment

Choose a reason for hiding this comment