🧹 Refactor: Modularize Buttons

[EDWIN1669086]

Context

Right now, all the buttons used in the learning lab are coded as raw HTML buttons.

Problem

In React, the idea is to wrap commonly used elements as a component since it is easier to read, test, and make changes. Also, we are using one-line css attributes that are not necessary.

Proposed Solution

The idea is to have a button component as follows:

<CustomButton backgroundColor="some-color" hoverColor="#9500ae">Click me!</CustomButton>

Note that you'll have to use the .shared-button class, remove the other CSS one-liners, and then inline-style for the correct background color and hover color. For completeness sake, also add an optional disabled prop (defaulted false) so that we can use this component within the KhanCard and FinishCard. Besides those "Check" buttons, the other button usage places are as follows:

• Excursion 2, Understand the Problem ("Play")
• Excursion 3, Understand the Problem ("Next")
• Problem4.tsx ("Next")
• BinarySearchExample.tsx ("Lower", "Higher")

Also note that it would be best if you support not only "#[some-alpha-numeric-characters]" but also the generic colors, such as "red", "orange", "yellow", "green", "blue", "purple" as CSS would define them. In other words, both the propr backgroundColor and hoverColor should support a hex code string as well as a regular color name string (Think of using a map). This makes the programmers' life easier so they don't have to find the hex code for a simple color every time.

---

This is a 🧹 Refactor Request