Skip to content

[UI/UX Design] Design a Print stylesheet variant for investor account statements #514

Description

@thlpkee20-wq

Description

Investor account statements need a print-optimized stylesheet with a formal cover page, structured account summary, transaction listing, and signature footer. Design the print variant covering both A4 and Letter sizes.

Requirements and context

  • Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
  • Should be consistent with existing patterns and easy to review
  • Relevant code: src/pages/InvestorPortfolioSummary.tsx
  • Print variant must repeat table headers on page breaks

Suggested execution

  • Fork the repo and create a branch
  • git checkout -b uiux/investor-statement-print-stylesheet
  • Implement changes
    • Design cover page and structured summary sections
    • Specify @media print rules and page-break handling
    • Draft Letter-size variant for US locales
  • Validate accessibility and responsive assumptions

Test and commit

  • Run checks
    • npm run lint and component/visual tests
  • Cover edge cases
    • Multi-page statements, monochrome printers, RTL text
  • Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: investor statement print stylesheet

Guidelines

  • Minimum 95 percent test coverage
  • Clear documentation
  • Timeframe: 96 hours

Metadata

Metadata

Assignees

Labels

Stellar WaveStellar Wave issue batch

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions