Refine the colors of some more components (#12343)

* Refine the colors of some more components

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system:

- Message bubbles
- Pills
- Sent indicators
- Jump to bottom/unread buttons
- Composer placeholder
- Notification badges
- Room sublists
- Verification shields
- Date separators
- Tooltips

Closes https://github.com/element-hq/element-web/issues/22122

* Update some screenshots

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -28,8 +28,8 @@ $light-fg-color: $header-panel-text-secondary-color;
 /* used for focusing form controls */
 $focus-bg-color: $room-highlight-color;
 
-$pill-bg-color: $room-highlight-color;
-$pill-hover-bg-color: #545a66;
+$pill-bg-color: var(--cpd-color-gray-1000);
+$pill-hover-bg-color: var(--cpd-color-gray-1100);
 
 /* informational plinth */
 $info-plinth-bg-color: $header-panel-bg-color;
@@ -217,7 +217,6 @@ $inlinecode-background-color: #2a3039;
 $eventbubble-self-bg: #14322e;
 $eventbubble-others-bg: $event-selected-color;
 $eventbubble-bg-hover: #1c2026;
-$eventbubble-reply-color: #c1c6cd;
 
 /* Location sharing */
 /* ******************** */