From 4c8920339df2eaa0a99513ae4486015c8e7f81db Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Thu, 28 Oct 2021 15:15:47 -0400
Subject: [PATCH] improve channel cover upload ux

---
 static/app-strings.json           | 1 +
 ui/component/channelEdit/view.jsx | 4 +++-
 ui/component/selectAsset/view.jsx | 2 +-
 ui/scss/component/_channel.scss   | 4 ++--
 ui/scss/init/_vars.scss           | 1 +
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index d6c2cc202..e12e8ba5e 100644
--- a/static/app-strings.json
+++ b/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--"
 }
diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx
index c06664238..48a97912a 100644
--- a/ui/component/channelEdit/view.jsx
+++ b/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)} />
             ))}
diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx
index 469a67e94..817f58980 100644
--- a/ui/component/selectAsset/view.jsx
+++ b/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()}
           />
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 28df3462a..b83d89498 100644
--- a/ui/scss/component/_channel.scss
+++ b/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);
     }
   }
 }
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index 67a98edaa..93009114f 100644
--- a/ui/scss/init/_vars.scss
+++ b/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