style: update active state styles for filter and view options; adjust achievement progress bar styles

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: #000;
-        color: rgba(255, 255, 255, 0.95);
+      background: #fff;
-        background: rgba(255, 255, 255, 0.15);
+      svg,
+      svg * {
+        fill: currentColor;
+        color: currentColor;
       }
 
       .library-filter-options__count {
-        background: rgba(255, 255, 255, 0.25);
+        background: #ebebeb;
-        color: rgba(255, 255, 255, 0.95);
+        color: rgba(0, 0, 0, 0.9);
       }
     }
   }

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;
+    height: 4px;
-    background: rgba(255, 255, 255, 0.1);
+    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);

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;
+    height: 4px;
-    background: rgba(255, 255, 255, 0.1);
+    transition: all ease 0.2s;
-    border-radius: 3px;
+    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: 3px;
+    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;
   }

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<string>("");
   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 && (
         <>
           <div className="library__page-header">
-            <h1 className="library__page-title">
-              {`${t("Welcome", { defaultValue: "Welcome" })} ${
-                userDetails?.displayName || "John Doe"
-              }`}
-            </h1>
-
             <div className="library__controls-row">
               <div className="library__controls-left">
                 <FilterOptions

src/renderer/src/pages/library/view-options.scss

@@ -43,8 +43,13 @@
     }
 
     &.active {
-      color: rgba(255, 255, 255, 0.95);
+      color: rgba(0, 0, 0, 0.9);
-      background: rgba(255, 255, 255, 0.15);
+      background: #fff;
+      svg,
+      svg * {
+        fill: currentColor;
+        color: currentColor;
+      }
     }
   }
 }