[$100] Apply latest design fixes

[jmgasper]

• Registration page https://marvelapp.com/prototype/9hihec1/screen/79676549/
• Login page: https://marvelapp.com/prototype/9hihec1/screen/79677899/
• Check your email page: https://marvelapp.com/prototype/9hihec1/screen/79678839/

Standards

https://platform.topcoder-dev.com/model/help/copilots-link

[jmgasper]

Challenge https://www.topcoder.com/challenges/0ac899d7-2c69-4169-84ef-b0195a991c1e has been created for this ticket.

This is an automated message for ghostar via Topcoder X

[jmgasper]

Challenge https://www.topcoder.com/challenges/0ac899d7-2c69-4169-84ef-b0195a991c1e has been assigned to obog.

This is an automated message for ghostar via Topcoder X

[atelomycterus]

@jmgasper A few issues with the latest design:

1. The image size is 644(w)x820(h)px. If fields are not valid, the height of a Lock widget > 820 px. Stretching the image will look ugly.

2. The CSS ::before/::after pseudo-elements cannot be added to text inputs. Adding a green checkmark is not possible without writing js code.
   

Lock widget emits events during its lifecycle, but API is limited. Changing / adding new elements using JS bypassing the official API can lead to errors or incorrect behavior of the widget.

There is no issues with adding a red x-mark because a div element with an error message added by a widget. The CSS ::before/::after pseudo-elements can be added to div element.

Code/Assets

1. Lock template with Topcoder settings - topcoder.dev.html.txt

2. The Check your email page - Issues-125: Check your email page #126.

Testing

1. Member Log in
   

2. The Check your email page:
   

[jmgasper]

Payment task has been updated: https://www.topcoder.com/challenges/0ac899d7-2c69-4169-84ef-b0195a991c1e
Payments Complete
Winner: obog
Copilot: ghostar
Challenge 0ac899d7-2c69-4169-84ef-b0195a991c1e has been paid and closed.

This is an automated message for ghostar via Topcoder X