Consistent design for notification items

[Nutomic]

Requirements

• [x] This is a feature request and not a bug report. Otherwise, please create a new bug report instead.
• [x] Please check to see if this request (or a similar one) already exists.
• [x] It's a single feature. Please don't request multiple features in one issue.

Describe the feature you'd like

Notification items reuse the existing views which are not consistent. For example button sizes and margins are different, private messages have a border on top.

Here is an example, first post then comment and finally private message:

[dessalines]

It could be very difficult to try to create a generic notification component, because you might lose a lot of the functionality included in the typed components. The dropdowns, actions, votes, special displays, context...

I have either another issue or a comment about this, but the markable / mark as read capability is the main thing that needs to be uniform. Whether that exists inside the CommentNode / PostListing, or whether it lives outside as a checkbox somewhere outside the item, is the main thing.

Also tho, this is a good use-case for continuing to make the components have a uniform style. The comment node looks out of place because its action buttons are on the left, unlike the post listing (which should also allow voting there btw).

The private message also doesn't have action bars or the time component aligned to the right, and has a pointless collapse button.

[Nutomic]

It would make sense to handle mark as read via a button on the notification item, instead of using the buttons for marking post/comment as read. Because all of them need to go through /api/v4/account/notifications/mark_as_read and can reuse the same logic, avoiding conversions from post_id to notification_id etc. But then we would have to merge the notification and post action buttons together somehow.

[dessalines]

We might just be forced to use / add the markable prop on all these, and put it in their own action bars.