[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>
This commit is contained in:
Fernando 2021-02-11 05:21:37 -03:00 committed by GitHub
parent e9bc89488f
commit fa2262f8b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 19 deletions

View File

@ -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 { default as MuiIconButton } from '@material-ui/core/IconButton'
import { withStyles } from '@material-ui/core/styles'
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { Transaction } from 'src/logic/safe/store/models/types/gateway.d' import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
import { useActionButtonsHandlers } from './hooks/useActionButtonsHandlers' 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)` const IconButton = styled(MuiIconButton)`
padding: 8px !important; padding: 8px !important;
@ -32,6 +47,7 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
return ( return (
<> <>
{ {
<Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
<IconButton <IconButton
size="small" size="small"
type="button" type="button"
@ -40,18 +56,16 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
onMouseEnter={handleOnMouseEnter} onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave} 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> </IconButton>
</Tooltip>
} }
{canCancel && ( {canCancel && (
<Tooltip title="Cancel" placement="top">
<IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}> <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> </IconButton>
</Tooltip>
)} )}
</> </>
) )