status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
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,26 +47,25 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
return ( return (
<> <>
{ {
<IconButton <Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
size="small" <IconButton
type="button" size="small"
onClick={handleConfirmButtonClick} type="button"
disabled={disabledActions} onClick={handleConfirmButtonClick}
onMouseEnter={handleOnMouseEnter} disabled={disabledActions}
onMouseLeave={handleOnMouseLeave} onMouseEnter={handleOnMouseEnter}
> onMouseLeave={handleOnMouseLeave}
<Icon >
type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'} <Icon type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'} color="primary" size="sm" />
color="primary" </IconButton>
size="sm" </Tooltip>
tooltip={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'}
/>
</IconButton>
} }
{canCancel && ( {canCancel && (
<IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}> <Tooltip title="Cancel" placement="top">
<Icon type="circleCross" color="error" size="sm" tooltip="Cancel" /> <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>
</IconButton> <Icon type="circleCross" color="error" size="sm" />
</IconButton>
</Tooltip>
)} )}
</> </>
) )