use correct tx price color and fix tx refresh button layout

src/renderer/component/common/credit-amount.jsx

@@ -77,7 +77,7 @@ class CreditAmount extends React.PureComponent<Props> {
         title={fullPrice}
         className={classnames('badge', {
           badge,
-          'badge--cost': (badge && !isFree) || amount > 0,
+          'badge--cost': badge && amount > 0,
           'badge--free': badge && isFree,
           'badge--large': large,
         })}

src/renderer/component/transactionList/internal/transaction-list-item.jsx

@@ -1,5 +1,5 @@
 // @flow
-import type { Transaction } from '../view';
+import type { Transaction } from 'types/transaction';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import ButtonTransaction from 'component/common/transaction-link';
@@ -53,12 +53,12 @@ class TransactionListItem extends React.PureComponent<Props> {
     return (
       <tr>
         <td>
-          <CreditAmount inheritStyle showPlus amount={amount} precision={8} />
+          <CreditAmount showPlus amount={amount} precision={8} />
           <br />
 
           {fee !== 0 && (
             <span className="table__item-label">
-              <CreditAmount inheritStyle fee amount={fee} precision={8} />
+              <CreditAmount fee amount={fee} precision={8} />
             </span>
           )}
         </td>
@@ -67,16 +67,17 @@ class TransactionListItem extends React.PureComponent<Props> {
         </td>
         <td className="table__item--actionable">
           {reward && <span>{reward.reward_title}</span>}
-          {name && claimId && (
+          {name &&
-            <Button
+            claimId && (
-              constrict
+              <Button
-              button="link"
+                constrict
-              navigate="/show"
+                button="link"
-              navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}
+                navigate="/show"
-            >
+                navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}
-              {name}
+              >
-            </Button>
+                {name}
-          )}
+              </Button>
+            )}
         </td>
 
         <td>

src/renderer/component/transactionList/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import type { Transaction } from 'types/transaction';
 import * as icons from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import * as React from 'react';
@@ -8,17 +9,6 @@ import FileExporter from 'component/common/file-exporter';
 import { TRANSACTIONS } from 'lbry-redux';
 import TransactionListItem from './internal/transaction-list-item';
 
-export type Transaction = {
-  amount: number,
-  claim_id: string,
-  claim_name: string,
-  fee: number,
-  nout: number,
-  txid: string,
-  type: string,
-  date: Date,
-};
-
 type Props = {
   emptyMessage: ?string,
   slim?: boolean,

src/renderer/component/transactionListRecent/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import type { Transaction } from 'component/transactionList/view';
+import type { Transaction } from 'types/transaction';
 import * as icons from 'constants/icons';
 import React, { Fragment } from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
@@ -28,7 +28,7 @@ class TransactionListRecent extends React.PureComponent<Props> {
     return (
       <section className="card card--section">
         <header className="card__header card__header--flat">
-          <h2 className="card__title">
+          <h2 className="card__title card__title--flex-between">
             {__('Recent Transactions')}
             <RefreshTransactionButton />
           </h2>
@@ -39,11 +39,12 @@ class TransactionListRecent extends React.PureComponent<Props> {
           </p>
         </header>
 
-        {fetchingTransactions && !hasTransactions && (
+        {fetchingTransactions &&
-          <div className="card__content">
+          !hasTransactions && (
-            <BusyIndicator message={__('Loading transactions')} />
+            <div className="card__content">
-          </div>
+              <BusyIndicator message={__('Loading transactions')} />
-        )}
+            </div>
+          )}
 
         {hasTransactions && (
           <Fragment>

src/renderer/page/transactionHistory/view.jsx

@@ -27,7 +27,7 @@ class TransactionHistoryPage extends React.PureComponent<Props> {
       <Page>
         <section className="card card--section">
           <header className="card__header card__header--flat">
-            <h2 className="card__title">
+            <h2 className="card__title card__title--flex-between ">
               {__('Transaction History')}
               <RefreshTransactionButton />
             </h2>

src/renderer/scss/component/_card.scss

@@ -191,3 +191,9 @@
     margin-left: var(--spacing-vertical-medium);
   }
 }
+
+.card__title--flex-between {
+  display: flex;
+  @include between;
+  align-items: center;
+}

src/renderer/scss/component/_table.scss

@@ -109,8 +109,4 @@
   td:nth-of-type(5) {
     width: 15%;
   }
-
-  .badge {
-    background-color: transparent !important;
-  }
 }

src/renderer/types/transaction.js

@@ -0,0 +1,11 @@
+// @flow
+export type Transaction = {
+  amount: number,
+  claim_id: string,
+  claim_name: string,
+  fee: number,
+  nout: number,
+  txid: string,
+  type: string,
+  date: Date,
+};