mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +01:00
ᯤ 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:
parent
3213f574c6
commit
f11817a30e
1 changed files with 6 additions and 8 deletions
|
|
@ -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();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue