arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-27 17:19:43 +02:00
commit 36212f2a1e
8 changed files with 172 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/js/components/Tooltip/index.js Normal file
View File

@ -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;

2
src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -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';

5
src/views/Wallet/views/AccountReceive/Container.js
View File

@ -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 = { }

2
src/views/Wallet/views/AccountReceive/index.js
View File

@ -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';

2
src/views/Wallet/views/AccountSend/Container.js
View File

@ -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 = { }

2
src/views/Wallet/views/AccountSend/components/AdvancedForm.js
View File

@ -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 = {

4
src/views/Wallet/views/AccountSummary/Container.js
View File

@ -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 = { }

8
src/views/Wallet/views/AccountSummary/index.js
View File

@ -1,17 +1,17 @@
/* @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';
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';