[Feat][UI] Format Course Details Data

[Jaylin0312]

Mockups / Screenshots

The current course details is not formatted as seen in the screenshot below:

Features

Instead of displaying the course details as a large block of unformatted text, the information should ideally be presented in a well-formatted and readable manner.

[davidlhw]

this issue is largely a result of how the data in obtained and stored in the db

for eg, bullet pointers are not stored as <ol><li/></ol> elements, for example, but rather, just stored as • characters

probably not as relevant to be a ui task in this repository

we can consider manipulating data like these in the FE but there won't be a way to guarantee it is as expected. probably better to address this logic with the way data is scrapped instead

[davidlhw]

confirmed that this is a bug on the FE. the database seem to have the correct text structure

the potential fix is mentioned in #168

This is likely due to the missing CSS property white-space: pre-wrap; on the review modal body theme at src/common/components/ReviewModal/ReviewModal.theme.ts#L25

[Jansen52x]

I would like to work on this issue.

[Jaylin0312]

Reopen this issue as https://github.com/AfterClass-io/afterclass.io-v2/pull/174 fixed review modal instead of course detail modal

[davidlhw]

the fix for the course page is similar but at another location: src/modules/reviews/InformationSection/InformationCard/InformationModal.tsx#L24

by adding a white-space: pre-wrap; css property to the <Modal.Body> like so:

<Modal.Body className={xxx}>