background

package.json

@@ -82,6 +82,7 @@
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@swc/core": "^1.4.16",
     "@types/auto-launch": "^5.0.5",
+    "@types/color": "^3.0.6",
     "@types/jsdom": "^21.1.6",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.7",

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) =>
+export const darkenColor = (
-  new Color(color).darken(amount).toString();
+  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 {

yarn.lock

@@ -1251,6 +1251,25 @@
     "@types/node" "*"
     "@types/responselike" "^1.0.0"
 
+"@types/color-convert@*":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.3.tgz#e93f5c991eda87a945058b47044f5f0008b0dce9"
+  integrity sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.4.tgz#e002611ff627347818d440a05e81650e9a4053b8"
+  integrity sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==
+
+"@types/color@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.6.tgz#29c27a99d4de2975e1676712679a0bd7f646a3fb"
+  integrity sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/conventional-commits-parser@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz#8c9d23e0b415b24b91626d07017303755d542dc8"