Update task table row to use box-shadow on hover

This commit is contained in:
Ken Hibino
2021-07-12 14:47:02 -07:00
parent 8e50d81459
commit 8304a54e69
5 changed files with 38 additions and 8 deletions

View File

@@ -259,11 +259,17 @@ function ActiveTasksTable(props: Props & ReduxProps) {
); );
} }
const useRowStyles = makeStyles({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": {
boxShadow: theme.shadows[2],
}, },
}); "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
},
},
}));
interface RowProps { interface RowProps {
task: ActiveTaskExtended; task: ActiveTaskExtended;

View File

@@ -292,6 +292,12 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": {
boxShadow: theme.shadows[2],
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
},
}, },
actionCell: { actionCell: {
width: "96px", width: "96px",

View File

@@ -291,9 +291,15 @@ function PendingTasksTable(props: Props & ReduxProps) {
); );
} }
const useRowStyles = makeStyles({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": {
boxShadow: theme.shadows[2],
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
},
}, },
actionCell: { actionCell: {
width: "96px", width: "96px",
@@ -302,7 +308,7 @@ const useRowStyles = makeStyles({
marginLeft: 3, marginLeft: 3,
marginRight: 3, marginRight: 3,
}, },
}); }));
interface RowProps { interface RowProps {
task: PendingTaskExtended; task: PendingTaskExtended;

View File

@@ -322,9 +322,15 @@ function RetryTasksTable(props: Props & ReduxProps) {
); );
} }
const useRowStyles = makeStyles({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": {
boxShadow: theme.shadows[2],
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
},
}, },
actionCell: { actionCell: {
width: "140px", width: "140px",
@@ -333,7 +339,7 @@ const useRowStyles = makeStyles({
marginLeft: 3, marginLeft: 3,
marginRight: 3, marginRight: 3,
}, },
}); }));
interface RowProps { interface RowProps {
task: RetryTaskExtended; task: RetryTaskExtended;

View File

@@ -319,9 +319,15 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
); );
} }
const useRowStyles = makeStyles({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": {
boxShadow: theme.shadows[2],
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
},
}, },
actionCell: { actionCell: {
width: "140px", width: "140px",
@@ -330,7 +336,7 @@ const useRowStyles = makeStyles({
marginLeft: 3, marginLeft: 3,
marginRight: 3, marginRight: 3,
}, },
}); }));
interface RowProps { interface RowProps {
task: ScheduledTaskExtended; task: ScheduledTaskExtended;