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 ( <> { - - - + + + + + } {canCancel && ( - - - + + + + + )} )