IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-08-10 04:58:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

MM-68647: Fix Data Spillage reviewer pill background in dark mode (#36424)

Browse Source 
* MM-68647: Fix Data Spillage reviewer pill background in dark mode

The SelectableUserPropertyRenderer wraps a react-select component using a
UserMultiSelector classNamePrefix, so the global .react-select styles in
_react-select.scss did not apply. As a result the inner control kept its
default white react-select background, which clashed with dark themes
when viewing the Data Spillage reviewer field.

Make the control transparent and ensure the value/placeholder/input/menu
all use theme-driven colors so the reviewer pill blends correctly in
both light and dark mode.

Co-authored-by: Maria A Nunez <maria.nunez@mattermost.com>

* Fix stylelint: order color before gap in placeholder

Co-authored-by: Maria A Nunez <maria.nunez@mattermost.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
This commit is contained in:
Maria A Nunez
2026-05-06 07:41:57 +05:30
committed by GitHub
co-authored by Cursor Agent
parent 71fb5b1e54
commit 7d1ee48c08
1 changed files with 11 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/channels/src/components/properties_card_view/propertyValueRenderer/user_property_renderer/selectable_user_property_renderer.scss
+11
View File
@@ -8,7 +8,9 @@
min-height: unset;
align-items: baseline;
border: none !important;
background: transparent;
box-shadow: none !important;
color: var(--center-channel-color);
.UserMultiSelector__indicators {
height: 32px;
@@ -21,6 +23,7 @@
.SelectableUserPropertyRenderer_placeholder {
display: flex;
align-items: center;
color: var(--center-channel-color);
gap: 8px;
i.icon.icon-account-outline {
@@ -35,6 +38,12 @@
}
}
}
.UserMultiSelector__single-value,
.UserMultiSelector__input-container,
.UserMultiSelector__input {
color: var(--center-channel-color);
}
}
}
}
@@ -46,6 +55,8 @@
min-width: 200px;
max-width: 400px;
margin-top: 0 !important;
background: var(--center-channel-bg);
color: var(--center-channel-color);
.UserMultiSelector__control {
min-height: unset;