Merge pull request #2037 from lbryio/housekeeping

Housekeeping

src/renderer/component/publishForm/view.jsx

@@ -354,23 +354,25 @@ class PublishForm extends React.PureComponent<Props> {
     return (
       <Form onSubmit={this.handlePublish}>
         <section className={classnames('card card--section', { 'card--disabled': publishing })}>
-          <div className="card__title">{__('Content')}</div>
+          <div className="card__title card--space-between">
+            {__('Content')}
+            {(filePath || !!editingURI) && (
+              <div className="card__actions-top-corner">
+                <Button
+                  button="inverse"
+                  icon={icons.CLOSE}
+                  label={__('Clear')}
+                  onClick={clearPublish}
+                />
+              </div>
+            )}
+          </div>
           <div className="card__subtitle">
             {isStillEditing ? __('Editing a claim') : __('What are you publishing?')}{' '}
             {__('Read our')}{' '}
             <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/how-to-publish" />{' '}
             {__('to learn more.')}
           </div>
-          {(filePath || !!editingURI) && (
-            <div className="card-media__internal-links">
-              <Button
-                button="inverse"
-                icon={icons.CLOSE}
-                label={__('Clear')}
-                onClick={clearPublish}
-              />
-            </div>
-          )}
           <div className="card__content">
             <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
             {!!isStillEditing &&

src/renderer/scss/component/_card.scss

@@ -36,24 +36,6 @@
   cursor: pointer;
 }
 
-.card__media {
-  background-color: $lbry-gray-3;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.card__media--no-img {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.card__media--nsfw {
-  background-color: $lbry-red-5;
-}
-
 .card--pending {
   opacity: 0.5;
 }
@@ -85,6 +67,24 @@
   }
 }
 
+.card__media {
+  background-color: $lbry-gray-3;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.card__media--no-img {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.card__media--nsfw {
+  background-color: $lbry-red-5;
+}
+
 .card__actions {
   display: flex;
   margin-top: $spacing-vertical * 2/3;
@@ -227,12 +227,12 @@
 
 .card__subtitle {
   color: $lbry-gray-5;
-  font-size: 1em;
+  font-size: .9em;
-  line-height: 1em;
+  line-height: .9em;
   padding-top: $spacing-vertical * 1/3;
 
   @media (min-width: $large-breakpoint) {
-    font-size: 1.2em;
+    font-size: 1em;
   }
 }
 
@@ -277,11 +277,11 @@
 .card__title--file-card {
   // FileCard is slightly different where the title is only slightly bigger than the subtitle
   // Slightly bigger than 2 lines for consistent channel placement
-  font-size: 1.1em;
+  font-size: 1em;
   height: 3.3em;
 
   @media only screen and (min-width: $large-breakpoint) {
-    font-size: 1.3em;
+    font-size: 1.1em;
   }
 }