quick fix to add a cancel button on publish

ui/component/publishFile/index.js

@@ -5,6 +5,7 @@ import {
   makeSelectPublishFormValue,
   doUpdatePublishForm,
   doToast,
+  doClearPublish,
 } from 'lbry-redux';
 import PublishPage from './view';
 
@@ -17,6 +18,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
+  clearPublish: () => dispatch(doClearPublish()),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
   showToast: message => dispatch(doToast({ message, isError: true })),
 });

ui/component/publishFile/view.jsx

@@ -16,10 +16,22 @@ type Props = {
   disabled: boolean,
   publishing: boolean,
   showToast: string => void,
+  inProgress: boolean,
+  clearPublish: () => void,
 };
 
 function PublishFile(props: Props) {
-  const { name, balance, filePath, isStillEditing, updatePublishForm, disabled, publishing } = props;
+  const {
+    name,
+    balance,
+    filePath,
+    isStillEditing,
+    updatePublishForm,
+    disabled,
+    publishing,
+    inProgress,
+    clearPublish,
+  } = props;
 
   let currentFile = '';
   if (filePath) {
@@ -79,7 +91,12 @@ function PublishFile(props: Props) {
       actionIconPadding={false}
       icon={ICONS.PUBLISH}
       disabled={disabled || balance === 0}
-      title={title}
+      title={
+        <React.Fragment>
+          {title}{' '}
+          {inProgress && <Button button="close" label={__('Cancel')} icon={ICONS.REMOVE} onClick={clearPublish} />}
+        </React.Fragment>
+      }
       subtitle={
         isStillEditing ? __('You are currently editing a claim.') : __('Publish something totally wacky and wild.')
       }

ui/component/publishForm/view.jsx

@@ -86,6 +86,8 @@ function PublishForm(props: Props) {
     disabled = false,
   } = props;
   const formDisabled = (!filePath && !editingURI) || publishing;
+  const isInProgress = filePath || editingURI || name || title;
+
   // If they are editing, they don't need a new file chosen
   const formValidLessFile =
     name && isNameValid(name, false) && title && bid && !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
@@ -132,7 +134,7 @@ function PublishForm(props: Props) {
 
   return (
     <Fragment>
-      <PublishFile disabled={disabled || publishing} />
+      <PublishFile disabled={disabled || publishing} inProgress={isInProgress} />
       <div className={classnames({ 'card--disabled': formDisabled })}>
         <PublishText disabled={formDisabled} />
         <Card actions={<SelectThumbnail />} />

ui/scss/component/_button.scss

@@ -27,6 +27,7 @@
   transition: all var(--transition-duration) var(--transition-style);
   border-radius: var(--card-radius);
   color: var(--color-text);
+  font-size: var(--font-small);
 
   &:hover {
     color: var(--color-button-primary-text);