Update banner component svg icon

[bilfeldt]

Currently the banner component always show a success icon (check-circle) regardless of the style applied for the component.

This PR simply changes this so that the current success icon (check-circle) is only used when the component style is success whereas a more neutral information icon (exclamation-circle) is used otherwise (meaning for style='danger' or any other custom styles added).

This PR uses the check-circle icon for style='success', the icon exclamation-circle for style='danger' and uses information-cicle as fallback for other styles + uses bg-gray-500 for the topbar in this case (had no background before this PR).

When style='success'

When style='danger'

Otherwise

[driesvints]

Can you post some screenshots please?

[bilfeldt]

Can you post some screenshots please?

While of cause Dries 👍

When style == 'success'

Otherwise (including `style='danger')

@driesvints Actually there are three icons which I would consider relevant exclamation-circle, information-circle and check-circle. Which ones would you prefer that we use, then I can update this PR?

I suggest changing it to:

danger (use exclamation-circle):

success (use check-circle):

Otherwise (use information-circle):

Note that if providing a style different from 'danger' or 'success' right now, the component does not apply any background so default is white text on a white background. Maybe worthwhile adding a fallback neutral bg-gray-500 background in case another style is provided?

[driesvints]

Thanks!

Which ones would you prefer that we use, then I can update this PR?

Taylor will need to decide on that.

[bilfeldt]

@driesvints PR has now been updated to my own preferred solution, let us see what Taylor thinks then :)

PR description has been updated to reflect changes and includes screen dumps of current PR.