Update Alert banner message-body to match design system

[Monkeychip]

The new design system has the alert banner text black. This PR updates that.

To have the least impact on other elements/components using the .message-body class I created a new .scss file for alert-banners and renamed the class it's using. This keeps the change contained to the alert-banner component.

Here are the design system pictures:

Here is the before the fix:

Here is the fix with the PR:

[chelshaw]

I really like the way you approached this (creating a new scss file for the component). Just one small comment, but looks great!

[andaley]

it looks like the border and margin-top here have the same values as the original message-body class. in that case, what do you think about extending message-body so these styles aren't duplicated? this way if we make any other styling changes to all messages (perhaps a new font or font weight, etc), they'll apply here too. i.e.:

.alert-banner-message-body {
@extend .message-body
color: $black;
}

[Monkeychip]

Ah, that's a great idea. I didn't know you could do that. Thanks!

[Monkeychip]

@noelledaley ... um. 🤔 this doesn't seem to work because message-body color is overriding the black here. I would have to use !important after black to make it work, and that doesn't seem like an optimal solution.