ui phase 1

client/src/components/BankStatusPanel/BankStatusPanel.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { FunctionComponent } from 'react';
-import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { AppButton } from '@/components/common';
+import { AppButton, AccentCard } from '@/components/common';
+import type { AccentTone } from '@/components/common';
 import StatusChip from '@/components/StatusChip';
 import type { StatusKind } from '@/components/StatusChip';
 import type { BankAccountStatus } from '@/services/nurse/types';
@@ -14,10 +14,10 @@ const STATUS_KIND: Record<BankAccountStatus, StatusKind> = {
   mismatch: 'rejected',
 };
 
-const ACCENT_TOKEN: Record<BankAccountStatus, string> = {
-  pending: 'var(--bal-warning)',
-  verified: 'var(--bal-success)',
-  mismatch: 'var(--bal-error)',
+const STATUS_TONE: Record<BankAccountStatus, AccentTone> = {
+  pending: 'warning',
+  verified: 'success',
+  mismatch: 'error',
 };
 
 export interface BankStatusPanelProps {
@@ -57,18 +57,7 @@ const BankStatusPanel: FunctionComponent<BankStatusPanelProps> = ({
   onReenter,
   reenterLabel,
 }) => (
-  <Paper
-    elevation={0}
-    data-status={status}
-    sx={{
-      p: 2,
-      border: '1px solid',
-      borderColor: 'divider',
-      borderInlineStartWidth: 4,
-      borderInlineStartColor: ACCENT_TOKEN[status],
-      borderRadius: 2,
-    }}
-  >
+  <AccentCard tone={STATUS_TONE[status]} padding="sm" data-status={status}>
     <Stack sx={{ gap: 1.25 }}>
       <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
         <StatusChip status={STATUS_KIND[status]} label={chipLabel} />
@@ -110,7 +99,7 @@ const BankStatusPanel: FunctionComponent<BankStatusPanelProps> = ({
         </AppButton>
       ) : null}
     </Stack>
-  </Paper>
+  </AccentCard>
 );
 
 export default BankStatusPanel;