From d2770d2d296fd7353853a175282552a456025d5b Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru444@gmail.com>
Date: Thu, 22 Jan 2026 13:08:39 -0500
Subject: [PATCH] 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.
---
 .../presentation/pages/client_hubs_page.dart  | 51 +++++++++----------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart b/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart
index 586b0a74..04ea1cca 100644
--- a/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart
+++ b/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),
                     ),
                   ),
                 ],