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

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

diff --git a/.eslintrc b/.eslintrc
index 4bef41c6..3e9c178c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -11,7 +11,6 @@
     },
     "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 0dfc35b5..550f65d6 100644
--- a/src/js/components/wallet/aside/CoinSelection.js
+++ b/src/js/components/wallet/aside/CoinSelection.js
@@ -1,52 +1,8 @@
 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;
@@ -60,39 +16,30 @@ 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 (
-            <Wrapper>
+            <section>
                 {config.coins.map(item => (
-                    <Link
+                    <NavLink
                         key={item.network}
                         to={`${this.getBaseUrl()}/network/${item.network}/account/0`}
-                    >
-                        <ImgActive width="12px" src={this.getImagePath(item.symbol, item.network)} />
-                        <Name>{ item.name }</Name>
-                    </Link>
+                    >{ item.name }
+                    </NavLink>
                 ))}
-                <Divider>
-                    Other coins <RedirectText>(You will be redirected)</RedirectText>
-                </Divider>
+                <div className="coin-divider">
+                    Other coins <span>(You will be redirected)</span>
+                </div>
                 {navigationConstants.map(item => (
-                    <LinkRedirect
+                    <a
                         key={item.coinName}
                         rel="noopener noreferrer"
                         target="_blank"
                         href={item.url}
-                    >
-                        <ImgRedirect src={item.image} width="20px" />
-                        {item.coinName}
-                    </LinkRedirect>
+                    >{item.coinName}
+                    </a>
                 ))}
-            </Wrapper>
+            </section>
         );
     }
 }
diff --git a/src/js/constants/navigation.js b/src/js/constants/navigation.js
index 5e95c53e..4dd85eb1 100644
--- a/src/js/constants/navigation.js
+++ b/src/js/constants/navigation.js
@@ -2,31 +2,25 @@ 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 0657c062..ac253b83 100644
--- a/src/styles/aside.less
+++ b/src/styles/aside.less
@@ -415,6 +415,54 @@ 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 {