Top navigation account refactored

src/styles/content.less

@@ -1,58 +0,0 @@
-article {
-
-    nav {
-        .account-tabs {
-            position: relative;
-            display: flex;
-            flex: 1;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0px 28px; // 20px padding arround links
-            max-width: 600px;
-    
-            a {
-                font-weight: 500;
-                font-size: 14px;
-                color: @color_text_secondary;
-                margin: 0px 4px;
-                padding: 20px;
-                .hover();
-
-                &.active,
-                &:hover {
-                    color: @color_text_primary;
-                }
-    
-                &:first-child {
-                    margin-left: 0px;
-                }
-    
-                &:last-child {
-                    margin-right: 0px;
-                }
-            }
-
-            .indicator {
-                position: absolute;
-                bottom: -1px;
-                left: 0;
-                width: 100px;
-                height: 2px;
-                background: @color_green_primary;
-                transition: all 0.3s ease-in-out;
-            }
-        }
-    }
-
-    section {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        background: @color_white;
-    
-        p {
-            padding: 0px 48px;
-            color: @color_text_secondary;
-        }
-    }
-}

src/styles/index.less

@@ -1,7 +1,6 @@
 @import './fonts.less';
 @import './colors.less';
 @import './mixins.less';
-@import './content.less';
 
 @import './reactSelect.less';
 @import './rcTooltip.less';

src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import colors from 'config/colors';
+import React, { Component } from 'react';
+
+const Wrapper = styled.div`
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 100px;
+    height: 2px;
+    background: ${colors.GREEN_PRIMARY};
+    transition: all 0.3s ease-in-out;
+`;
+
+class Indicator extends Component<Props, State> {
+    reposition: () => void;
+
+    state: State;
+
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            style: {
+                width: 0,
+                left: 0,
+            },
+        };
+
+        this.reposition = this.reposition.bind(this);
+    }
+
+    handleResize() {
+        this.reposition();
+    }
+
+    componentDidMount() {
+        this.reposition();
+        window.addEventListener('resize', this.reposition, false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.reposition, false);
+    }
+
+    componentDidUpdate(newProps: Props) {
+        this.reposition();
+    }
+
+    reposition() {
+        const tabs = document.querySelector('.account-tabs');
+        if (!tabs) return;
+        const active = tabs.querySelector('.active');
+        if (!active) return;
+        const bounds = active.getBoundingClientRect();
+
+        const left = bounds.left - tabs.getBoundingClientRect().left;
+
+        if (this.state.style.left !== left) {
+            this.setState({
+                style: {
+                    width: bounds.width,
+                    left,
+                },
+            });
+        }
+    }
+
+    render() {
+        return (
+            <Wrapper style={this.state.style}>{ this.props.pathname }</Wrapper>
+        );
+    }
+}
+
+export default Indicator;

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -1,104 +1,53 @@
-/* @flow */
-
-
-import React, { Component } from 'react';
+import styled from 'styled-components';
+import React from 'react';
 import { NavLink } from 'react-router-dom';
-
-
-type Props = {
-    pathname: string;
-}
-type State = {
-    style: {
-        width: number,
-        left: number
-    };
-}
-
-class Indicator extends Component<Props, State> {
-    reposition: () => void;
-
-    state: State;
-
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            style: {
-                width: 0,
-                left: 0,
-            },
-        };
-
-        this.reposition = this.reposition.bind(this);
+import colors from 'config/colors';
+import Indicator from './components/Indicator';
+
+const Wrapper = styled.div`
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 28px;
+    max-width: 600px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+    font-weight: 500;
+    font-size: 14px;
+    color: ${colors.TEXT_SECONDARY};
+    margin: 0px 4px;
+    padding: 20px;
+
+    &.active,
+    &:hover {
+        transition: all 0.3s ease-in-out;
+        color: ${colors.TEXT_PRIMARY};
     }
 
-    handleResize() {
-        this.reposition();
+    &:first-child {
+        margin-left: 0px;
     }
 
-    componentDidMount() {
-        this.reposition();
-        window.addEventListener('resize', this.reposition, false);
+    &:last-child {
+        margin-right: 0px;
     }
+`;
 
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.reposition, false);
-    }
-
-    componentDidUpdate(newProps: Props) {
-        this.reposition();
-    }
-
-    reposition() {
-        const tabs = document.querySelector('.account-tabs');
-        if (!tabs) return;
-        const active = tabs.querySelector('.active');
-        if (!active) return;
-        const bounds = active.getBoundingClientRect();
-
-        const left = bounds.left - tabs.getBoundingClientRect().left;
-
-        if (this.state.style.left !== left) {
-            this.setState({
-                style: {
-                    width: bounds.width,
-                    left,
-                },
-            });
-        }
-    }
-
-    render() {
-        return (
-            <div className="indicator" style={this.state.style}>{ this.props.pathname }</div>
-        );
-    }
-}
 
 const TopNavigationAccount = (props: any) => {
     const urlParams = props.match.params;
     const basePath = `/device/${urlParams.device}/network/${urlParams.network}/account/${urlParams.account}`;
 
     return (
-        <div className="account-tabs">
-            {/* <NavLink to={ `${basePath}` }>
-                History
-            </NavLink> */}
-            <NavLink exact to={`${basePath}`}>
-                Summary
-            </NavLink>
-            <NavLink to={`${basePath}/send`}>
-                Send
-            </NavLink>
-            <NavLink to={`${basePath}/receive`}>
-                Receive
-            </NavLink>
-            {/* <NavLink to={ `${basePath}/signverify` }>
-                Sign &amp; Verify
-            </NavLink> */}
+        <Wrapper className="account-tabs">
+            <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
+            <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
+            <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
             <Indicator pathname={props.match.pathname} />
-        </div>
+        </Wrapper>
     );
 };