fix: UserMenu default image (#480)

decentraland · Jan 3, 2024 · e687763 · e687763 · vercel · Jan 3, 2024
1 parent c7c3272
commit e687763
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.css b/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.css
@@ -65,10 +65,26 @@
   height: 110%;
   margin-left: -100px;
   margin-bottom: -100px;
+  width: 100%;
 }
 
 .dui-user-menu-signed-in .menu-wrapper .menu-wearable-preview.default-avatar {
   margin-left: -50px;
+  height: 100%;
+}
+
+.dui-user-menu-signed-in .menu-wrapper .menu-wearable-preview div {
+  height: 100%;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.dui-user-menu-signed-in
+  .menu-wrapper
+  .menu-wearable-preview.default-avatar
+  div {
+  background-image: url('../../../assets/man-default.png');
 }
 
 .dui-user-menu-signed-in
@@ -250,15 +266,15 @@
 
   .dui-user-menu-signed-in .menu-wrapper .menu-wearable-preview.default-avatar {
     margin-left: -30px;
-    height: 400px;
     margin-bottom: -100px;
   }
 
   .dui-user-menu-signed-in
     .menu-wrapper
     .menu-wearable-preview.default-avatar
-    img {
-    height: 400px;
+    div {
+    margin-top: 50px;
+    margin-left: 50px;
   }
 
   .dui-user-menu-signed-in .menu-option__sign-out {

diff --git a/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx b/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx
@@ -10,7 +10,6 @@ import LogoutIcon from '../../Icons/LogoutIcon'
 import Notifications from '../../Notifications/Notifications'
 import ArrowIcon from '../../Icons/ArrowIcon'
 import { config } from '../../../config'
-import mansDefault from '../../../assets/man-default.png'
 import { UserMenuEventId } from '../UserMenu.types'
 
 import '../UserMenu.css'
@@ -177,7 +176,13 @@ export const UserMenuSignedIn = (props: UserMenuSignedInProps) => {
             !avatar && 'default-avatar'
           )}
         >
-          <img src={avatar?.avatar?.snapshots?.body || mansDefault} />
+          <div
+            style={
+              avatar?.avatar?.snapshots?.body && {
+                backgroundImage: `url(${avatar?.avatar?.snapshots?.body})`
+              }
+            }
+          ></div>
         </div>
         <div className="menu-actions__wrapper">
           <div className={'menu-info'}>