Community App - Member payments - UI styling

Register
Submit a solution
The challenge is finished.

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:
  • 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).
     
At two other pages (create / edit payments, and payment creation / update status) be sure to implement the styling according the specs, and ensure that all select fields work the same way as the project selection field in the listing.

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.

Final Submission Guidelines

Submit Git patch for Community App.

Review style

Final Review

Community Review Board

Approval

User Sign-Off

Challenge links

ID: 30059934