Fix action button styles

This commit is contained in:
Ken Hibino 2021-03-01 15:21:36 -08:00
parent 60872a1ad7
commit 15dc9ff485
3 changed files with 20 additions and 24 deletions

View File

@ -1,5 +1,4 @@
import React, { useCallback, useState } from "react";
import clsx from "clsx";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@ -295,9 +294,9 @@ const useRowStyles = makeStyles({
actionCell: {
width: "96px",
},
activeActionCell: {
display: "flex",
justifyContent: "space-between",
actionButton: {
marginLeft: 3,
marginRight: 3,
},
});
@ -342,10 +341,7 @@ function Row(props: RowProps) {
<TableCell align="right">{task.max_retry}</TableCell>
<TableCell
align="center"
className={clsx(
classes.actionCell,
props.showActions && classes.activeActionCell
)}
className={classes.actionCell}
onMouseEnter={props.onActionCellEnter}
onMouseLeave={props.onActionCellLeave}
>
@ -356,6 +352,7 @@ function Row(props: RowProps) {
onClick={props.onDeleteClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<DeleteIcon fontSize="small" />
</IconButton>
@ -365,6 +362,7 @@ function Row(props: RowProps) {
onClick={props.onArchiveClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<ArchiveIcon fontSize="small" />
</IconButton>

View File

@ -41,7 +41,6 @@ import TableActions from "./TableActions";
import { durationBefore, uuidPrefix } from "../utils";
import { usePolling } from "../hooks";
import { RetryTaskExtended } from "../reducers/tasksReducer";
import clsx from "clsx";
import { TableColumn } from "../types/table";
const useStyles = makeStyles((theme) => ({
@ -326,9 +325,9 @@ const useRowStyles = makeStyles({
actionCell: {
width: "140px",
},
activeActionCell: {
display: "flex",
justifyContent: "space-between",
actionButton: {
marginLeft: 3,
marginRight: 3,
},
});
@ -376,10 +375,7 @@ function Row(props: RowProps) {
<TableCell align="right">{task.max_retry}</TableCell>
<TableCell
align="center"
className={clsx(
classes.actionCell,
props.showActions && classes.activeActionCell
)}
className={classes.actionCell}
onMouseEnter={props.onActionCellEnter}
onMouseLeave={props.onActionCellLeave}
>
@ -390,6 +386,7 @@ function Row(props: RowProps) {
onClick={props.onDeleteClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<DeleteIcon fontSize="small" />
</IconButton>
@ -399,6 +396,7 @@ function Row(props: RowProps) {
onClick={props.onArchiveClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<ArchiveIcon fontSize="small" />
</IconButton>
@ -408,6 +406,7 @@ function Row(props: RowProps) {
onClick={props.onRunClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<PlayArrowIcon fontSize="small" />
</IconButton>

View File

@ -1,5 +1,4 @@
import React, { useState, useCallback } from "react";
import clsx from "clsx";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@ -323,9 +322,9 @@ const useRowStyles = makeStyles({
actionCell: {
width: "140px",
},
activeActionCell: {
display: "flex",
justifyContent: "space-between",
actionButton: {
marginLeft: 3,
marginRight: 3,
},
});
@ -370,10 +369,7 @@ function Row(props: RowProps) {
<TableCell>{durationBefore(task.next_process_at)}</TableCell>
<TableCell
align="center"
className={clsx(
classes.actionCell,
props.showActions && classes.activeActionCell
)}
className={classes.actionCell}
onMouseEnter={props.onActionCellEnter}
onMouseLeave={props.onActionCellLeave}
>
@ -384,6 +380,7 @@ function Row(props: RowProps) {
onClick={props.onDeleteClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<DeleteIcon fontSize="small" />
</IconButton>
@ -393,6 +390,7 @@ function Row(props: RowProps) {
onClick={props.onArchiveClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<ArchiveIcon fontSize="small" />
</IconButton>
@ -402,6 +400,7 @@ function Row(props: RowProps) {
onClick={props.onRunClick}
disabled={task.requestPending || props.allActionPending}
size="small"
className={classes.actionButton}
>
<PlayArrowIcon fontSize="small" />
</IconButton>