update balance warnings visually and for accessability

[johrstrom]

In #989 during the bootstrap 4 upgrade I noticed the balance warnings could use some work.

• For accessibility we shouldn't be using <h4>, instead probably list items.
• The text is a little larger than it was, so we probably need to tweak the font sizes.

I'm also wondering if every balance warning is an alert instead of the entire group being the alert. Not sure about that, I guess it'd have to be thought through during the work.

┆Issue is synchronized with this Asana task by Unito

[ericfranz]

I thought they were grouped like quota warnings but could be wrong. What we do here should be done to quota warning too

[johrstrom]

They are currently group. I guess that's what I'm wondering out loud, if it should be 1 alert or N.

So here's vaguely what the structure is.

<div role="alert">
   <div class="balance-group">
     <div class="insufficient-balance-resource">
        <!-- the h4 text -->
     </div>
  </div>
</div>

And I'm wondering if it should be this, where the role="alert" is pushed down to each resource.

<div>
   <div class="balance-group">
     <div class="insufficient-balance-resource" role="alert">
       <!-- the h4 text -->
     </div>
  </div>
</div>

But if we changed to list items instead of div > h4, maybe that'd be all we need.