Update alert styling to improve contrast

[aduth]

🎫 Ticket

Implementation for LG-9877

🛠 Summary of changes

Updates alert banner styling to improve contrast and consistency with USWDS.

📜 Testing Plan

1. Run npm start
2. Visit http://localhost:4000/alerts/
3. Validate changes

👀 Screenshots

Before	After

[aduth]

I would like to remove all of the files in this folder, but there's a few that are still currently in use:

• alerts/success.svg (used by "Success Message" and "Badge" components)
• alerts/error.svg (used by "Error Message" component)
• alerts/unphishable.svg (used by "Badge" component)

I'll plan to make these changes separately.

For all except the unphishable icon, I think it's a pretty straight-forward swap to use an equivalent Icon instead.

Two caveats:

• There's not a great equivalent design for unphishable icon. lock and lock_outline are pretty close, but they don't have the inverted circle effect that the current icon has.
• While Success and Error Message icons are applied in styles and can be done in a backwards-compatible manner, the badge icons are embedded in the actual markup, so this could be a breaking change if downstream projects are referencing the icon assets directly.
  • For this reason, it might make sense to keep at least success.svg and unphishable.svg assets present until the next major version release

[nickttng]

It makes sense to keep the success.svg and unphishable.svg until we consider the badges more thoroughly.

[nickttng]

LGTM!

[aduth]

Visual regression failure is expected for the stylistic changes: