Centralize inline styles in design system

[vertefra]

Problem

Inline style objects are duplicated across multiple view files:

Duplicated across 6+ files:

• titleStyle using typography.title
• subtitleStyle using typography.subtitle
• actionsStyle using layout.actionsContainer

Large style blocks in popup.tsx (lines 119-217):

• Button styles
• Card styles
• Container styles

Files Affected

• views/ProductView.tsx
• views/SleepOnIt.tsx
• views/IDontNeedIt.tsx
• views/EarlyReturnFromSleep.tsx
• views/BackToAnOldFlame.tsx
• views/Celebration.tsx
• popup.tsx

Solution

Centralize common styles in the design system:

// design-system/commonStyles.ts
import { typography, layout } from './index'

export const viewStyles = {
  title: {
    ...typography.title
  } as React.CSSProperties,
  
  subtitle: {
    ...typography.subtitle
  } as React.CSSProperties,
  
  actions: {
    ...layout.actionsContainer
  } as React.CSSProperties
}

Benefits

• Single source of truth for common styles
• Easier to update styles globally
• Reduces file sizes
• Better consistency

Priority

Medium