Currently, our review opportunity details page only supports desktop devices and it looks broken on mobile devices.

In this challenge, you need to make this page responsive based on the provided design (attached on the challenge forum, available on registration) so it looks good on tablets and mobile devices.

 

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

You should follow the best practices established in the repository:

• Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;

• 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.;

Detailed Requirements

• Update the styles of the existing Review Opportunity Details page to make it responsive.

• Do not duplicate any code to create different versions for desktop and for tablet/mobile. All changes need to be done using SCSS.

• Reuse the existing mixins for breakpoints etc

Supported devices

The following devices are in scope of this challenge:

• Desktop

• Tablet (fluid version of mobile)

• Mobile

 

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

Final Submission Guidelines

Submit a git patch for the latest commit in the 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 develop branch.