Removing hydration warnings.

changing the game score component to use the new progress component.

Author: git-Pqrd

app/layout.tsx

@@ -96,6 +96,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             "min-h-screen bg-background font-sans antialiased",
             fontSans.variable
           )}
+          suppressHydrationWarning
         >
           <ThemeProvider
             attribute="class"

components/game-score.tsx

@@ -55,36 +55,57 @@ const UserProgressWidget = ({
   }, [completedCounts, totalGames, totalArticles, animatedArticleProgress, animatedGameProgress]);
 
   return (
-    <div className="bg-muted p-4 rounded-xl shadow-md mt-3 md:my-3">
-      <div className="text-xl font-bold opacity-35 align-middle justify-end flex w-full">
-        {" "}
-        Your Progress
-        <Trophy className="ml-2 text-yellow-500" />
+    <div className="bg-gradient-to-br from-background to-muted/50 border border-border/50 rounded-2xl shadow-lg p-6 md:p-8 mt-4 md:mt-6 backdrop-blur-sm">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6 md:mb-8">
+        <h3 className="text-lg md:text-xl font-bold text-foreground flex items-center gap-2">
+          Your Progress
+          <Trophy className="w-5 h-5 md:w-6 md:h-6 text-yellow-500" />
+        </h3>
       </div>
-      <div className="space-y-2 grid grid-cols-1 md:grid-cols-2 xl:gap-9">
-        <div className="self-end">
-          <div className="flex justify-between items-center mb-2">
-            <span className="flex items-center">
-              <ControllerIcon />
-              Games Completed
-            </span>
-            <span className=" ml-2 font-semibold">
+
+      {/* Progress Items */}
+      <div className="space-y-4 md:space-y-6">
+        {/* Games Progress */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2 md:gap-3">
+              <div className="p-2 rounded-lg bg-primary/10">
+                <ControllerIcon />
+              </div>
+              <span className="text-sm md:text-base font-medium text-foreground">
+                Games Completed
+              </span>
+            </div>
+            <span className="text-sm md:text-base font-bold text-foreground">
               {completedCounts.games} / {totalGames}
             </span>
           </div>
-          <Progress value={animatedGameProgress} className="h-2" />
+          <Progress 
+            value={animatedGameProgress} 
+            className="h-2.5 md:h-3 bg-muted" 
+          />
         </div>
-        <div className="self-end">
-          <div className="flex justify-between items-center mb-2">
-            <span className="flex items-center">
-              <BookOpen className="mr-2 text-blue-500" />
-              Articles Read
-            </span>
-            <span className="font-semibold">
+
+        {/* Articles Progress */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2 md:gap-3">
+              <div className="p-2 rounded-lg bg-blue-500/10">
+                <BookOpen className="w-4 h-4 md:w-5 md:h-5 text-blue-500" />
+              </div>
+              <span className="text-sm md:text-base font-medium text-foreground">
+                Articles Read
+              </span>
+            </div>
+            <span className="text-sm md:text-base font-bold text-foreground">
               {completedCounts.articles} / {totalArticles}
             </span>
           </div>
-          <Progress value={animatedArticleProgress} className="h-2" />
+          <Progress 
+            value={animatedArticleProgress} 
+            className="h-2.5 md:h-3 bg-muted" 
+          />
         </div>
       </div>
     </div>