feat: per-page theming

src/components/Leaderboard/components/Gap.tsx

@@ -1,10 +1,10 @@
 import { theme } from '../../../stitches.config';
 
 export interface GapProps {
-  number: number;
+  message: string;
 }
 
-export function Gap({ number }: GapProps) {
+export function Gap({ message: number }: GapProps) {
   return (
     <div
       style={{
@@ -22,7 +22,7 @@ export function Gap({ number }: GapProps) {
           fontSize: 16,
         }}
       >
-        + {number.toLocaleString()} more
+        {number.toLocaleString()}
       </span>
     </div>
   );

src/components/PageWrapper.tsx

@@ -1,24 +1,32 @@
+import { Theme } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
 
+interface PageWrapperProps extends ComponentProps<'div'> {
+  color?: ComponentProps<typeof Theme>['accentColor'];
+}
+
 export default function PageWrapper({
   style,
+  color,
   ...props
-}: ComponentProps<'div'>) {
+}: PageWrapperProps) {
   return (
-    <div
-      style={{
-        width: '100%',
-        maxWidth: 800,
-        margin: 'auto',
-        display: 'flex',
-        padding: 16,
-        flexDirection: 'column',
-        gap: 16,
-        boxSizing: 'border-box',
+    <Theme accentColor={color}>
+      <div
+        style={{
+          width: '100%',
+          maxWidth: 800,
+          margin: 'auto',
+          display: 'flex',
+          padding: 16,
+          flexDirection: 'column',
+          gap: 16,
+          boxSizing: 'border-box',
 
-        ...style,
-      }}
-      {...props}
-    />
+          ...style,
+        }}
+        {...props}
+      />
+    </Theme>
   );
 }