🧹 Refactor: Make the buttons across pages modular and consistent

[EDWIN1669086]

Context

There are a lot of buttons across the site, all implemented using HTML/CSS. Some are part of the KhanCard component and others are part of the interactive visual component of the page, as seen below:

Problem

Because everything was implemented in CSS and by different developers, there was no consistency between our design. Thus, each button has a different feel to it, which was not the original intention.

Proposed Solution

By making a Button React component, each page can simply import that component and the CSS pertaining to the component will be applied consistency among pages. The end result will model the KhanCard's button styling.

The basic props for Button are

• className: string
• onClick: handler function
• size: string (e.g. small, medium, large)
• color: string (e.g. red, orange, yellow, green, blue, purple, any-hex-color (#fcba03), etc. -- (have a default color))

Disclaimer:

• There is currently a Button React component. Please change this name to NavButton and change the component name usage in the pages accordingly.
• There may also be optional parameters, so account for those with default values, such as with disable used only in KhanCard. Also note that in the implementation, you will have to render children, which will usually be something like "Check" or "Next".
• To translate the standard colors (e.g. red, orange, yellow, etc.) to hex values as well as darken the CSS color on hover, you'll need to have a map that maps colorNames -> hex as well as hex -> (darker) hex, respectively.

---

This is a 🧹 Refactor Request