1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00

Merge pull request #267 from trezor/upgrade-styled-components

Upgraded react, react-dom, styled components, removed styled-media-query
This commit is contained in:
Vladimir Volek 2018-12-10 14:53:01 +01:00 committed by GitHub
commit ee28bede6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 1864 additions and 81 deletions

View File

@ -49,8 +49,8 @@
"raf": "^3.4.0",
"raven-js": "^3.22.3",
"rc-tooltip": "^3.7.0",
"react": "^16.4.2",
"react-dom": "^16.2.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-hot-loader": "^4.3.4",
"react-json-view": "^1.19.1",
"react-qr-svg": "^2.1.0",
@ -67,9 +67,8 @@
"redux-raven-middleware": "^1.2.0",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"styled-components": "^3.4.9",
"styled-media-query": "^2.0.2",
"styled-normalize": "^8.0.0",
"styled-components": "^4.1.2",
"styled-normalize": "^8.0.4",
"trezor-connect": "6.0.2",
"web3": "1.0.0-beta.35",
"webpack": "^4.16.3",

View File

@ -176,7 +176,7 @@ class Input extends PureComponent {
height={this.props.height}
trezorAction={this.props.trezorAction}
hasIcon={this.getIcon(this.props.state).length > 0}
innerRef={this.props.innerRef}
ref={this.props.innerRef}
hasAddon={!!this.props.sideAddons}
type={this.props.type}
color={this.getColor(this.props.state)}

View File

@ -1,13 +1,20 @@
/* @flow */
import React from 'react';
import { render } from 'react-dom';
import baseStyles from 'support/styles';
import { Normalize } from 'styled-normalize';
import BaseStyles from 'support/styles';
import App from 'views/index';
const root: ?HTMLElement = document.getElementById('trezor-wallet-root');
if (root) {
baseStyles();
render(<App />, root);
render(
<React.Fragment>
<Normalize />
<BaseStyles />
<App />
</React.Fragment>,
root,
);
}
window.onbeforeunload = () => {

View File

@ -1,13 +1,10 @@
import { injectGlobal } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
import colors from 'config/colors';
import normalize from 'styled-normalize';
import tooltipStyles from './Tooltip';
import animationStyles from './Animations';
const baseStyles = () => injectGlobal`
${normalize};
const baseStyles = createGlobalStyle`
html, body {
width: 100%;
height: 100%;

View File

@ -19,11 +19,8 @@ type State = {
footerFixed: boolean,
}
const AsideWrapper = styled.aside.attrs({
style: ({ minHeight }) => ({
minHeight,
}),
})`
const AsideWrapper = styled.aside`
min-height: ${props => props.minHeight}px;
position: relative;
top: 0px;
width: 320px;
@ -33,13 +30,10 @@ const AsideWrapper = styled.aside.attrs({
border-right: 1px solid ${colors.DIVIDER};
`;
const StickyContainerWrapper = styled.div.attrs({
style: ({ top, left, paddingBottom }) => ({
top,
left,
paddingBottom,
}),
})`
const StickyContainerWrapper = styled.div`
top: ${props => props.top}px;
left: ${props => props.left}px;
padding-bottom: ${props => props.paddingBottom}px;
position: fixed;
border-right: 1px solid ${colors.DIVIDER};
width: 320px;
@ -160,7 +154,7 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
<AsideWrapper
footerFixed={this.state.footerFixed}
minHeight={this.state.asideMinHeight}
innerRef={this.asideRefCallback}
ref={this.asideRefCallback}
onScroll={this.handleScroll}
onTouchStart={this.handleScroll}
onTouchMove={this.handleScroll}
@ -170,11 +164,11 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
paddingBottom={this.state.wrapperBottomPadding}
top={this.state.wrapperTopOffset}
left={this.state.wrapperLeftOffset}
innerRef={this.wrapperRefCallback}
ref={this.wrapperRefCallback}
>
{React.Children.map(this.props.children, (child) => { // eslint-disable-line arrow-body-style
return child.key === 'sticky-footer' ? React.cloneElement(child, {
innerRef: this.footerRefCallback,
ref: this.footerRefCallback,
position: this.state.footerFixed ? 'fixed' : 'relative',
}) : child;
})}

View File

@ -44,11 +44,8 @@ const TransitionContentWrapper = styled.div`
vertical-align: top;
`;
const Footer = styled.div.attrs({
style: ({ position }) => ({
position,
}),
})`
const Footer = styled.div`
position: ${props => props.position};
width: 320px;
bottom: 0;
background: ${colors.MAIN};

View File

@ -61,7 +61,7 @@ class TopNavigationAccount extends React.PureComponent<Props> {
const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`;
return (
<Wrapper className="account-tabs" innerRef={this.wrapperRefCallback}>
<Wrapper className="account-tabs" ref={this.wrapperRefCallback}>
<StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
<StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
<StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>

View File

@ -2,7 +2,6 @@
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
import media from 'styled-media-query';
import { H2 } from 'components/Heading';
import Button from 'components/Button';
@ -48,9 +47,9 @@ const ShowAddressButton = styled(Button)`
border-top-left-radius: 0;
border-bottom-left-radius: 0;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
margin-top: 10px;
`}
}
`;
const ShowAddressIcon = styled(Icon)`
@ -77,9 +76,9 @@ const Row = styled.div`
display: flex;
width: 100%;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
flex-direction: column;
`}
}
`;
const QrWrapper = styled.div`

1872
yarn.lock

File diff suppressed because it is too large Load Diff