From f820637023df3e29ba67403ae6fa45e1ddd4e6e6 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 28 Aug 2018 08:58:41 +0200 Subject: [PATCH] Use rc-tooltip & rcTooltip.less for now --- src/components/Tooltip/index.js | 82 +++++++++---------- .../components/AccountMenu/index.js | 2 +- .../Wallet/views/AccountReceive/index.js | 2 +- .../AccountSend/components/AdvancedForm.js | 2 +- .../Wallet/views/AccountSummary/index.js | 4 +- 5 files changed, 46 insertions(+), 46 deletions(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 07290d34..4a1ffe6a 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -17,7 +17,7 @@ const StyledTooltip = styled(Tooltip)` font-size: ${FONT_SIZE.SMALLEST}; } - .rc-tooltip { + &.rc-tooltip { position: absolute; z-index: 1070; display: block; @@ -27,11 +27,11 @@ const StyledTooltip = styled(Tooltip)` box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); } - .rc-tooltip-hidden { + &.rc-tooltip-hidden { display: none; } - .rc-tooltip-inner { + &.rc-tooltip-inner { padding: 8px 10px; color: ${colors.TEXT_SECONDARY}; font-size: ${FONT_SIZE.SMALLER}; @@ -43,8 +43,8 @@ const StyledTooltip = styled(Tooltip)` min-height: 34px; border: 1px solid ${colors.WHITE}; } - .rc-tooltip-arrow, - .rc-tooltip-arrow-inner { + &.rc-tooltip-arrow, + &.rc-tooltip-arrow-inner { position: absolute; width: 0; height: 0; @@ -53,106 +53,106 @@ const StyledTooltip = styled(Tooltip)` } - .rc-tooltip-placement-top .rc-tooltip-arrow, - .rc-tooltip-placement-topLeft .rc-tooltip-arrow, - .rc-tooltip-placement-topRight .rc-tooltip-arrow { + &.rc-tooltip-placement-top &.rc-tooltip-arrow, + &.rc-tooltip-placement-topLeft &.rc-tooltip-arrow, + &.rc-tooltip-placement-topRight &.rc-tooltip-arrow { bottom: -6px; margin-left: -6px; border-width: 6px 6px 0; border-top-color: ${colors.DIVIDER}; } - .rc-tooltip-placement-top .rc-tooltip-arrow-inner, - .rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, - .rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { + &.rc-tooltip-placement-top &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-topLeft &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-topRight &.rc-tooltip-arrow-inner { bottom: 2px; margin-left: -6px; border-width: 6px 6px 0; border-top-color: ${colors.WHITE}; } - .rc-tooltip-placement-top .rc-tooltip-arrow { + &.rc-tooltip-placement-top &.rc-tooltip-arrow { left: 50%; } - .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + &.rc-tooltip-placement-topLeft &.rc-tooltip-arrow { left: 15%; } - .rc-tooltip-placement-topRight .rc-tooltip-arrow { + &.rc-tooltip-placement-topRight &.rc-tooltip-arrow { right: 15%; } - .rc-tooltip-placement-right .rc-tooltip-arrow, - .rc-tooltip-placement-rightTop .rc-tooltip-arrow, - .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + &.rc-tooltip-placement-right &.rc-tooltip-arrow, + &.rc-tooltip-placement-rightTop &.rc-tooltip-arrow, + &.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow { left: -5px; margin-top: -6px; border-width: 6px 6px 6px 0; border-right-color: ${colors.DIVIDER}; } - .rc-tooltip-placement-right .rc-tooltip-arrow-inner, - .rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, - .rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { + &.rc-tooltip-placement-right &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-rightTop &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow-inner { left: 1px; margin-top: -6px; border-width: 6px 6px 6px 0; border-right-color: ${colors.WHITE}; } - .rc-tooltip-placement-right .rc-tooltip-arrow { + &.rc-tooltip-placement-right &.rc-tooltip-arrow { top: 50%; } - .rc-tooltip-placement-rightTop .rc-tooltip-arrow { + &.rc-tooltip-placement-rightTop &.rc-tooltip-arrow { top: 15%; margin-top: 0; } - .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + &.rc-tooltip-placement-rightBottom &.rc-tooltip-arrow { bottom: 15%; } - .rc-tooltip-placement-left .rc-tooltip-arrow, - .rc-tooltip-placement-leftTop .rc-tooltip-arrow, - .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + &.rc-tooltip-placement-left &.rc-tooltip-arrow, + &.rc-tooltip-placement-leftTop &.rc-tooltip-arrow, + &.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow { right: -5px; margin-top: -6px; border-width: 6px 0 6px 6px; border-left-color: ${colors.DIVIDER}; } - .rc-tooltip-placement-left .rc-tooltip-arrow-inner, - .rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, - .rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { + &.rc-tooltip-placement-left &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-leftTop &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow-inner { right: 1px; margin-top: -6px; border-width: 6px 0 6px 6px; border-left-color: ${colors.WHITE}; } - .rc-tooltip-placement-left .rc-tooltip-arrow { + &.rc-tooltip-placement-left &.rc-tooltip-arrow { top: 50%; } - .rc-tooltip-placement-leftTop .rc-tooltip-arrow { + &.rc-tooltip-placement-leftTop &.rc-tooltip-arrow { top: 15%; margin-top: 0; } - .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + &.rc-tooltip-placement-leftBottom &.rc-tooltip-arrow { bottom: 15%; } - .rc-tooltip-placement-bottom .rc-tooltip-arrow, - .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, - .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + &.rc-tooltip-placement-bottom &.rc-tooltip-arrow, + &.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow, + &.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow { top: -5px; margin-left: -6px; border-width: 0 6px 6px; border-bottom-color: ${colors.DIVIDER}; } - .rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, - .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, - .rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { + &.rc-tooltip-placement-bottom &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow-inner, + &.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow-inner { top: 1px; margin-left: -6px; border-width: 0 6px 6px; border-bottom-color: ${colors.WHITE}; } - .rc-tooltip-placement-bottom .rc-tooltip-arrow { + &.rc-tooltip-placement-bottom &.rc-tooltip-arrow { left: 50%; } - .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { + &.rc-tooltip-placement-bottomLeft &.rc-tooltip-arrow { left: 15%; } - .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + &.rc-tooltip-placement-bottomRight &.rc-tooltip-arrow { right: 15%; } `; diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 805e204d..ed245279 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -7,7 +7,7 @@ import Loader from 'components/Loader'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; import * as stateUtils from 'reducers/utils'; -import Tooltip from 'components/Tooltip'; +import Tooltip from 'rc-tooltip'; import ICONS from 'config/icons'; import { NavLink } from 'react-router-dom'; diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js index f7476452..e58269ac 100644 --- a/src/views/Wallet/views/AccountReceive/index.js +++ b/src/views/Wallet/views/AccountReceive/index.js @@ -3,7 +3,7 @@ import React from 'react'; import styled from 'styled-components'; import { H2 } from 'components/Heading'; -import Tooltip from 'components/Tooltip'; +import Tooltip from 'rc-tooltip'; import { QRCode } from 'react-qr-svg'; import SelectedAccount from 'views/Wallet/components/SelectedAccount'; diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm.js index b21b86b3..f5a4218c 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm.js @@ -2,7 +2,7 @@ import React from 'react'; -import Tooltip from 'components/Tooltip'; +import Tooltip from 'rc-tooltip'; import type { Props as BaseProps } from '../Container'; type Props = { diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js index f386176a..268bb606 100644 --- a/src/views/Wallet/views/AccountSummary/index.js +++ b/src/views/Wallet/views/AccountSummary/index.js @@ -4,7 +4,7 @@ import React from 'react'; import { H2 } from 'components/Heading'; import BigNumber from 'bignumber.js'; import { Async as AsyncSelect } from 'react-select'; -import Tooltip from 'components/Tooltip'; +import Tooltip from 'rc-tooltip'; import CoinLogo from 'components/CoinLogo'; import * as stateUtils from 'reducers/utils'; @@ -60,7 +60,7 @@ const Summary = (props: Props) => { return (
- +

Account #{parseInt(account.index, 10) + 1}