Merge branch 'styled-components-refactor' of github.com:satoshilabs/trezor-wallet into styled-components-refactor

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;

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 'rc-tooltip';
+import Tooltip from 'components/Tooltip';
 import ICONS from 'config/icons';
 
 import { NavLink } from 'react-router-dom';

src/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 = { }
 

src/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';

src/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 = { }
 

src/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 = {

src/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 = { }
 

src/views/Wallet/views/AccountSummary/index.js

@@ -1,17 +1,17 @@
 /* @flow */
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
-import React, { Component } from 'react';
+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';
 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';