From c8daf7d0063f22a822c2305a7b1d8ba96879de48 Mon Sep 17 00:00:00 2001 From: nicolas Date: Tue, 23 Feb 2021 18:24:07 -0300 Subject: [PATCH] Use tooltip from SRC (#1888) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Upgrade safe-react-components to latest version * fix New Transaction button * Increase the date/time tooltip size Co-authored-by: Fernando Co-authored-by: Daniel Sanchez Co-authored-by: Agustín Longoni --- package.json | 2 +- .../AppLayout/Sidebar/SafeHeader/index.tsx | 4 +- .../GatewayTransactions/TxCollapsed.tsx | 22 +--------- .../TxCollapsedActions.tsx | 43 ++++++------------- yarn.lock | 9 ++-- 5 files changed, 23 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index 60a25803..dffcede7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx index 2946cfd6..5f7a5bc0 100644 --- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx +++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx @@ -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; } diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx index f624ef4c..1c70df7a 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx +++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx @@ -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 =
{info && }
- const tooltipStyles = useTooltipStyles() const timestamp = useRef(null) const txCollapsedTime = (
- + {txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)} diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx index 19805222..0375101b 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx +++ b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx @@ -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 ( <> - { - - - - - - } + + + + + {canCancel && ( diff --git a/yarn.lock b/yarn.lock index 3eef89a2..c01e2ea5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==