From 15dc9ff485b178e7ba537f5309401766c092c06f Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Mon, 1 Mar 2021 15:21:36 -0800
Subject: [PATCH] Fix action button styles

---
 ui/src/components/PendingTasksTable.tsx   | 14 ++++++--------
 ui/src/components/RetryTasksTable.tsx     | 15 +++++++--------
 ui/src/components/ScheduledTasksTable.tsx | 15 +++++++--------
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx
index 5b59e2c..d3cd98e 100644
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@@ -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>
diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx
index 975c391..079343e 100644
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@@ -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>
diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx
index b9e0f07..d017b15 100644
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/ui/src/components/ScheduledTasksTable.tsx
@@ -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>