feat(appearance): accent color, corners, wide layout and game art background

src/pages/Dashboard.jsx

@@ -18,6 +18,7 @@ import useLibrarySync from '../hooks/useLibrarySync.js';
 import useForceSync from '../hooks/useForceSync.js';
 import {formatPlaytime} from '../utils/games.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
+import PageContainer from '../components/PageContainer.jsx';
 
 const TOP_GAMES = 5;
 // The games endpoint accepts only the page sizes 20, 40 and 80.
@@ -208,7 +209,7 @@ const Dashboard = () => {
     const maxMinutes = topGames[0]?.playtimeMinutes || 1;
 
     return (
-        <div className="w-full max-w-5xl mx-auto p-4 md:p-8 space-y-6">
+        <PageContainer className="p-4 md:p-8 space-y-6">
             <Card className="relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                 <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/15 via-transparent to-transparent"/>
                 <div className="relative min-w-0">
@@ -316,19 +317,19 @@ const Dashboard = () => {
             )}
 
             {hasSteamId && activity && <ActivityCard activity={activity}/>}
-        </div>
+        </PageContainer>
     );
 };
 
 function DashboardSkeleton() {
     return (
-        <div className="w-full max-w-5xl mx-auto p-4 md:p-8 space-y-6">
+        <PageContainer className="p-4 md:p-8 space-y-6">
             <Skeleton className="h-40 rounded-xl"/>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <Skeleton className="h-64 rounded-xl"/>
                 <Skeleton className="h-64 rounded-xl md:col-span-2"/>
             </div>
-        </div>
+        </PageContainer>
     );
 }