пва

client/src/pages/info/ui/sections/PaymentSection.tsx

@@ -1,19 +1,16 @@
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-import Paper from '@mui/material/Paper'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { Banknote, CreditCard } from 'lucide-react'
 
 const methods = [
   {
-    icon: <CreditCard size={22} />,
-    primary: 'Онлайн-оплата через ЮKassa (карты, СБП)',
-    secondary: 'Оплата после подтверждения заказа админом. Перенаправление на защищённую платёжную страницу ЮKassa.',
+    icon: <CreditCard size={18} />,
+    primary: 'Онлайн-оплата через ЮKassa',
+    secondary: 'Карты, СБП. Оплата после подтверждения заказа админом. Перенаправление на защищённую платёжную страницу.',
   },
   {
-    icon: <Banknote size={22} />,
+    icon: <Banknote size={18} />,
     primary: 'Оплата при получении',
     secondary: 'Наличными или картой при самовывозе.',
   },
@@ -21,22 +18,86 @@ const methods = [
 
 export function PaymentSection() {
   return (
-    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
-      <Typography variant="h5" gutterBottom>
+    <Box>
+      <Typography
+        variant="h5"
+        sx={{
+          fontWeight: 700,
+          letterSpacing: '-0.03em',
+          lineHeight: 1.15,
+          mb: 1,
+        }}
+      >
         Оплата
       </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-        Оплата происходит после подтверждения заказа админом. Вы получите уведомление, когда заказ будет подтверждён и
-        готов к оплате.
+      <Typography
+        sx={{
+          fontSize: '0.8rem',
+          color: 'text.secondary',
+          lineHeight: 1.65,
+          mb: 3,
+          maxWidth: '56ch',
+        }}
+      >
+        Оплата происходит после подтверждения заказа админом. Вы получите уведомление, когда заказ будет подтверждён и готов к оплате.
       </Typography>
-      <List disablePadding>
+
+      <Stack spacing={2}>
         {methods.map((m) => (
-          <ListItem key={m.primary} disableGutters>
-            <ListItemIcon sx={{ minWidth: 40 }}>{m.icon}</ListItemIcon>
-            <ListItemText primary={m.primary} secondary={m.secondary} />
-          </ListItem>
+          <Stack
+            key={m.primary}
+            direction="row"
+            spacing={2}
+            sx={{
+              alignItems: 'flex-start',
+              p: 2.5,
+              borderRadius: '12px',
+              border: '1px solid',
+              borderColor: 'divider',
+              transition: 'all 0.2s ease',
+              '&:hover': {
+                borderColor: 'action.disabledBackground',
+              },
+            }}
+          >
+            <Box
+              sx={{
+                width: 36,
+                height: 36,
+                borderRadius: '8px',
+                backgroundColor: 'action.hover',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'text.secondary',
+                flexShrink: 0,
+              }}
+            >
+              {m.icon}
+            </Box>
+            <Stack spacing={0.25}>
+              <Typography
+                sx={{
+                  fontWeight: 600,
+                  fontSize: '0.875rem',
+                  letterSpacing: '-0.01em',
+                }}
+              >
+                {m.primary}
+              </Typography>
+              <Typography
+                sx={{
+                  fontSize: '0.8rem',
+                  color: 'text.secondary',
+                  lineHeight: 1.6,
+                }}
+              >
+                {m.secondary}
+              </Typography>
+            </Stack>
+          </Stack>
         ))}
-      </List>
-    </Paper>
+      </Stack>
+    </Box>
   )
 }