Implemented Revamped FAQ Page

[kea-roy]

Summary

Background

The FAQ page was never properly designed. After critique, the designers finalized a new layout and design for the FAQ page to match the style of our website and make it more convenient for the user. This Pull Request implements the revamped page based on the design on Figma.

Changes

This pull request made several component and layout changes to be more responsive and match the style of the page correctly.

• Revamped styling of CollapsibleQuestion component to match Figma.
• Revamped layout and styling of FAQ Page by switching to a grid layout.
• Revamped index.tsx and App.tsx structure to allow for the removal of the footer when on the FAQ Page.
• Added additional colors to colors.js.
• Added documentation for CollapsibleQuestion and FAQ Page.
• Tweaked style to be responsive so the design is correct for different screen sizes (mobile and desktop and tablet).

Test Plan

Tested the design for responsiveness by looking at different screen sizes and comparing it to the Figma

Desktop:

Code:

Figma:

Mobile:

Code vs Figma

I also tested the other web pages to make sure my index.tsx and App.tsx modifications did not break any pages.

[dti-github-bot]

[diff-counting] Significant lines: 237.

[ggsawatyanon]

Good job on this task, the styling looks great. I'm approving and merging your PR since it meets our functionality/visual requirements and we need it for the upcoming presentation. However, I want to highlight a few areas you should fix and create a new PR (and branch) for after this one is merged.

1. Naming convention
darkred: '#9C3B29',
You should change the name to red7 to match the other colors in the colors.js constants file. This is to keep the colors reusable and maintain our coding standards.

2. CollapsibleQuestion makeStyles definitions
For better code organization and performance, please move the makeStyles definitions outside of the component functions and place it directly below the import statements + Props. You can refer to our other pages such as LandlordPage and BookmarksPage for reference. This is because it also affects performance as every time the component is re-rendered, the styles also have to be re-calculated whereas if it is outside, it will be calculated only once and re-used.

3. FAQPage makeStyles definitions
Same as no. 2!

Other than these comments, good work!