Minor UI issue in homepage, while toggling night mode.

Affected Page https://www.freecodecamp.org/learn and all the pages in which we are flashing We have updated your preferences this message on changing of Night Mode

To Reproduce Steps to reproduce the behavior:

1. Go to ‘https://www.freecodecamp.org/learn’ and sign in/ sign up
2. Click on ‘Menu’ button on navigation bar and select night mode ON/OFF
3. After selecting the night mode, you will see a message flashes with text We have updated your preferences

Expected behavior The text in the message and button should be in the center. But it is not centered.

Screenshots

Desktop (please complete the following information):

• OS: MacOs
• Browser: Chrome
• Version: 97.0.4692.71 (Official Build) (arm64)

[GoonerBrian]

Thanks, will do. It’s also this way with the flash-message that popups when a user signs in for the first time. I’ll play around with it. It’s okay if you decide to kept it as-is. If you could, please keep this open until next Monday!

[ahmadabdolsaheb]

Although we need to keep the close button in the same spot for consistency, I could see how this would be confusing for larger screens. We could create a visual guide by reducing the width of the notification component to a container with a max-width and have it cover the default layout.

Since we are in the process of creating a component library and the alert component is already in, I would prefer making iterations on the alert component once the UI library is in use.

Thank you for creating this issue. I am closing this issue for now as we will be addressing it among others in the upcoming iterations of the UI component library.