Tipping UI is rendered in FilePage

ui/js/component/fileActions/view.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Icon, BusyMessage } from "component/common";
 import FilePrice from "component/filePrice";
-import TipLink from "component/tipLink";
 import { Modal } from "component/modal";
 import Link from "component/link";
 import { ToolTip } from "component/tooltip";
@@ -14,7 +13,6 @@ class FileActions extends React.PureComponent {
     super(props);
     this.state = {
       forceShowActions: false,
-      showTipBox: false,
     };
   }
 
@@ -59,16 +57,8 @@ class FileActions extends React.PureComponent {
     this.props.loadVideo(this.props.uri);
   }
 
-  handleTipShow() {
+  handleSupportButtonClicked() {
-    this.setState({
+    this.props.onTipShow();
-      showTipBox: true,
-    });
-  }
-
-  handleTipHide() {
-    this.setState({
-      showTipBox: false,
-    });
   }
 
   render() {
@@ -90,8 +80,6 @@ class FileActions extends React.PureComponent {
       claimInfo,
     } = this.props;
 
-    const { showTipBox } = this.state;
-
     const metadata = fileInfo ? fileInfo.metadata : null,
       openInFolderMessage = platform.startsWith("Mac")
         ? __("Open in Finder")
@@ -183,11 +171,11 @@ class FileActions extends React.PureComponent {
     return (
       <section className="file-actions">
         {showTipBox ? "" : content}
-        <TipLink
+        <Link
-          onTipShow={this.handleTipShow.bind(this)}
+          label={__("Support")}
-          onTipHide={this.handleTipHide.bind(this)}
+          button="text"
-          showTipBox={showTipBox}
+          icon="icon-gift"
-          claim_id={claimInfo.claim_id}
+          onClick={this.handleSupportButtonClicked.bind(this)}
         />
         {showMenu && !showTipBox
           ? <DropDownMenu>

ui/js/component/tipLink/view.jsx

@@ -1,28 +1,20 @@
 import React from "react";
 import Link from "component/link";
-import FormFieldPrice from "component/formFieldPrice";
+import { FormRow } from "component/form";
 
 class TipLink extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
-      feeAmount: "1.00",
+      tipAmount: "1.00",
-      currency: "LBC",
     };
   }
 
-  handleSupportButtonClicked() {
-    this.resetDefaults();
-    this.props.onTipShow();
-  }
-
   handleSendButtonClicked() {
     let claim_id = this.props.claim_id;
-    let amount = this.state.feeAmount;
+    let amount = this.state.tipAmount;
-
     this.props.sendSupport(amount, claim_id);
-
     this.props.onTipHide();
   }
 
@@ -30,61 +22,41 @@ class TipLink extends React.PureComponent {
     this.props.onTipHide();
   }
 
-  handleSupportPriceChange(newValue) {
+  handleSupportPriceChange(event) {
     this.setState({
-      feeAmount: newValue.amount,
+      tipAmount: event.target.value,
-      feeCurrency: newValue.currency,
-    });
-  }
-
-  resetDefaults() {
-    this.setState({
-      feeAmount: "1.00",
-      currency: "LBC",
     });
   }
 
   render() {
-    const { showTipBox } = this.props;
-    const { feeAmount, currency } = this.state;
-
-    let tipLink = (
-      <Link
-        label={__("Support")}
-        button="text"
-        icon="icon-gift"
-        onClick={this.handleSupportButtonClicked.bind(this)}
-      />
-    );
-
-    let tipBox = (
-      <span>
-        <FormFieldPrice
-          min="0"
-          placeholder="1.00"
-          step="0.1"
-          onChange={value => this.handleSupportPriceChange(value)}
-          defaultValue={{ amount: feeAmount, currency: currency }}
-        />
-        <Link
-          label={__("Send")}
-          button="primary"
-          onClick={this.handleSendButtonClicked.bind(this)}
-        />
-        <Link
-          label={__("Cancel")}
-          button="alt"
-          onClick={this.handleSupportCancelButtonClicked.bind(this)}
-        />
-        <div className="form-field__helper">
-          {__("This sends the entered amount of LBCs to the publisher.")}
-        </div>
-      </span>
-    );
-
     return (
-      <div className="menu-container">
+      <div className="card__content">
-        {showTipBox ? tipBox : tipLink}
+        <div className="card__title-primary">
+          <h4>{__("Support Claim")}</h4>
+        </div>
+        <div className="card__content">
+          <FormRow
+            label={__("Amount")}
+            postfix={__("LBC")}
+            min="0"
+            step="0.1"
+            type="number"
+            placeholder="1.00"
+            onChange={event => this.handleSupportPriceChange(event)}
+          />
+        </div>
+        <div className="card__actions">
+          <Link
+            label={__("Send")}
+            button="primary"
+            onClick={this.handleSendButtonClicked.bind(this)}
+          />
+          <Link
+            label={__("Cancel")}
+            button="alt"
+            onClick={this.handleSupportCancelButtonClicked.bind(this)}
+          />
+        </div>
       </div>
     );
   }

ui/js/page/filePage/view.jsx

@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
 import lbry from "lbry.js";
 import lbryuri from "lbryuri.js";
 import Video from "component/video";
+import TipLink from "component/tipLink";
 import { Thumbnail } from "component/common";
 import FilePrice from "component/filePrice";
 import FileActions from "component/fileActions";
@@ -33,6 +34,13 @@ const FormatItem = props => {
 };
 
 class FilePage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showTipBox: false,
+    };
+  }
+
   componentDidMount() {
     this.fetchFileInfo(this.props);
     this.fetchCostInfo(this.props);
@@ -54,6 +62,18 @@ class FilePage extends React.PureComponent {
     }
   }
 
+  handleTipShow() {
+    this.setState({
+      showTipBox: true,
+    });
+  }
+
+  handleTipHide() {
+    this.setState({
+      showTipBox: false,
+    });
+  }
+
   render() {
     const {
       claim,
@@ -64,6 +84,8 @@ class FilePage extends React.PureComponent {
       rewardedContentClaimIds,
     } = this.props;
 
+    const { showTipBox } = this.state;
+
     if (!claim || !metadata) {
       return (
         <span className="empty">{__("Empty claim or metadata info.")}</span>
@@ -111,7 +133,7 @@ class FilePage extends React.PureComponent {
               {!fileInfo || fileInfo.written_bytes <= 0
                 ? <span style={{ float: "right" }}>
                     <FilePrice uri={lbryuri.normalize(uri)} />
-                    {isRewardContent && <span>{" "}<IconFeatured /></span> }
+                    {isRewardContent && <span>{" "}<IconFeatured /></span>}
                   </span>
                 : null}
               <h1>{title}</h1>
@@ -126,7 +148,10 @@ class FilePage extends React.PureComponent {
                   : uriIndicator}
               </div>
               <div className="card__actions">
-                <FileActions uri={uri} />
+                <FileActions
+                  uri={uri}
+                  onTipShow={this.handleTipShow.bind(this)}
+                />
               </div>
             </div>
             <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
@@ -137,11 +162,18 @@ class FilePage extends React.PureComponent {
               />
             </div>
           </div>
-          {metadata
+          {metadata && !showTipBox
             ? <div className="card__content">
                 <FormatItem metadata={metadata} contentType={contentType} />
               </div>
             : ""}
+          {showTipBox
+            ? <TipLink
+                onTipShow={this.handleTipShow.bind(this)}
+                onTipHide={this.handleTipHide.bind(this)}
+                claim_id={fileInfo.claim_id}
+              />
+            : ""}
           <div className="card__content">
             <Link
               href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}