Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Karl Stolley 2024-02-28 15:04:11 -06:00 committed by GitHub
parent 5d604a4429
commit 7930209929
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/app_variables.css
View File

@ -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%);

15
web/styles/reactions.css
View File

@ -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);