ui phase 1

client/src/components/DocumentUpload/DocumentUpload.tsx

@@ -3,11 +3,12 @@ import { ChangeEvent, FunctionComponent, useEffect, useRef, useState } from 'rea
 import { useTranslations } from 'next-intl';
 import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
-import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import AppButton from '../common/AppButton';
 import AppIcon from '../common/AppIcon';
+import SurfaceCard from '../common/SurfaceCard';
+import AccentCard from '../common/AccentCard';
 import { ACCEPTED_DOCUMENT_TYPES, MAX_DOCUMENT_SIZE_BYTES } from '@/services/verification/constants';
 
 /** The stored document as the uploader displays it — a name + optional size, never bytes. */
@@ -153,21 +154,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
       />
 
       {rejected ? (
-        <Paper
-          elevation={0}
-          data-upload-state="rejected"
-          sx={{
-            p: 2,
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: 'divider',
-            borderInlineStartWidth: 4,
-            borderInlineStartColor: 'var(--bal-error)',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 1,
-          }}
-        >
+        <AccentCard tone="error" padding="sm" data-upload-state="rejected" sx={UPLOAD_PANEL_SX}>
           <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
             <AppIcon icon="rejected" size={20} color="var(--bal-error)" />
             <Typography variant="body2" sx={{ fontWeight: 700 }}>
@@ -189,9 +176,9 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
           >
             {t('upload_reupload')}
           </AppButton>
-        </Paper>
+        </AccentCard>
       ) : state === 'uploading' ? (
-        <Paper elevation={0} data-upload-state="uploading" sx={uploadedSx}>
+        <SurfaceCard padding="sm" data-upload-state="uploading" sx={UPLOAD_PANEL_SX}>
           <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
             <AppIcon icon="upload" size={20} color="var(--bal-primary)" />
             <Typography variant="body2" sx={{ fontWeight: 500, flexGrow: 1, wordBreak: 'break-all' }}>
@@ -205,9 +192,9 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {t('upload_uploading')}
           </Typography>
-        </Paper>
+        </SurfaceCard>
       ) : showUploaded ? (
-        <Paper elevation={0} data-upload-state="success" sx={uploadedSx}>
+        <SurfaceCard padding="sm" data-upload-state="success" sx={UPLOAD_PANEL_SX}>
           <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
             {previewUrl ? (
               <Box
@@ -234,13 +221,9 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
               {t('upload_change')}
             </AppButton>
           </Stack>
-        </Paper>
+        </SurfaceCard>
       ) : state === 'error' ? (
-        <Paper
-          elevation={0}
-          data-upload-state="error"
-          sx={{ ...uploadedSx, borderInlineStartWidth: 4, borderInlineStartColor: 'var(--bal-error)' }}
-        >
+        <AccentCard tone="error" padding="sm" data-upload-state="error" sx={UPLOAD_PANEL_SX}>
           <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
             <AppIcon icon="error" size={20} color="var(--bal-error)" />
             <Typography variant="body2" sx={{ color: 'var(--bal-error)', flexGrow: 1 }}>
@@ -257,7 +240,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
           >
             {t('upload_retry')}
           </AppButton>
-        </Paper>
+        </AccentCard>
       ) : (
         <Box
           role="button"
@@ -299,12 +282,8 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
   );
 };
 
-// Shared card styling for the uploading / success / error states.
-const uploadedSx = {
-  p: 2,
-  borderRadius: 2,
-  border: '1px solid',
-  borderColor: 'divider',
+// Shared layout on top of SurfaceCard/AccentCard for the uploading / success / error / rejected states.
+const UPLOAD_PANEL_SX = {
   display: 'flex',
   flexDirection: 'column',
   gap: 1,