ui phase 1

client/src/components/PriceBreakdown/PriceBreakdown.tsx

@@ -1,7 +1,9 @@
 'use client';
 import { FunctionComponent } from 'react';
-import { useLocale, useTranslations } from 'next-intl';
-import { Divider, Paper, Stack, Typography } from '@mui/material';
+import { useLocale } from 'next-intl';
+import { Divider, Stack, Typography } from '@mui/material';
+import Money from '@/components/common/Money';
+import SurfaceCard from '@/components/common/SurfaceCard';
 import { formatIrrToToman, parseIrr } from '@/utils';
 
 export interface PriceBreakdownRow {
@@ -30,7 +32,6 @@ export interface PriceBreakdownProps {
  */
 const PriceBreakdown: FunctionComponent<PriceBreakdownProps> = ({ rows, totalLabel, totalAmountIrr }) => {
   const locale = useLocale();
-  const tc = useTranslations('common');
 
   if (process.env.NODE_ENV !== 'production') {
     const sum = rows.reduce((acc, row) => acc + parseIrr(row.amountIrr), BigInt(0));
@@ -42,7 +43,7 @@ const PriceBreakdown: FunctionComponent<PriceBreakdownProps> = ({ rows, totalLab
   }
 
   return (
-    <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <SurfaceCard>
       <Stack sx={{ gap: 1.25 }}>
         {rows.map((row) => (
           <Stack key={row.key} data-row={row.key} direction="row" sx={{ justifyContent: 'space-between', gap: 2 }}>
@@ -59,12 +60,10 @@ const PriceBreakdown: FunctionComponent<PriceBreakdownProps> = ({ rows, totalLab
           <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
             {totalLabel}
           </Typography>
-          <Typography variant="subtitle2" sx={{ fontWeight: 800, color: 'var(--bal-secondary)' }}>
-            {formatIrrToToman(totalAmountIrr, locale)} {tc('currency_toman')}
-          </Typography>
+          <Money amountIrr={totalAmountIrr} tone="emphasis" size="md" sx={{ fontWeight: 800 }} />
         </Stack>
       </Stack>
-    </Paper>
+    </SurfaceCard>
   );
 };