[Bug]: Standardize headers across the extension

[georgewrmarshall]

Description

Currently, header components across the extension are inconsistent in their text styling and implementation. Some headers use TextVariant.bodyMd while others use TextVariant.headingSm. We should standardize all headers to use TextVariant.headingSm for consistency and better visual hierarchy.

Scenario

• GIVEN a developer is implementing or maintaining a header component
• WHEN they need to set the text variant for the header
• THEN they should use TextVariant.headingSm consistently
• AND all existing headers should be updated to use this standard

Technical Details

1. Audit existing header implementations:

   • Multichain Header component
   • Confirmation headers (WalletInitiatedHeader, DAppInitiatedHeader)
   • Any other components using HeaderBase

2. Update implementation:

   • Modify HeaderBase to enforce TextVariant.headingSm as the default text variant
   • Update all header implementations to use TextVariant.headingSm
   • Remove any explicit TextVariant.headingMd declarations

3. Key files to update:

ui/components/multichain/pages/page/components/header/header.tsx
ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx
ui/pages/confirmations/components/confirm/header/dapp-initiated-header.tsx
// ... other header implementations

Threat Modeling Framework

1. What are we working on?

   • Standardizing header text variants across the extension
   • Creating consistent visual hierarchy

2. What can go wrong?

   • Breaking existing layouts that depend on specific text sizes
   • Accessibility issues if text becomes too small
   • Visual regression in specific contexts

3. What are we going to do about it?

   • Thorough visual regression testing
   • Accessibility testing to ensure readability
   • Document the standard in component documentation
   • Update Storybook examples

4. Did we do a good job?

   • Visual review across all contexts
   • Accessibility verification
   • Design system compliance check

Acceptance Criteria

• All headers use TextVariant.headingSm consistently
• HeaderBase enforces TextVariant.headingSm as default
• No visual regressions in existing layouts
• Documentation updated to reflect the standard
• Storybook examples updated
• Visual regression tests pass
• Accessibility standards maintained
• Component library documentation updated

Stakeholder Review

• Engineering
• Design
• Product
• QA
• Security
• Legal
• Marketing
• Management
• Other

References

• Current inconsistent implementations:
  • WalletInitiatedHeader using TextVariant.headingMd
  • DAppInitiatedHeader using TextVariant.headingMd
  • Multichain Header using TextVariant.headingSm
• Design system documentation for text variants
• Related components: HeaderBase, Header, WalletInitiatedHeader, DAppInitiatedHeader