Hey @alishapapun! Thanks for opening this PR.

The CSS * {} element is risky because the * affects all CSS elements globally. This could introduce a bug somewhere else in the front-end since all elements inherit this element. In our case, we should target the CSS change specific to the alert box. This reduces the scope of what this change could (accidentally) affect.

First, I want to explain how I did my debugging to figure out what CSS elements to edit. For this, I used Firefox Web Developer Tools (FFWDT) while running the app locally. Specifically, I used the Inspector. I won't explain how to use Firefox Web Developer Tools in this comment, but there is an excellent blog post introduction to using them. If you use Chrome, it has similar tools but I am not personally familiar with them.

Next, I'll walk through how I discovered what CSS elements to change. After I sent a Packet to myself and triggered the alert box, I right-clicked on the red alert box and chose the Inspect Element option. This opened FFWDT to exactly where the code is for the alert box in the HTML document.

From there, I used the Inspector to see what CSS was applied to the alert box:

In the middle pane, do you see the .alert CSS rules? These are being inherited by the bootstrap theme we use in FHP. Since we download these minified CSS files and they are not editable, we need to override some of the rules in custom.css. Since there is no CSS for alert boxes yet, we need to add two sections: .alert {} and .alert ul {}.

To test this without rebuilding all of the Docker images, I manually edited the CSS from the FFWDT Inspector. I was able to test out my changes and see how they looked in real-time. I added some rules to make the alert box look like this:

Using the two sections I suggested above, see if you can figure out how to get the alert box to look like the screenshot above.

Also, here are some links of things I read while reviewing the PR:

• What does an Asterisk (*) do in a CSS selector? - stackoverflow.com
• CSS * Selector - w3schools.com

Thanks, @jflory7 for such a descriptive explanation. I have added the font-size in the * selector because, FHP follows font-size -1.4 rem, if any element (like error message) have been missed to adhere to default font-size, it will get corrected. But, since this ticket aims for the error message only, increasing the font-size to .alert will be better. I have made the changes you asked me to make. Thanks for linking the resources as well. :)

No problem. The new changes look good. :thumbsup: Thanks for the quick update!

Merging! :ocean: