747159 - Prettify the payment modal

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P2)

Description

[krupa raj[:krupa]]

steps to reproduce:
1. Load https://marketplace-dev.allizom.org/en-US/app/backpack/?src=search
2. Click on the purchase button

observed behavior:
Issues-

* Currency selector looks like a clickable button.
* The payment section should look like http://cl.ly/1R0i3z1B3O1T1F00313J
* Put the 'x' link to close the icon outside of the box.

Comment 1

[Davor Spasovski [:spasovski]]

done: https://github.com/mozilla/zamboni/commit/9b69d42

Comment 2

[krupa raj[:krupa]]

(In reply to krupa raj 82[:krupa] from comment #0)
 
> * Currency selector looks like a clickable button.
> * The payment section should look like http://cl.ly/1R0i3z1B3O1T1F00313J
> * Put the 'x' link to close the icon outside of the box.

None of these issues have been addressed.

Also, The lightbox contracts after a few seconds. See http://screencast.com/t/e7rmIQ22wO6

Comment 3

[Davor Spasovski [:spasovski]]

The lightbox contraction is expected since JS is resizing the modal to fit its contents. If this is a deal-breaker we can talk about it. It should ensure we never get scrollbars again which means the X-close can stay as is.

done: https://github.com/mozilla/zamboni/commit/42bd6b9

Comment 4

[krupa raj[:krupa]]

I checked with fligtar and he wants the lightbox contraction to be fixed. It has a very jarring user experience.

Comment 5

[krupa raj[:krupa]]

Also, we need to change the copy- "Make a one time payment using your credit card." to "Make a one time payment using your PayPal account".

Comment 6

[Davor Spasovski [:spasovski]]

done: https://github.com/mozilla/zamboni/commit/34d6f50

Comment 7

[krupa raj[:krupa]]

This looks way better now. Although the currency selector could still use some help.