UI Revamp for HomePage and LoginPage

[kylerwsm]

Problem

This PR will be part of a series of PRs to revamp the existing React frontend user interface to our proposed v2 designs.

Note that the left segment on the login page in desktop view is currently a tentative placeholder colour-fill. It will be replaced once the image to display on the segment is confirmed.

May close #1.

Solution

The landing page and login page was mostly rebuilt from the ground up, in a mobile-first approach. This involves building for the smallest supported screen before working our way up. The smallest supported browser width will be 375px, used in iPhone 6/7/8/X.

Issue #1 is partially completed with the web application being about to rotate and animate links on its landing page graphic while not being clickable. This is done using the typed.js React component counterpart. Links to rotate will be fetched from the backend via an API endpoint, where the backend will then retrieve these links from runtime environment variables. This is done so that these links to rotate can be changed without make code changes. On the frontend, a default path to show can also be set. The new environment variable was also added to README.md.

Improvements:

• Upgraded Eslint packages, and integrated Prettier. To deconflict formatting preferences between Eslint and Prettier, several Eslint config packages were also installed. More information on the config packages and what they do here.

• Restructured and renamed components according to Airbnb React style guide, in particular the structure and naming of directory root components.

• Migrated Material-UI withStyles to its makeStyles counterpart. Using makeStyles allows us to pass dynamic props to our stylings.

• Proposing single-file components by converting several components like HomePage and LoginPage to it. Single file components are self-contained components that stores its stylings, script and markup all in a single file. I find this to make code more modular and tend to cause less coupling.

• Deprecated the use of individual component horizontal margins by introducing an app wide margin container component ApplyAppMargins. For individual components that are not bounded by app margins, I have also created an IgnoreAppMargins container component.

• Page graphics used were previous .png files. Most of them are changed to .svg, with the exception of ministry logos.

• Created a container component that scrolls the child page to the top if it was routed from a different page via React router.

Tests

The HomePage and LoginPage should look good on both mobile and desktop view. I have tested this on Safari, Chrome, FireFox. and IE11. For IE11, because of its limited CSS capabilities, the app may look slightly off on smaller windows.

Above improvements and fixes should be tested on different browsers, including IE11, Chrome, FireFox, and Safari.

Deploy Notes

New environment variables:

• ROTATED_LINKS : List of comma separated path of links to rotate on the landing page.

New dependencies:

• classnames: Allows easy concatenation of multiple className classes.
• @types/classnames, @types/react-router-dom : Type packages.

New dev dependencies:

• eslint-config-prettier: Turns off rules in Eslint that conflicts with Prettier.
• eslint-plugin-prettier: Integrate Prettier into Eslint, which then runs it as an Eslint rule.
• prettier: Code formatter. Added a .prettierrc.json file to better standardise our code formatting.

[kylerwsm]

Force-pushed to resolve merge conflicts

[yong-jie]

release checklist passed