Small changes

Clicking support hides everything below fileActions
Title of form is Support now
One line helper sentence

Moved Tx related component to internal
Unfiltered -> Show All -> All
Claims -> Publishes
Fee below Amount(class meta)
Dropped Credits everywhere.

ui/js/component/bodyTransactionList/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { doNavigate } from "actions/navigation";
-import TransactionTableBody from "./view";
-
-const perform = dispatch => ({
-  navigate: (path, params) => dispatch(doNavigate(path, params)),
-});
-
-export default connect(null, perform)(TransactionTableBody);

ui/js/component/common.js

@@ -71,6 +71,7 @@ export class CreditAmount extends React.PureComponent {
     showFullPrice: React.PropTypes.bool,
     showPlus: React.PropTypes.bool,
     look: React.PropTypes.oneOf(["indicator", "plain"]),
+    fee: React.PropTypes.bool,
   };
 
   static defaultProps = {
@@ -81,6 +82,7 @@ export class CreditAmount extends React.PureComponent {
     showFree: false,
     showFullPrice: false,
     showPlus: false,
+    fee: false,
   };
 
   render() {
@@ -117,7 +119,10 @@ export class CreditAmount extends React.PureComponent {
 
     return (
       <span
-        className={`credit-amount credit-amount--${this.props.look}`}
+        className={`credit-amount credit-amount--${this.props.look} ${this.props
+          .fee
+          ? " meta"
+          : ""}`}
         title={fullPrice}
       >
         <span>

ui/js/component/headerTransactionList/index.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import TransactionTableHeader from "./view";
-
-export default connect(null, null)(TransactionTableHeader);

ui/js/component/tipLink/view.jsx

@@ -32,7 +32,13 @@ class TipLink extends React.PureComponent {
     return (
       <div className="card__content">
         <div className="card__title-primary">
-          <h4>{__("Support Claim")}</h4>
+          <h4>{__("Support")}</h4>
+        </div>
+        <div className="card__content">
+          {__(
+            "Support the creator and the success of their content by sending a tip. "
+          )}
+          <Link label={__("Learn more")} href="https://lbry.io/faq/tipping" />
         </div>
         <div className="card__content">
           <FormRow

ui/js/component/transactionList/index.js

@@ -1,5 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
+import { doNavigate } from "actions/navigation";
 import TransactionList from "./view";
 
-export default connect(null, null)(TransactionList);
+const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
+});
+
+export default connect(null, perform)(TransactionList);

ui/js/component/transactionList/internal/TransactionListBody.jsx

@@ -11,10 +11,7 @@ class TransactionTableBody extends React.PureComponent {
     let uri = `lbry://${claim_name}#${claim_id}`;
 
     return (
-      <a
-        className="button-text"
-        onClick={() => this.props.navigate("/show", { uri })}
-      >
+      <a className="button-text" onClick={() => this.props.navigate(uri)}>
         {claim_name}
       </a>
     );
@@ -37,6 +34,15 @@ class TransactionTableBody extends React.PureComponent {
     const date = transaction.date;
     const fee = transaction.fee;
     const filter = this.props.filter;
+    const options = {
+      weekday: "short",
+      year: "2-digit",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    };
 
     if (filter == "tipSupport")
       transaction["tipSupport_info"] = transaction["support_info"].filter(
@@ -49,7 +55,7 @@ class TransactionTableBody extends React.PureComponent {
             <tr key={`${txid}:${item.nout}`}>
               <td>
                 {date
-                  ? date.toLocaleDateString() + " " + date.toLocaleTimeString()
+                  ? date.toLocaleDateString("en-US", options)
                   : <span className="empty">
                       {__("(Transaction pending)")}
                     </span>}
@@ -58,12 +64,18 @@ class TransactionTableBody extends React.PureComponent {
                 <CreditAmount
                   amount={item.amount}
                   look="plain"
+                  label={false}
                   showPlus={true}
                   precision={8}
-                />{" "}
-              </td>
-              <td>
-                <CreditAmount amount={fee} look="plain" precision={8} />{" "}
+                />
+                <br />
+                <CreditAmount
+                  amount={fee}
+                  look="plain"
+                  fee={true}
+                  label={false}
+                  precision={8}
+                />
               </td>
               <td>
                 {this.getClaimLink(item.claim_name, item.claim_id)}
@@ -77,7 +89,7 @@ class TransactionTableBody extends React.PureComponent {
       : <tr key={txid}>
           <td>
             {date
-              ? date.toLocaleDateString() + " " + date.toLocaleTimeString()
+              ? date.toLocaleDateString("en-US", options)
               : <span className="empty">
                   {__("(Transaction pending)")}
                 </span>}
@@ -86,12 +98,18 @@ class TransactionTableBody extends React.PureComponent {
             <CreditAmount
               amount={transaction.amount}
               look="plain"
+              label={false}
               showPlus={true}
               precision={8}
-            />{" "}
-          </td>
-          <td>
-            <CreditAmount amount={fee} look="plain" precision={8} />{" "}
+            />
+            <br />
+            <CreditAmount
+              amount={fee}
+              look="plain"
+              fee={true}
+              label={false}
+              precision={8}
+            />
           </td>
           <td>
             <LinkTransaction id={txid} />

ui/js/component/transactionList/internal/TransactionListHeader.jsx

@@ -7,8 +7,7 @@ class TransactionTableHeader extends React.PureComponent {
       <thead>
         <tr>
           <th>{__("Date")}</th>
-          <th>{__("Amount")}</th>
-          <th>{__("Fee")}</th>
+          <th>{__("Amount(Fee)")}</th>
           {filter != "unfiltered" && <th> {__("Claim Name")} </th>}
           <th>{__("Transaction")}</th>
         </tr>

ui/js/component/transactionList/view.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import TransactionTableHeader from "component/headerTransactionList";
-import TransactionTableBody from "component/bodyTransactionList";
+import TransactionTableHeader from "./internal/TransactionListHeader";
+import TransactionTableBody from "./internal/TransactionListBody";
 import FormField from "component/formField";
 
 class TransactionList extends React.PureComponent {
@@ -18,6 +18,10 @@ class TransactionList extends React.PureComponent {
     });
   }
 
+  handleClaimNameClicked(uri) {
+    this.props.navigate("/show", { uri });
+  }
+
   render() {
     const { emptyMessage, transactions } = this.props;
     const { filter } = this.state;
@@ -38,8 +42,8 @@ class TransactionList extends React.PureComponent {
             type="select"
             onChange={this.handleFilterChanged.bind(this)}
           >
-            <option value="unfiltered">{__("Unfiltered")}</option>
-            <option value="claim">{__("Claims")}</option>
+            <option value="unfiltered">{__("All")}</option>
+            <option value="claim">{__("Publishes")}</option>
             <option value="support">{__("Supports")}</option>
             <option value="tipSupport">{__("Tips")}</option>
             <option value="update">{__("Updates")}</option>
@@ -47,7 +51,11 @@ class TransactionList extends React.PureComponent {
         </span>
         <table className="table-standard table-stretch">
           <TransactionTableHeader filter={filter} />
-          <TransactionTableBody transactions={transactions} filter={filter} />
+          <TransactionTableBody
+            transactions={transactions}
+            filter={filter}
+            navigate={this.handleClaimNameClicked.bind(this)}
+          />
         </table>
       </div>
     );

ui/js/page/file/view.jsx

@@ -154,13 +154,14 @@ class FilePage extends React.PureComponent {
                 />
               </div>
             </div>
+            {!showTipBox &&
               <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
                 <ReactMarkdown
                   source={(metadata && metadata.description) || ""}
                   escapeHtml={true}
                   disallowedTypes={["Heading", "HtmlInline", "HtmlBlock"]}
                 />
-            </div>
+              </div>}
           </div>
           {metadata && !showTipBox
             ? <div className="card__content">
@@ -174,13 +175,14 @@ class FilePage extends React.PureComponent {
                 claim_id={claim.claim_id}
               />
             : ""}
+          {!showTipBox &&
             <div className="card__content">
               <Link
                 href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}
                 label={__("report")}
                 className="button-text-help"
               />
-          </div>
+            </div>}
         </section>
       </main>
     );