paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

user_card_popover: Update text item colors to improve contrast.

Browse Source 
This commit updates the color of the text items in the user card popover
which are mostly user related information, to use the new Zulip color
palette.

This increases the contrast of the custom profile fields and other user
related information such as the user's local time and status text to
improve readability.

Fixes part of #31027.
This commit is contained in:
Sayam Samal
2024-07-24 01:39:16 +05:30
committed by Tim Abbott
parent ee26f16d67
commit 1f020816c2
2 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/app_variables.css
View File

@@ -654,6 +654,7 @@
--color-text-personal-menu-some-status: hsl(0deg 0% 40%); --color-text-personal-menu-some-status: hsl(0deg 0% 40%);
--color-text-sidebar-heading: hsl(0deg 0% 43%); --color-text-sidebar-heading: hsl(0deg 0% 43%);
--color-text-sidebar-popover-menu: hsl(0deg 0% 20%); --color-text-sidebar-popover-menu: hsl(0deg 0% 20%);
--color-text-user-card-secondary: var(--grey-550);
--color-text-url: hsl(200deg 100% 40%); --color-text-url: hsl(200deg 100% 40%);
--color-text-url-hover: hsl(200deg 100% 25%); --color-text-url-hover: hsl(200deg 100% 25%);
--color-text-settings-field-hint: hsl(0deg 0% 57%); --color-text-settings-field-hint: hsl(0deg 0% 57%);
@@ -1056,6 +1057,7 @@
--color-text-personal-menu-no-status: hsl(0deg 0% 100% 35%); --color-text-personal-menu-no-status: hsl(0deg 0% 100% 35%);
--color-text-personal-menu-some-status: hsl(0deg 0% 100% 50%); --color-text-personal-menu-some-status: hsl(0deg 0% 100% 50%);
--color-text-sidebar-popover-menu: hsl(236deg 33% 90%); --color-text-sidebar-popover-menu: hsl(236deg 33% 90%);
--color-text-user-card-secondary: var(--grey-400);
/* 75% opacity of --color-text-default against --color-background. /* 75% opacity of --color-text-default against --color-background.
We use color-mix here to avoid defining a separate, compounding We use color-mix here to avoid defining a separate, compounding
`opacity` property, and also to preserve a record of the `opacity` property, and also to preserve a record of the

2
web/styles/popovers.css
View File

@@ -130,6 +130,8 @@
} }
.user-card-popover-actions { .user-card-popover-actions {
--color-text-item: var(--color-text-user-card-secondary);
.custom-profile-field-value { .custom-profile-field-value {
display: flex; display: flex;
align-items: center; align-items: center;