diff --git a/src/renderer/src/pages/library/filter-options.scss b/src/renderer/src/pages/library/filter-options.scss index 377527a1..cc899d56 100644 --- a/src/renderer/src/pages/library/filter-options.scss +++ b/src/renderer/src/pages/library/filter-options.scss @@ -22,6 +22,7 @@ font-weight: 500; transition: all ease 0.2s; white-space: nowrap; /* prevent label and count from wrapping */ + border: 1px solid rgba(0, 0, 0, 0.06); &:hover { color: rgba(255, 255, 255, 0.9); @@ -29,14 +30,17 @@ } &.active { - &.active { - color: rgba(255, 255, 255, 0.95); - background: rgba(255, 255, 255, 0.15); + color: #000; + background: #fff; + svg, + svg * { + fill: currentColor; + color: currentColor; } .library-filter-options__count { - background: rgba(255, 255, 255, 0.25); - color: rgba(255, 255, 255, 0.95); + background: #ebebeb; + color: rgba(0, 0, 0, 0.9); } } } diff --git a/src/renderer/src/pages/library/library-game-card-large.scss b/src/renderer/src/pages/library/library-game-card-large.scss index 10e8beb5..0be1e907 100644 --- a/src/renderer/src/pages/library/library-game-card-large.scss +++ b/src/renderer/src/pages/library/library-game-card-large.scss @@ -203,28 +203,39 @@ } &__achievement-trophy { - color: #ffd700; + color: #fff; flex-shrink: 0; } &__achievement-progress { width: 100%; - height: 6px; - background: rgba(255, 255, 255, 0.1); + height: 4px; + transition: all ease 0.2s; + background-color: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; + + &::-webkit-progress-bar { + background-color: transparent; + border-radius: 4px; + } + + &::-webkit-progress-value { + background-color: globals.$muted-color; + border-radius: 4px; + } } &__achievement-bar { height: 100%; - background: linear-gradient(90deg, #ffd700, #ffed4e); + background-color: globals.$muted-color; border-radius: 4px; transition: width 0.3s ease; } &__achievement-count { font-size: 14px; - font-weight: 600; + font-weight: 500; color: rgba(255, 255, 255, 0.9); white-space: nowrap; } @@ -239,7 +250,7 @@ display: flex; align-items: center; gap: 8px; - padding: 12px 24px; + padding: 10px 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); diff --git a/src/renderer/src/pages/library/library-game-card.scss b/src/renderer/src/pages/library/library-game-card.scss index ae4db0c8..b763ae2c 100644 --- a/src/renderer/src/pages/library/library-game-card.scss +++ b/src/renderer/src/pages/library/library-game-card.scss @@ -131,28 +131,41 @@ } &__achievement-trophy { - color: #ffd700; + color: #fff; flex-shrink: 0; } &__achievement-progress { + margin-top: 8px; width: 100%; - height: 6px; - background: rgba(255, 255, 255, 0.1); - border-radius: 3px; + height: 4px; + transition: all ease 0.2s; + background-color: rgba(255, 255, 255, 0.08); + border-radius: 4px; overflow: hidden; + + &::-webkit-progress-bar { + background-color: transparent; + border-radius: 4px; + } + + &::-webkit-progress-value { + background-color: globals.$muted-color; + border-radius: 4px; + } } &__achievement-bar { height: 100%; - background: linear-gradient(90deg, #ffd700, #ffed4e); - border-radius: 3px; + background-color: globals.$muted-color; + border-radius: 4px; transition: width 0.3s ease; + position: relative; } &__achievement-count { font-size: 12px; - font-weight: 600; + font-weight: 500; color: rgba(255, 255, 255, 0.9); white-space: nowrap; } diff --git a/src/renderer/src/pages/library/library.tsx b/src/renderer/src/pages/library/library.tsx index 1c6baf17..748aba4f 100644 --- a/src/renderer/src/pages/library/library.tsx +++ b/src/renderer/src/pages/library/library.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useState } from "react"; -import { useLibrary, useAppDispatch, useUserDetails } from "@renderer/hooks"; +import { useLibrary, useAppDispatch } from "@renderer/hooks"; import { setHeaderTitle } from "@renderer/features"; import { TelescopeIcon } from "@primer/octicons-react"; import { useTranslation } from "react-i18next"; @@ -19,7 +19,6 @@ export default function Library() { const [searchQuery, setSearchQuery] = useState(""); const dispatch = useAppDispatch(); const { t } = useTranslation("library"); - const { userDetails, fetchUserDetails } = useUserDetails(); useEffect(() => { dispatch(setHeaderTitle(t("library"))); @@ -40,13 +39,6 @@ export default function Library() { }; }, [dispatch, t, updateLibrary]); - // Ensure we have the current user details available - useEffect(() => { - fetchUserDetails().catch(() => { - /* ignore errors - fallback to local state */ - }); - }, [fetchUserDetails]); - const handleOnMouseEnterGameCard = () => { // Optional: pause animations if needed }; @@ -128,12 +120,6 @@ export default function Library() { {hasGames && ( <>
-

- {`${t("Welcome", { defaultValue: "Welcome" })} ${ - userDetails?.displayName || "John Doe" - }`} -

-