website refactor

apps/website/templates/SponsorshipRequestsTemplate.tsx

@@ -1,8 +1,15 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Container from '@/components/ui/Container';
-import Heading from '@/components/ui/Heading';
 
 export interface SponsorshipRequestsTemplateProps {
   viewData: SponsorshipRequestsViewData;
@@ -16,65 +23,72 @@ export function SponsorshipRequestsTemplate({
   onReject,
 }: SponsorshipRequestsTemplateProps) {
   return (
-    <Container size="md" className="space-y-8">
-      <div>
-        <Heading level={1} className="text-white mb-2">
-          Sponsorship Requests
-        </Heading>
-        <p className="text-gray-400 text-sm">
-          Manage pending sponsorship requests for your profile.
-        </p>
-      </div>
+    <Container size="md" py={8}>
+      <Stack gap={8}>
+        <Box>
+          <Heading level={1}>Sponsorship Requests</Heading>
+          <Text size="sm" color="text-gray-400" block mt={2}>
+            Manage pending sponsorship requests for your profile.
+          </Text>
+        </Box>
 
-      {viewData.sections.map((section) => (
-        <Card key={`${section.entityType}-${section.entityId}`}>
-          <div className="flex items-center justify-between mb-4">
-            <Heading level={2} className="text-white">
-              {section.entityName}
-            </Heading>
-            <span className="text-xs text-gray-400">
-              {section.requests.length} {section.requests.length === 1 ? 'request' : 'requests'}
-            </span>
-          </div>
+        {viewData.sections.map((section) => (
+          <Card key={`${section.entityType}-${section.entityId}`}>
+            <Stack gap={4}>
+              <Stack direction="row" align="center" justify="between">
+                <Heading level={2}>{section.entityName}</Heading>
+                <Text size="xs" color="text-gray-400">
+                  {section.requests.length} {section.requests.length === 1 ? 'request' : 'requests'}
+                </Text>
+              </Stack>
 
-          {section.requests.length === 0 ? (
-            <p className="text-sm text-gray-400">No pending requests.</p>
-          ) : (
-            <div className="space-y-3">
-              {section.requests.map((request) => (
-                <div
-                  key={request.id}
-                  className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
-                >
-                  <div className="flex-1">
-                    <p className="text-white font-medium">{request.sponsorName}</p>
-                    {request.message && (
-                      <p className="text-xs text-gray-400 mt-1">{request.message}</p>
-                    )}
-                    <p className="text-xs text-gray-500 mt-1">
-                      {new Date(request.createdAtIso).toLocaleDateString()}
-                    </p>
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="primary"
-                      onClick={() => onAccept(request.id)}
+              {section.requests.length === 0 ? (
+                <Text size="sm" color="text-gray-400">No pending requests.</Text>
+              ) : (
+                <Stack gap={3}>
+                  {section.requests.map((request) => (
+                    <Surface
+                      key={request.id}
+                      variant="muted"
+                      rounded="lg"
+                      border
+                      padding={4}
                     >
-                      Accept
-                    </Button>
-                    <Button
-                      variant="secondary"
-                      onClick={() => onReject(request.id)}
-                    >
-                      Reject
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </Card>
-      ))}
+                      <Stack direction="row" align="center" justify="between" wrap gap={4}>
+                        <Box style={{ flex: 1, minWidth: 0 }}>
+                          <Text weight="medium" color="text-white" block>{request.sponsorName}</Text>
+                          {request.message && (
+                            <Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
+                          )}
+                          <Text size="xs" color="text-gray-500" block mt={2}>
+                            {new Date(request.createdAtIso).toLocaleDateString()}
+                          </Text>
+                        </Box>
+                        <Stack direction="row" gap={2}>
+                          <Button
+                            variant="primary"
+                            onClick={() => onAccept(request.id)}
+                            size="sm"
+                          >
+                            Accept
+                          </Button>
+                          <Button
+                            variant="secondary"
+                            onClick={() => onReject(request.id)}
+                            size="sm"
+                          >
+                            Reject
+                          </Button>
+                        </Stack>
+                      </Stack>
+                    </Surface>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          </Card>
+        ))}
+      </Stack>
     </Container>
   );
 }