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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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