From fc8e62cdeae4f32df5edd8ab7331607274476cd0 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Wed, 19 Jun 2024 20:41:35 -0300
Subject: [PATCH] background

---
 package.json                                  |  1 +
 .../components/sidebar/sidebar-profile.tsx    |  1 +
 src/renderer/src/helpers.ts                   | 11 ++++++++--
 src/renderer/src/hooks/use-user-details.ts    |  6 ++---
 src/renderer/src/pages/user/user-content.tsx  | 22 +++++++++----------
 src/types/index.ts                            |  1 -
 yarn.lock                                     | 19 ++++++++++++++++
 7 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 89fb8c42..39a177e9 100644
--- a/package.json
+++ b/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",
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 2f4dc600..f8d2225e 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/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}
diff --git a/src/renderer/src/helpers.ts b/src/renderer/src/helpers.ts
index 19d1969c..9b6344a7 100644
--- a/src/renderer/src/helpers.ts
+++ b/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;
+};
diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts
index 75de473f..e17ad95f 100644
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/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));
       }
diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index 7d74f50a..2148f7e2 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/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 ? (
diff --git a/src/types/index.ts b/src/types/index.ts
index ecf53548..cda9bf72 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -133,7 +133,6 @@ export interface RunningGame {
   objectID: string;
   shop: GameShop;
   sessionStartTimestamp: number;
-  cover: string;
 }
 
 export interface DownloadProgress {
diff --git a/yarn.lock b/yarn.lock
index b822ab1d..1e03e6ee 100644
--- a/yarn.lock
+++ b/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"