From ddf14116b256eb1bee2375c534b48236716fbfef Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Fri, 31 May 2024 07:34:28 +0000 Subject: [PATCH] emoji_popover: Fix white arrow color in dark theme. Tested left, top and bottom placement of emoji popover to check if arrow color is correctly displayed in both dark and light theme. --- web/styles/app_variables.css | 4 ++++ web/styles/popovers.css | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 60648f8355..4cda902f78 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -508,6 +508,8 @@ --color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%); --color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%); --color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%); + /* Same color as background color of header / footer */ + --color-border-emoji-picker-tippy-arrow: hsl(0deg 0% 93%); } %dark-theme { @@ -810,6 +812,8 @@ --color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%); --color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%); --color-border-add-subscription-button-focus: hsl(0deg 0% 67%); + /* Same color as background color of header / footer */ + --color-border-emoji-picker-tippy-arrow: hsl(211.58deg 33.33% 11.18%); } @media screen { diff --git a/web/styles/popovers.css b/web/styles/popovers.css index d2b430ff93..16bf1a7045 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -873,11 +873,15 @@ ul { /* The emoji popover has a different background color for the header and footer, so we customize the arrow to match this color. */ .tippy-box[data-placement="top"] .tippy-arrow::before { - border-top-color: hsl(0deg 0% 93%); + border-top-color: var(--color-border-emoji-picker-tippy-arrow); } .tippy-box[data-placement="bottom"] .tippy-arrow::before { - border-bottom-color: hsl(0deg 0% 93%); + border-bottom-color: var(--color-border-emoji-picker-tippy-arrow); + } + + .tippy-box[data-placement="left"] .tippy-arrow::before { + border-left-color: var(--color-border-emoji-picker-tippy-arrow); } }