website refactor

apps/website/templates/ProfileLiveryUploadTemplate.tsx

@@ -2,14 +2,12 @@
 
 import { UploadDropzone } from '@/components/shared/UploadDropzone';
 import { routes } from '@/lib/routing/RouteConfig';
-import { 
-  SharedBox, 
-  SharedButton, 
-  SharedStack, 
-  SharedText, 
-  SharedContainer,
-  SharedCard
-} from '@/components/shared/UIComponents';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Container } from '@/ui/Container';
+import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
 import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
@@ -33,18 +31,18 @@ export function ProfileLiveryUploadTemplate({
   onUpload,
 }: ProfileLiveryUploadTemplateProps) {
   return (
-    <SharedContainer size="md">
-      <SharedBox paddingY={8}>
-        <SharedBox mb={6}>
+    <Container size="md">
+      <Box paddingY={8}>
+        <Box mb={6}>
           <Heading level={1}>Upload livery</Heading>
-          <SharedText color="text-gray-500">
+          <Text color="text-gray-500">
             Upload your custom car livery. Supported formats: .png, .jpg, .tga
-          </SharedText>
-        </SharedBox>
+          </Text>
+        </Box>
 
-        <SharedBox display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
-          <SharedBox>
-            <SharedCard>
+        <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
+          <Box>
+            <Card>
               <UploadDropzone
                 onFilesSelected={onFilesSelected}
                 accept=".png,.jpg,.jpeg,.tga"
@@ -52,25 +50,25 @@ export function ProfileLiveryUploadTemplate({
                 isLoading={isUploading}
               />
               
-              <SharedBox mt={6} display="flex" justifyContent="end" gap={3}>
+              <Box mt={6} display="flex" justifyContent="end" gap={3}>
                 <Link href={routes.protected.profileLiveries}>
-                  <SharedButton variant="ghost">Cancel</SharedButton>
+                  <Button variant="ghost">Cancel</Button>
                 </Link>
-                <SharedButton 
+                <Button 
                   variant="primary" 
                   disabled={!selectedFile || isUploading}
                   onClick={onUpload}
                   isLoading={isUploading}
                 >
                   Upload Livery
-                </SharedButton>
-              </SharedBox>
-            </SharedCard>
-          </SharedBox>
+                </Button>
+              </Box>
+            </Card>
+          </Box>
 
-          <SharedBox>
+          <Box>
             {previewUrl ? (
-              <SharedBox display="flex" flexDirection="col" gap={6}>
+              <Box display="flex" flexDirection="col" gap={6}>
                 <MediaPreviewCard
                   type="image"
                   src={previewUrl}
@@ -88,17 +86,17 @@ export function ProfileLiveryUploadTemplate({
                     createdAt: new Date(),
                   })}
                 />
-              </SharedBox>
+              </Box>
             ) : (
-              <SharedCard center p={12}>
-                <SharedText color="text-gray-500" align="center">
+              <Card center p={12}>
+                <Text color="text-gray-500" align="center">
                   Select a file to see preview and details
-                </SharedText>
-              </SharedCard>
+                </Text>
+              </Card>
             )}
-          </SharedBox>
-        </SharedBox>
-      </SharedBox>
-    </SharedContainer>
+          </Box>
+        </Box>
+      </Box>
+    </Container>
   );
 }