Merge branch 'feature/user-profile' of github.com:hydralauncher/hydra into feature/user-profile

src/renderer/src/hooks/use-user-details.ts

@@ -44,6 +44,12 @@ export function useUserDetails() {
           "userDetails",
           JSON.stringify({ ...userDetails, profileBackground })
         );
+      } else {
+        dispatch(setProfileBackground(null));
+        window.localStorage.setItem(
+          "userDetails",
+          JSON.stringify({ ...userDetails })
+        );
       }
     },
     [dispatch]

src/renderer/src/pages/user/user-edit-modal.tsx

@@ -105,7 +105,7 @@ export const UserEditProfileModal = ({
                 src={newImageBase64 ?? userProfile.profileImageUrl ?? ""}
               />
             ) : (
-              <PersonIcon size={72} />
+              <PersonIcon size={96} />
             )}
             <div className={styles.editProfileImageBadge}>
               <PencilIcon size={16} />

src/renderer/src/pages/user/user.css.ts

@@ -40,6 +40,7 @@ export const profileAvatarEditContainer = style({
   height: "128px",
   display: "flex",
   borderRadius: "50%",
+  color: vars.color.body,
   justifyContent: "center",
   alignItems: "center",
   backgroundColor: vars.color.background,
@@ -101,29 +102,17 @@ export const contentSidebar = style({
       maxWidth: "250px",
       width: "100%",
     },
-    "(min-width: 1280px)": {
-      width: "100%",
-      maxWidth: "350px",
-    },
   },
 });
 
 export const feedGameIcon = style({
   height: "100%",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "relative",
 });
 
 export const libraryGameIcon = style({
   width: "100%",
   height: "100%",
   borderRadius: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "relative",
 });
 
 export const feedItem = style({
@@ -174,6 +163,7 @@ export const editProfileImageBadge = style({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  color: vars.color.background,
   backgroundColor: vars.color.muted,
   position: "absolute",
   bottom: "0px",