Hatch Not Connected message is hard to read

[Terran McCanna]

As of 3.12 if Hatch isn't set up, there is a "Not Connected" alert at the top of the Hatch Printer Settings Page. However, the text displays in yellow, so it's really difficult to read. Screenshot attached.

[Terran McCanna (tmccanna)]

Also, there is an "X" after Not Connected that looks like it was intended to be a "close" button, but it isn't clickable - I don't think it should actually be there at all.

[Stephanie Leary (stephanieleary)]

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2060316-hatch-settings-msg-colors

Here's a branch that uses badge-warning and badge-success styles instead of text-*, so that the background colors are set and we get adequate color contrast. I've changed the "X" icon to the warning triangle we use elsewhere, and rearranged the spans so that the icon keywords aren't marked for translation.

I think the order of connection status, checkbox, and danger message is somewhat confusing here. Should we break these up and show the checkbox on its own line, followed by the various statuses and warnings? See screenshot attached.