chore: Refactor ClientHubsPage to use design system constants

Replaced hardcoded color, spacing, and icon values with UiColors, UiConstants, UiIcons, and UiTypography from the design system for improved consistency and maintainability. Removed unused lucide_icons import and updated widget styles to use design system typography.

apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart

@@ -2,7 +2,6 @@ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_modular/flutter_modular.dart';
-import 'package:lucide_icons/lucide_icons.dart';
 import 'package:core_localization/core_localization.dart';
 import '../blocs/client_hubs_bloc.dart';
 import '../blocs/client_hubs_event.dart';
@@ -47,14 +46,16 @@ class ClientHubsPage extends StatelessWidget {
         },
         builder: (context, state) {
           return Scaffold(
-            backgroundColor: const Color(0xFFF8FAFC), // slate-50
             body: Stack(
               children: [
                 CustomScrollView(
                   slivers: [
                     _buildAppBar(context),
                     SliverPadding(
-                      padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: UiConstants.space5,
+                        vertical: UiConstants.space5,
+                      ).copyWith(bottom: 100),
                       sliver: SliverList(
                         delegate: SliverChildListDelegate([
                           if (state.status == ClientHubsStatus.loading)
@@ -85,7 +86,7 @@ class ClientHubsPage extends StatelessWidget {
                               ),
                             ),
                           ],
-                          const SizedBox(height: 20),
+                          const SizedBox(height: UiConstants.space5),
                           const HubInfoCard(),
                         ]),
                       ),
@@ -120,7 +121,7 @@ class ClientHubsPage extends StatelessWidget {
                   ),
                 if (state.status == ClientHubsStatus.actionInProgress)
                   Container(
-                    color: Colors.black.withValues(alpha: 0.1),
+                    color: UiColors.black.withValues(alpha: 0.1),
                     child: const Center(child: CircularProgressIndicator()),
                   ),
               ],
@@ -133,20 +134,19 @@ class ClientHubsPage extends StatelessWidget {
 
   Widget _buildAppBar(BuildContext context) {
     return SliverAppBar(
-      backgroundColor: const Color(0xFF121826),
+      backgroundColor: UiColors.foreground, // Dark Slate equivalent
       automaticallyImplyLeading: false,
       expandedHeight: 140,
       pinned: true,
       flexibleSpace: FlexibleSpaceBar(
         background: Container(
-          decoration: const BoxDecoration(
-            gradient: LinearGradient(
-              colors: [Color(0xFF121826), Color(0xFF1E293B)],
-              begin: Alignment.topLeft,
-              end: Alignment.bottomRight,
-            ),
+          color: UiColors.foreground,
+          padding: const EdgeInsets.fromLTRB(
+            UiConstants.space5,
+            UiConstants.space12,
+            UiConstants.space5,
+            0,
           ),
-          padding: const EdgeInsets.fromLTRB(20, 48, 20, 0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -156,17 +156,17 @@ class ClientHubsPage extends StatelessWidget {
                   width: 40,
                   height: 40,
                   decoration: BoxDecoration(
-                    color: Colors.white.withValues(alpha: 0.2),
+                    color: UiColors.white.withValues(alpha: 0.2),
                     shape: BoxShape.circle,
                   ),
                   child: const Icon(
-                    LucideIcons.arrowLeft,
-                    color: Colors.white,
+                    UiIcons.arrowLeft,
+                    color: UiColors.white,
                     size: 20,
                   ),
                 ),
               ),
-              const SizedBox(height: 16),
+              const SizedBox(height: UiConstants.space4),
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: <Widget>[
@@ -175,17 +175,12 @@ class ClientHubsPage extends StatelessWidget {
                     children: <Widget>[
                       Text(
                         t.client_hubs.title,
-                        style: const TextStyle(
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
-                          fontSize: 24,
-                        ),
+                        style: UiTypography.headline1m.white,
                       ),
                       Text(
                         t.client_hubs.subtitle,
-                        style: const TextStyle(
-                          color: Color(0xFFCBD5E1), // slate-300
-                          fontSize: 14,
+                        style: UiTypography.body2r.copyWith(
+                          color: UiColors.switchInactive,
                         ),
                       ),
                     ],
@@ -195,10 +190,10 @@ class ClientHubsPage extends StatelessWidget {
                       context,
                     ).add(const ClientHubsAddDialogToggled(visible: true)),
                     text: t.client_hubs.add_hub,
-                    leadingIcon: LucideIcons.plus,
+                    leadingIcon: UiIcons.add,
                     style: ElevatedButton.styleFrom(
-                      minimumSize: Size(0, 40),
-                      maximumSize: Size.fromHeight(40),
+                      minimumSize: const Size(0, 40),
+                      maximumSize: const Size.fromHeight(40),
                     ),
                   ),
                 ],