jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve selection color of datatable

Browse Source 
Summary:
DataTable selected rows are a bit hard to spot when changing search, scrolling etc, so give them a bit more prominent background

Changelog: DataTable: more pronounced background color for selections

Reviewed By: aigoncharov

Differential Revision: D36736495

fbshipit-source-id: 2cab9eb99594ffaaccdd9ebe0d922691adb27bdc
This commit is contained in:
Michel Weststrate
2022-06-07 04:04:01 -07:00
committed by Facebook GitHub Bot
parent 2f2a101094
commit fd3f6a0435
3 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
View File

@@ -26,7 +26,7 @@ type TableBodyRowContainerProps = {
const backgroundColor = (props: TableBodyRowContainerProps) => { const backgroundColor = (props: TableBodyRowContainerProps) => {
if (props.highlighted) { if (props.highlighted) {
return theme.backgroundWash; return theme.selectionBackgroundColor;
} }
return undefined; return undefined;
}; };

1
desktop/flipper-plugin/src/ui/theme.tsx
View File

@@ -22,6 +22,7 @@ export const theme = {
textColorPlaceholder: 'var(--flipper-text-color-placeholder)', textColorPlaceholder: 'var(--flipper-text-color-placeholder)',
textColorActive: 'var(--light-color-button-active)', textColorActive: 'var(--light-color-button-active)',
searchHighlightBackground: antColors.yellow[3], searchHighlightBackground: antColors.yellow[3],
selectionBackgroundColor: 'var(--flipper-primary-background-wash)',
disabledColor: 'var(--flipper-disabled-color)', disabledColor: 'var(--flipper-disabled-color)',
backgroundDefault: 'var(--flipper-background-default)', backgroundDefault: 'var(--flipper-background-default)',
backgroundWash: 'var(--flipper-background-wash)', backgroundWash: 'var(--flipper-background-wash)',

1
desktop/themes/base.less
View File

@@ -52,6 +52,7 @@
--flipper-disabled-color: @disabled-color; --flipper-disabled-color: @disabled-color;
--flipper-background-default: @background-default; --flipper-background-default: @background-default;
--flipper-background-wash: @background-wash; --flipper-background-wash: @background-wash;
--flipper-primary-background-wash: mix(@primary-color, @background-default, 25%);
--flipper-button-default-background: @button-default-background; --flipper-button-default-background: @button-default-background;
--flipper-background-transparent-hover: @background-transparent-hover; --flipper-background-transparent-hover: @background-transparent-hover;
--flipper-divider-color: @divider-color; --flipper-divider-color: @divider-color;