From ecae5d67521d9613865540b5992e2fd2614e3746 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 27 Aug 2018 14:01:18 +0200 Subject: [PATCH 1/2] Fix imports --- src/js/views/Wallet/views/AccountReceive/Container.js | 5 ++--- src/js/views/Wallet/views/AccountSend/Container.js | 2 +- src/js/views/Wallet/views/AccountSummary/Container.js | 4 ++-- src/js/views/Wallet/views/AccountSummary/index.js | 6 +++--- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/js/views/Wallet/views/AccountReceive/Container.js b/src/js/views/Wallet/views/AccountReceive/Container.js index 002d8a8c..b63d4699 100644 --- a/src/js/views/Wallet/views/AccountReceive/Container.js +++ b/src/js/views/Wallet/views/AccountReceive/Container.js @@ -9,12 +9,11 @@ import { default as ReceiveActions } from 'actions/ReceiveActions'; import * as TokenActions from 'actions/TokenActions'; import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; -import Receive from './index'; - import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps, -} from '../SelectedAccount'; +} from 'views/Wallet/components/SelectedAccount'; +import Receive from './index'; type OwnProps = { } diff --git a/src/js/views/Wallet/views/AccountSend/Container.js b/src/js/views/Wallet/views/AccountSend/Container.js index 8b4a1a10..e56bc9b0 100644 --- a/src/js/views/Wallet/views/AccountSend/Container.js +++ b/src/js/views/Wallet/views/AccountSend/Container.js @@ -9,9 +9,9 @@ import { default as SendFormActions } from 'actions/SendFormActions'; import * as SessionStorageActions from 'actions/SessionStorageActions'; import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; +import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from 'views/Wallet/components/SelectedAccount'; import SendForm from './index'; -import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../SelectedAccount'; type OwnProps = { } diff --git a/src/js/views/Wallet/views/AccountSummary/Container.js b/src/js/views/Wallet/views/AccountSummary/Container.js index d0e83030..018bda6a 100644 --- a/src/js/views/Wallet/views/AccountSummary/Container.js +++ b/src/js/views/Wallet/views/AccountSummary/Container.js @@ -1,7 +1,7 @@ /* @flow */ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; @@ -10,8 +10,8 @@ import * as SummaryActions from 'actions/SummaryActions'; import * as TokenActions from 'actions/TokenActions'; import type { State, Dispatch } from 'flowtype'; +import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from 'views/Wallet/components/SelectedAccount'; import Summary from './index'; -import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../SelectedAccount'; type OwnProps = { } diff --git a/src/js/views/Wallet/views/AccountSummary/index.js b/src/js/views/Wallet/views/AccountSummary/index.js index 367a5ecd..6591b163 100644 --- a/src/js/views/Wallet/views/AccountSummary/index.js +++ b/src/js/views/Wallet/views/AccountSummary/index.js @@ -1,6 +1,6 @@ /* @flow */ -import styled, { css } from 'styled-components'; -import React, { Component } from 'react'; +import styled from 'styled-components'; +import React from 'react'; import { H2 } from 'components/Heading'; import BigNumber from 'bignumber.js'; import { Async as AsyncSelect } from 'react-select'; @@ -11,7 +11,7 @@ import { Notification } from 'components/Notification'; import CoinLogo from 'components/CoinLogo'; import * as stateUtils from 'reducers/utils'; import type { NetworkToken } from 'reducers/LocalStorageReducer'; -import SelectedAccount from 'views/Wallet/components/SelectedAccount'; // TODO: SekectedAccount component +import SelectedAccount from 'views/Wallet/components/SelectedAccount'; import Link from 'components/Link'; import SummaryDetails from './components/Details'; import SummaryTokens from './components/Tokens'; From 6027f021622042997dbdc7f071c50c2c3e37be89 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 27 Aug 2018 17:08:44 +0200 Subject: [PATCH 2/2] Prepare tooltip component (WIP) --- src/js/components/Tooltip/index.js | 160 ++++++++++++++++++ .../components/AccountMenu/index.js | 2 +- .../Wallet/views/AccountReceive/index.js | 2 +- .../AccountSend/components/AdvancedForm.js | 2 +- .../Wallet/views/AccountSummary/index.js | 2 +- 5 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 src/js/components/Tooltip/index.js diff --git a/src/js/components/Tooltip/index.js b/src/js/components/Tooltip/index.js new file mode 100644 index 00000000..07290d34 --- /dev/null +++ b/src/js/components/Tooltip/index.js @@ -0,0 +1,160 @@ +import Tooltip from 'rc-tooltip'; +import styled from 'styled-components'; +import colors from 'config/colors'; +import { FONT_SIZE } from 'config/variables'; + +const StyledTooltip = styled(Tooltip)` + .tooltip-wrapper { + width: 320px; + font-size: ${FONT_SIZE.SMALLEST}; + span { + color: ${colors.GREEN_PRIMARY}; + } + } + + .aside-tooltip-wrapper { + width: 260px; + font-size: ${FONT_SIZE.SMALLEST}; + } + + .rc-tooltip { + position: absolute; + z-index: 1070; + display: block; + visibility: visible; + border: 1px solid ${colors.DIVIDER}; + border-radius: 3px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); + } + + .rc-tooltip-hidden { + display: none; + } + + .rc-tooltip-inner { + padding: 8px 10px; + color: ${colors.TEXT_SECONDARY}; + font-size: ${FONT_SIZE.SMALLER}; + line-height: 1.5; + text-align: left; + text-decoration: none; + background-color: ${colors.WHITE}; + border-radius: 3px; + min-height: 34px; + border: 1px solid ${colors.WHITE}; + } + .rc-tooltip-arrow, + .rc-tooltip-arrow-inner { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + + .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 { + bottom: 2px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.WHITE}; + } + .rc-tooltip-placement-top .rc-tooltip-arrow { + left: 50%; + } + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + left: 15%; + } + .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 { + 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 { + left: 1px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.WHITE}; + } + .rc-tooltip-placement-right .rc-tooltip-arrow { + top: 50%; + } + .rc-tooltip-placement-rightTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + .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 { + 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 { + right: 1px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.WHITE}; + } + .rc-tooltip-placement-left .rc-tooltip-arrow { + top: 50%; + } + .rc-tooltip-placement-leftTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + .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 { + 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 { + top: 1px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.WHITE}; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow { + left: 50%; + } + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { + left: 15%; + } + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + right: 15%; + } +`; + +export default StyledTooltip; diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index ed245279..805e204d 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/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 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import ICONS from 'config/icons'; import { NavLink } from 'react-router-dom'; diff --git a/src/js/views/Wallet/views/AccountReceive/index.js b/src/js/views/Wallet/views/AccountReceive/index.js index e1289c2d..44e3781d 100644 --- a/src/js/views/Wallet/views/AccountReceive/index.js +++ b/src/js/views/Wallet/views/AccountReceive/index.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import { H2 } from 'components/Heading'; -import Tooltip from 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import { QRCode } from 'react-qr-svg'; import { Notification } from 'components/Notification'; diff --git a/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js b/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js index 978f9268..e487c526 100644 --- a/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js +++ b/src/js/views/Wallet/views/AccountSend/components/AdvancedForm.js @@ -2,7 +2,7 @@ import React from 'react'; -import Tooltip from 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import type { Props as BaseProps } from './index'; type Props = { diff --git a/src/js/views/Wallet/views/AccountSummary/index.js b/src/js/views/Wallet/views/AccountSummary/index.js index 6591b163..e5836c54 100644 --- a/src/js/views/Wallet/views/AccountSummary/index.js +++ b/src/js/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 'rc-tooltip'; +import Tooltip from 'components/Tooltip'; import { resolveAfter } from 'utils/promiseUtils'; import { Notification } from 'components/Notification';