Added `tippy.js/dist/border.css` along with some custom CSS override,
to add arrows which inherit the border color and width of the popover,
while also supporting all placements.
Also consolidates the CSS styling of the popovers to the `tippy-box`
element, which is the recommended way to theme the element according to
https://atomiks.github.io/tippyjs/v6/themes/#creating-a-theme.
This further helps in unifying the styling of the popover and the arrow,
and prevents inconsistencies such as shadow of the popover being casted
onto the arrows.
This commit introduces a theme switcher feature within the personal
menu popover. The implementation begins with the development of a
tab picker, which has the following features:
* Utilization of radio buttons to emulate the tab picker.
Radio input buttons provides the native way in HTML to select one
value out of a set.
* Support for both horizontal (default) and vertical orientations.
Vertical orientation can be achieved by appending the
`.tab-picker-vertical` class.
* Respects the `prefers-reduced-motion` option set by the user.
Disables the sliding tab animation to improve accessibility.
Additionally, the theme switcher component incorporates error handling
mechanisms. In the event of a server/network error, the tab slider
reverts to the previous theme option after a delay of 500ms. This
behavior visually communicates the occurrence of an error to the user,
improving the UX.
Fixes: #22803.
To address feedback that own emoji reactions were not sufficiently distinct, we increase
the prominence of one's own emoji reactions by:
- Setting a pixel-and-a-half border around own reactions.
- Reducing the alpha on the inner drop shadow of other reactions.
- Increasing the contrast on own reactions borders (and decreasing
them, in dark mode, on other reactions).
- Space around the emoji is maintained as in the current design in the own reactions.
Other reactions benefit from an additional half pixel of padding, top and bottom,
which is necessary to keep the pills (and the hover reaction button) the same
height as each other--regardless of whether there's an own reaction among them
or not. Padding is reduced in line with the increased border on own reactions.
