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

Use tooltip from SRC (#1888) 

* Upgrade safe-react-components to latest version

* fix New Transaction button

* Increase the date/time tooltip size

Co-authored-by: Fernando <fernando.greco@gmail.com>
Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>
This commit is contained in:
nicolas 2021-02-23 18:24:07 -03:00 committed by GitHub
parent ac920f0361
commit c8daf7d006
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -161,7 +161,7 @@
"@gnosis.pm/safe-apps-sdk": "1.0.3",
"@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
"@gnosis.pm/safe-contracts": "1.1.1-dev.2",
"@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#8dea3a6",
"@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#fb1a523",
"@gnosis.pm/util-contracts": "2.0.6",
"@ledgerhq/hw-transport-node-hid-singleton": "5.41.0",
"@material-ui/core": "^4.11.0",

4
src/components/AppLayout/Sidebar/SafeHeader/index.tsx
View File

@ -44,7 +44,9 @@ const IconContainer = styled.div`
justify-content: space-evenly;
`
const StyledButton = styled(Button)`
padding: 0 18px;
&&.MuiButton-root {
padding: 0 16px;
}
*:first-child {
margin: 0 4px 0 0;
}

22
src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
View File

@ -1,8 +1,6 @@
import { Dot, IconText as IconTextSrc, Text } from '@gnosis.pm/safe-react-components'
import { Dot, IconText as IconTextSrc, Text, Tooltip } from '@gnosis.pm/safe-react-components'
import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
import { Tooltip } from '@material-ui/core'
import CircularProgress from '@material-ui/core/CircularProgress'
import { createStyles, makeStyles } from '@material-ui/core/styles'
import React, { ReactElement, useContext, useRef } from 'react'
import styled from 'styled-components'
@ -86,21 +84,6 @@ const IconText = styled(IconTextSrc)`
}
`
const useTooltipStyles = makeStyles(
createStyles(() => ({
arrow: {
color: 'white',
},
tooltip: {
backgroundColor: 'white',
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: '#00000026 0 2px 4px 0',
fontSize: '14px',
lineHeight: '14px',
},
})),
)
const TooltipContent = styled.div`
width: max-content;
`
@ -146,12 +129,11 @@ export const TxCollapsed = ({
const txCollapsedInfo = <div className={'tx-info' + willBeReplaced}>{info && <TxInfo info={info} />}</div>
const tooltipStyles = useTooltipStyles()
const timestamp = useRef<HTMLDivElement | null>(null)
const txCollapsedTime = (
<div className={'tx-time' + willBeReplaced}>
<Tooltip classes={tooltipStyles} title={formatDateTime(time)} arrow>
<Tooltip title={formatDateTime(time)} arrow backgroundColor="white" size="lg">
<TooltipContent ref={timestamp}>
<Text size="xl">{txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}</Text>
</TooltipContent>

43
src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx
View File

@ -1,26 +1,11 @@
import { Icon, theme } from '@gnosis.pm/safe-react-components'
import { Tooltip as TooltipMui } from '@material-ui/core'
import { Icon, Tooltip } from '@gnosis.pm/safe-react-components'
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;
@ -46,20 +31,18 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
return (
<>
{
<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>
}
<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 && (
<Tooltip title="Cancel" placement="top">
<IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>

9
yarn.lock
View File

@ -1554,12 +1554,11 @@
solc "0.5.14"
truffle "^5.1.21"
"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#8dea3a6":
version "0.4.0"
resolved "https://github.com/gnosis/safe-react-components.git#8dea3a6abedba736b5504927892eac46a0603c6d"
"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#fb1a523":
version "0.5.0"
resolved "https://github.com/gnosis/safe-react-components.git#fb1a523ece12aa54e7e6a1169c7cd13da5bf5b61"
dependencies:
classnames "^2.2.6"
polished "^3.6.7"
react-media "^1.10.0"
"@gnosis.pm/util-contracts@2.0.6":
@ -15218,7 +15217,7 @@ pocket-js-core@0.0.3:
dependencies:
axios "^0.18.0"
polished@^3.3.1, polished@^3.6.7:
polished@^3.3.1:
version "3.6.7"
resolved "https://registry.yarnpkg.com/polished/-/polished-3.6.7.tgz#44cbd0047f3187d83db0c479ef0c7d5583af5fb6"
integrity sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==