From 8304a54e69cee9c68410e903404565f6b52740a3 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Mon, 12 Jul 2021 14:47:02 -0700
Subject: [PATCH] Update task table row to use box-shadow on hover

---
 ui/src/components/ActiveTasksTable.tsx    | 10 ++++++++--
 ui/src/components/ArchivedTasksTable.tsx  |  6 ++++++
 ui/src/components/PendingTasksTable.tsx   | 10 ++++++++--
 ui/src/components/RetryTasksTable.tsx     | 10 ++++++++--
 ui/src/components/ScheduledTasksTable.tsx | 10 ++++++++--
 5 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx
index 1073602..3a77759 100644
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/ui/src/components/ActiveTasksTable.tsx
@@ -259,11 +259,17 @@ function ActiveTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
   },
-});
+}));
 
 interface RowProps {
   task: ActiveTaskExtended;
diff --git a/ui/src/components/ArchivedTasksTable.tsx b/ui/src/components/ArchivedTasksTable.tsx
index d5c333c..e39b414 100644
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/ui/src/components/ArchivedTasksTable.tsx
@@ -292,6 +292,12 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
   },
   actionCell: {
     width: "96px",
diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx
index 9df0e02..d16decd 100644
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@@ -291,9 +291,15 @@ function PendingTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
   },
   actionCell: {
     width: "96px",
@@ -302,7 +308,7 @@ const useRowStyles = makeStyles({
     marginLeft: 3,
     marginRight: 3,
   },
-});
+}));
 
 interface RowProps {
   task: PendingTaskExtended;
diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx
index 235fdd2..1eed292 100644
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@@ -322,9 +322,15 @@ function RetryTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
   },
   actionCell: {
     width: "140px",
@@ -333,7 +339,7 @@ const useRowStyles = makeStyles({
     marginLeft: 3,
     marginRight: 3,
   },
-});
+}));
 
 interface RowProps {
   task: RetryTaskExtended;
diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx
index da61687..a612f6d 100644
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/ui/src/components/ScheduledTasksTable.tsx
@@ -319,9 +319,15 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
   },
   actionCell: {
     width: "140px",
@@ -330,7 +336,7 @@ const useRowStyles = makeStyles({
     marginLeft: 3,
     marginRight: 3,
   },
-});
+}));
 
 interface RowProps {
   task: ScheduledTaskExtended;