Challenge Overview
Here is a new proof-of-concept piece of functionality we want to implement rapidly inside Community App before TCO17 dates: Member Payments pages (check this challenge's forum for proper credentials to see it in action). As you see, at the moment we have just a rought UI mock-up with some of the underlying functionality implemented. Within this challenge you'll take care about the styling according to the following specs:
At the payments listing page:
All around no need to touch the actual logic behind the pages: only styling and separation into component is in scope. Keep in mind that we work on the underlying logic in parallel, so avoid doing anything that overcomplicate the merge of parallel work together. Use the latest commit in develop branch (225cbd4e643175437d71bbba5bc77fc711bf51c8 at the moment of writing) as the starting code, and be sure to follow our Coding Standards.
- Specs for payment creation and result pages
- Payments listing page - at the moment I have only a png image with the look of this page, but I believe, it should be enough to implements its look & feel.
At the payments listing page:
- Ensure that's project select field works properly (now it is necessary to click outside of the field first, to remove the focus, before another click on it can open the dropdown list);
- Ensure that in the payments table a single row is implemented as a separate react component, and the payment status is another separate component.
- For user avatars in the table use the standard https://github.com/topcoder-platform/community-app/tree/develop/src/shared/components/Avatar (no need to wire for the actual user avatars, the default anonymous image is fine for now);
- The general design of the page should be implemented as well (as no exact specs provided, no need for pixel-perfect accuracy).
All around no need to touch the actual logic behind the pages: only styling and separation into component is in scope. Keep in mind that we work on the underlying logic in parallel, so avoid doing anything that overcomplicate the merge of parallel work together. Use the latest commit in develop branch (225cbd4e643175437d71bbba5bc77fc711bf51c8 at the moment of writing) as the starting code, and be sure to follow our Coding Standards.