diff --git a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js deleted file mode 100644 index 34120828..00000000 --- a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js +++ /dev/null @@ -1,101 +0,0 @@ -/* @flow */ - -import styled, { css } from 'styled-components'; -import { colors } from 'trezor-ui-components'; -import React, { PureComponent } from 'react'; - -type Props = { - pathname: string, - wrapper: () => ?HTMLElement, -}; - -type State = { - style: { - width: number, - left: number, - }, - shouldAnimate: boolean, -}; - -const Wrapper = styled.div` - position: absolute; - bottom: 0px; - left: 0; - width: 100px; - height: 2px; - background: ${colors.GREEN_PRIMARY}; - ${props => - props.animation && - css` - transition: all 0.3s ease-in-out; - `} -`; - -class Indicator extends PureComponent { - constructor(props: Props) { - super(props); - - this.state = { - style: { - width: 0, - left: 0, - }, - shouldAnimate: false, - }; - - this.handleResize = this.handleResize.bind(this); - } - - componentDidMount() { - window.addEventListener('resize', this.handleResize, false); - } - - componentWillReceiveProps(newProps: Props) { - if (this.props.pathname !== newProps.pathname) { - this.setState({ - shouldAnimate: true, - }); - } - } - - componentDidUpdate() { - this.reposition(false); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize, false); - } - - handleResize() { - this.reposition(); - } - - handleResize: () => void; - - reposition(resetAnimation: boolean = true) { - const wrapper = this.props.wrapper(); - if (!wrapper) return; - const active = wrapper.querySelector('.active'); - if (!active) return; - const bounds = active.getBoundingClientRect(); - const left = bounds.left - wrapper.getBoundingClientRect().left + wrapper.scrollLeft; - const { state } = this; - - if (state.style.left !== left) { - this.setState({ - style: { - width: bounds.width, - left, - }, - shouldAnimate: resetAnimation ? false : state.shouldAnimate, - }); - } - } - - render() { - if (!this.props.wrapper) return null; - return ; - } -} - -export default Indicator; diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index 39215a8b..b092c67b 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -10,7 +10,6 @@ import type { State } from 'flowtype'; import { FormattedMessage } from 'react-intl'; import l10nMessages from './index.messages'; -import Indicator from './components/Indicator'; type OwnProps = {||}; @@ -27,14 +26,13 @@ type LocalState = { }; const Wrapper = styled.div` - position: relative; display: flex; height: 100%; flex: 1; align-items: center; - padding: 0px 30px 0 35px; overflow-y: hidden; overflow-x: auto; + padding: 0px 30px 0 35px; @media screen and (max-width: ${SCREEN_SIZE.MD}) { justify-content: space-between; @@ -51,7 +49,10 @@ const StyledNavLink = styled(NavLink)` color: ${colors.TEXT_SECONDARY}; margin: 0px 4px; padding: 20px 35px; + display: flex; + height: 100%; white-space: nowrap; + border-bottom: 2px solid ${colors.WHITE}; @media screen and (max-width: ${SCREEN_SIZE.MD}) { padding: 20px 10px; @@ -64,7 +65,6 @@ const StyledNavLink = styled(NavLink)` &.active, &:hover { - transition: all 0.3s ease-in-out; color: ${colors.TEXT_PRIMARY}; } @@ -75,27 +75,23 @@ const StyledNavLink = styled(NavLink)` &:last-child { margin-right: 0px; } -`; -class TopNavigationAccount extends React.PureComponent { - constructor(props: Props) { - super(props); - this.state = { - wrapper: null, - }; + &.has-bottom-border { + border-bottom: 2px solid ${colors.GREEN_PRIMARY}; } +`; - wrapperRefCallback = (element: ?HTMLElement) => { - this.setState({ - wrapper: element, - }); - }; - - wrapper: ?HTMLElement; +const LinkContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding-top: 4px; +`; +class TopNavigationAccount extends React.PureComponent { render() { const { config } = this.props.localStorage; - const { state, pathname } = this.props.router.location; + const { state } = this.props.router.location; if (!state) return null; const { network } = this.props.selectedAccount; if (!network) return null; @@ -107,22 +103,32 @@ class TopNavigationAccount extends React.PureComponent { }`; return ( - - - + + + + + - - + + + + - - + + + + {networkConfig.hasSignVerify && ( - - + + + + )} - this.state.wrapper} /> ); }