summary tx history link

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 }

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 }

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;
+        }
+    }
+}

src/styles/summary.less

@@ -9,25 +9,28 @@
             width: 32px;
             height: 22px;
             background-repeat: no-repeat;
-            background-size: 20px 20px;
+            background-size: auto 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;
-        }
-        &.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;
         }
+        &.ropsten:before {
+            background-image: url('../images/ropsten-logo.png');
+        }
+        &.rinkeby:before {
+            background-image: url('../images/rinkeby-logo.png');
+        }
+
+        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;