From c4e6605adacb3d60501441bd4e829f8618d8f373 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 5 Aug 2020 13:06:24 -0400
Subject: [PATCH] use button group as publish file header instead of title for
 better app parity

---
 ui/component/publishFile/view.jsx | 19 +++++--------------
 ui/component/publishForm/view.jsx | 30 ++++++++++++++++--------------
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 001479b04..fbb35cbcf 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -36,6 +36,7 @@ type Props = {
   setPublishMode: string => void,
   setPrevFileText: string => void,
   setAutoPopulateName: boolean => void,
+  header: any,
 };
 
 function PublishFile(props: Props) {
@@ -62,6 +63,7 @@ function PublishFile(props: Props) {
     setPrevFileText,
     autoPopulateName,
     setAutoPopulateName,
+    header,
   } = props;
 
   const ffmpegAvail = ffmpegStatus.available;
@@ -324,28 +326,17 @@ function PublishFile(props: Props) {
     updatePublishForm(publishFormParams);
   }
 
-  let cardTitle;
-  if (publishing) {
-    cardTitle = (
-      <span>
-        {__('Uploading')}
-        <Spinner type={'small'} />
-      </span>
-    );
-  } else {
-    cardTitle = isStillEditing ? __('Edit') : __('Upload');
-  }
-
   const isPublishFile = mode === PUBLISH_MODES.FILE;
   const isPublishPost = mode === PUBLISH_MODES.POST;
 
   return (
     <Card
-      icon={ICONS.PUBLISH}
+      //   icon={ICONS.PUBLISH}
       disabled={disabled || balance === 0}
       title={
         <React.Fragment>
-          {cardTitle}{' '}
+          {header}
+          {publishing && <Spinner type={'small'} />}
           {inProgress && <Button button="close" label={__('Cancel')} icon={ICONS.REMOVE} onClick={clearPublish} />}
         </React.Fragment>
       }
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 928f4b4ba..c1b82a9eb 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -291,20 +291,6 @@ function PublishForm(props: Props) {
   // Editing claim uri
   return (
     <div className="card-stack">
-      <div className="button-tab-group">
-        {MODES.map((modeName, index) => (
-          <Button
-            key={index}
-            icon={modeName}
-            label={modeName}
-            button="alt"
-            onClick={() => {
-              setMode(modeName);
-            }}
-            className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
-          />
-        ))}
-      </div>
       <PublishFile
         uri={uri}
         mode={mode}
@@ -315,6 +301,22 @@ function PublishForm(props: Props) {
         setPrevFileText={setPrevFileText}
         autoPopulateName={autoPopulateNameFromTitle}
         setAutoPopulateName={setAutoPopulateNameFromTitle}
+        header={
+          <div>
+            {MODES.map((modeName, index) => (
+              <Button
+                key={index}
+                icon={modeName}
+                label={modeName}
+                button="alt"
+                onClick={() => {
+                  setMode(modeName);
+                }}
+                className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
+              />
+            ))}
+          </div>
+        }
       />
       {!publishing && (
         <div className={classnames({ 'card--disabled': formDisabled })}>