[Transaction List v2] Action buttons tooltip (#1884)

* fix tooltip for action buttons

* add margin  botton to the tooltip

Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>

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>
       )}
     </>
   )