payment-kit 1.18.37 → 1.18.38

package/src/components/info-card.tsx

@@ -61,21 +61,23 @@ export default function InfoCard(props: Props) {
         componentsProps={{
           tooltip: {
             sx: {
-              bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
-              color: (theme) => (theme.palette.mode === 'dark' ? '#ffffff' : theme.palette.text.primary),
-              boxShadow: '0 2px 10px rgba(0, 0, 0, 0.15)',
+              bgcolor: 'background.paper',
+              color: 'text.primary',
+              boxShadow: 2,
               borderRadius: 2,
               padding: '10px 16px',
               fontSize: 14,
               maxWidth: 400,
               minWidth: 240,
               wordBreak: 'break-word',
-              border: (theme) => (theme.palette.mode === 'dark' ? '1px solid #3a3f48' : '1px solid #e0e0e0'),
+              border: '1px solid',
+              borderColor: 'divider',
               '& .MuiTooltip-arrow': {
-                color: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+                color: 'background.paper',
                 '&::before': {
-                  border: (theme) => (theme.palette.mode === 'dark' ? '1px solid #3a3f48' : '1px solid #e0e0e0'),
-                  backgroundColor: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+                  border: '1px solid',
+                  borderColor: 'grey.200',
+                  backgroundColor: 'background.paper',
                 },
               },
             },

package/src/components/invoice-pdf/pdf.tsx

@@ -100,7 +100,7 @@ export function Download({ data }: { data: TInvoiceExpanded }) {
         size="small"
         onClick={generatePDF}
         disabled={!isReady || isGenerating}
-        sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}>
+        sx={{ borderColor: 'grey.100' }}>
         {isGenerating ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <CircularProgress size={16} sx={{ color: 'inherit' }} />

package/src/components/layout/admin.tsx

@@ -10,7 +10,7 @@ import { useSessionContext } from '../../contexts/session';
 
 const Root = styled(Dashboard)<{ padding: string }>`
   width: 100%;
-  background-color: white;
+  background-color: ${({ theme }) => theme.palette.background.default};
 
   > .dashboard-body > .dashboard-main {
     > .dashboard-content {
@@ -35,7 +35,7 @@ const Root = styled(Dashboard)<{ padding: string }>`
       }
 
       .MuiTabs-scroller {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
       }
 
       .page-content {

package/src/components/metadata/form.tsx

@@ -110,8 +110,9 @@ export default function MetadataForm({
             <IconButton
               onClick={() => metadata.remove(index)}
               sx={{
-                border: '1px solid var(--stroke-border-base, #EFF1F5)',
-                borderRadius: 'var(--radius-m, 8px)',
+                border: '1px solid',
+                borderColor: 'grey.100',
+                borderRadius: 1,
                 padding: '8px',
               }}>
               <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />

package/src/components/metadata/list.tsx

@@ -18,7 +18,7 @@ export default function MetadataList({
   if (isEmpty(data)) {
     return (
       <Box sx={{ textAlign: 'center' }}>
-        <Typography color="primary" fontWeight={500}>
+        <Typography color="text.primary" fontWeight={500}>
           {t('common.metadata.empty')}
         </Typography>
         <Typography color="text.lighter">{t('common.metadata.emptyTip')}</Typography>

package/src/components/payment-link/chrome.tsx

@@ -6,7 +6,6 @@ export default function Chrome({ children, ...props }: any) {
 }
 
 const Root = styled(Box)`
-  background-color: #fcfeff;
   border-radius: 8px;
   margin-top: 40px;
   position: relative;

package/src/components/payment-link/item.tsx

@@ -54,7 +54,7 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? '#eee' : 'error.main',
+        borderColor: valid ? 'grey.100' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/payment-link/preview.tsx

@@ -1,9 +1,11 @@
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
+import { useTheme } from '@mui/material';
 import Chrome from './chrome';
 
 const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+  const theme = useTheme();
   const innerRef = useRef(null);
   const size = useSize(innerRef);
   const scale = (size?.width || 0) / 1280;
@@ -18,7 +20,7 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
   return (
     <div ref={innerRef}>
       {fullscreen ? (
-        <div style={{ width: '100%', height: '100%', background: '#fff' }}>
+        <div style={{ width: '100%', height: '100%', background: theme.palette.background.paper || '#fff' }}>
           <IframeResizer
             style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
             src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}

package/src/components/price/currency-select.tsx

@@ -67,7 +67,7 @@ export default function CurrencySelect({
         }}
         sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
         {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
-        {canSelect && <ArrowDropDown sx={{ color: 'rgba(0, 0, 0, 0.54)', fontSize: 21 }} />}
+        {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
     );
   }

package/src/components/pricing-table/payment-settings.tsx

@@ -227,7 +227,7 @@ export function ProductPaymentSettings({ product, prices }: { product: TProduct;
   });
 
   return (
-    <Box sx={{ px: 2, py: 0, border: '1px solid #eee', borderRadius: 2 }}>
+    <Box sx={{ px: 2, py: 0, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
       <IconCollapse
         key={product.id}
         expanded

package/src/components/pricing-table/preview.tsx

@@ -1,11 +1,13 @@
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
+import { useTheme } from '@mui/material';
 import Chrome from '../payment-link/chrome';
 
 const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
   const innerRef = useRef(null);
   const size = useSize(innerRef);
+  const theme = useTheme();
   const scale = (size?.width || 0) / 1280;
   const [fullscreen, { toggleFullscreen }] = useFullscreen(innerRef);
 
@@ -18,7 +20,7 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
   return (
     <div ref={innerRef}>
       {fullscreen ? (
-        <div style={{ width: '100%', height: '100%', background: '#fff' }}>
+        <div style={{ width: '100%', height: '100%', background: theme.palette.background.paper || '#fff' }}>
           <IframeResizer
             style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
             src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}

package/src/components/pricing-table/product-item.tsx

@@ -46,7 +46,7 @@ export default function ProductItem({ product, prices, valid, onUpdate, onRemove
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? '#eee' : 'error.main',
+        borderColor: valid ? 'grey.100' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/subscription/portal/list.tsx

@@ -120,9 +120,9 @@ export default function CurrentSubscriptions({
                   }}
                   sx={{
                     padding: 1.5,
-                    background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
+                    background: 'grey.50',
                     '&:hover': {
-                      backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                      backgroundColor: 'grey.100',
                       transition: 'background-color 200ms linear',
                       cursor: 'pointer',
                     },

package/src/components/uploader.tsx

@@ -157,7 +157,8 @@ Uploader.defaultProps = {
 };
 
 const Div = styled(Box)`
-  border: 1px solid var(--stroke-border-base, #eff1f5);
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.palette.grey[100]};
   border-radius: 4px;
   cursor: pointer;
   width: 120px;

package/src/components/webhook/attempts.tsx

@@ -135,7 +135,7 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
       </Grid>
       <Grid item xs={12} md={8}>
         {selected && (
-          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid #eee' }}>
+          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'grey.100' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
             <Box>
               <Typography variant="h6">Response ({selected.response_status})</Typography>

package/src/global.css

@@ -12,7 +12,6 @@ a:has(> div) {
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.3125rem;
-  border-color: #ccc;
 }
 
 .MuiTab-root {
@@ -28,17 +27,12 @@ a:has(> div) {
   margin-bottom: 8px;
 }
 
-.MuiTabs-scroller {
-  border-bottom: 1px solid #eee;
-}
-
 .MuiCheckbox-root {
   padding: 0;
   padding-right: 4px;
 }
 
 .MuiFormLabel-root {
-  color: var(--foregrounds-fg-base, #010714);
   display: block;
   margin-bottom: 4px;
   font-weight: 500;
@@ -71,7 +65,6 @@ th.MuiTableCell-head {
   padding-top: 16px;
 }
 
-
 .MuiFormHelperText-root {
   margin-left: 0;
 }

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -63,7 +63,7 @@ export default function WebhookDetail(props: { id: string }) {
             spacing={3}
             justifyContent="flex-start"
             flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid', borderColor: 'grey.100' }}>
             <InfoMetric
               label={t('common.status')}
               value={<Status label={data.status} color={getWebhookStatusColor(data.status)} />}
@@ -83,7 +83,7 @@ export default function WebhookDetail(props: { id: string }) {
                       ))}
                     </ul>
                   }>
-                  <Typography sx={{ backgroundColor: '#eee', paddingX: 0.5, borderRadius: 0.5 }}>
+                  <Typography sx={{ backgroundColor: 'grey.100', paddingX: 0.5, borderRadius: 0.5 }}>
                     {data.enabled_events.length} events
                   </Typography>
                 </Tooltip>

package/src/pages/admin/index.tsx

@@ -34,7 +34,7 @@ const renderNav = (group: string, onChange: Function, groups: { label: string; v
         fontWeight: 600,
         border: 'none',
         cursor: 'pointer',
-        '&:hover': group === x.value ? {} : { backgroundColor: '#eee' },
+        '&:hover': group === x.value ? {} : { backgroundColor: 'grey.100' },
       }}
     />
   ));
@@ -93,7 +93,7 @@ function Admin() {
               fontWeight: '500',
               color: 'text.lighter',
               '&.Mui-selected': {
-                color: 'text.primary',
+                color: 'primary.main',
               },
             },
             '.MuiTouchRipple-root': {

package/src/pages/admin/overview.tsx

@@ -284,7 +284,7 @@ export default function Overview() {
                       position: 'relative',
                       '&:hover': {
                         backgroundColor: 'action.hover',
-                        boxShadow: 1,
+                        boxShadow: 2,
                         '& .MuiSvgIcon-root': {
                           opacity: 1,
                           transform: 'translateX(0)',

package/src/pages/admin/payments/intents/detail.tsx

@@ -137,7 +137,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 src={data.paymentCurrency.logo}
                 alt={data.paymentCurrency.symbol}
                 variant="square"
-                sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                 <Amount amount={received} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />

package/src/pages/admin/payments/payouts/detail.tsx

@@ -160,7 +160,7 @@ export default function PayoutDetail(props: { id: string }) {
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
-                  sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                  sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />

package/src/pages/admin/payments/refunds/detail.tsx

@@ -135,7 +135,7 @@ export default function RefundDetail(props: { id: string }) {
                 src={data.paymentCurrency.logo}
                 alt={data.paymentCurrency.symbol}
                 variant="square"
-                sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                 <Amount amount={amount} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />

package/src/pages/admin/products/prices/list.tsx

@@ -10,7 +10,7 @@ import {
   findCurrency,
 } from '@blocklet/payment-react';
 import { LockOutlined } from '@mui/icons-material';
-import { Stack, Tooltip, Typography } from '@mui/material';
+import { Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
@@ -20,6 +20,7 @@ import PriceActions from './actions';
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
+  const theme = useTheme();
   const query = getQueryParams(window.location.href);
 
   const columns = [
@@ -35,6 +36,7 @@ export default function PricesList({ product, onChange }: { product: Product; on
           const priceCurrency = showHighlight
             ? findCurrency(settings.paymentMethods, query.currency_id || '')
             : price.currency;
+          const highlightColor = theme.mode === 'dark' ? '#2e3035' : '#FFF9C4';
           return (
             <Link to={`/admin/products/${price.id}`} color="text.primary">
               <Stack direction="row" alignItems="center" spacing={1}>
@@ -45,7 +47,10 @@ export default function PricesList({ product, onChange }: { product: Product; on
                 )}
                 <Typography
                   component="span"
-                  sx={{ backgroundColor: showHighlight ? '#FFF9C4' : 'transparent', whiteSpace: 'nowrap' }}>
+                  sx={{
+                    backgroundColor: showHighlight ? highlightColor : 'transparent',
+                    whiteSpace: 'nowrap',
+                  }}>
                   {formatPrice(price, priceCurrency || price.currency, '', 1, true, locale)}
                 </Typography>
                 <Typography component="span">

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -122,7 +122,7 @@ export default function CreatePricingTable() {
       <FormProvider {...methods}>
         <ProductsProvider>
           <Stack height="92vh" spacing={2} direction="row">
-            <Box flex={2} sx={{ borderRight: '1px solid #eee' }} position="relative">
+            <Box flex={2} sx={{ borderRight: '1px solid', borderColor: 'grey.100' }} position="relative">
               <Stack height="100%" spacing={2}>
                 <Box overflow="auto" sx={{ pr: 2, pb: 8 }}>
                   {step === 0 && <PricingTableProductSettings triggerError={triggerError} />}
@@ -137,7 +137,7 @@ export default function CreatePricingTable() {
                   alignItems="center"
                   justifyContent="flex-end"
                   position="absolute"
-                  sx={{ borderTop: '1px solid #eee', left: 0, bottom: 0 }}>
+                  sx={{ borderTop: '1px solid', borderColor: 'grey.100', left: 0, bottom: 0 }}>
                   <Button variant="text" color="inherit" disabled={step === 0} onClick={onPrevious}>
                     {t('common.previous')}
                   </Button>

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -30,6 +30,7 @@ import {
   TextField,
   Tooltip,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useRequest, useSessionStorageState, useSetState } from 'ahooks';
 import useBus from 'use-bus';
@@ -308,8 +309,9 @@ function PaymentMethodSkeleton() {
           <Box
             sx={{
               py: 1,
-              borderTop: '1px solid #eee',
-              borderBottom: '1px solid #eee',
+              borderTop: '1px solid',
+              borderBottom: '1px solid',
+              borderColor: 'divider',
               mb: 1,
             }}>
             <Stack direction="row" justifyContent="space-between" alignItems="center">
@@ -330,6 +332,7 @@ function PaymentMethodSkeleton() {
 
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
+  const { palette } = useTheme();
   const [expandedId, setExpandedId] = useSessionStorageState('payment-method-expanded-id', {
     defaultValue: '',
   });
@@ -442,8 +445,8 @@ export default function PaymentMethods() {
               }
               style={{
                 py: 1,
-                borderTop: '1px solid #eee',
-                borderBottom: '1px solid #eee',
+                borderTop: `1px solid ${palette.divider}`,
+                borderBottom: `1px solid ${palette.divider}`,
                 '& :hover': { color: 'text.primary' },
               }}
               value={method.id}

package/src/pages/admin/settings/vault-config/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, ConfirmDialog, formatBNStr, Link, parseMarkedText, Table, useMobile } from '@blocklet/payment-react';
-import { Alert, Avatar, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { Alert, Avatar, Box, Button, CircularProgress, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import Empty from '@arcblock/ux/lib/Empty';
 import { HelpOutline } from '@mui/icons-material';
@@ -31,6 +31,7 @@ export default function VaultConfig() {
   const { t } = useLocaleContext();
   const { session } = useSessionContext();
   const { isMobile } = useMobile();
+  const theme = useTheme();
   const isOwner = session?.user?.role === 'owner';
 
   const [state, setState] = useSetState({
@@ -324,7 +325,7 @@ export default function VaultConfig() {
               <Link
                 key={part.content}
                 to={`${window.location.origin}/.well-known/service/admin/operations/advanced`}
-                style={{ color: '#3b82f6' }}>
+                style={{ color: theme.palette.text.link }}>
                 {part.content}
               </Link>
             )

package/src/pages/checkout/pricing-table.tsx

@@ -26,7 +26,7 @@ export default function PricingTablePage({ id }: Props) {
         theme={undefined}
         hideNavMenu={undefined}
         maxWidth={false}
-        sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
+        sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
       />
 
       <Stack

package/src/pages/customer/index.tsx

@@ -233,7 +233,7 @@ const getCardIcon = (type: CardType) => {
     balance: <AccountBalanceWalletOutlined color="success" fontSize="small" />,
     spent: <CreditCardOutlined color="warning" fontSize="small" />,
     stake: <AccountBalanceOutlined fontSize="small" color="info" />,
-    refund: <AssignmentReturnOutlined fontSize="small" sx={{ color: 'var(--tags-tag-purple-icon, #7c3aed)' }} />,
+    refund: <AssignmentReturnOutlined fontSize="small" sx={{ color: 'chip.secondary.text' }} />,
     due: <InfoOutlined fontSize="small" color="error" />,
   };
   return iconMap[type];
@@ -419,7 +419,8 @@ export default function CustomerHome() {
                   key={c.id}
                   sx={{
                     pb: 2,
-                    borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)',
+                    borderBottom: '1px solid',
+                    borderColor: 'grey.100',
                     '&:last-child': { borderBottom: 'none', pb: 0 },
                   }}>
                   <Box alignItems="center" display="flex" gap={1}>
@@ -478,7 +479,7 @@ export default function CustomerHome() {
                               top: 0,
                               bottom: 0,
                               width: '1px',
-                              backgroundColor: 'var(--stroke-border-base, #EFF1F5)',
+                              backgroundColor: 'grey.100',
                               zIndex: 1,
                             },
                             '&:has(+ .placeholder)::after': {

package/src/pages/customer/invoice/detail.tsx

@@ -155,7 +155,7 @@ export default function CustomerInvoiceDetail() {
               variant="outlined"
               color="primary"
               size="small"
-              sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}
+              sx={{ borderColor: 'grey.100' }}
               disabled={state.paying}
               onClick={onPay}>
               {t('payment.customer.invoice.pay')}

package/src/pages/customer/payout/detail.tsx

@@ -113,7 +113,7 @@ export default function PayoutDetail() {
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
-                  sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                  sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />

package/src/pages/customer/recharge/account.tsx

@@ -13,7 +13,6 @@ import {
   Card,
   CardActionArea,
   Grid,
-  Paper,
   Avatar,
 } from '@mui/material';
 import { styled } from '@mui/system';
@@ -373,7 +372,7 @@ export default function BalanceRechargePage() {
                 onClick={() => balanceLink && window.open(balanceLink, '_blank')}
                 sx={{
                   color: 'text.primary',
-                  borderRadius: 'var(--radius-m, 8px)',
+                  borderRadius: 1,
                   transition: 'all 0.2s ease-in-out',
                   cursor: balanceLink ? 'pointer' : 'default',
                   position: 'relative',
@@ -415,7 +414,7 @@ export default function BalanceRechargePage() {
               </BalanceCard>
             </Box>
 
-            <Paper elevation={0} sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
+            <Stack sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
               <Grid container spacing={2}>
                 {presetAmounts.map(({ amount: presetAmount, label, multiplier }) => (
                   <Grid item xs={6} sm={3} key={presetAmount}>
@@ -498,7 +497,7 @@ export default function BalanceRechargePage() {
                   </Card>
                 </Grid>
               </Grid>
-            </Paper>
+            </Stack>
 
             {customAmount && (
               <Box sx={{ mb: 3 }}>

package/src/pages/customer/recharge/subscription.tsx

@@ -13,7 +13,6 @@ import {
   Card,
   CardActionArea,
   Grid,
-  Paper,
 } from '@mui/material';
 import { styled } from '@mui/system';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -358,7 +357,7 @@ export default function RechargePage() {
               onClick={() => balanceLink && window.open(balanceLink, '_blank')}
               sx={{
                 color: 'text.primary',
-                borderRadius: 'var(--radius-m, 8px)',
+                borderRadius: 1,
                 transition: 'all 0.2s ease-in-out',
                 cursor: balanceLink ? 'pointer' : 'default',
                 position: 'relative',
@@ -397,7 +396,7 @@ export default function RechargePage() {
               </Stack>
             </BalanceCard>
 
-            <Paper elevation={0} sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>
+            <Stack sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>
               <Grid container spacing={2}>
                 {presetAmounts.map(({ amount: presetAmount, cycles }) => (
                   <Grid item xs={6} sm={4} key={presetAmount}>
@@ -464,7 +463,7 @@ export default function RechargePage() {
                   </Card>
                 </Grid>
               </Grid>
-            </Paper>
+            </Stack>
 
             {customAmount && (
               <Box>

package/src/pages/customer/subscription/embed.tsx

@@ -329,7 +329,7 @@ export default function SubscriptionEmbed() {
               ))}
             <Button
               variant="contained"
-              sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
+              sx={{ width: subscription.service_actions?.length ? 'auto' : '100%' }}
               target="_blank"
               href={subscriptionPageUrl}>
               {t('payment.customer.subscriptions.view')}
@@ -374,7 +374,7 @@ function Position({ children }: any) {
         padding: '8px',
         width: '100%',
         maxWidth: '500px',
-        background: '#fff',
+        backgroundColor: 'background.paper',
         margin: '0 auto',
         height: '100vh',
       }}>