reactions: Increase prominence of own reactions.

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.

Author: karlstolley

web/styles/app_variables.css

@@ -282,12 +282,12 @@
     --color-tab-picker-icon: hsl(200deg 100% 40%);
 
     /* Reaction container colors */
-    --color-message-reaction-border: hsl(0deg 0% 0% / 12%);
-    --color-message-reaction-border-reacted: hsl(0deg 0% 0% / 40%);
+    --color-message-reaction-border: hsl(0deg 0% 0% / 10%);
+    --color-message-reaction-border-reacted: hsl(0deg 0% 0% / 45%);
     --color-message-reaction-background: hsl(0deg 0% 100%);
     --color-message-reaction-background-reacted: hsl(0deg 0% 100%);
     --color-message-reaction-background-hover: hsl(210deg 30% 96%);
-    --color-message-reaction-shadow-inner: hsl(210deg 50% 50% / 15%);
+    --color-message-reaction-shadow-inner: hsl(210deg 50% 50% / 8%);
     --color-message-reaction-text: hsl(210deg 20% 25% / 100%);
     --color-message-reaction-text-reacted: hsl(210deg 20% 20% / 100%);
     --color-message-reaction-button-text: hsl(210deg 20% 20% / 60%);
@@ -583,7 +583,7 @@
 
     /* Reaction container colors */
     --color-message-reaction-border: hsl(0deg 0% 100% / 15%);
-    --color-message-reaction-border-reacted: hsl(0deg 0% 100% / 50%);
+    --color-message-reaction-border-reacted: hsl(0deg 0% 100% / 70%);
     --color-message-reaction-background: hsl(0deg 0% 0% / 30%);
     --color-message-reaction-background-reacted: hsl(0deg 0% 0% / 80%);
     --color-message-reaction-background-hover: hsl(0deg 0% 100% / 10%);

web/styles/reactions.css

@@ -4,7 +4,9 @@
 
     .message_reaction {
         display: flex;
-        padding: 1px 4px 1px 3px;
+        /* Set a pixel and half padding to maintain
+           pill height adjacent own reactions. */
+        padding: 1.5px 4px 1.5px 3px;
         box-sizing: border-box;
         min-width: 44px;
         cursor: pointer;
@@ -22,6 +24,13 @@
             color: var(--color-message-reaction-text-reacted);
             background-color: var(--color-message-reaction-background-reacted);
             border-color: var(--color-message-reaction-border-reacted);
+            /* Make this border thicker by half a pixel,
+               to make own reactions more prominent. */
+            border-width: 1.5px;
+            /* Reduce the padding top and bottom by half
+               a pixel accordingly, to maintain the same
+               pill height. */
+            padding: 1px 4px 1px 3px;
             font-weight: var(--font-weight-message-reaction);
             box-shadow: none;
         }
@@ -37,7 +46,9 @@
         + .reaction_button {
             visibility: hidden;
             pointer-events: none;
-            padding: 4px 6px;
+            /* Set top/bottom padding to accommodate borders
+               and padding around reaction pills. */
+            padding: 4.5px 6px;
             height: 13px;
             border-radius: 21px;
             color: var(--color-message-reaction-button-text);