Skip to content

fix(ui): responsive typography, tablet scaling and usability#24

Merged
vgpastor merged 1 commit intomainfrom
fix/responsive-typography
Mar 27, 2026
Merged

fix(ui): responsive typography, tablet scaling and usability#24
vgpastor merged 1 commit intomainfrom
fix/responsive-typography

Conversation

@vgpastor
Copy link
Copy Markdown
Contributor

Summary

  • Replace 170+ hardcoded fontSize with centralized TextTheme across 48 files
  • Responsive grid on home: fluid columns with SliverGridDelegateWithMaxCrossAxisExtent
  • Tablet text scaling (1.2-1.3x) via MediaQuery.textScaler composition with user preferences
  • ToolCard icons/text scale proportionally with LayoutBuilder
  • WCAG AA contrast colors for text (textPrimary, textSecondary, textTertiary)
  • Reset confirmation dialog prevents accidental data loss
  • Haptic feedback on scored item selections
  • Severity icons in ResultBanner for color-blind accessibility

Closes #22

Files changed (48)

Area Files Change
Theme foundation app_theme.dart, app_colors.dart, app.dart TextTheme, contrast colors, tablet scaler
Shared widgets (10) result_banner, tool_card, section_header, etc. TextTheme migration + responsive
Feature screens (35) All *_screen.dart fontSize -> textTheme migration
Version version.json, pubspec.yaml, assets/version.json 0.1.12

Test plan

  • dart format . -- 0 changes
  • flutter analyze -- 0 issues
  • flutter test -- 187/187 passed
  • Visual: tablet grid shows 5 columns (vs 3 before)
  • Visual: tablet text 20% larger than mobile
  • Manual: verify reset confirmation dialog appears
  • Manual: verify haptic feedback on selections
  • Manual: verify severity icons next to labels

🤖 Generated with Claude Code

#22)

- Define complete TextTheme (light + dark) with 16 semantic styles
- Replace 170+ hardcoded fontSize across 48 files with Theme.of(context).textTheme
- Add WCAG AA contrast colors (textPrimary, textSecondary, textTertiary)
- Make home grid fluid with SliverGridDelegateWithMaxCrossAxisExtent
- Scale ToolCard icons/text proportionally with LayoutBuilder
- Scale text 1.2-1.3x on tablets via MediaQuery.textScaler composition
- Add reset confirmation dialog to ToolScreenBase (prevents data loss)
- Add haptic feedback on scored item selections
- Add severity icons to ResultBanner for color-blind users

Closes #22

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vgpastor vgpastor merged commit 661ea9e into main Mar 27, 2026
1 check passed
@vgpastor vgpastor deleted the fix/responsive-typography branch March 27, 2026 19:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(ui): Responsive design para tablets + contraste insuficiente

1 participant