From 898c61dc7f046138e1ee84a2c10ab390ca02d53b Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Thu, 10 May 2018 16:39:52 +0200
Subject: [PATCH] summary tx history link

---
 src/js/components/wallet/summary/Summary.js   |  8 +++---
 .../wallet/summary/SummaryDetails.js          |  2 --
 src/styles/inputs.less                        | 26 +++++++++++++++++++
 src/styles/summary.less                       | 24 +++++++++--------
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/js/components/wallet/summary/Summary.js b/src/js/components/wallet/summary/Summary.js
index debe3044..f531c61a 100644
--- a/src/js/components/wallet/summary/Summary.js
+++ b/src/js/components/wallet/summary/Summary.js
@@ -38,17 +38,19 @@ const _render = (props: Props, state: AccountState): React$Element<string> => {
 
     const abstractAccount = props.abstractAccount;
     const tokens = findAccountTokens(props.tokens, account);
+    const explorerLink: string = `${abstractAccount.coin.explorer.address}${account.address}`;
 
     return (
 
         <section className="summary">
             { deviceStatusNotification }
 
-            <h2 className={ `summary-header ${abstractAccount.network}` }>Address #{ parseInt(abstractAccount.index) + 1 }</h2>
-            
+            <h2 className={ `summary-header ${abstractAccount.network}` }>
+                Address #{ parseInt(abstractAccount.index) + 1 }
+                <a href={ explorerLink } className="gray" target="_blank" rel="noreferrer noopener">See full transaction history</a>
+            </h2>
 
             <SummaryDetails 
-                explorer={ `${abstractAccount.coin.explorer.address}${account.address}` }
                 coin={ abstractAccount.coin }
                 summary={ props.summary } 
                 balance={ account.balance }
diff --git a/src/js/components/wallet/summary/SummaryDetails.js b/src/js/components/wallet/summary/SummaryDetails.js
index ca7ccb8b..8d5c45c8 100644
--- a/src/js/components/wallet/summary/SummaryDetails.js
+++ b/src/js/components/wallet/summary/SummaryDetails.js
@@ -7,7 +7,6 @@ import BigNumber from 'bignumber.js';
 import type { Props as BaseProps } from './index';
 
 type Props = {
-    explorer: string,
     coin: $PropertyType<$ElementType<BaseProps, 'abstractAccount'>, 'coin'>,
     summary: $ElementType<BaseProps, 'summary'>,
     balance: string,
@@ -63,7 +62,6 @@ const SummaryDetails = (props: Props): ?React$Element<string> => {
     return (
         <div className="summary-details opened">
             <div className="toggle" onClick={ props.onToggle }></div>
-            <a href={ props.explorer } className="green" target="_blank" rel="noreferrer noopener">See full transaction history</a>
             <div className="content">
                 { balanceColumn }
                 { rateColumn }
diff --git a/src/styles/inputs.less b/src/styles/inputs.less
index 8e042078..34a4206b 100644
--- a/src/styles/inputs.less
+++ b/src/styles/inputs.less
@@ -272,3 +272,29 @@ a.green:visited {
         }
     }
 }
+
+a.gray, 
+a.gray:visited {
+    position: relative;
+    color: @color_text_secondary;
+    .hover();
+
+    &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        border-top: 1px solid @color_text_secondary;
+        line-height: 1px;
+        left: 0px;
+        bottom: -1px;
+        transition: border-color 0.3s;
+    }
+
+    &:hover,
+    &:active {
+        color: @color_text_primary;
+        &:after {
+            border-color: transparent;
+        }
+    }
+}
diff --git a/src/styles/summary.less b/src/styles/summary.less
index bc9f6386..299ee2af 100644
--- a/src/styles/summary.less
+++ b/src/styles/summary.less
@@ -9,25 +9,28 @@
             width: 32px;
             height: 22px;
             background-repeat: no-repeat;
-            background-size: 20px 20px;
-        }
-
-        &.ropsten:before {
-            background-image: url('../images/ropsten-logo.png');
             background-size: auto 20px;
         }
+
         &.ethereum:before {
             background-image: url('../images/eth-logo.png');
-            background-size: auto 20px;
+        }
+        &.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');
-            background-size: auto 20px;
         }
-        &.ethereum-classic:before {
-            background-image: url('../images/etc-logo.png');
-            background-size: auto 20px;
+
+        a {
+            font-size: 12px;
+            margin-left: auto;
+            white-space: nowrap;
         }
+        
     }
 
     .token-select {
@@ -67,7 +70,6 @@
         .content {
             display: flex;
             padding-bottom: 32px;
-            padding-top: 24px;
 
             .column {
                 margin-right: 48px;