Fix typography and spacing

[PropzSaladaz]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
laze	Ready	Preview, Comment	May 6, 2026 1:36am

[qodo-code-review]

Review Summary by Qodo

Centralize design tokens and standardize UI components across the app

✨ Enhancement

Walkthroughs

Description

• Centralize design tokens for typography, spacing, button, and radius dimensions
• Create new ScreenHeader component to standardize headers across screens
• Refactor UI components to use centralized design tokens instead of hardcoded values
• Improve mobile layout density and scaling for better responsive design
• Standardize button proportions, icon sizes, and typography across all components

Diagram

flowchart LR
  A["Design Tokens<br/>dimensions.dart"] -->|TextDim, ButtonDim,<br/>RadiusDim, SpacingDim| B["UI Components"]
  B --> C["CtaButton"]
  B --> D["ScreenHeader"]
  B --> E["StyledButton"]
  B --> F["Home Screen"]
  B --> G["Settings Screen"]
  B --> H["Onboarding Screen"]
  F --> I["Responsive Layout<br/>Better Density"]
  G --> I
  H --> I

Loading

File Changes

1. mobile_client/lib/presentation/core/themes/dimensions.dart ✨ Enhancement +55/-6

Add centralized design token classes for UI consistency

mobile_client/lib/presentation/core/themes/dimensions.dart

---

2. mobile_client/lib/presentation/core/ui/cta_button.dart ✨ Enhancement +10/-6

Use centralized button dimensions and make fontSize optional

mobile_client/lib/presentation/core/ui/cta_button.dart

---

3. mobile_client/lib/presentation/core/ui/screen_header.dart ✨ Enhancement +67/-0

Create new reusable ScreenHeader component for standardized headers

mobile_client/lib/presentation/core/ui/screen_header.dart

---

View more (16)

4. mobile_client/lib/presentation/core/ui/split_panel_button.dart ✨ Enhancement +6/-5

Replace hardcoded values with centralized design tokens

mobile_client/lib/presentation/core/ui/split_panel_button.dart

---

5. mobile_client/lib/presentation/core/ui/styled_button.dart ✨ Enhancement +2/-2

Use centralized button border width token

mobile_client/lib/presentation/core/ui/styled_button.dart

---

6. mobile_client/lib/presentation/core/ui/styled_long_button.dart ✨ Enhancement +4/-3

Align icon and font sizes with centralized design tokens

mobile_client/lib/presentation/core/ui/styled_long_button.dart

---

7. mobile_client/lib/presentation/core/ui/wide_styled_button.dart ✨ Enhancement +3/-2

Replace hardcoded radius and icon size with design tokens

mobile_client/lib/presentation/core/ui/wide_styled_button.dart

---

8. mobile_client/lib/presentation/home/widgets/command_btns.dart 🐞 Bug fix +5/-2

Fix layout calculations for responsive button sizing

mobile_client/lib/presentation/home/widgets/command_btns.dart

---

9. mobile_client/lib/presentation/home/widgets/connection_header.dart ✨ Enhancement +53/-98

Refactor to use new ScreenHeader component for consistency

mobile_client/lib/presentation/home/widgets/connection_header.dart

---

10. mobile_client/lib/presentation/home/widgets/home_screen.dart ✨ Enhancement +5/-4

Improve MousePad layout density with Expanded wrapper

mobile_client/lib/presentation/home/widgets/home_screen.dart

---

11. mobile_client/lib/presentation/home/widgets/mousepad.dart ✨ Enhancement +17/-8

Refine typography, icon sizes, and layout calculations for mobile scaling

mobile_client/lib/presentation/home/widgets/mousepad.dart

---

12. mobile_client/lib/presentation/home/widgets/not_connected_screen.dart ✨ Enhancement +9/-4

Standardize typography and add image fit constraint

mobile_client/lib/presentation/home/widgets/not_connected_screen.dart

---

13. mobile_client/lib/presentation/home/widgets/shortcut_icon.dart ✨ Enhancement +5/-1

Add standardized font size to shortcut label text

mobile_client/lib/presentation/home/widgets/shortcut_icon.dart

---

14. mobile_client/lib/presentation/home/widgets/shortcuts_sheet.dart ✨ Enhancement +13/-40

Use centralized radius tokens and refine sheet styling

mobile_client/lib/presentation/home/widgets/shortcuts_sheet.dart

---

15. mobile_client/lib/presentation/new_shortcut/widgets/add_custom_shortcut.dart ✨ Enhancement +11/-10

Standardize typography, spacing, and button dimensions

