# Broker Accounts Page — Tasks

## Tasks Checklist

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

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

- [x] **Task 3: BrokerAccountsSummary**
  - [x] Replace skeleton placeholders with `<Skeleton>` from DS
  - [x] Replace headers and subheaders with proper typography
  - [x] Convert layout container to `<Box>` component with `sx` positioning
  - [x] Replace metrics detail grid with Box layout using custom margins and spacing
  - [x] Keep custom hero layout styles and replace text styling inside the hero with `<Box>` and custom variables to ensure colors map correctly

- [x] **Task 4: BrokerAccountsPage**
  - [x] Replace layout containers and headers with `<Box>` with `sx` flex/grid
  - [x] Replace main title with `<Heading level={1}>` and subtitle with `<Text>`
  - [x] Replace empty state section with `<EmptyState>` component
  - [x] Replace error styling with `<Text tone="negative">`

- [x] **Task 5: Clean up orphaned CSS**
  - [x] Find and delete unused CSS selectors in `apps/frontend/src/styles.css`
  - [x] Verify reduced motion and max-width 720px responsive rules are cleanly updated without leaving dead rules
  - [x] Ensure we only leave rules for pages and components that have not yet been migrated

- [x] **Task 6: Verification**
  - [x] Run `npm run test:frontend` and ensure all 111 tests pass
  - [x] Run `npm run lint -w apps/frontend` to verify ESLint compatibility
  - [x] Run `npm run build:frontend` to compile production assets and verify type safety