From fa2262f8b0ec3efb5631bcd0e392aba3c979325f Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Thu, 11 Feb 2021 05:21:37 -0300
Subject: [PATCH] [Transaction List v2] Action buttons tooltip (#1884)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix tooltip for action buttons

* add margin  botton to the tooltip

Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>
---
 .../TxCollapsedActions.tsx                    | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
index 270878bf..19805222 100644
--- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
+++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
@@ -1,11 +1,26 @@
-import { Icon } from '@gnosis.pm/safe-react-components'
+import { Icon, theme } from '@gnosis.pm/safe-react-components'
+import { Tooltip as TooltipMui } from '@material-ui/core'
 import { default as MuiIconButton } from '@material-ui/core/IconButton'
+import { withStyles } from '@material-ui/core/styles'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
 import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
 import { useActionButtonsHandlers } from './hooks/useActionButtonsHandlers'
 
+const Tooltip = withStyles(() => ({
+  popper: {
+    zIndex: 2001,
+  },
+  tooltip: {
+    marginBottom: '4px',
+    backgroundColor: theme.colors.overlay.color,
+    border: `1px solid ${theme.colors.icon}`,
+    boxShadow: `1px 2px 4px ${theme.colors.shadow.color}14`,
+    color: theme.colors.text,
+  },
+}))(TooltipMui)
+
 const IconButton = styled(MuiIconButton)`
   padding: 8px !important;
 
@@ -32,26 +47,25 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
   return (
     <>
       {
-        <IconButton
-          size="small"
-          type="button"
-          onClick={handleConfirmButtonClick}
-          disabled={disabledActions}
-          onMouseEnter={handleOnMouseEnter}
-          onMouseLeave={handleOnMouseLeave}
-        >
-          <Icon
-            type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'}
-            color="primary"
-            size="sm"
-            tooltip={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'}
-          />
-        </IconButton>
+        <Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
+          <IconButton
+            size="small"
+            type="button"
+            onClick={handleConfirmButtonClick}
+            disabled={disabledActions}
+            onMouseEnter={handleOnMouseEnter}
+            onMouseLeave={handleOnMouseLeave}
+          >
+            <Icon type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'} color="primary" size="sm" />
+          </IconButton>
+        </Tooltip>
       }
       {canCancel && (
-        <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>
-          <Icon type="circleCross" color="error" size="sm" tooltip="Cancel" />
-        </IconButton>
+        <Tooltip title="Cancel" placement="top">
+          <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>
+            <Icon type="circleCross" color="error" size="sm" />
+          </IconButton>
+        </Tooltip>
       )}
     </>
   )