mobile_client/lib/presentation/new_shortcut/widgets/add_custom_shortcut.dart

---

16. mobile_client/lib/presentation/new_shortcut/widgets/shortcut_input_row.dart ✨ Enhancement +6/-7

Refine input field sizing and use centralized text dimensions

mobile_client/lib/presentation/new_shortcut/widgets/shortcut_input_row.dart

---

17. mobile_client/lib/presentation/new_shortcut/widgets/terminal_command.dart ✨ Enhancement +2/-1

Use centralized title font size for OS name labels

mobile_client/lib/presentation/new_shortcut/widgets/terminal_command.dart

---

18. mobile_client/lib/presentation/onboarding/onboarding_screen.dart ✨ Enhancement +12/-12

Refine illustration sizing and standardize typography and spacing

mobile_client/lib/presentation/onboarding/onboarding_screen.dart

---

19. mobile_client/lib/presentation/settings/settings_screen.dart ✨ Enhancement +57/-97

Refactor to use ScreenHeader and standardize card layouts and typography

mobile_client/lib/presentation/settings/settings_screen.dart

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0)

1. Stale cached Dimens values 🐞 Bug ☼ Reliability

Description

SplitPanelButton caches Dimens-derived sizes in static finals, so those values are computed once and
will not reflect any later changes to Dimens (which is currently writable global state). This can
create inconsistent sizing across the app if Dimens is ever reassigned (e.g., during tests,
experiments, or future runtime scaling work).

Code

mobile_client/lib/presentation/core/ui/split_panel_button.dart[R6-8]

+  static final Radius _radius = Radius.circular(Dimens.radius.medium);
+  static final double _topTextSize = Dimens.text.title;
+  static final double _bottomTextSize = Dimens.text.body;

Evidence

SplitPanelButton evaluates Dimens values once into static finals, while Dimens’ groups are writable
(not static final), so later reassignment would not propagate to the cached fields.

mobile_client/lib/presentation/core/ui/split_panel_button.dart[6-8]
mobile_client/lib/presentation/core/themes/dimensions.dart[11-17]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`SplitPanelButton` stores Dimens-derived values in `static final` fields. Because `Dimens.*` are currently writable (`static` but not `final`), any future reassignment of the Dimens groups will not update the cached fields, leading to inconsistent sizing.

### Issue Context
This PR introduced more Dimens groups and migrated `SplitPanelButton` to read from `Dimens`.

### Fix Focus Areas
- mobile_client/lib/presentation/core/themes/dimensions.dart[11-17]
- mobile_client/lib/presentation/core/ui/split_panel_button.dart[6-8]

### Suggested fix
1) Make Dimens groups immutable singletons:
- change to `static final` (or `static const` with const constructors) for `padding/icon/text/button/radius/spacing`.
2) Avoid caching Dimens values in `static final` in widgets:
- either compute them in `build()` or keep them as `const` literals if they truly never vary.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Unused margin design token 🐞 Bug ⚙ Maintainability

Description

ButtonDim defines styledButtonMargin, but StyledButton’s default margin remains a hard-coded
EdgeInsets.all(8), so the token is not the single source of truth. This makes future spacing
changes riskier because updating the token won’t update the widget behavior.

Code

mobile_client/lib/presentation/core/themes/dimensions.dart[R63-71]

+class ButtonDim {
+  final ctaFontSize = 18.0;
+  final ctaVerticalPadding = 14.0;
+  final ctaHorizontalPadding = 32.0;
+  final ctaIconSize = 24.0;
+  
+  final styledButtonBorderWidth = 4.0;
+  final styledButtonMargin = 8.0;
+}

Evidence

The token is declared in ButtonDim, but StyledButton’s constructor default still uses a literal
EdgeInsets value instead of referencing the token (even though the numeric value now matches).

mobile_client/lib/presentation/core/themes/dimensions.dart[63-71]
mobile_client/lib/presentation/core/ui/styled_button.dart[17-27]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`ButtonDim.styledButtonMargin` is defined but not used; `StyledButton` still hard-codes its default margin.

### Issue Context
This PR appears to be centralizing UI sizing into `Dimens`. Leaving a token unused splits the source-of-truth.

### Fix Focus Areas
- mobile_client/lib/presentation/core/themes/dimensions.dart[63-71]
- mobile_client/lib/presentation/core/ui/styled_button.dart[17-27]

### Suggested fix
Pick one:
- **Adopt the token**: set StyledButton’s default margin to derive from the token (e.g., `EdgeInsets.all(Dimens.button.styledButtonMargin)`), or
- **Remove the token** if it’s not intended to be used.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---