ᯤ fix: Better Contrast on Filter Icons in DataTables (#10974)

* fix: hit contrast threshold minimums in sort and filter icons in My files modal

* chore: address comments
This commit is contained in:
Dustin Healy 2025-12-15 07:26:15 -08:00 committed by GitHub
parent 3213f574c6
commit f11817a30e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -33,12 +33,12 @@ export function SortFilterHeader<TData, TValue>({
{ {
label: localize('com_ui_ascending'), label: localize('com_ui_ascending'),
onClick: () => column.toggleSorting(false), onClick: () => column.toggleSorting(false),
icon: <ArrowUpIcon className="h-3.5 w-3.5 text-muted-foreground/70" />, icon: <ArrowUpIcon className="icon-sm text-text-secondary" />,
}, },
{ {
label: localize('com_ui_descending'), label: localize('com_ui_descending'),
onClick: () => column.toggleSorting(true), onClick: () => column.toggleSorting(true),
icon: <ArrowDownIcon className="h-3.5 w-3.5 text-muted-foreground/70" />, icon: <ArrowDownIcon className="icon-sm text-text-secondary" />,
}, },
]; ];
@ -56,9 +56,7 @@ export function SortFilterHeader<TData, TValue>({
items.push({ items.push({
label: filterValue, label: filterValue,
onClick: () => column.setFilterValue(value), onClick: () => column.setFilterValue(value),
icon: ( icon: <ListFilter className="icon-sm text-text-secondary" aria-hidden="true" />,
<ListFilter className="h-3.5 w-3.5 text-muted-foreground/70" aria-hidden="true" />
),
show: true, show: true,
className: isActive ? 'border-l-2 border-l-border-xheavy' : '', className: isActive ? 'border-l-2 border-l-border-xheavy' : '',
}); });
@ -70,7 +68,7 @@ export function SortFilterHeader<TData, TValue>({
items.push({ items.push({
label: localize('com_ui_show_all'), label: localize('com_ui_show_all'),
onClick: () => column.setFilterValue(undefined), onClick: () => column.setFilterValue(undefined),
icon: <FilterX className="h-3.5 w-3.5 text-muted-foreground/70" />, icon: <FilterX className="icon-sm text-text-secondary" />,
show: true, show: true,
}); });
} }
@ -113,9 +111,9 @@ export function SortFilterHeader<TData, TValue>({
> >
<span>{title}</span> <span>{title}</span>
{column.getIsFiltered() ? ( {column.getIsFiltered() ? (
<ListFilter className="icon-sm text-muted-foreground/70" aria-hidden="true" /> <ListFilter className="icon-sm" aria-hidden="true" />
) : ( ) : (
<ListFilter className="icon-sm opacity-30" aria-hidden="true" /> <ListFilter className="icon-sm text-text-secondary" aria-hidden="true" />
)} )}
{(() => { {(() => {
const sortState = column.getIsSorted(); const sortState = column.getIsSorted();