payment-kit 1.18.6 → 1.18.8

package/src/components/filter-toolbar.tsx

@@ -126,7 +126,7 @@ function SearchStatus({
       <Button className="option-btn" variant="text">
         {search!.status ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -136,7 +136,7 @@ function SearchStatus({
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.status')}
         <span>{formatStatus ? formatStatus(search!.status) : search!.status}</span>
@@ -192,7 +192,7 @@ function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search
       <Button className="option-btn" variant="text">
         {search!.currency_id ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -202,7 +202,7 @@ function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.currency')}
         <span>{Object.keys(currencies).find((x) => currencies[x] === search!.currency_id)}</span>
@@ -260,7 +260,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
       <Button className="option-btn" variant="text">
         {search!.customer_id ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -270,7 +270,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.customer')}
         <span>{customers.find((x) => x.id === search!.customer_id)?.name}</span>
@@ -373,7 +373,7 @@ function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search
         }}>
         {display ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -385,7 +385,7 @@ function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('admin.subscription.product')}
         <span>{display}</span>
@@ -424,7 +424,7 @@ function SearchDonation({ donation = [], search, setSearch }: Pick<Props, 'donat
       <Button className="option-btn" variant="text">
         {search!.donation ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -434,7 +434,7 @@ function SearchDonation({ donation = [], search, setSearch }: Pick<Props, 'donat
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.donation')}
         <span>{search!.donation}</span>

package/src/components/layout/admin.tsx

@@ -20,6 +20,7 @@ const Root = styled(Dashboard)<{ padding: string }>`
         margin-right: 24px;
         min-height: 32px;
         min-width: auto;
+        font-size: 0.875rem;
       }
 
       .MuiTabs-root {

package/src/components/payment-link/product-select.tsx

@@ -39,7 +39,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
 
   const items = (callback?: any) =>
     filterProducts(products, hasSelected).map((product) => [
-      <ListSubheader key={product.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+      <ListSubheader key={product.id} sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
         <Stack direction="row" alignItems="center" spacing={0.5}>
           {product.images[0] ? (
             <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />

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

@@ -92,7 +92,9 @@ export default function CurrencySelect({
         disabled={disabled}
         onClose={() => setMode(initialMode)}>
         {extraCurrencies.map((method) => [
-          <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+          <ListSubheader
+            key={method.id}
+            sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
             {method.name}
           </ListSubheader>,
           ...method.payment_currencies.map((currency) => (

package/src/components/price/form.tsx

@@ -425,7 +425,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   <MenuItem value="month_2">{t('common.custom')}</MenuItem>
                 </Select>
                 {get(errors, getFieldName('recurring.interval_config'))?.message && (
-                  <Typography color="error" sx={{ fontSize: '0.75rem', mt: 0.5, ml: 1.75 }}>
+                  <Typography color="error" sx={{ fontSize: '0.65625rem', mt: 0.5, ml: 1.75 }}>
                     {/* @ts-ignore */}
                     {get(errors, getFieldName('recurring.interval_config')).message}
                   </Typography>

package/src/components/section/header.tsx

@@ -23,7 +23,7 @@ export default function SectionHeader(props: Props) {
         sx={{
           fontSize: {
             xs: '18px',
-            md: '1.25rem',
+            md: '1.09375rem',
           },
         }}
         component="div">

package/src/components/subscription/list.tsx

@@ -219,6 +219,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
               q: {
                 'like-metadata': text,
                 'like-description': text,
+                'like-id': text,
               },
               pageSize: 100,
               page: 1,

package/src/components/uploader.tsx

@@ -62,6 +62,7 @@ export default function Uploader({
         }}
         coreProps={{
           restrictions: {
+            // @ts-ignore
             allowedFileExts,
             maxFileSize,
             maxNumberOfFiles,

package/src/global.css

@@ -2,7 +2,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-size: 14px;
 }
 
 a:has(> div) {
@@ -11,8 +10,8 @@ a:has(> div) {
 
 .MuiButton-sizeSmall {
   font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: 0.875rem;
+  line-height: 1.3125rem;
   border-color: #ccc;
 }
 
@@ -21,6 +20,7 @@ a:has(> div) {
   margin-right: 24px;
   min-height: 32px;
   min-width: auto;
+  font-size: 0.875rem;
 }
 
 .MuiTabs-root {
@@ -53,7 +53,7 @@ a:has(> div) {
 }
 
 .MuiTableCell-root {
-  font-size: 1rem !important;
+  font-size: 0.875rem !important;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-right: 24px;

package/src/libs/util.ts

@@ -3,12 +3,14 @@
 /* eslint-disable @typescript-eslint/indent */
 import { formatCheckoutHeadlines, formatPrice, getPrefix, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
+  ChainType,
   LineItem,
   PriceRecurring,
   TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
+  TPaymentMethod,
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
@@ -364,3 +366,14 @@ export function getAppInfo(address: string): { name: string; avatar: string; typ
   }
   return null;
 }
+
+export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
+  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
+  if (method.type === 'arcblock' && address) {
+    return joinURL(explorerHost, 'accounts', address, 'tokens');
+  }
+  if (['ethereum', 'base'].includes(method.type) && address) {
+    return joinURL(explorerHost, 'address', address);
+  }
+  return '';
+}

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

@@ -77,7 +77,7 @@ export default function WebhookDetail(props: { id: string }) {
                   title={
                     <ul style={{ padding: 0, margin: 0 }}>
                       {data.enabled_events.map((x) => (
-                        <li key={x} style={{ fontSize: '0.9rem' }}>
+                        <li key={x} style={{ fontSize: '0.7875rem' }}>
                           {x}
                         </li>
                       ))}

package/src/pages/admin/overview.tsx

@@ -298,7 +298,7 @@ export default function Overview() {
                         sx={{ width: 36, height: 36 }}
                       />
                       <Box flex={1}>
-                        <Typography variant="h5" component="div" sx={{ fontSize: '2rem' }}>
+                        <Typography variant="h5" component="div" sx={{ fontSize: '1.75rem' }}>
                           {formatBNStr(
                             summary.data?.balances?.[currencyId] as string,
                             currencies[currencyId]?.decimal as number
@@ -338,7 +338,7 @@ export default function Overview() {
                     variant="outlined"
                     sx={{ padding: 1, width: 0.48 }}>
                     <Box>
-                      <Typography component="div" sx={{ fontSize: '2rem' }}>
+                      <Typography component="div" sx={{ fontSize: '1.75rem' }}>
                         {metric.count}
                       </Typography>
                       <Typography sx={{ fontSize: 14 }} color="text.secondary">
@@ -366,7 +366,7 @@ export default function Overview() {
                     variant="outlined"
                     sx={{ padding: 1, width: 0.48 }}>
                     <Box>
-                      <Typography component="div" sx={{ fontSize: '2rem' }}>
+                      <Typography component="div" sx={{ fontSize: '1.75rem' }}>
                         {metric.count}
                       </Typography>
                       <Typography sx={{ fontSize: 14 }} color="text.secondary">

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

@@ -139,7 +139,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={received} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                <Amount amount={received} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>

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

@@ -159,7 +159,7 @@ export default function PayoutDetail(props: { id: string }) {
                   sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                  <Amount amount={total} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                  <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                   <Copyable text={props.id} />
                 </Stack>
               </Stack>

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

@@ -137,7 +137,7 @@ export default function RefundDetail(props: { id: string }) {
                 sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={amount} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                <Amount amount={amount} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>

package/src/pages/admin/products/products/detail.tsx

@@ -389,7 +389,7 @@ export default function ProductDetail(props: { id: string }) {
                     sx={{
                       fontSize: {
                         xs: '18px',
-                        md: '1.25rem',
+                        md: '1.09375rem',
                       },
                     }}>
                     {t('admin.product.cross_sell.title')}

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

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

package/src/pages/customer/recharge.tsx

@@ -28,14 +28,14 @@ import {
 } from '@blocklet/payment-react';
 import { joinURL } from 'ufo';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined } from '@mui/icons-material';
+import { ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
 import { BN, fromUnitToToken } from '@ocap/util';
 import RechargeList from '../../components/invoice/recharge';
 import SubscriptionDescription from '../../components/subscription/description';
 import InfoRow from '../../components/info-row';
 import Currency from '../../components/currency';
 import SubscriptionMetrics from '../../components/subscription/metrics';
-import { goBackOrFallback } from '../../libs/util';
+import { getTokenBalanceLink, goBackOrFallback } from '../../libs/util';
 import CustomerLink from '../../components/customer/link';
 import { useSessionContext } from '../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../libs/dayjs';
@@ -237,6 +237,8 @@ export default function RechargePage() {
     });
   };
 
+  const balanceLink = getTokenBalanceLink(paymentMethod!, payerValue?.paymentAddress || receiveAddress);
+
   return (
     <Root>
       <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
@@ -336,16 +338,43 @@ export default function RechargePage() {
             </BalanceCard>
 
             <BalanceCard
+              onClick={() => balanceLink && window.open(balanceLink, '_blank')}
               sx={{
                 background: 'var(--tags-tag-orange-bg, #B7FEE3)',
                 color: 'var(--tags-tag-orange-text, #007C52)',
                 borderRadius: 'var(--radius-m, 8px)',
                 border: 'none',
+
+                transition: 'all 0.2s ease-in-out',
+                position: 'relative',
+                cursor: balanceLink ? 'pointer' : 'default',
+                '&:hover': balanceLink
+                  ? {
+                      '& .MuiSvgIcon-root': {
+                        opacity: 1,
+                        transform: 'translateX(0)',
+                      },
+                    }
+                  : undefined,
               }}>
-              <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
-              <Typography variant="h4">
-                {currentBalance} {subscription.paymentCurrency.symbol}
-              </Typography>
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Stack flex={1}>
+                  <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
+                  <Typography variant="h4">
+                    {currentBalance} {subscription.paymentCurrency.symbol}
+                  </Typography>
+                </Stack>
+                {balanceLink && (
+                  <ArrowForwardOutlined
+                    sx={{
+                      opacity: 0,
+                      transform: 'translateX(-10px)',
+                      transition: 'all 0.2s ease-in-out',
+                      color: 'inherit',
+                    }}
+                  />
+                )}
+              </Stack>
             </BalanceCard>
 
             <Paper elevation={0} sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>

package/src/pages/customer/subscription/change-payment.tsx

@@ -6,6 +6,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import {
   AddressForm,
   CurrencySelector,
+  LoadingButton,
   PaymentSummary,
   StripeForm,
   api,
@@ -20,7 +21,6 @@ import {
 } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import { Alert, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
@@ -270,7 +270,13 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
             {state.paying ? t('payment.checkout.processing') : t('payment.customer.changePayment.submit')}
           </LoadingButton>
           <Typography
-            sx={{ mt: 1, color: 'text.secondary', fontSize: '0.9rem', lineHeight: '1.1rem', textAlign: 'center' }}>
+            sx={{
+              mt: 1,
+              color: 'text.secondary',
+              fontSize: '0.7875rem',
+              lineHeight: '0.9625rem',
+              textAlign: 'center',
+            }}>
             {t('payment.customer.changePayment.confirm', {
               payee,
               symbol: findCurrency(settings.paymentMethods, selectedCurrencyId)?.symbol,

package/src/pages/customer/subscription/change-plan.tsx

@@ -2,6 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import {
+  LoadingButton,
   PricingTable,
   api,
   formatBNStr,
@@ -12,7 +13,6 @@ import {
 } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import { Alert, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { useRef } from 'react';

package/src/pages/integrations/donations/index.tsx

@@ -269,7 +269,7 @@ export default function DonationList() {
 
   return (
     <>
-      <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap" mb={-1}>
+      <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
         <Typography variant="h6">{t('admin.donate.intro')}</Typography>
         <Button variant="text" size="small" onClick={() => setShowExample(true)} sx={{ color: 'text.link' }}>
           {t('admin.donate.usage.viewExample')}

package/src/pages/integrations/donations/preview.tsx

@@ -3,6 +3,50 @@ import { Box, Typography, Button, TextField, Stack, Paper, Divider } from '@mui/
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TSetting } from '@blocklet/payment-types';
 
+function PreviewAvatars({ count }: { count: number }) {
+  return (
+    <Stack flexDirection="row" justifyContent="center" alignItems="center">
+      {/* Avatar Group */}
+      <Box sx={{ display: 'flex', position: 'relative' }}>
+        {Array(Math.min(count, 5))
+          .fill(0)
+          .map((_, i) => (
+            <Box
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              sx={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                bgcolor: '#e0e0e0',
+                border: '2px solid #fff',
+                position: 'relative',
+                marginLeft: i === 0 ? 0 : '-8px',
+                zIndex: count - i,
+              }}
+            />
+          ))}
+      </Box>
+
+      {/* Counter Box */}
+      <Box
+        sx={{
+          fontSize: '14px',
+          color: 'text.secondary',
+          pl: 1.5,
+          pr: 1,
+          ml: -1,
+          borderRadius: '8px',
+          backgroundColor: '#f4f4f5',
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        {`${count} supporter${count > 1 ? 's' : ''} (XX ABT)`}
+      </Box>
+    </Stack>
+  );
+}
 export default function DonationPreview({ config }: { config: TSetting['settings'] }) {
   const { t } = useLocaleContext();
   const hasPresets = config.settings.amount.presets?.length > 0;
@@ -41,43 +85,12 @@ export default function DonationPreview({ config }: { config: TSetting['settings
           {t('admin.donate.btn.preview')}
         </Typography>
         <Stack spacing={2} alignItems="center">
-          <Button variant="contained" color="primary">
+          <Button variant="outlined" color="primary">
             {config.settings.btnText}
           </Button>
-
+          <PreviewAvatars count={3} />
           <Box sx={{ width: '100%', maxWidth: 300 }}>
-            <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1} textAlign="center">
-              total XX ABT
-            </Typography>
-            {config.settings.historyType === 'avatar' ? (
-              <Box
-                sx={{
-                  height: 40,
-                  position: 'relative',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                {Array(5)
-                  .fill(0)
-                  .map((_, i) => (
-                    <Box
-                      // eslint-disable-next-line react/no-array-index-key
-                      key={i}
-                      sx={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: '50%',
-                        bgcolor: '#e0e0e0',
-                        position: 'absolute',
-                        left: `calc(50% - 16px + ${i * 24}px - ${2 * 24}px)`,
-                        opacity: 1 - i * 0.1,
-                        border: '2px solid #fff',
-                      }}
-                    />
-                  ))}
-              </Box>
-            ) : (
+            {config.settings.historyType === 'table' && (
               <Box
                 sx={{
                   borderRadius: 1,
@@ -96,30 +109,38 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                       sx={{
                         display: 'flex',
                         justifyContent: 'center',
-                        gap: 2,
+                        alignItems: 'center',
+                        gap: 1,
                         opacity: 1 - i * 0.2,
                         width: '100%',
                         maxWidth: 240,
                       }}>
+                      <Box display="flex" alignItems="center" gap={0.5} width="75%">
+                        <Box
+                          // eslint-disable-next-line react/no-array-index-key
+                          key={i}
+                          sx={{
+                            width: '16px',
+                            height: '16px',
+                            borderRadius: '50%',
+                            bgcolor: '#e0e0e0',
+                            border: '2px solid #fff',
+                            position: 'relative',
+                          }}
+                        />
+                        <Box
+                          sx={{
+                            width: '100%',
+                            height: 8,
+                            borderRadius: 1,
+                            bgcolor: '#e0e0e0',
+                          }}
+                        />
+                      </Box>
+
                       <Box
                         sx={{
-                          width: '30%',
-                          height: 8,
-                          borderRadius: 1,
-                          bgcolor: '#e0e0e0',
-                        }}
-                      />
-                      <Box
-                        sx={{
-                          width: '20%',
-                          height: 8,
-                          borderRadius: 1,
-                          bgcolor: '#e0e0e0',
-                        }}
-                      />
-                      <Box
-                        sx={{
-                          width: '15%',
+                          width: '25%',
                           height: 8,
                           borderRadius: 1,
                           bgcolor: '#e0e0e0',