feat: migrate setting modals

[Sembauke]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

• client/src/components/profile/components/time-line.tsx
• client/src/components/settings/delete-modal.tsx
• client/src/components/settings/reset-modal.tsx
• client/src/components/signout-modal/index.tsx
• client/src/components/SolutionViewer/exam-results-modal.tsx
• client/src/components/SolutionViewer/project-modal.tsx
• client/src/components/staging-warning-modal/index.tsx

Tests

• client/src/components/profile/components/time-line.tsx (Tested solution modal on solution-viewer.spec.ts )
• client/src/components/settings/delete-modal.tsx (Tested on delete-modal.spec.ts)
• client/src/components/settings/reset-modal.tsx (Tested on reset-modal.spec.ts)
• client/src/components/signout-modal/index.tsx (Tested on signout-modal.spec.ts)
• client/src/components/SolutionViewer/exam-results-modal.tsx (Tested on exam-reslts.spec.ts)
• client/src/components/SolutionViewer/project-modal.tsx (Tested solution modal on solution-viewer.spect.ts)
• client/src/components/staging-warning-modal/index.tsx (Tested on staging-warning-modal.spec.ts)

Ref #52759

[huyenltnguyen]

Did a quick test locally and the modals LGTM 👍

I'll do another round of testing once #54139 is in.

[huyenltnguyen]

Merged the latest main and the changes work great.

---

Though I noticed that when the modal is open, the close button is focused, but there is no focus outline around it. This issue cannot be reproduce in ui-components / Storybook, so I think it has something to do with /learn and its CSS overrides.

I'll create a ticket to track the issue separately.

Updated: Scratch this, I mixed up the interaction during testing. The modal is behaving as expected:

• If the user opens the modal via mouse click, the close button is automatically focused but there is no focus outline (it's expected that the focus outline doesn't show up)
• If the user opens the modal via keyboard, the close button is focused and there is a focus outline

---

Also, the Modal component currently aligns its body content to the left. I have created #54161 to allow customizing modal body alignment. We mostly want the body content to center, but there are some cases where the content should be left-aligned.

[ahmaxed]

Thank you for the hard work. I had to review this in a couple of rounds. Here are the suggestions for the first round:

client/src/components/SolutionViewer/project-modal.tsx
Close button should be on the right.

client/src/components/settings/delete-modal.tsx
Head text color, and Text weight
Close button should be on the right. (why do we have three close buttons. :) )

client/src/components/settings/reset-modal.tsx
Head text color, and Text weight

client/src/components/signout-modal/index.tsx
Head text color, and Text weight

client/src/templates/Challenges/components/reset-modal.tsx
Head text color, and Text weight

[huyenltnguyen]

@ahmaxed Thank you for the review, and I agree on the header styles needing to be fixed (it's one of those cases where /learn override the ui-components styles).

Close button should be on the left. (why do we have three close buttons. :) )

This one I was consider removing, tbh 😄 But I think it's better to keep unrelated changes in a separate PR.

---

Though could you elaborate on this change:

Close button should be on the left.

I assume you are referring to the "Close" button in the footer. This "Close" button is currently positioned on the right in prod (we didn't make any changes to this). Are you suggesting moving all of them to the left as a UI improvement, or did we make an unintended change somewhere and need to revert it?

[ahmaxed]

It would be wonderful if you could prioritize the modal header styles after this pr.
the close button on the footer is on the right in some instances and on the left in some.

[huyenltnguyen]

I've updated the PR with the following changes:

• Overriding h2 styles that /learn sets in order to have the modal title displayed correctly
  • I don't like polluting the global.css file. But either that or we have to update Modal.Header to accept className and having a CSS file for each modal component in /learn
• Adding the new alignment prop to Modal.Footer to support the alignment of the Close button
  • I did not add a Storybook demo for this prop as we will need to do some cleanup first. It's because we currently have a single alignment value used for Modal.Body, but Modal.Footer now also needs one. I'll raise a separate PR to sort out the Storybook setup.
• Correcting the alignment of the Close button in the project-modal footer
• Removing the Close button from delete-modal, as well as moving the other two buttons from Modal.Body to Modal.Footer for consistency

---

Screenshots of the modals after the changes

Modal	Screenshot
project-modal
delete-modal