background

This commit is contained in:
Zamitto 2024-06-19 20:41:35 -03:00
parent c6da57995d
commit fc8e62cdea
7 changed files with 44 additions and 17 deletions

View File

@ -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",

View File

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

View File

@ -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;
};

View File

@ -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));
}

View File

@ -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 ? (

View File

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

View File

@ -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"