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: {
cursor: "pointer",
"&:hover": {
boxShadow: theme.shadows[2],
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
},
},
});
}));
interface RowProps {
task: ActiveTaskExtended;

View File

@@ -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",

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;