Fix typography and spacing

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

@@ -10,20 +10,20 @@ import 'package:flutter/material.dart';
 /// Avoid using the below subtypes directly
 final class Dimens {
   static PaddingDim padding = PaddingDim();
-
   static IconDim icon = IconDim();
+  static TextDim text = TextDim();
+  static ButtonDim button = ButtonDim();
+  static RadiusDim radius = RadiusDim();
+  static SpacingDim spacing = SpacingDim();
 }
 
 /// ------------------------------
 ///      Padding Dimensions
 /// ------------------------------
 class PaddingDim {
   final horizontal = 20.0;
-
   final vertical = 24.0;
-
   final screenHorizontal = 20.0;
-
   final screenVertical = 24.0;
 
   /// Horizontal symmetric padding for screen edges
@@ -39,7 +39,56 @@ class PaddingDim {
 ///      Icon Dimensions
 /// ------------------------------
 class IconDim {
-  final large = 45.0;
-  final medium = 35.0;
+  final large = 40.0;
+  final medium = 28.0;
   final small = 20.0;
+  final tiny = 16.0;
+}
+
+/// ------------------------------
+///      Typography Dimensions
+/// ------------------------------
+class TextDim {
+  final header = 22.0;
+  final title = 18.0;
+  final body = 16.0;
+  final small = 14.0;
+  final tiny = 12.0;
+  final label = 13.0;
+}
+
+/// ------------------------------
+///      Button Dimensions
+/// ------------------------------
+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;
+}
+
+/// ------------------------------
+///      Radius Dimensions
+/// ------------------------------
+class RadiusDim {
+  final large = 40.0;
+  final medium = 24.0;
+  final small = 16.0;
+  final tiny = 8.0;
+  final pill = 999.0;
+}
+
+/// ------------------------------
+///      Spacing Dimensions
+/// ------------------------------
+class SpacingDim {
+  final xl = 32.0;
+  final lg = 24.0;
+  final md = 16.0;
+  final sm = 12.0;
+  final xs = 8.0;
+  final xss = 4.0;
 }

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:laze/presentation/core/themes/app_shadows.dart';
+import 'package:laze/presentation/core/themes/dimensions.dart';
 import 'package:laze/presentation/core/themes/generated_theme.dart';
 import 'package:laze/presentation/core/ui/press_animation_mixin.dart';
 
@@ -11,7 +12,7 @@ class CtaButton extends StatefulWidget {
   final Color? foregroundColor;
   final Color? borderColor;
   final double widthFactor;
-  final double fontSize;
+  final double? fontSize;
   final double borderWidth;
   final bool showShadow;
 
@@ -24,7 +25,7 @@ class CtaButton extends StatefulWidget {
     this.foregroundColor,
     this.borderColor,
     this.widthFactor = 0.75,
-    this.fontSize = 38,
+    this.fontSize,
     this.borderWidth = 1,
     this.showShadow = true,
   }) : assert(
@@ -59,25 +60,28 @@ class _CtaButtonState extends State<CtaButton>
       content = TextButton(
         onPressed: widget.onPressed,
         style: TextButton.styleFrom(
-          padding: const EdgeInsets.symmetric(vertical: 26),
+          padding: EdgeInsets.symmetric(vertical: Dimens.button.ctaVerticalPadding),
           shape: const StadiumBorder(),
           overlayColor: Colors.transparent,
         ),
-        child: Icon(widget.icon, color: resolvedForeground, size: 32),
+        child: Icon(widget.icon, color: resolvedForeground, size: Dimens.button.ctaIconSize),
       );
     } else {
       content = TextButton(
         onPressed: widget.onPressed,
         style: TextButton.styleFrom(
-          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 18),
+          padding: EdgeInsets.symmetric(
+            horizontal: Dimens.button.ctaHorizontalPadding,
+            vertical: Dimens.button.ctaVerticalPadding,
+          ),
           shape: const StadiumBorder(),
           overlayColor: Colors.transparent,
         ),
         child: Text(
           widget.text!,
           style: TextStyle(
             color: resolvedForeground,
-            fontSize: widget.fontSize,
+            fontSize: widget.fontSize ?? Dimens.button.ctaFontSize,
             fontWeight: FontWeight.w900,
             fontFamily: 'NunitoSans',
           ),

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

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:laze/presentation/core/themes/dimensions.dart';
+import 'package:laze/presentation/core/themes/generated_theme.dart';
+
+class ScreenHeader extends StatelessWidget {
+  final Widget title;
+  final List<Widget>? actions;
+
+  const ScreenHeader({
+    super.key,
+    required this.title,
+    this.actions,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final appColors = Theme.of(context).extension<AppColors>()!;
+    final scale = Theme.of(context).extension<DesignScale>()!;
+
+    final actionRow = actions != null && actions!.isNotEmpty
+        ? Row(
+            mainAxisSize: MainAxisSize.min,
+            children: actions!
+                .asMap()
+                .entries
+                .map((entry) => Padding(
+                      padding: EdgeInsets.only(
+                        left: entry.key == 0 ? 0 : 10,
+                      ),
+                      child: entry.value,
+                    ))
+                .toList(),
+          )
+        : null;
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Expanded(
+          child: Container(
+            height: 60,
+            padding: const EdgeInsets.symmetric(horizontal: 20),
+            decoration: BoxDecoration(
+              color: appColors.border,
+              border: Border.all(color: appColors.divider, width: 1),
+              borderRadius: BorderRadius.circular(scale.radiusPill),
+            ),
+            alignment: Alignment.centerLeft,
+            child: DefaultTextStyle(
+              style: TextStyle(
+                color: appColors.textMuted,
+                fontSize: Dimens.text.header,
+                fontWeight: FontWeight.w600,
+                letterSpacing: 1.1,
+              ),
+              child: title,
+            ),
+          ),
+        ),
+        if (actionRow != null) ...[
+          const SizedBox(width: 12),
+          actionRow,
+        ],
+      ],
+    );
+  }
+}

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

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:laze/presentation/core/themes/dimensions.dart';
 import 'package:laze/presentation/core/themes/generated_theme.dart';
 
 class SplitPanelButton extends StatelessWidget {
-  static const Radius _radius = Radius.circular(32);
-  static const double _topTextSize = 24;
-  static const double _bottomTextSize = 22;
+  static final Radius _radius = Radius.circular(Dimens.radius.medium);
+  static final double _topTextSize = Dimens.text.title;
+  static final double _bottomTextSize = Dimens.text.body;
   static const double _separatorHorizontalPadding = 18;
 
   final String topText;
@@ -31,10 +32,10 @@ class SplitPanelButton extends StatelessWidget {
       height: height,
       decoration: BoxDecoration(
         color: appColors.border,
-        borderRadius: const BorderRadius.all(_radius),
+        borderRadius: BorderRadius.all(_radius),
       ),
       child: ClipRRect(
-        borderRadius: const BorderRadius.all(_radius),
+        borderRadius: BorderRadius.all(_radius),
         child: Column(
           children: [
             Expanded(

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

@@ -22,7 +22,7 @@ class StyledButton extends StatefulWidget {
     this.width,
     this.height,
     this.iconSize,
-    this.margin = const EdgeInsets.all(10),
+    this.margin = const EdgeInsets.all(8),
     this.showShadow = true,
   });
 
@@ -51,7 +51,7 @@ class _StyledButtonState extends State<StyledButton>
           borderRadius: BorderRadius.circular(999),
           border: Border.all(
             color: appColors.border,
-            width: 6,
+            width: Dimens.button.styledButtonBorderWidth,
           ),
           boxShadow: flat ? null : AppShadows.raisedControl(appColors),
         ),

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

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:laze/presentation/core/themes/app_shadows.dart';
+import 'package:laze/presentation/core/themes/dimensions.dart';
 import 'package:laze/presentation/core/themes/generated_theme.dart';
 
 typedef Callback = void Function();
@@ -28,8 +29,8 @@ class StyledLongButton extends StatefulWidget {
     this.vertical,
     this.width,
     this.height,
-    this.iconSize = 45,
-    this.descriptionFontSize = 20,
+    this.iconSize = 40.0, // Match Dimens.icon.large
+    this.descriptionFontSize = 18.0, // Match Dimens.text.title
   });
 
   @override
@@ -250,7 +251,7 @@ class _StyledLongButtonState extends State<StyledLongButton> {
       decoration: BoxDecoration(
         shape: BoxShape.rectangle,
         color: appColors.bg,
-        borderRadius: BorderRadius.circular(50),
+        borderRadius: BorderRadius.circular(Dimens.radius.large),
         boxShadow: AppShadows.raisedControl(appColors),
       ),
       child: _buildLayout(context, appColors),

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:laze/presentation/core/themes/app_shadows.dart';
+import 'package:laze/presentation/core/themes/dimensions.dart';
 import 'package:laze/presentation/core/themes/generated_theme.dart';
 
 typedef Callback = void Function();
@@ -35,15 +36,15 @@ class WideStyledButton extends StatelessWidget {
       width: double.infinity,
       margin: const EdgeInsets.all(1),
       decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(30.0)),
+        borderRadius: BorderRadius.all(Radius.circular(Dimens.radius.medium)),
         color: backgroundColor,
         boxShadow: AppShadows.raisedPanel(appColors),
       ),
       child: icon != null
           ? IconButton(
               onPressed: onPressed,
               icon: Icon(icon),
-              iconSize: 60,
+              iconSize: Dimens.icon.large,
               color: iconColor,
             )
           : TextButton(

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

@@ -32,16 +32,19 @@ class CommandBtns extends StatelessWidget {
     return LayoutBuilder(
       builder: (context, constraints) {
         final width = constraints.maxWidth;
+        // Subtract the 8px consumed by Padding(horizontal: 4) so that child
+        // widths add up to the Row's actual available space.
+        final effectiveWidth = width - 8;
         final isCompact = width < 390;
         final sideWidth = math.max(
           56.0,
-          math.min(_CommandControlSizes.sideButtonWidth, width * 0.18),
+          math.min(_CommandControlSizes.sideButtonWidth, effectiveWidth * 0.18),
         );
         final centerWidth = math.max(
           148.0,
           math.min(
             _CommandControlSizes.centerPanelWidth,
-            width - (sideWidth * 2) - 40,
+            effectiveWidth - (sideWidth * 2) - 40,
           ),
         );
         final panelHeight =