background

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -63,6 +63,7 @@ export function SidebarProfile() {
 
         {userDetails && runningGame && (
           <img
+            alt={runningGame.title}
             width={24}
             style={{ borderRadius: 4 }}
             src={runningGame.iconUrl}

src/renderer/src/helpers.ts

@@ -43,5 +43,12 @@ export const buildGameDetailsPath = (
   return `/game/${game.shop}/${game.objectID}?${searchParams.toString()}`;
 };
 
-export const darkenColor = (color: string, amount: number) =>
-  new Color(color).darken(amount).toString();
+export const darkenColor = (
+  color: string,
+  amount: number,
+  alpha: number = 1
+) => {
+  const newColor = new Color(color).darken(amount).alpha(alpha).toString();
+  console.log(color, newColor);
+  return newColor;
+};

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

@@ -36,8 +36,7 @@ export function useUserDetails() {
           format: "hex",
         });
 
-        const profileBackground = `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.8)})`;
-
+        const profileBackground = `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.8, 0.9)})`;
         dispatch(setProfileBackground(profileBackground));
 
         window.localStorage.setItem(
@@ -45,7 +44,8 @@ export function useUserDetails() {
           JSON.stringify({ ...userDetails, profileBackground })
         );
       } else {
-        dispatch(setProfileBackground(null));
+        const profileBackground = `#151515e6`;
+        dispatch(setProfileBackground(profileBackground));
 
         window.localStorage.setItem("userDetails", JSON.stringify(userDetails));
       }

src/renderer/src/pages/user/user-content.tsx

@@ -104,6 +104,17 @@ export function UserContent({
           position: "relative",
         }}
       >
+        {runningGame && (
+          <div
+            style={{
+              background: `url(${steamUrlBuilder.libraryHero(runningGame.objectID)})`,
+              position: "absolute",
+              inset: 0,
+              backgroundSize: "cover",
+            }}
+          ></div>
+        )}
+
         <div
           style={{
             background: profileContentBoxBackground,
@@ -111,17 +122,6 @@ export function UserContent({
             inset: 0,
           }}
         ></div>
-        {runningGame && (
-          <div
-            style={{
-              background: `url(${steamUrlBuilder.libraryHero(runningGame.objectID)})`,
-              position: "absolute",
-              inset: 0,
-              opacity: 0.1,
-              backgroundSize: "cover",
-            }}
-          ></div>
-        )}
 
         <div className={styles.profileAvatarContainer}>
           {userProfile.profileImageUrl ? (

src/types/index.ts

@@ -133,7 +133,6 @@ export interface RunningGame {
   objectID: string;
   shop: GameShop;
   sessionStartTimestamp: number;
-  cover: string;
 }
 
 export interface DownloadProgress {