improve channel cover upload ux

static/app-strings.json

@@ -2215,5 +2215,6 @@
   "If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.": "If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.",
   "Enable Data Hosting": "Enable Data Hosting",
   "Data over the limit will be deleted within 30 minutes. This will make the Yrbl cry a little bit.": "Data over the limit will be deleted within 30 minutes. This will make the Yrbl cry a little bit.",
+  "Choose %asset%": "Choose %asset%",
   "--end--": "--end--"
 }

ui/component/channelEdit/view.jsx

@@ -292,7 +292,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

@@ -103,7 +103,7 @@ $actions-z-index: 2;
 
   @media (max-width: $breakpoint-small) {
     top: 0;
-    margin-top: var(--spacing-m);
+    margin-top: var(--spacing-xl);
   }
 }
 
@@ -259,7 +259,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