website refactor

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>
   );
 }