[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,6 +47,7 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
   return (
     <>
       {
+        <Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
           <IconButton
             size="small"
             type="button"
@@ -40,18 +56,16 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
             onMouseEnter={handleOnMouseEnter}
             onMouseLeave={handleOnMouseLeave}
           >
-          <Icon
+            <Icon type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'} color="primary" size="sm" />
-            type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'}
-            color="primary"
-            size="sm"
-            tooltip={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'}
-          />
           </IconButton>
+        </Tooltip>
       }
       {canCancel && (
+        <Tooltip title="Cancel" placement="top">
           <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>
-          <Icon type="circleCross" color="error" size="sm" tooltip="Cancel" />
+            <Icon type="circleCross" color="error" size="sm" />
           </IconButton>
+        </Tooltip>
       )}
     </>
   )