website refactor

apps/website/components/media/MediaFiltersBar.tsx

@@ -6,6 +6,8 @@ import { Select } from '@/ui/Select';
 import { ControlBar } from '@/ui/ControlBar';
 import { SegmentedControl } from '@/ui/SegmentedControl';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { Grid, List, Search } from 'lucide-react';
 import React from 'react';
 
@@ -29,10 +31,10 @@ export function MediaFiltersBar({
   onViewModeChange,
 }: MediaFiltersBarProps) {
   return (
-    <div style={{ marginBottom: '1.5rem' }}>
+    <Box marginBottom={6}>
       <ControlBar
         leftContent={
-          <div style={{ maxWidth: '32rem', width: '100%' }}>
+          <Box maxWidth="32rem" fullWidth>
             <Input
               placeholder="Search media assets..."
               value={searchQuery}
@@ -40,17 +42,17 @@ export function MediaFiltersBar({
               icon={<Icon icon={Search} size={4} intent="low" />}
               fullWidth
             />
-          </div>
+          </Box>
         }
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          <div style={{ width: '10rem' }}>
+        <Group gap={4}>
+          <Box width="10rem">
             <Select
               value={category}
               onChange={(e) => onCategoryChange(e.target.value)}
               options={categories}
             />
-          </div>
+          </Box>
 
           {onViewModeChange && (
             <SegmentedControl
@@ -62,8 +64,8 @@ export function MediaFiltersBar({
               onChange={(id) => onViewModeChange(id as 'grid' | 'list')}
             />
           )}
-        </div>
+        </Group>
       </ControlBar>
-    </div>
+    </Box>
   );
 }

apps/website/components/media/MediaGallery.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { MediaCard } from '@/ui/MediaCard';
 import { MediaFiltersBar } from './MediaFiltersBar';
 import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { MediaViewerModal } from './MediaViewerModal';
 import { SectionHeader } from '@/ui/SectionHeader';
 import { EmptyState } from '@/ui/EmptyState';
@@ -63,7 +64,7 @@ export function MediaGallery({
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <Stack gap={6}>
       <SectionHeader
         title={title}
         description={description}
@@ -109,6 +110,6 @@ export function MediaGallery({
         onNext={handleNext}
         onPrev={handlePrev}
       />
-    </div>
+    </Stack>
   );
 }

apps/website/components/media/MediaViewerModal.tsx

@@ -4,6 +4,7 @@ import { IconButton } from '@/ui/IconButton';
 import { Image } from '@/ui/Image';
 import { Modal } from '@/ui/Modal';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 import { ChevronLeft, ChevronRight, Download } from 'lucide-react';
 import React from 'react';
 
@@ -33,11 +34,11 @@ export function MediaViewerModal({
       title={title}
       size="xl"
       footer={
-        <div style={{ width: '100%', textAlign: 'center' }}>
+        <Box width="100%" textAlign="center">
           <Text size="xs" variant="low" uppercase>
             Precision Racing Media Viewer
           </Text>
-        </div>
+        </Box>
       }
       actions={
         <IconButton
@@ -49,7 +50,7 @@ export function MediaViewerModal({
         />
       }
     >
-      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '20rem' }}>
+      <Box position="relative" display="flex" alignItems="center" justifyContent="center" minHeight="20rem">
         {src ? (
           <Image
             src={src}
@@ -62,26 +63,26 @@ export function MediaViewerModal({
 
         {/* Navigation Controls */}
         {onPrev && (
-          <div style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)' }}>
+          <Box position="absolute" left={4} top="50%" style={{ transform: 'translateY(-50%)' }}>
             <IconButton
               icon={ChevronLeft}
               variant="secondary"
               onClick={onPrev}
               title="Previous"
             />
-          </div>
+          </Box>
         )}
         {onNext && (
-          <div style={{ position: 'absolute', right: '1rem', top: '50%', transform: 'translateY(-50%)' }}>
+          <Box position="absolute" right={4} top="50%" style={{ transform: 'translateY(-50%)' }}>
             <IconButton
               icon={ChevronRight}
               variant="secondary"
               onClick={onNext}
               title="Next"
             />
-          </div>
+          </Box>
         )}
-      </div>
+      </Box>
     </Modal>
   );
 }