Fix cover upload ux (#184)

* do not block submit on thumb or cover error

* improve cover upload UX

* p padding

ui/component/channelEdit/view.jsx

@@ -115,23 +115,11 @@ function ChannelForm(props: Props) {
       isClaimingInitialRewards ||
       creatingChannel ||
       updatingChannel ||
-      nameError ||
-      thumbError ||
       coverError ||
       bidError ||
       (isNewChannel && !params.name)
     );
-  }, [
+  }, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, bidError, isNewChannel, params.name]);
-    isClaimingInitialRewards,
-    creatingChannel,
-    updatingChannel,
-    nameError,
-    thumbError,
-    coverError,
-    bidError,
-    isNewChannel,
-    params.name,
-  ]);
 
   function getChannelParams() {
     // fill this in with sdk data
@@ -305,7 +293,9 @@ function ChannelForm(props: Props) {
           </div>
           {params.coverUrl &&
             (coverError && isUpload.cover ? (
-              <div className="channel-cover__custom--waiting">{__('This will be visible in a few minutes.')}</div>
+              <div className="channel-cover__custom--waiting">
+                <p>{__('Uploaded image will be visible in a few minutes.')}</p>
+              </div>
             ) : (
               <img className="channel-cover__custom" src={coverSrc} onError={() => setCoverError(true)} />
             ))}

ui/component/selectAsset/view.jsx

@@ -118,7 +118,7 @@ function SelectAsset(props: Props) {
           <Button
             button="primary"
             type="submit"
-            label={__('Done')}
+            label={useUrl ? __('Done') : __('Upload')}
             disabled={!useUrl && (uploadStatus === SPEECH_UPLOADING || !pathSelected || !fileSelected)}
             onClick={() => doUploadAsset()}
           />

ui/scss/component/_channel.scss

@@ -40,6 +40,9 @@ $actions-z-index: 2;
   width: 100%;
   height: 100%;
   position: absolute;
+  p {
+    padding: var(--padding-m);
+  }
 }
 
 .channel-cover__gradient {
@@ -103,7 +106,7 @@ $actions-z-index: 2;
 
   @media (max-width: $breakpoint-small) {
     top: 0;
-    margin-top: var(--spacing-m);
+    margin-top: var(--spacing-xl);
   }
 }
 
@@ -259,7 +262,7 @@ $actions-z-index: 2;
     margin-top: 0;
 
     .button {
-      margin-top: var(--spacing-l);
+      margin-top: var(--spacing-xxl);
     }
   }
 }

ui/scss/init/_vars.scss

@@ -23,6 +23,7 @@ $breakpoint-large: 1600px;
   --spacing-m: calc(2rem / 2);
   --spacing-l: 2rem;
   --spacing-xl: 3rem;
+  --spacing-xxl: 4rem;
 
   // Aspect ratio
   --aspect-ratio-bluray: 41.6666666667%; // 12:5