Attention! This is a fast code challenge! The submission phase is 48 hours and the review, appeals phases are shorter than usual.

Make sure you don’t miss any deadline!

 

In this very simple challenge, you need to fix the styles in the Profile Settings page to make the updated Profile Settings responsive based on our new storyboard design (link on the challenge forum).

 

The work is to be done in Community App, out of the latest commit in new-develop branch.

You should follow the best practices established in the repository:

• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

• Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;

• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

• Do not break existing unit tests.

• Etc.;

 

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Challenge scope

You need to update the styles (SCSS) in the following pages:

• Settings > Profile

• Settings > Tools

• Settings > Preferences

Supported devices

• Desktop (already done)

• Tablet

• Mobile

Final Submission Guidelines

- Submit a git patch for the latest commit in the https://github.com/topcoder-platform/community-app/tree/new-develop

branch and a demo video showing your submission in action.

- Make sure to mention the exact commit so we can apply your patch file.

- The winner must create a PR against our https://github.com/topcoder-platform/community-app/tree/new-develop