Fix banner placeholder hover

PrimalHQ · Jul 25, 2023 · 85c5304 · 85c5304
1 parent 95080d2
commit 85c5304
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/pages/EditProfile.module.scss b/src/pages/EditProfile.module.scss
@@ -10,6 +10,12 @@
   padding-bottom: 20px;
 }
 
+.bannerPlaceholder {
+  position: relative;
+  width: 100%;
+  height: 214px;
+}
+
 .banner {
   position: relative;
   width: 100%;
@@ -24,8 +30,9 @@
     opacity: 0.6;
   }
 
-  >label {
+  >label, .bannerPlaceholder>label {
     position: relative;
+    height: 100%;
     cursor: pointer;
 
     >img {

diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx
@@ -274,7 +274,12 @@ const EditProfile: Component = () => {
           </Show>
           <Show
             when={banner()}
-            fallback={<div class={styles.bannerPlaceholder}></div>}
+            fallback={
+            <div class={styles.bannerPlaceholder}>
+              <label for="upload-banner">
+                <div>{intl.formatMessage(tSettings.profile.uploadBanner)}</div>
+              </label>
+            </div>}
           >
             <label for="upload-banner">
               <img