From fd3f6a0435c88ec8612e7b7373deddbe6865e1ee Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 7 Jun 2022 04:04:01 -0700
Subject: [PATCH] Improve selection color of datatable

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
---
 desktop/flipper-plugin/src/ui/data-table/TableRow.tsx | 2 +-
 desktop/flipper-plugin/src/ui/theme.tsx               | 1 +
 desktop/themes/base.less                              | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
index f6e4c3e2d..a885873d4 100644
--- a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
@@ -26,7 +26,7 @@ type TableBodyRowContainerProps = {
 
 const backgroundColor = (props: TableBodyRowContainerProps) => {
   if (props.highlighted) {
-    return theme.backgroundWash;
+    return theme.selectionBackgroundColor;
   }
   return undefined;
 };
diff --git a/desktop/flipper-plugin/src/ui/theme.tsx b/desktop/flipper-plugin/src/ui/theme.tsx
index f4f35a31c..7e052dd21 100644
--- a/desktop/flipper-plugin/src/ui/theme.tsx
+++ b/desktop/flipper-plugin/src/ui/theme.tsx
@@ -22,6 +22,7 @@ export const theme = {
   textColorPlaceholder: 'var(--flipper-text-color-placeholder)',
   textColorActive: 'var(--light-color-button-active)',
   searchHighlightBackground: antColors.yellow[3],
+  selectionBackgroundColor: 'var(--flipper-primary-background-wash)',
   disabledColor: 'var(--flipper-disabled-color)',
   backgroundDefault: 'var(--flipper-background-default)',
   backgroundWash: 'var(--flipper-background-wash)',
diff --git a/desktop/themes/base.less b/desktop/themes/base.less
index c998163d7..2a31b08ad 100644
--- a/desktop/themes/base.less
+++ b/desktop/themes/base.less
@@ -52,6 +52,7 @@
   --flipper-disabled-color: @disabled-color;
   --flipper-background-default: @background-default;
   --flipper-background-wash: @background-wash;
+  --flipper-primary-background-wash: mix(@primary-color, @background-default, 25%);
   --flipper-button-default-background: @button-default-background;
   --flipper-background-transparent-hover: @background-transparent-hover;
   --flipper-divider-color: @divider-color;