Refactor/minor issues clean up

[swh00tw]

• Replace all MediaQuery (useMediaQuery does not work with SSR styles chakra-ui/chakra-ui#2827) to avoid client side rerender when using mobile view in SSR mode. Most of useMediaQuery can be replaced by inline CSS syntax such as {base: "10px", md: "20px"}. Some mediaQuery can't be replaced by css syntax above (because ChakraUI does not let certain props like size of button receive these responsive value ), so I use useBreakpointValue hook recommended by ChakraUI to replace mediaQuery. (However I think useMediaQuery & useBreakpointValue have no difference 🤣. They both render default css value first and rerender if it detect it's mobile view. )
• Refactor course table card width so the table won't keep changing layout when adding, removing, hovering course (can compare to our current production site)
• Extract Hover Logic to improve responsiveness & performance (can compare to our current production site)
• Refactor some containers (Mostly extract component to replace renderSomthingFunnction = () => <>...</> so the component won't re-create on every render) & remove some unused code

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-78.westus2.azurestaticapps.net

[cypress]

---

Test summary

6 • 0 • 0 • 0

---

Run details

Project	E2E
Status	Passed
Commit	3f02149
Started	Jun 28, 2022 3:51 PM
Ended	Jun 28, 2022 3:51 PM
Duration	00:57 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 103

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-78.westus2.azurestaticapps.net

[jc-hiroto]

(However I think useMediaQuery & useBreakpointValue have no difference 🤣. They both render default css value first and rerender if it detect it's mobile view. )

Same thoughts here lol.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-78.westus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-78.westus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-78.westus2.azurestaticapps.net

[jc-hiroto]

I've tested this branch in person and added some useless elements.
Huge thanks for the efforts you put in refactoring this. 😍

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-78.westus2.azurestaticapps.net