moex-vibe/docs/features/broker-accounts-page-migration/tasks.md

Broker Accounts Page — Tasks

Tasks Checklist

• Task 1: BrokerAllocationBar

  • Replace p.broker-allocation-bar__empty with <Text tone="muted">
  • Replace div.broker-allocation-bar with <Box> container
  • Replace track and segment divs/spans with <Box> components with MUI sx styling
  • Replace legend and swatch elements with <Box> and <Text> components
  • Verify BrokerAllocationBar compile state

• Task 2: BrokerAccountCard

  • Replace <SkeletonBlock> with <Skeleton> from @moex-vibe/design-system
  • Replace eyebrow with <Text variant="label" tone="secondary">
  • Replace title h2 with <Heading level={2}>
  • Replace error alert block with <Alert severity="error"> and a <Button>
  • Replace layout grids, stats, and card component with <Box> with sx
  • Set component on <Box> to Link from react-router-dom for card wrapper
  • Ensure stat elements use proper Text styles and spacing

• Task 3: BrokerAccountsSummary

  • Replace skeleton placeholders with <Skeleton> from DS
  • Replace headers and subheaders with proper typography
  • Convert layout container to <Box> component with sx positioning
  • Replace metrics detail grid with Box layout using custom margins and spacing
  • Keep custom hero layout styles and replace text styling inside the hero with <Box> and custom variables to ensure colors map correctly

• Task 4: BrokerAccountsPage

  • Replace layout containers and headers with <Box> with sx flex/grid
  • Replace main title with <Heading level={1}> and subtitle with <Text>
  • Replace empty state section with <EmptyState> component
  • Replace error styling with <Text tone="negative">

• Task 5: Clean up orphaned CSS

  • Find and delete unused CSS selectors in apps/frontend/src/styles.css
  • Verify reduced motion and max-width 720px responsive rules are cleanly updated without leaving dead rules
  • Ensure we only leave rules for pages and components that have not yet been migrated

• Task 6: Verification

  • Run npm run test:frontend and ensure all 111 tests pass
  • Run npm run lint -w apps/frontend to verify ESLint compatibility
  • Run npm run build:frontend to compile production assets and verify type safety