From ce635fe979a290067f8dd1be84985cab2ed694e7 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Mon, 13 Aug 2018 14:19:19 +0200
Subject: [PATCH] Refactored menu rendering - styled

---
 .eslintrc                                     |  1 +
 .../components/wallet/aside/CoinSelection.js  | 75 ++++++++++++++++---
 src/js/constants/navigation.js                |  6 ++
 src/styles/aside.less                         | 48 ------------
 4 files changed, 71 insertions(+), 59 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 3e9c178c..4bef41c6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -11,6 +11,7 @@
     },
     "rules": {
         "react/destructuring-assignment": 0,
+        "class-methods-use-this": 0,
         "react/jsx-one-expression-per-line": 0,
         "react/jsx-indent": [2, 4],
         "react/jsx-indent-props": [2, 4],
diff --git a/src/js/components/wallet/aside/CoinSelection.js b/src/js/components/wallet/aside/CoinSelection.js
index 550f65d6..0dfc35b5 100644
--- a/src/js/components/wallet/aside/CoinSelection.js
+++ b/src/js/components/wallet/aside/CoinSelection.js
@@ -1,8 +1,52 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import colors from '~/js/config/colors';
+import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import navigationConstants from '~/js/constants/navigation';
 
+const Wrapper = styled.div`
+    padding: 0 0 20px 0;
+`;
+
+const ImgActive = styled.img`
+    margin-right: 20px;
+`;
+
+const ImgRedirect = styled.img`
+    margin-right: 15px;
+`;
+
+const Link = styled(NavLink)`
+    display: flex;
+    align-items: center;
+`;
+
+const LinkRedirect = styled.a`
+    display: flex;
+    align-items: center;
+`;
+
+const Divider = styled.div`
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    color: ${colors.TEXT_SECONDARY};
+    background: ${colors.GRAY_LIGHT};
+    padding: 8px 28px 8px 24px;
+    border-top: 1px solid ${colors.DIVIDER};
+    border-bottom: 1px solid ${colors.DIVIDER};
+`;
+
+const RedirectText = styled.span`
+    display: flex;
+    justify-content: flex-end;
+`;
+
+const Name = styled.div`
+    height: 100%;
+`;
+
 class CoinSelection extends Component {
     getBaseUrl() {
         const { selectedDevice } = this.props.wallet;
@@ -16,30 +60,39 @@ class CoinSelection extends Component {
         return baseUrl;
     }
 
+    getImagePath(symbol, network) {
+        const coindId = (symbol === 'tETH' ? network : symbol);
+        return `../../../../images/${coindId}-logo.png`;
+    }
+
     render() {
         const { config } = this.props.localStorage;
         return (
-            <section>
+            <Wrapper>
                 {config.coins.map(item => (
-                    <NavLink
+                    <Link
                         key={item.network}
                         to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
-                    >{ item.name }
-                    </NavLink>
+                    >
+                        <ImgActive width="12px" src={this.getImagePath(item.symbol, item.network)} />
+                        <Name>{ item.name }</Name>
+                    </Link>
                 ))}
-                <div className="coin-divider">
-                    Other coins <span>(You will be redirected)</span>
-                </div>
+                <Divider>
+                    Other coins <RedirectText>(You will be redirected)</RedirectText>
+                </Divider>
                 {navigationConstants.map(item => (
-                    <a
+                    <LinkRedirect
                         key={item.coinName}
                         rel="noopener noreferrer"
                         target="_blank"
                         href={item.url}
-                    >{item.coinName}
-                    </a>
+                    >
+                        <ImgRedirect src={item.image} width="20px" />
+                        {item.coinName}
+                    </LinkRedirect>
                 ))}
-            </section>
+            </Wrapper>
         );
     }
 }
diff --git a/src/js/constants/navigation.js b/src/js/constants/navigation.js
index 4dd85eb1..5e95c53e 100644
--- a/src/js/constants/navigation.js
+++ b/src/js/constants/navigation.js
@@ -2,25 +2,31 @@ export default [
     {
         coinName: 'Bitcoin',
         url: 'https://wallet.trezor.io/#/coin/btc',
+        image: '../images/btc-logo.png',
     },
     {
         coinName: 'Litecoin',
         url: 'https://wallet.trezor.io/#/coin/ltc',
+        image: '../images/ltc-logo.png',
     },
     {
         coinName: 'Bitcoin Cash',
         url: 'https://wallet.trezor.io/#/coin/bch',
+        image: '../images/bch-logo.png',
     },
     {
         coinName: 'Bitcoin Gold',
         url: 'https://wallet.trezor.io/#/coin/btg',
+        image: '../images/btg-logo.png',
     },
     {
         coinName: 'Dash',
         url: 'https://wallet.trezor.io/#/coin/dash',
+        image: '../images/dash-logo.png',
     },
     {
         coinName: 'Zcash',
         url: 'https://wallet.trezor.io/#/coin/zec',
+        image: '../images/zec-logo.png',
     },
 ];
\ No newline at end of file
diff --git a/src/styles/aside.less b/src/styles/aside.less
index ac253b83..0657c062 100644
--- a/src/styles/aside.less
+++ b/src/styles/aside.less
@@ -415,54 +415,6 @@ aside {
             background-size: auto 20px;
             background-position: 2px 0px;
         }
-
-        
-        &.ethereum:before {
-            background-image: url('../images/eth-logo.png');
-        }
-        &.ethereum-classic:before {
-            background-image: url('../images/etc-logo.png');
-        }
-        &.ropsten:before {
-            background-image: url('../images/ropsten-logo.png');
-        }
-        &.rinkeby:before {
-            background-image: url('../images/rinkeby-logo.png');
-        }
-
-        &.btc:before {
-            background-image: url('../images/btc-logo.png');
-        }
-        &.bch:before {
-            background-image: url('../images/bch-logo.png');
-        }
-        &.btg:before {
-            background-image: url('../images/btg-logo.png');
-        }
-        &.ltc:before {
-            background-image: url('../images/ltc-logo.png');
-        }
-        &.dash:before {
-            background-image: url('../images/dash-logo.png');
-        }
-        &.zec:before {
-            background-image: url('../images/zec-logo.png');
-        }
-    }
-
-    .coin-divider {
-        font-size: 12px;
-        display: flex;
-        justify-content: space-between;
-        color: @color_text_secondary;
-        background: @color_gray_light;
-        padding: 8px 28px 8px 24px;
-        border-top: 1px solid @color_divider;
-        border-bottom: 1px solid @color_divider;
-        span {
-            display: flex;
-            justify-content: flex-end;
-        }
     }
 
     .device-divider {