apps/frontend/src/widgets/broker-allocation-chart/ui/BrokerAllocationChart.tsx

@@ -1,4 +1,6 @@
 import type { BrokerPortfolio } from '@/shared/api/responses';
+import { Box } from '@mui/material';
+import { Text } from '@moex-vibe/design-system';
 import { buildBrokerAllocation } from '@/entities/broker-position';
 import { formatBrokerCurrencyValue } from '@/shared/lib/formatters';
 
@@ -26,7 +28,7 @@ export function BrokerAllocationChart({ portfolio }: { portfolio: BrokerPortfoli
   });
 
   return (
-    <figure className="broker-allocation">
+    <Box component="figure" sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
       <svg role="img" aria-label="Структура брокерского портфеля" viewBox="0 0 120 120">
         <title>Структура брокерского портфеля</title>
         {arcs.map((sector) => (
@@ -44,40 +46,50 @@ export function BrokerAllocationChart({ portfolio }: { portfolio: BrokerPortfoli
           />
         ))}
       </svg>
-      <figcaption>
+      <Box component="figcaption" sx={{ display: 'grid', gap: 1.5 }}>
         {sectors.length === 0 ? (
-          <p>Нет данных для распределения</p>
+          <Text tone="muted">Нет данных для распределения</Text>
         ) : (
-          <ul>
+          <Box component="ul" sx={{ listStyle: 'none', display: 'grid', gap: 1 }}>
             {sectors.map((sector) => (
-              <li key={sector.key}>
-                <span
-                  className="broker-allocation__swatch"
+              <Box
+                component="li"
+                key={sector.key}
+                sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+              >
+                <Box
+                  sx={{
+                    width: 2,
+                    height: 2,
+                    borderRadius: 0.25,
+                    background: sector.color,
+                    flexShrink: 0,
+                  }}
                   aria-hidden="true"
-                  style={{ background: sector.color }}
                 />
-                <span>
+                <Box component="span">
                   {sector.label}: {formatBrokerCurrencyValue(currency, sector.value)} ·{' '}
                   {sector.percent.toFixed(1)}%
-                </span>
-              </li>
+                </Box>
+              </Box>
             ))}
-          </ul>
+          </Box>
         )}
         {negative.length > 0 && (
-          <ul
-            className="broker-allocation__negative"
+          <Box
+            component="ul"
             aria-label="Отрицательные значения распределения"
+            sx={{ listStyle: 'none', display: 'grid', gap: 1 }}
           >
             {negative.map((item) => (
-              <li key={item.key}>
+              <Box component="li" key={item.key}>
                 {item.label}: отрицательное значение{' '}
                 {formatBrokerCurrencyValue(currency, item.value)}
-              </li>
+              </Box>
             ))}
-          </ul>
+          </Box>
         )}
-      </figcaption>
-    </figure>
+      </Box>
+    </Box>
   );
 }