reposition alert icon to baseline

[yjwangit]

The banner is not shown in the app so I put it on the homepage.

[richardxia]

Hi @yjwangit, sorry for the delayed review, but thanks for getting this PR out!

While your changes get the display of the component to be closer to the images, I think there's more that we can do to get the alignment closer. Baseline alignment can be tricky at times, but let me try to explain a few concepts so that I can make a few suggestions to make things even closer.

At a high level, you can see that the blue boxes in the following screenshots are not aligned:

The blue boxes show the content bounding boxes of the elements, the <img> element and the <strong> element, respectively, and you can make it display like this when opening up the developer tools built into the browser (Control + Shift + C for Google Chrome on Windows) and hovering over the respective HTML elements in the DOM view.

Baseline alignment is trickier than other types of alignment since it is fundamentally based on text rendering. The baseline refers to the bottom of letters, where in Latin alphabets, it excludes the "descenders" like the tail of a "j" or a "q". Because of ascenders and descenders, there usually needs to be extra space between different rows of text. The full height of a row of text is the combination of the font size as well as the line-height property. For example, a text element with a font-size of 24px and a line-height of 1.2 would have a total content box of 24 * 1.2 = 28.8px.

Generally, when you want to align images to the baseline of text, in addition to ensuring that alignment style is set to baseline, as you have done here, you usually want to 1) make sure the font-size and line-height properties are set to the same values as nearby font, and 2) add some additional fixed margin to account for the descender (since none exist for the icon). For the fixed margin, you may need to actually add negative top margin in order to "pull" the icon up a bit. I would also suggest that the additional margin be specified in em units, which are relative to the font size. This would make sure that if a user configures their browser to a larger or smaller font size than what we specify, then the margin is appropriately scaled.

Let me know if you have any questions about this, and sorry again for the delayed review.