As shown below, alignment of some items is unbalanced:
{F3180928}
- The icon is not centered between the left margin and the text to its right (highlighted in green in the screenshot).
- The "X" for closing is not right-aligned with the timestamp (highlighted in blue).
- The padding for the whole notification is also inconsistent: Top margins (in yellow) and side margins (green and blue) are different.
- The timestamp text also looks too small.
{F3181092}
- For actions, the text and icon are very different in size (highlighted in orange).
- The separation between actions is small. Icons should be closer to their label than they are to the previous action in order to group visually the items that belong together. Note the purple highlight does not represent a significative difference in space.
# Proposed adjustments
Adjusting the above layout we can get a more consistent spacing:
{F3180789}
The adjustments I made (indicated in Ems since those are the units used despite [[ http://codepen.io/anon/pen/JdoZRG?editors=110 | I'm not a fan ]]):
- **Notification item (.mw-echo-ui-notificationItemWidget).** Adjust padding to 0.8em in all sides. This requires to adjust the notification content (.mw-echo-ui-notificationItemWidget-content) left padding to be 3.3em (so that the icon has 0.8em space on both sides).
- **Close button (oo-ui-icon-close).** For a button, it makes sense to have an active target space around it, but that causes it to be misaligned. I move it 0.5em to the right so that it is visually aligned with the timestamp below by making it's position relative (not sure if there is a better option).
- **Small text (mw-echo-ui-notificationItemWidget-content-actions).** I've set the text size to 0.9em. The former 0.8em seemed too small.
{F3181168}
- **Action icon (oo-ui-iconElement-icon),** Adjust the size to 1.5em to avoid the icon being too big compared with the text (which was increased to 0.9em as part of the timestamp adjustment described above)
- **Actions (".mw-echo-ui-notificationItemWidget-content-actions-button:not(:last-child)") separation.** Set right margin to 1em to separate actions more clearly.
- **Action group (".mw-echo-ui-notificationItemWidget-content-actions").** Margin top adjusted to 0.8em.
- **Panel width.** Additionally, we could increase the general width of the panels (both notifications and alerts) from the current 450px to 500px:
{F3181201}