Sp 1722 duplicate space dialog enhancement (#370)

<!--
  Thanks for contributing!

Provide a description of your changes below and a general summary in the
title

Please look at the following checklist to ensure that your PR can be
accepted quickly:
-->

## Jira Ticket
[SP-1722](https://syncrow.atlassian.net/browse/SP-1722)

## Description

Implemented naming validation, that disallows for any name duplication.
Adds proper name suffix to the duplicated space's name, if there is any
match with the siblings.
Enhanced the dialog's design to match the design language of the
application.

## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [ x ] ✨ New feature (non-breaking change which adds functionality)
- [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ x ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore 


[SP-1722]:
https://syncrow.atlassian.net/browse/SP-1722?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

lib/common/dialog_dropdown.dart

@@ -66,7 +66,7 @@ class _DialogDropdownState extends State<DialogDropdown> {
                 child: Material(
                   elevation: 4.0,
                   child: Container(
-                    color: ColorsManager.whiteColors,
+                    color: ColorsManager.white,
                     constraints: const BoxConstraints(
                       maxHeight: 200.0, // Set max height for dropdown
                     ),
@@ -87,12 +87,10 @@ class _DialogDropdownState extends State<DialogDropdown> {
                           child: ListTile(
                             title: Text(
                               item,
-                              style: Theme.of(context)
-                                  .textTheme
-                                  .bodyMedium
-                                  ?.copyWith(
-                                    color: ColorsManager.textPrimaryColor,
-                                  ),
+                              style:
+                                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                        color: ColorsManager.textPrimaryColor,
+                                      ),
                             ),
                             onTap: () {
                               widget.onSelected(item);

lib/common/edit_chip.dart

@@ -14,7 +14,7 @@ class EditChip extends StatelessWidget {
     this.label = 'Edit',
     required this.onTap,
     this.labelColor = ColorsManager.spaceColor,
-    this.backgroundColor = ColorsManager.whiteColors,
+    this.backgroundColor = ColorsManager.white,
     this.borderColor = ColorsManager.spaceColor,
     this.borderRadius = 16.0,
   }) : super(key: key);
@@ -24,10 +24,9 @@ class EditChip extends StatelessWidget {
     return GestureDetector(
       onTap: onTap,
       child: Chip(
-        label: Text(
-          label,
-          style: Theme.of(context).textTheme.bodySmall!.copyWith(color: labelColor)
-        ),
+        label: Text(label,
+            style:
+                Theme.of(context).textTheme.bodySmall!.copyWith(color: labelColor)),
         backgroundColor: backgroundColor,
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(borderRadius),

lib/common/tag_dialog_textfield_dropdown.dart

@@ -17,8 +17,7 @@ class TagDialogTextfieldDropdown extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _DialogTextfieldDropdownState createState() =>
-      _DialogTextfieldDropdownState();
+  _DialogTextfieldDropdownState createState() => _DialogTextfieldDropdownState();
 }
 
 class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
@@ -97,7 +96,7 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
                 child: Material(
                   elevation: 4.0,
                   child: Container(
-                    color: ColorsManager.whiteColors,
+                    color: ColorsManager.white,
                     constraints: const BoxConstraints(maxHeight: 200.0),
                     child: StatefulBuilder(
                       builder: (context, setStateDropdown) {
@@ -122,8 +121,7 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
                                         .textTheme
                                         .bodyMedium
                                         ?.copyWith(
-                                            color: ColorsManager
-                                                .textPrimaryColor)),
+                                            color: ColorsManager.textPrimaryColor)),
                                 onTap: () {
                                   _controller.text = tag.tag ?? '';
                                   widget.onSelected(tag);

lib/common/widgets/custom_expansion_tile.dart

@@ -5,19 +5,20 @@ class CustomExpansionTile extends StatefulWidget {
   final String title;
   final List<Widget>? children;
   final bool initiallyExpanded;
-  final bool isSelected; // Add this to track selection
-  final bool? isExpanded; // External control over expansion
-  final ValueChanged<bool>? onExpansionChanged; // Notify when expansion changes
-  final VoidCallback? onItemSelected; // Callback for selecting the item
+  final bool isSelected;
+  final bool? isExpanded;
+  final ValueChanged<bool>? onExpansionChanged;
+  final VoidCallback? onItemSelected;
 
-  CustomExpansionTile({
+  const CustomExpansionTile({
+    super.key,
     required this.title,
     this.children,
     this.initiallyExpanded = false,
-    this.isExpanded, // Allow external control over expansion
-    this.onExpansionChanged, // Notify when expansion changes
-    this.onItemSelected, // Trigger item selection when name is tapped
-    required this.isSelected, // Add this to initialize selection state
+    this.isExpanded,
+    this.onExpansionChanged,
+    this.onItemSelected,
+    required this.isSelected,
   });
 
   @override
@@ -25,7 +26,7 @@ class CustomExpansionTile extends StatefulWidget {
 }
 
 class CustomExpansionTileState extends State<CustomExpansionTile> {
-  bool _isExpanded = false; // Local expansion state
+  bool _isExpanded = false;
 
   @override
   void initState() {
@@ -36,7 +37,6 @@ class CustomExpansionTileState extends State<CustomExpansionTile> {
   @override
   void didUpdateWidget(CustomExpansionTile oldWidget) {
     super.didUpdateWidget(oldWidget);
-    // Sync local state with external control of expansion state
     if (widget.isExpanded != null && widget.isExpanded != _isExpanded) {
       setState(() {
         _isExpanded = widget.isExpanded!;
@@ -44,7 +44,6 @@ class CustomExpansionTileState extends State<CustomExpansionTile> {
     }
   }
 
-  // Utility function to capitalize the first letter of the title
   String _capitalizeFirstLetter(String text) {
     if (text.isEmpty) return text;
     return text[0].toUpperCase() + text.substring(1);
@@ -56,7 +55,6 @@ class CustomExpansionTileState extends State<CustomExpansionTile> {
       children: [
         Row(
           children: [
-            // Expand/collapse icon, now wrapped in a GestureDetector for specific onTap
             if (widget.children != null && widget.children!.isNotEmpty)
               GestureDetector(
                 onTap: () {
@@ -70,38 +68,33 @@ class CustomExpansionTileState extends State<CustomExpansionTile> {
                       ? Icons.keyboard_arrow_down
                       : Icons.keyboard_arrow_right,
                   color: ColorsManager.lightGrayColor,
-                  size: 16.0, // Adjusted size for better alignment
+                  size: 16,
                 ),
               ),
-            // The title text, wrapped in GestureDetector to handle selection
             Expanded(
               child: GestureDetector(
                 onTap: () {
                   if (widget.onItemSelected != null) {
-                    widget.onItemSelected!();
+                    widget.onItemSelected!.call();
                   }
                 },
                 child: Text(
                   _capitalizeFirstLetter(widget.title),
                   style: TextStyle(
                     color: widget.isSelected
-                        ? ColorsManager
-                            .blackColor // Change color to black when selected
-                        : ColorsManager
-                            .lightGrayColor, // Gray when not selected
-                    fontWeight: FontWeight.w400,
+                        ? ColorsManager.blackColor
+                        : ColorsManager.lightGrayColor,
+                    fontWeight:
+                        widget.isSelected ? FontWeight.w600 : FontWeight.w400,
                   ),
                 ),
               ),
             ),
           ],
         ),
-        // The expanded section (children) that shows when the tile is expanded
-        if (_isExpanded &&
-            widget.children != null &&
-            widget.children!.isNotEmpty)
+        if (_isExpanded && widget.children != null && widget.children!.isNotEmpty)
           Padding(
-            padding: const EdgeInsets.only(left: 24.0), // Indented children
+            padding: const EdgeInsets.only(left: 24),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: widget.children!,

lib/common/widgets/search_bar.dart

@@ -7,7 +7,7 @@ class CustomSearchBar extends StatefulWidget {
   final TextEditingController? controller;
   final String hintText;
   final String? searchQuery;
-  final Function(String)? onSearchChanged; // Callback for search input changes
+  final void Function(String)? onSearchChanged;
 
   const CustomSearchBar({
     super.key,
@@ -34,10 +34,10 @@ class _CustomSearchBarState extends State<CustomSearchBar> {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         boxShadow: [
           BoxShadow(
-            color: Colors.black.withOpacity(0.2),
+            color: ColorsManager.shadowBlackColor.withValues(alpha: 0.1),
             spreadRadius: 0,
             blurRadius: 8,
             offset: const Offset(0, 4),
@@ -57,7 +57,7 @@ class _CustomSearchBarState extends State<CustomSearchBar> {
           style: const TextStyle(
             color: Colors.black,
           ),
-          onChanged: widget.onSearchChanged, // Call the callback on text change
+          onChanged: widget.onSearchChanged,
           decoration: InputDecoration(
             filled: true,
             fillColor: ColorsManager.textFieldGreyColor,

lib/pages/access_management/booking_system/presentation/view/booking_page.dart

@@ -1,6 +1,7 @@
+import 'package:calendar_view/calendar_view.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:calendar_view/calendar_view.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/data/services/memory_bookable_space_service.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/data/services/remote_calendar_service.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/domain/LoadEventsParam.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/calendar/events_bloc.dart';
@@ -8,7 +9,6 @@ import 'package:syncrow_web/pages/access_management/booking_system/presentation/
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_bloc.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/data/services/memory_bookable_space_service.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/booking_sidebar.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/custom_calendar_page.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
@@ -114,7 +114,7 @@ class _BookingPageContentState extends State<_BookingPageContent> {
               Expanded(
                 child: Container(
                   decoration: BoxDecoration(
-                    color: ColorsManager.whiteColors,
+                    color: ColorsManager.white,
                     boxShadow: [
                       BoxShadow(
                         color: ColorsManager.blackColor.withOpacity(0.1),
@@ -142,8 +142,7 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                         ),
                       ),
                       Expanded(
-                        child:
-                            BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                        child: BlocBuilder<DateSelectionBloc, DateSelectionState>(
                           builder: (context, dateState) {
                             return CustomCalendarPage(
                               selectedDate: dateState.selectedDate,
@@ -152,8 +151,9 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                 context
                                     .read<DateSelectionBloc>()
                                     .add(SelectDate(newDate));
-                                context.read<DateSelectionBloc>().add(
-                                    SelectDateFromSidebarCalendar(newDate));
+                                context
+                                    .read<DateSelectionBloc>()
+                                    .add(SelectDateFromSidebarCalendar(newDate));
                               },
                             );
                           },
@@ -193,8 +193,7 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                           BlocBuilder<DateSelectionBloc, DateSelectionState>(
                             builder: (context, state) {
                               final weekStart = state.weekStart;
-                              final weekEnd =
-                                  weekStart.add(const Duration(days: 6));
+                              final weekEnd = weekStart.add(const Duration(days: 6));
                               return WeekNavigation(
                                 weekStart: weekStart,
                                 weekEnd: weekEnd,
@@ -204,9 +203,7 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                       .add(PreviousWeek());
                                 },
                                 onNextWeek: () {
-                                  context
-                                      .read<DateSelectionBloc>()
-                                      .add(NextWeek());
+                                  context.read<DateSelectionBloc>().add(NextWeek());
                                 },
                               );
                             },
@@ -219,8 +216,7 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                         child: BlocBuilder<SelectedBookableSpaceBloc,
                             SelectedBookableSpaceState>(
                           builder: (context, roomState) {
-                            final selectedRoom =
-                                roomState.selectedBookableSpace;
+                            final selectedRoom = roomState.selectedBookableSpace;
                             return BlocBuilder<DateSelectionBloc,
                                 DateSelectionState>(
                               builder: (context, dateState) {
@@ -228,12 +224,10 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                     CalendarEventState>(
                                   builder: (context, eventState) {
                                     return WeeklyCalendarPage(
-                                      key: ValueKey(
-                                          selectedRoom?.uuid ?? 'no-room'),
-                                      startTime: selectedRoom
-                                          ?.bookableConfig.startTime,
-                                      endTime:
-                                          selectedRoom?.bookableConfig.endTime,
+                                      key: ValueKey(selectedRoom?.uuid ?? 'no-room'),
+                                      startTime:
+                                          selectedRoom?.bookableConfig.startTime,
+                                      endTime: selectedRoom?.bookableConfig.endTime,
                                       weekStart: dateState.weekStart,
                                       selectedDate: dateState.selectedDate,
                                       eventController: _eventController,

lib/pages/access_management/booking_system/presentation/view/widgets/booking_sidebar.dart

@@ -80,7 +80,7 @@ class __SidebarContentState extends State<_SidebarContent> {
               padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
               child: Container(
                   decoration: BoxDecoration(
-                    color: ColorsManager.whiteColors,
+                    color: ColorsManager.white,
                     boxShadow: [
                       BoxShadow(
                         color: ColorsManager.blackColor.withOpacity(0.1),
@@ -94,7 +94,7 @@ class __SidebarContentState extends State<_SidebarContent> {
             ),
             Container(
               decoration: BoxDecoration(
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
                 boxShadow: [
                   BoxShadow(
                     color: ColorsManager.blackColor.withOpacity(0.1),
@@ -108,8 +108,8 @@ class __SidebarContentState extends State<_SidebarContent> {
                 padding: const EdgeInsets.all(8.0),
                 child: Container(
                   child: Padding(
-                    padding: const EdgeInsets.symmetric(
-                        horizontal: 16.0, vertical: 8.0),
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                     child: Container(
                       decoration: BoxDecoration(
                         color: ColorsManager.counterBackgroundColor,
@@ -119,12 +119,10 @@ class __SidebarContentState extends State<_SidebarContent> {
                         children: [
                           Expanded(
                             child: TextField(
-                              style: Theme.of(context)
-                                  .textTheme
-                                  .bodyMedium
-                                  ?.copyWith(
-                                    color: ColorsManager.blackColor,
-                                  ),
+                              style:
+                                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                        color: ColorsManager.blackColor,
+                                      ),
                               controller: searchController,
                               onChanged: _handleSearch,
                               decoration: InputDecoration(
@@ -174,8 +172,7 @@ class __SidebarContentState extends State<_SidebarContent> {
               Expanded(
                 child: ListView.builder(
                   controller: _scrollController,
-                  itemCount:
-                      state.displayedRooms.length + (state.hasMore ? 1 : 0),
+                  itemCount: state.displayedRooms.length + (state.hasMore ? 1 : 0),
                   itemBuilder: (context, index) {
                     if (index == state.displayedRooms.length) {
                       return _buildLoadMoreIndicator(state);
@@ -186,9 +183,7 @@ class __SidebarContentState extends State<_SidebarContent> {
                       room: room,
                       isSelected: state.selectedRoomId == room.uuid,
                       onTap: () {
-                        context
-                            .read<SidebarBloc>()
-                            .add(SelectRoomEvent(room.uuid));
+                        context.read<SidebarBloc>().add(SelectRoomEvent(room.uuid));
                         widget.onRoomSelected(room);
                       },
                     );

lib/pages/access_management/manage_bookable_spaces/presentation/screens/setup_bookable_spaces_dialog.dart

@@ -52,21 +52,20 @@ class _SetupBookableSpacesDialogState extends State<SetupBookableSpacesDialog> {
             ),
           )..add(
               LoadUnBookableSpacesEvent(
-                nonBookableSpacesParams:
-                    NonBookableSpacesParams(currentPage: 1),
+                nonBookableSpacesParams: NonBookableSpacesParams(currentPage: 1),
               ),
             ),
         ),
         BlocProvider<SetupBookableSpacesBloc>(
           create: widget.editingBookableSpace == null
-              ? (context) => SetupBookableSpacesBloc(
-                  RemoteNonBookableSpaces(HTTPService()))
-              : (context) => SetupBookableSpacesBloc(
-                  RemoteNonBookableSpaces(HTTPService()))
-                ..add(
-                  EditModeSelected(
-                      editingBookableSpace: widget.editingBookableSpace!),
-                ),
+              ? (context) =>
+                  SetupBookableSpacesBloc(RemoteNonBookableSpaces(HTTPService()))
+              : (context) =>
+                  SetupBookableSpacesBloc(RemoteNonBookableSpaces(HTTPService()))
+                    ..add(
+                      EditModeSelected(
+                          editingBookableSpace: widget.editingBookableSpace!),
+                    ),
         ),
         BlocProvider(
           create: (context) => SendBookableSpacesBloc(
@@ -75,7 +74,7 @@ class _SetupBookableSpacesDialogState extends State<SetupBookableSpacesDialog> {
         )
       ],
       child: AlertDialog(
-        backgroundColor: ColorsManager.whiteColors,
+        backgroundColor: ColorsManager.white,
         contentPadding: EdgeInsets.zero,
         title: Center(
           child: Text(

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/bookable_space_switch_activation_widget.dart

@@ -21,16 +21,14 @@ class BookableSpaceSwitchActivationWidget extends StatelessWidget {
     return Center(
       child: Transform.scale(
         scale: 0.7,
-        child:
-            BlocConsumer<UpdateBookableSpacesBloc, UpdateBookableSpacesState>(
+        child: BlocConsumer<UpdateBookableSpacesBloc, UpdateBookableSpacesState>(
           listener: (context, updateState) {
             if (updateState is UpdateBookableSpaceSuccess) {
               context.read<BookableSpacesBloc>().add(
                     InsertUpdatedSpaceEvent(
                       bookableSpaces: bookableSpaces,
                       bookableSpace: space,
-                      updatedBookableSpaceConfig:
-                          updateState.bookableSpaceConfig,
+                      updatedBookableSpaceConfig: updateState.bookableSpaceConfig,
                     ),
                   );
             }
@@ -42,16 +40,16 @@ class BookableSpaceSwitchActivationWidget extends StatelessWidget {
               return const Center(child: CircularProgressIndicator());
             }
             return Switch(
-              trackOutlineColor: WidgetStateProperty.resolveWith<Color>(
-                  (Set<WidgetState> states) {
-                return ColorsManager.whiteColors;
+              trackOutlineColor:
+                  WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) {
+                return ColorsManager.white;
               }),
               value: space.spaceConfig!.availability,
               activeTrackColor: ColorsManager.dialogBlueTitle,
               inactiveTrackColor: ColorsManager.grayBorder,
-              thumbColor: WidgetStateProperty.resolveWith<Color>(
-                  (Set<WidgetState> states) {
-                return ColorsManager.whiteColors;
+              thumbColor:
+                  WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) {
+                return ColorsManager.white;
               }),
               onChanged: (value) {
                 context.read<UpdateBookableSpacesBloc>().add(

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/bottom_pagination_part_widget.dart

@@ -68,7 +68,7 @@ class PaginationButtonsWidget extends StatelessWidget {
                     decoration: BoxDecoration(
                         color: i == currentPage
                             ? ColorsManager.dialogBlueTitle
-                            : ColorsManager.whiteColors,
+                            : ColorsManager.white,
                         borderRadius: BorderRadius.circular(8),
                         border: Border.all(
                           color: ColorsManager.lightGrayBorderColor,
@@ -77,9 +77,8 @@ class PaginationButtonsWidget extends StatelessWidget {
                       '$i',
                       style: TextStyle(
                         color: i == currentPage ? Colors.white : Colors.black,
-                        fontWeight: i == currentPage
-                            ? FontWeight.bold
-                            : FontWeight.normal,
+                        fontWeight:
+                            i == currentPage ? FontWeight.bold : FontWeight.normal,
                       ),
                     ),
                   ),
@@ -129,8 +128,7 @@ class PaginationButtonsWidget extends StatelessWidget {
     );
   }
 
-  Widget _buildArrowButton(
-      {required String label, required VoidCallback onTap}) {
+  Widget _buildArrowButton({required String label, required VoidCallback onTap}) {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 4),
       child: GestureDetector(
@@ -140,7 +138,7 @@ class PaginationButtonsWidget extends StatelessWidget {
           height: 30,
           alignment: Alignment.center,
           decoration: BoxDecoration(
-              color: ColorsManager.whiteColors,
+              color: ColorsManager.white,
               borderRadius: BorderRadius.circular(8),
               border: Border.all(
                 color: ColorsManager.lightGrayBorderColor,

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart

@@ -62,16 +62,13 @@ class _PointsPartWidgetState extends State<PointsPartWidget> {
                   scale: 0.7,
                   child: Switch(
                     materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                    trackOutlineColor:
-                        WidgetStateProperty.all(ColorsManager.whiteColors),
+                    trackOutlineColor: WidgetStateProperty.all(ColorsManager.white),
                     activeTrackColor: ColorsManager.dialogBlueTitle,
                     inactiveTrackColor: ColorsManager.lightGrayBorderColor,
-                    thumbColor:
-                        WidgetStateProperty.all(ColorsManager.whiteColors),
+                    thumbColor: WidgetStateProperty.all(ColorsManager.white),
                     value: isSwitchOn,
                     onChanged: (value) {
-                      final toggleCubit =
-                          context.read<TogglePointsSwitchCubit>();
+                      final toggleCubit = context.read<TogglePointsSwitchCubit>();
                       final bloc = context.read<SetupBookableSpacesBloc>();
 
                       final updatedCost = value ? -1 : 0;

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart

@@ -36,12 +36,11 @@ class SearchUnbookableSpacesWidget extends StatelessWidget {
       height: height ?? 40,
       padding: const EdgeInsets.only(top: 4),
       decoration: BoxDecoration(
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         borderRadius: BorderRadius.circular(raduis ?? 15),
         boxShadow: [
           BoxShadow(
-            color:
-                ColorsManager.shadowOfSearchTextfield.withValues(alpha: 0.15),
+            color: ColorsManager.shadowOfSearchTextfield.withValues(alpha: 0.15),
             offset: Offset.zero,
             blurRadius: blur ?? 5,
             spreadRadius: 0,

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart

@@ -33,7 +33,7 @@ class StepperPartWidget extends StatelessWidget {
                 const CircleTitleStepperWidget(
                   title: 'Settings',
                   titleColor: ColorsManager.softGray,
-                  circleColor: ColorsManager.whiteColors,
+                  circleColor: ColorsManager.white,
                   borderColor: ColorsManager.textGray,
                 )
               ],
@@ -49,7 +49,7 @@ class StepperPartWidget extends StatelessWidget {
                   titleColor: ColorsManager.softGray,
                   cicleIcon: Icon(
                     Icons.check,
-                    color: ColorsManager.whiteColors,
+                    color: ColorsManager.white,
                     size: 12,
                   ),
                   circleColor: ColorsManager.trueIconGreen,

lib/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart

@@ -104,7 +104,7 @@ abstract final class RangeOfAqiChartsHelper {
   ) {
     return LineTouchData(
       touchTooltipData: LineTouchTooltipData(
-        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+        getTooltipColor: (touchTooltipItem) => ColorsManager.white,
         tooltipBorder: const BorderSide(
           color: ColorsManager.semiTransparentBlack,
         ),

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart

@@ -77,7 +77,7 @@ class AqiDistributionChart extends StatelessWidget {
   BarTouchData _barTouchData(BuildContext context) {
     return BarTouchData(
       touchTooltipData: BarTouchTooltipData(
-        getTooltipColor: (_) => ColorsManager.whiteColors,
+        getTooltipColor: (_) => ColorsManager.white,
         tooltipBorder: const BorderSide(
           color: ColorsManager.semiTransparentBlack,
         ),

lib/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart

@@ -65,7 +65,7 @@ class AqiGauge extends StatelessWidget {
         pointer: GaugePointer.circle(
           position: const GaugePointerPosition.surface(),
           radius: MediaQuery.sizeOf(context).width * 0.004,
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           border: GaugePointerBorder(
             width: 6,
             color: statusColor,

lib/pages/analytics/modules/air_quality/widgets/aqi_location_info_cell.dart

@@ -20,7 +20,7 @@ class AqiLocationInfoCell extends StatelessWidget {
     return Expanded(
       child: Container(
         decoration: BoxDecoration(
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           borderRadius: BorderRadius.circular(12),
         ),
         child: Stack(

lib/pages/analytics/modules/air_quality/widgets/aqi_sub_value_widget.dart

@@ -62,7 +62,7 @@ class AqiSubValueWidget extends StatelessWidget {
       child: Container(
         padding: const EdgeInsetsDirectional.all(10),
         decoration: BoxDecoration(
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           borderRadius: BorderRadius.circular(12),
         ),
         child: Row(

lib/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart

@@ -46,7 +46,7 @@ class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
         value: widget.selectedAqiType,
         isDense: true,
         borderRadius: BorderRadius.circular(16),
-        dropdownColor: ColorsManager.whiteColors,
+        dropdownColor: ColorsManager.white,
         underline: const SizedBox.shrink(),
         icon: const RotatedBox(
           quarterTurns: 1,

lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart

@@ -107,7 +107,7 @@ class RangeOfAqiChart extends StatelessWidget {
       show: true,
       getDotPainter: (_, __, ___, ____) => FlDotCirclePainter(
         radius: 2,
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         strokeWidth: 2,
         strokeColor: color,
       ),

lib/pages/analytics/modules/analytics/widgets/month_picker_widget.dart

@@ -45,7 +45,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       child: Container(
         padding: const EdgeInsetsDirectional.all(20),
         width: 320,
@@ -108,7 +108,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
                     style: context.textTheme.titleSmall?.copyWith(
                       fontSize: 14,
                       fontWeight: FontWeight.w600,
-                      color: ColorsManager.whiteColors,
+                      color: ColorsManager.white,
                     ),
                   ),
                 ),
@@ -217,7 +217,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
                 style: context.textTheme.titleSmall?.copyWith(
                   fontSize: 12,
                   color: isSelected
-                      ? ColorsManager.whiteColors
+                      ? ColorsManager.white
                       : isFutureMonth
                           ? ColorsManager.blackColor.withValues(alpha: 0.3)
                           : ColorsManager.blackColor.withValues(alpha: 0.8),

lib/pages/analytics/modules/analytics/widgets/sidebar/analytics_space_tree_view.dart

@@ -59,7 +59,7 @@ class _AnalyticsSpaceTreeViewState extends State<AnalyticsSpaceTreeView> {
           : state.communityList;
       return Container(
         height: MediaQuery.sizeOf(context).height,
-        decoration: const BoxDecoration(color: ColorsManager.whiteColors),
+        decoration: const BoxDecoration(color: ColorsManager.white),
         child: state is SpaceTreeLoadingState
             ? const Center(child: CircularProgressIndicator())
             : Column(

lib/pages/analytics/modules/analytics/widgets/year_picker_widget.dart

@@ -33,7 +33,7 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       child: Container(
         padding: const EdgeInsetsDirectional.all(20),
         width: 320,
@@ -92,7 +92,7 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
                     style: context.textTheme.titleSmall?.copyWith(
                       fontSize: 14,
                       fontWeight: FontWeight.w600,
-                      color: ColorsManager.whiteColors,
+                      color: ColorsManager.white,
                     ),
                   ),
                 ),
@@ -144,7 +144,7 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
                 style: context.textTheme.titleSmall?.copyWith(
                   fontSize: 12,
                   color: isSelected
-                      ? ColorsManager.whiteColors
+                      ? ColorsManager.white
                       : ColorsManager.blackColor.withValues(alpha: 0.8),
                   fontWeight: FontWeight.w500,
                 ),

lib/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart

@@ -81,7 +81,7 @@ abstract final class EnergyManagementChartsHelper {
 
   static LineTouchTooltipData lineTouchTooltipData() {
     return LineTouchTooltipData(
-      getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+      getTooltipColor: (touchTooltipItem) => ColorsManager.white,
       tooltipBorder: const BorderSide(color: ColorsManager.semiTransparentBlack),
       tooltipRoundedRadius: 16,
       showOnTopOfTheChartBoxArea: false,

lib/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart

@@ -72,7 +72,7 @@ class AnalyticsDeviceDropdown extends StatelessWidget {
       value: state.selectedDevice,
       isDense: true,
       borderRadius: BorderRadius.circular(16),
-      dropdownColor: ColorsManager.whiteColors,
+      dropdownColor: ColorsManager.white,
       underline: const SizedBox.shrink(),
       icon: const RotatedBox(
         quarterTurns: 1,

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart

@@ -18,7 +18,6 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return BarChart(
       BarChartData(
-
         gridData: EnergyManagementChartsHelper.gridData().copyWith(
           checkToShowHorizontalLine: (value) => true,
           horizontalInterval: 250,
@@ -74,7 +73,7 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
   BarTouchData _barTouchData(BuildContext context) {
     return BarTouchData(
       touchTooltipData: BarTouchTooltipData(
-        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+        getTooltipColor: (touchTooltipItem) => ColorsManager.white,
         tooltipBorder: const BorderSide(
           color: ColorsManager.semiTransparentBlack,
         ),

lib/pages/analytics/modules/occupancy/widgets/heat_map_tooltip.dart

@@ -34,7 +34,7 @@ class HeatMapTooltip extends StatelessWidget {
               style: context.textTheme.bodySmall?.copyWith(
                 fontSize: 12,
                 fontWeight: FontWeight.w700,
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
               ),
             ),
             const Divider(height: 2, thickness: 1),
@@ -43,7 +43,7 @@ class HeatMapTooltip extends StatelessWidget {
               style: context.textTheme.bodySmall?.copyWith(
                 fontSize: 10,
                 fontWeight: FontWeight.w500,
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
               ),
             ),
           ],

lib/pages/analytics/modules/occupancy/widgets/occupancy_chart.dart

@@ -64,7 +64,7 @@ class OccupancyChart extends StatelessWidget {
   BarTouchData _barTouchData(BuildContext context) {
     return BarTouchData(
       touchTooltipData: BarTouchTooltipData(
-        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+        getTooltipColor: (touchTooltipItem) => ColorsManager.white,
         tooltipBorder: const BorderSide(
           color: ColorsManager.semiTransparentBlack,
         ),

lib/pages/auth/view/login_web_page.dart

@@ -121,7 +121,8 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
                               const Spacer(),
                               Expanded(
                                 flex: 2,
-                                child: _buildLoginFormFields(context, loginBloc, size),
+                                child:
+                                    _buildLoginFormFields(context, loginBloc, size),
                               ),
                               const Spacer(),
                             ],
@@ -147,8 +148,8 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
       child: Form(
         key: loginBloc.loginFormKey,
         child: Padding(
-          padding:
-              EdgeInsets.symmetric(horizontal: size.width * 0.02, vertical: size.width * 0.003),
+          padding: EdgeInsets.symmetric(
+              horizontal: size.width * 0.02, vertical: size.width * 0.003),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -303,10 +304,8 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
             decoration: textBoxDecoration()!.copyWith(
                 errorStyle: const TextStyle(height: 0),
                 hintText: 'Enter your email address',
-                hintStyle: Theme.of(context)
-                    .textTheme
-                    .bodySmall!
-                    .copyWith(color: ColorsManager.grayColor, fontWeight: FontWeight.w400)),
+                hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(
+                    color: ColorsManager.grayColor, fontWeight: FontWeight.w400)),
             style: const TextStyle(color: Colors.black),
           ),
         ),
@@ -338,7 +337,7 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
             controller: loginBloc.loginPasswordController,
             onFieldSubmitted: (value) {
               if (loginBloc.loginFormKey.currentState!.validate()) {
-                loginBloc.add(LoginButtonPressed(    
+                loginBloc.add(LoginButtonPressed(
                   username: loginBloc.loginEmailController.text,
                   password: value,
                 ));
@@ -348,17 +347,18 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
             },
             decoration: textBoxDecoration()!.copyWith(
               hintText: 'At least 8 characters',
-              hintStyle: Theme.of(context)
-                  .textTheme
-                  .bodySmall!
-                  .copyWith(color: ColorsManager.grayColor, fontWeight: FontWeight.w400),
+              hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(
+                  color: ColorsManager.grayColor, fontWeight: FontWeight.w400),
               suffixIcon: IconButton(
                 onPressed: () {
-                  loginBloc.add(PasswordVisibleEvent(newValue: loginBloc.obscureText));
+                  loginBloc
+                      .add(PasswordVisibleEvent(newValue: loginBloc.obscureText));
                 },
                 icon: SizedBox(
                   child: SvgPicture.asset(
-                    loginBloc.obscureText ? Assets.visiblePassword : Assets.invisiblePassword,
+                    loginBloc.obscureText
+                        ? Assets.visiblePassword
+                        : Assets.invisiblePassword,
                     height: 15,
                     width: 15,
                   ),
@@ -386,10 +386,8 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
             },
             child: Text(
               "Forgot Password?",
-              style: Theme.of(context)
-                  .textTheme
-                  .bodySmall!
-                  .copyWith(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w400),
+              style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                  color: Colors.black, fontSize: 14, fontWeight: FontWeight.w400),
             ),
           ),
         ],
@@ -466,8 +464,8 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
                 style: Theme.of(context).textTheme.labelLarge!.copyWith(
                       fontSize: 14,
                       color: loginBloc.checkValidate
-                          ? ColorsManager.whiteColors
-                          : ColorsManager.whiteColors.withOpacity(0.2),
+                          ? ColorsManager.white
+                          : ColorsManager.white.withOpacity(0.2),
                     )),
             onPressed: () {
               if (loginBloc.loginFormKey.currentState!.validate()) {
@@ -494,7 +492,8 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
         SizedBox(
           child: Text(
             loginBloc.validate,
-            style: const TextStyle(fontWeight: FontWeight.w700, color: ColorsManager.red),
+            style: const TextStyle(
+                fontWeight: FontWeight.w700, color: ColorsManager.red),
           ),
         )
       ],

lib/pages/common/buttons/search_reset_buttons.dart

@@ -56,7 +56,7 @@ class SearchResetButtons extends StatelessWidget {
                 decoration: containerDecoration,
                 child: Center(
                   child: DefaultButton(
-                    backgroundColor: ColorsManager.whiteColors,
+                    backgroundColor: ColorsManager.white,
                     borderRadius: 9,
                     onPressed: onReset,
                     child: Text(

lib/pages/common/curtain_toggle.dart

@@ -35,7 +35,7 @@ class CurtainToggle extends StatelessWidget {
             children: [
               ClipOval(
                 child: Container(
-                  color: ColorsManager.whiteColors,
+                  color: ColorsManager.white,
                   child: SvgPicture.asset(
                     Assets.curtainIcon,
                     width: 60,

lib/pages/common/custom_table.dart

@@ -127,13 +127,11 @@ class _DynamicTableState extends State<DynamicTable> {
           controller: _horizontalScrollController,
           thumbVisibility: true,
           trackVisibility: true,
-          notificationPredicate: (notif) =>
-              notif.metrics.axis == Axis.horizontal,
+          notificationPredicate: (notif) => notif.metrics.axis == Axis.horizontal,
           child: SingleChildScrollView(
             controller: _horizontalScrollController,
             scrollDirection: Axis.horizontal,
-            physics:
-                widget.isEmpty ? const NeverScrollableScrollPhysics() : null,
+            physics: widget.isEmpty ? const NeverScrollableScrollPhysics() : null,
             child: SizedBox(
               width: _totalTableWidth,
               child: Column(
@@ -195,29 +193,25 @@ class _DynamicTableState extends State<DynamicTable> {
                                         widget.headers[colIndex] == 'Settings'
                                             ? buildSettingsIcon(
                                                 width: _settingsColumnWidth,
-                                                onTap: () => widget
-                                                    .onSettingsPressed
+                                                onTap: () => widget.onSettingsPressed
                                                     ?.call(rowIndex),
                                               )
                                             : _buildTableCell(
                                                 row[colIndex].toString(),
-                                                width: widget.headers[
-                                                            colIndex] ==
+                                                width: widget.headers[colIndex] ==
                                                         'Settings'
                                                     ? _settingsColumnWidth
                                                     : (_totalTableWidth -
                                                             (widget.withCheckBox
                                                                 ? _checkboxColumnWidth
                                                                 : 0) -
-                                                            (widget.headers
-                                                                    .contains(
-                                                                        'Settings')
+                                                            (widget.headers.contains(
+                                                                    'Settings')
                                                                 ? _settingsColumnWidth
                                                                 : 0)) /
                                                         (widget.headers.length -
-                                                            (widget.headers
-                                                                    .contains(
-                                                                        'Settings')
+                                                            (widget.headers.contains(
+                                                                    'Settings')
                                                                 ? 1
                                                                 : 0)),
                                                 rowIndex: rowIndex,
@@ -241,7 +235,7 @@ class _DynamicTableState extends State<DynamicTable> {
 
   Widget _buildEmptyState() => Container(
         height: widget.size.height,
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
@@ -281,9 +275,8 @@ class _DynamicTableState extends State<DynamicTable> {
       ),
       child: Checkbox(
         value: _selectAll,
-        onChanged: widget.withSelectAll && widget.data.isNotEmpty
-            ? _toggleSelectAll
-            : null,
+        onChanged:
+            widget.withSelectAll && widget.data.isNotEmpty ? _toggleSelectAll : null,
       ),
     );
   }
@@ -300,7 +293,7 @@ class _DynamicTableState extends State<DynamicTable> {
             width: 1.0,
           ),
         ),
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
       ),
       alignment: Alignment.centerLeft,
       child: Center(
@@ -341,9 +334,7 @@ class _DynamicTableState extends State<DynamicTable> {
   }
 
   Widget _buildTableCell(String content,
-      {required double width,
-      required int rowIndex,
-      required int columnIndex}) {
+      {required double width, required int rowIndex, required int columnIndex}) {
     bool isBatteryLevel = content.endsWith('%');
     double? batteryLevel;
 
@@ -415,7 +406,7 @@ class _DynamicTableState extends State<DynamicTable> {
       height: _fixedRowHeight,
       padding: const EdgeInsets.only(left: 15, top: 10, bottom: 10),
       decoration: const BoxDecoration(
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         border: Border(
           bottom: BorderSide(
             color: ColorsManager.boxDivider,

lib/pages/device_managment/ac/view/batch_control_list/batch_ac_mode.dart

@@ -27,8 +27,8 @@ class BatchAcMode extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          _buildIconContainer(context, TempModes.cold, Assets.freezing,
-              value == TempModes.cold),
+          _buildIconContainer(
+              context, TempModes.cold, Assets.freezing, value == TempModes.cold),
           _buildIconContainer(
               context, TempModes.hot, Assets.acSun, value == TempModes.hot),
           _buildIconContainer(context, TempModes.wind, Assets.acAirConditioner,
@@ -56,7 +56,7 @@ class BatchAcMode extends StatelessWidget {
           height: 50,
           decoration: BoxDecoration(
             shape: BoxShape.circle,
-            color: ColorsManager.whiteColors,
+            color: ColorsManager.white,
             border: Border.all(
               color: isSelected ? Colors.blue : Colors.transparent,
               width: 2.0,

lib/pages/device_managment/ac/view/batch_control_list/batch_fan_speed.dart

@@ -32,8 +32,8 @@ class BatchFanSpeedControl extends StatelessWidget {
             children: [
               _buildIconContainer(context, FanSpeeds.auto, Assets.acFanAuto,
                   value == FanSpeeds.auto),
-              _buildIconContainer(context, FanSpeeds.low, Assets.acFanLow,
-                  value == FanSpeeds.low),
+              _buildIconContainer(
+                  context, FanSpeeds.low, Assets.acFanLow, value == FanSpeeds.low),
             ],
           ),
           const SizedBox(height: 8),
@@ -52,8 +52,8 @@ class BatchFanSpeedControl extends StatelessWidget {
     );
   }
 
-  Widget _buildIconContainer(BuildContext context, FanSpeeds speed,
-      String assetPath, bool isSelected) {
+  Widget _buildIconContainer(
+      BuildContext context, FanSpeeds speed, String assetPath, bool isSelected) {
     return GestureDetector(
       onTap: () {
         context.read<AcBloc>().add(
@@ -69,7 +69,7 @@ class BatchFanSpeedControl extends StatelessWidget {
         height: 50,
         decoration: BoxDecoration(
           shape: BoxShape.circle,
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           border: Border.all(
             color: isSelected ? Colors.blue : Colors.transparent,
             width: 2.0,

lib/pages/device_managment/ac/view/control_list/ac_mode.dart

@@ -27,8 +27,8 @@ class AcMode extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          _buildIconContainer(context, TempModes.cold, Assets.freezing,
-              value == TempModes.cold),
+          _buildIconContainer(
+              context, TempModes.cold, Assets.freezing, value == TempModes.cold),
           _buildIconContainer(
               context, TempModes.hot, Assets.acSun, value == TempModes.hot),
           _buildIconContainer(context, TempModes.wind, Assets.acAirConditioner,
@@ -56,7 +56,7 @@ class AcMode extends StatelessWidget {
           height: 50,
           decoration: BoxDecoration(
             shape: BoxShape.circle,
-            color: ColorsManager.whiteColors,
+            color: ColorsManager.white,
             border: Border.all(
               color: isSelected ? Colors.blue : Colors.transparent,
               width: 2.0,

lib/pages/device_managment/ac/view/control_list/ac_toggle.dart

@@ -38,7 +38,7 @@ class AcToggle extends StatelessWidget {
                 height: 60,
                 decoration: const BoxDecoration(
                   shape: BoxShape.circle,
-                  color: ColorsManager.whiteColors,
+                  color: ColorsManager.white,
                 ),
                 padding: const EdgeInsets.all(8),
                 child: ClipOval(

lib/pages/device_managment/ac/view/control_list/fan_speed.dart

@@ -31,8 +31,8 @@ class FanSpeedControl extends StatelessWidget {
             children: [
               _buildIconContainer(context, FanSpeeds.auto, Assets.acFanAuto,
                   value == FanSpeeds.auto),
-              _buildIconContainer(context, FanSpeeds.low, Assets.acFanLow,
-                  value == FanSpeeds.low),
+              _buildIconContainer(
+                  context, FanSpeeds.low, Assets.acFanLow, value == FanSpeeds.low),
             ],
           ),
           const SizedBox(height: 8),
@@ -51,8 +51,8 @@ class FanSpeedControl extends StatelessWidget {
     );
   }
 
-  Widget _buildIconContainer(BuildContext context, FanSpeeds speed,
-      String assetPath, bool isSelected) {
+  Widget _buildIconContainer(
+      BuildContext context, FanSpeeds speed, String assetPath, bool isSelected) {
     return GestureDetector(
       onTap: () {
         context.read<AcBloc>().add(
@@ -68,7 +68,7 @@ class FanSpeedControl extends StatelessWidget {
         height: 50,
         decoration: BoxDecoration(
           shape: BoxShape.circle,
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           border: Border.all(
             color: isSelected ? Colors.blue : Colors.transparent,
             width: 2.0,

lib/pages/device_managment/all_devices/view/device_managment_page.dart

@@ -35,8 +35,7 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
     return MultiBlocProvider(
       providers: [
         BlocProvider(
-          create: (context) =>
-              DeviceManagementBloc()..add(FetchDevices(context)),
+          create: (context) => DeviceManagementBloc()..add(FetchDevices(context)),
         ),
       ],
       child: WebScaffold(
@@ -59,8 +58,9 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
                         BlocProvider.of<CreateRoutineBloc>(context)
                             .add(const ResetSelectedEvent());
 
-                        context.read<RoutineBloc>().add(
-                            const TriggerSwitchTabsEvent(isRoutineTab: false));
+                        context
+                            .read<RoutineBloc>()
+                            .add(const TriggerSwitchTabsEvent(isRoutineTab: false));
                         context
                             .read<DeviceManagementBloc>()
                             .add(FetchDevices(context));
@@ -69,7 +69,7 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
                   'Devices',
                   style: context.textTheme.titleMedium?.copyWith(
                     color: !state.routineTab
-                        ? ColorsManager.whiteColors
+                        ? ColorsManager.white
                         : ColorsManager.grayColor,
                     fontWeight:
                         !state.routineTab ? FontWeight.w700 : FontWeight.w400,
@@ -86,17 +86,17 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
                         BlocProvider.of<CreateRoutineBloc>(context)
                             .add(const ResetSelectedEvent());
 
-                        context.read<RoutineBloc>().add(
-                            const TriggerSwitchTabsEvent(isRoutineTab: true));
+                        context
+                            .read<RoutineBloc>()
+                            .add(const TriggerSwitchTabsEvent(isRoutineTab: true));
                       },
                 child: Text(
                   'Workflow Automation',
                   style: context.textTheme.titleMedium?.copyWith(
                     color: state.routineTab
-                        ? ColorsManager.whiteColors
+                        ? ColorsManager.white
                         : ColorsManager.grayColor,
-                    fontWeight:
-                        state.routineTab ? FontWeight.w700 : FontWeight.w400,
+                    fontWeight: state.routineTab ? FontWeight.w700 : FontWeight.w400,
                   ),
                 ),
               ),
@@ -120,8 +120,7 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
               } else if (deviceState is DeviceManagementLoaded) {
                 return DeviceManagementBody(devices: deviceState.devices);
               } else if (deviceState is DeviceManagementFiltered) {
-                return DeviceManagementBody(
-                    devices: deviceState.filteredDevices);
+                return DeviceManagementBody(devices: deviceState.filteredDevices);
               } else {
                 return const DeviceManagementBody(devices: []);
               }

lib/pages/device_managment/all_devices/widgets/device_managment_body.dart

@@ -120,8 +120,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                                   content: Text(
                                                     'This Device is Offline',
                                                   ),
-                                                  duration:
-                                                      Duration(seconds: 2),
+                                                  duration: Duration(seconds: 2),
                                                 ),
                                               );
                                               return;
@@ -135,13 +134,11 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                                   device: selectedDevices.first,
                                                 ),
                                               );
-                                            } else if (selectedDevices.length >
-                                                1) {
-                                              final productTypes =
-                                                  selectedDevices
-                                                      .map((device) =>
-                                                          device.productType)
-                                                      .toSet();
+                                            } else if (selectedDevices.length > 1) {
+                                              final productTypes = selectedDevices
+                                                  .map(
+                                                      (device) => device.productType)
+                                                  .toSet();
                                               if (productTypes.length == 1) {
                                                 showDialog(
                                                   context: context,
@@ -224,13 +221,11 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                   device.batteryLevel != null
                                       ? '${device.batteryLevel}%'
                                       : '-',
-                                  formatDateTime(
-                                      DateTime.fromMillisecondsSinceEpoch(
-                                          (device.createTime ?? 0) * 1000)),
+                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
+                                      (device.createTime ?? 0) * 1000)),
                                   device.online == true ? 'Online' : 'Offline',
-                                  formatDateTime(
-                                      DateTime.fromMillisecondsSinceEpoch(
-                                          (device.updateTime ?? 0) * 1000)),
+                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
+                                      (device.updateTime ?? 0) * 1000)),
                                   'Settings',
                                 ];
                               }).toList(),
@@ -273,7 +268,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           child: Material(
             child: Container(
               width: MediaQuery.of(context).size.width * 0.3,
-              color: ColorsManager.whiteColors,
+              color: ColorsManager.white,
               child: DeviceSettingsPanel(
                 device: device,
                 onClose: () => Navigator.of(context).pop(),

lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart

@@ -18,7 +18,7 @@ class AccurteCalibratingDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Calibrating',

lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart

@@ -16,7 +16,7 @@ class AccurateCalibrationDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Accurate Calibration',

lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart

@@ -17,7 +17,7 @@ class CalibrateCompletedDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       contentPadding: EdgeInsets.zero,
       content: SizedBox(
         height: 250,

lib/pages/device_managment/curtain_module/widgets/curtain_action_widget.dart

@@ -20,7 +20,7 @@ class CurtainActionWidget extends StatelessWidget {
         height: 60,
         width: 60,
         padding: const EdgeInsets.all(8),
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         child: ClipOval(
           child: Container(
             height: 60,

lib/pages/device_managment/curtain_module/widgets/curtain_movment_widget.dart

@@ -164,7 +164,7 @@ class _CurtainSliderWidgetState extends State<CurtainSliderWidget> {
           divisions: 10, // 10% step
           activeColor: ColorsManager.minBlueDot,
           thumbColor: ColorsManager.primaryColor,
-          inactiveColor: ColorsManager.whiteColors,
+          inactiveColor: ColorsManager.white,
 
           // Start dragging — use local control
           onChangeStart: (_) {

lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart

@@ -47,10 +47,9 @@ class PrefReversCardWidget extends StatelessWidget {
                   child: Container(
                     padding: const EdgeInsets.all(3),
                     decoration: BoxDecoration(
-                        color: ColorsManager.whiteColors,
+                        color: ColorsManager.white,
                         borderRadius: const BorderRadius.horizontal(
-                            left: Radius.circular(10),
-                            right: Radius.circular(10)),
+                            left: Radius.circular(10), right: Radius.circular(10)),
                         border: Border.all(color: ColorsManager.grayBorder)),
                     child: SvgPicture.asset(
                       Assets.reverseArrows,

lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart

@@ -22,7 +22,7 @@ class CurtainModulePrefrencesDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
-      backgroundColor: ColorsManager.CircleImageBackground,
+      backgroundColor: ColorsManager.circleImageBackground,
       contentPadding: const EdgeInsets.all(20),
       title: Center(
           child: Text(

lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart

@@ -63,7 +63,7 @@ class _QuickCalibratingDialogState extends State<QuickCalibratingDialog> {
   @override
   Widget build(_) {
     return AlertDialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Calibrating',

lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart

@@ -18,7 +18,7 @@ class QuickCalibrationDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Quick Calibration',

lib/pages/device_managment/device_setting/device_settings_panel.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
@@ -47,8 +46,8 @@ class DeviceSettingsPanel extends StatelessWidget {
           return BlocBuilder<SettingDeviceBloc, DeviceSettingsState>(
             builder: (context, state) {
               final _bloc = context.read<SettingDeviceBloc>();
-              final iconPath = DeviceIconTypeHelper.getDeviceIconByTypeCode(
-                  device.productType);
+              final iconPath =
+                  DeviceIconTypeHelper.getDeviceIconByTypeCode(device.productType);
               final deviceInfo = state is DeviceSettingsUpdate
                   ? state.deviceInfo ?? DeviceInfoModel.empty()
                   : DeviceInfoModel.empty();
@@ -77,11 +76,9 @@ class DeviceSettingsPanel extends StatelessWidget {
                           children: [
                             Text(
                               'Device Settings',
-                              style: context.theme.textTheme.titleLarge!
-                                  .copyWith(
+                              style: context.theme.textTheme.titleLarge!.copyWith(
                                   fontWeight: FontWeight.w700,
-                                      color: ColorsManager.vividBlue
-                                          .withOpacity(0.7),
+                                  color: ColorsManager.vividBlue.withOpacity(0.7),
                                   fontSize: 24),
                             ),
                           ],
@@ -98,7 +95,7 @@ class DeviceSettingsPanel extends StatelessWidget {
                                   backgroundColor:
                                       ColorsManager.grayBorder.withOpacity(0.5),
                                   child: CircleAvatar(
-                                    backgroundColor: ColorsManager.whiteColors,
+                                    backgroundColor: ColorsManager.white,
                                     radius: 36,
                                     child: SvgPicture.asset(
                                       iconPath,
@@ -116,8 +113,7 @@ class DeviceSettingsPanel extends StatelessWidget {
                                     const SizedBox(height: 15),
                                     Text(
                                       'Device Name:',
-                                      style: context.textTheme.bodyMedium!
-                                          .copyWith(
+                                      style: context.textTheme.bodyMedium!.copyWith(
                                         color: ColorsManager.grayColor,
                                       ),
                                     ),
@@ -143,13 +139,13 @@ class DeviceSettingsPanel extends StatelessWidget {
                                                 _bloc.add(const ChangeNameEvent(
                                                     value: false));
                                                 deviceManagementBloc
-                                                    ..add(UpdateDeviceName(
-                                                        deviceId: device.uuid!,
-                                                        newName: _bloc
-                                                            .nameController
-                                                            .text))..add(ResetSelectedDevices());
+                                                  ..add(UpdateDeviceName(
+                                                      deviceId: device.uuid!,
+                                                      newName:
+                                                          _bloc.nameController.text))
+                                                  ..add(ResetSelectedDevices());
                                               },
-                                              decoration:const InputDecoration(
+                                              decoration: const InputDecoration(
                                                 isDense: true,
                                                 contentPadding: EdgeInsets.zero,
                                                 border: InputBorder.none,
@@ -164,18 +160,16 @@ class DeviceSettingsPanel extends StatelessWidget {
                                                 width: 15,
                                                 height: 25,
                                                 child: Visibility(
-                                                  visible:
-                                                      _bloc.editName != true,
+                                                  visible: _bloc.editName != true,
                                                   replacement: const SizedBox(),
                                                   child: InkWell(
                                                     onTap: () {
                                                       _bloc.add(
                                                           const ChangeNameEvent(
-                                                          value: true));
+                                                              value: true));
                                                     },
                                                     child: SvgPicture.asset(
-                                                      Assets
-                                                          .editNameIconSettings,
+                                                      Assets.editNameIconSettings,
                                                       color: ColorsManager
                                                           .lightGrayBorderColor,
                                                       height: 15,

lib/pages/device_managment/device_setting/sub_space_dialog.dart

@@ -32,7 +32,7 @@ class _SubSpaceDialogState extends State<SubSpaceDialog> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: ColorsManager.whiteColors,
+      backgroundColor: ColorsManager.white,
       insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 60),
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(28),

lib/pages/device_managment/gateway/view/gateway_view.dart

@@ -100,7 +100,6 @@ class _DeviceItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    
     return DeviceControlsContainer(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -110,7 +109,7 @@ class _DeviceItem extends StatelessWidget {
             height: 60,
             width: 60,
             padding: const EdgeInsets.all(8),
-            color: ColorsManager.whiteColors,
+            color: ColorsManager.white,
             child: SvgPicture.asset(
               device.icon ?? 'assets/icons/gateway.svg',
               width: 35,

lib/pages/device_managment/power_clamp/view/power_chart.dart

@@ -36,7 +36,7 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: ColorsManager.whiteColors,
+      color: ColorsManager.white,
       child: Column(
         children: [
           const Row(

lib/pages/device_managment/power_clamp/view/power_info_card.dart

@@ -22,7 +22,7 @@ class PowerClampInfoCard extends StatelessWidget {
       child: Container(
         margin: const EdgeInsets.symmetric(horizontal: 6),
         decoration: BoxDecoration(
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           borderRadius: BorderRadius.circular(20),
         ),
         height: 55,

lib/pages/device_managment/power_clamp/view/smart_power_device_control.dart

@@ -12,8 +12,7 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
 //Smart Power Clamp
-class SmartPowerDeviceControl extends StatelessWidget
-    with HelperResponsiveLayout {
+class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayout {
   final String deviceId;
 
   const SmartPowerDeviceControl({super.key, required this.deviceId});
@@ -129,7 +128,7 @@ class SmartPowerDeviceControl extends StatelessWidget
                 bottom: 10,
               ),
               decoration: BoxDecoration(
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
                 borderRadius: BorderRadius.circular(20),
               ),
               height: 300,
@@ -149,8 +148,7 @@ class SmartPowerDeviceControl extends StatelessWidget
                           onPressed: blocProvider.currentPage <= 0
                               ? null
                               : () {
-                                  blocProvider
-                                      .add(SmartPowerArrowPressedEvent(-1));
+                                  blocProvider.add(SmartPowerArrowPressedEvent(-1));
                                   pageController.previousPage(
                                     duration: const Duration(milliseconds: 300),
                                     curve: Curves.easeInOut,
@@ -172,8 +170,7 @@ class SmartPowerDeviceControl extends StatelessWidget
                           onPressed: blocProvider.currentPage >= 3
                               ? null
                               : () {
-                                  blocProvider
-                                      .add(SmartPowerArrowPressedEvent(1));
+                                  blocProvider.add(SmartPowerArrowPressedEvent(1));
                                   pageController.nextPage(
                                     duration: const Duration(milliseconds: 300),
                                     curve: Curves.easeInOut,
@@ -202,8 +199,8 @@ class SmartPowerDeviceControl extends StatelessWidget
                             blocProvider.add(SelectDateEvent(context: context));
                             blocProvider.add(FilterRecordsByDateEvent(
                                 selectedDate: blocProvider.dateTime!,
-                                viewType: blocProvider
-                                    .views[blocProvider.currentIndex]));
+                                viewType:
+                                    blocProvider.views[blocProvider.currentIndex]));
                           },
                           widget: blocProvider.dateSwitcher(),
                           chartData: blocProvider.energyDataList.isNotEmpty

lib/pages/device_managment/schedule_device/schedule_widgets/schedule_control_button.dart

@@ -30,7 +30,7 @@ class ScheduleControlButton extends StatelessWidget {
               height: 60,
               decoration: const BoxDecoration(
                 shape: BoxShape.circle,
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
               ),
               margin: const EdgeInsets.symmetric(horizontal: 4),
               padding: const EdgeInsets.all(12),

lib/pages/device_managment/schedule_device/schedule_widgets/schedule_header.dart

@@ -13,7 +13,7 @@ class ScheduleHeader extends StatelessWidget {
         Text(
           'Scheduling',
           style: TextStyle(
-            color: ColorsManager.primaryColorWithOpacity,
+            color: ColorsManager.opaquePrimary,
             fontWeight: FontWeight.w700,
             fontSize: 30,
           ),

lib/pages/device_managment/shared/batch_control/factory_reset.dart

@@ -76,7 +76,7 @@ class _FactoryResetWidgetState extends State<FactoryResetWidget> {
                         child: Text(
                           'Reset',
                           style: context.textTheme.bodyMedium!.copyWith(
-                            color: ColorsManager.whiteColors,
+                            color: ColorsManager.white,
                             fontWeight: FontWeight.w400,
                             fontSize: 12,
                           ),
@@ -95,7 +95,7 @@ class _FactoryResetWidgetState extends State<FactoryResetWidget> {
                 children: [
                   ClipOval(
                     child: Container(
-                      color: ColorsManager.whiteColors,
+                      color: ColorsManager.white,
                       height: 60,
                       width: 60,
                       child: Padding(

lib/pages/device_managment/shared/icon_name_status_container.dart

@@ -45,7 +45,7 @@ class IconNameStatusContainer extends StatelessWidget {
                 height: 60,
                 width: 60,
                 padding: EdgeInsets.all(paddingAmount ?? 8),
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
                 child: SvgPicture.asset(
                   icon,
                   width: 35,

lib/pages/device_managment/shared/sensors_widgets/presence_space_type.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:syncrow_web/utils/constants/assets.dart';
-import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/pages/device_managment/ceiling_sensor/model/ceiling_sensor_model.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/pages/device_managment/ceiling_sensor/model/ceiling_sensor_model.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class PresenceSpaceType extends StatelessWidget {
   const PresenceSpaceType({
@@ -59,7 +59,7 @@ class PresenceSpaceType extends StatelessWidget {
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(100),
                     color: value == spaceType
-                        ? ColorsManager.primaryColorWithOpacity
+                        ? ColorsManager.opaquePrimary
                         : ColorsManager.textGray,
                   ),
                   child: SvgPicture.asset(

lib/pages/device_managment/shared/toggle_widget.dart

@@ -52,7 +52,7 @@ class ToggleWidget extends StatelessWidget {
                         height: 60,
                         width: 60,
                         padding: const EdgeInsets.all(8),
-                        color: ColorsManager.whiteColors,
+                        color: ColorsManager.white,
                         child: SvgPicture.asset(
                           icon ?? Assets.lightPulp,
                           width: 35,

lib/pages/device_managment/three_gang_switch/widgets/cieling_light.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/bloc/living_room_bloc.dart';
@@ -7,7 +6,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class CeilingLight extends StatelessWidget {
-  const CeilingLight({super.key, required this.value, required this.code, required this.deviceId});
+  const CeilingLight(
+      {super.key, required this.value, required this.code, required this.deviceId});
 
   final bool value;
   final String code;
@@ -24,7 +24,7 @@ class CeilingLight extends StatelessWidget {
           children: [
             ClipOval(
                 child: Container(
-              color: ColorsManager.whiteColors,
+              color: ColorsManager.white,
               child: SvgPicture.asset(
                 Assets.lightPulp,
                 width: 60,

lib/pages/device_managment/three_gang_switch/widgets/spot_light.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/bloc/living_room_bloc.dart';
@@ -7,7 +6,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class SpotLight extends StatelessWidget {
-  const SpotLight({super.key, required this.value, required this.code, required this.deviceId});
+  const SpotLight(
+      {super.key, required this.value, required this.code, required this.deviceId});
 
   final bool value;
   final String code;
@@ -24,7 +24,7 @@ class SpotLight extends StatelessWidget {
           children: [
             ClipOval(
                 child: Container(
-              color: ColorsManager.whiteColors,
+              color: ColorsManager.white,
               child: SvgPicture.asset(
                 Assets.lightPulp,
                 width: 60,

lib/pages/device_managment/three_gang_switch/widgets/wall_light.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/bloc/living_room_bloc.dart';
@@ -7,7 +6,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class WallLight extends StatelessWidget {
-  const WallLight({super.key, required this.value, required this.code, required this.deviceId});
+  const WallLight(
+      {super.key, required this.value, required this.code, required this.deviceId});
 
   final bool value;
   final String code;
@@ -24,7 +24,7 @@ class WallLight extends StatelessWidget {
           children: [
             ClipOval(
                 child: Container(
-              color: ColorsManager.whiteColors,
+              color: ColorsManager.white,
               child: SvgPicture.asset(
                 Assets.lightPulp,
                 width: 60,

lib/pages/device_managment/water_heater/helper/add_schedule_dialog_helper.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
 import 'package:syncrow_web/pages/device_managment/schedule_device/schedule_widgets/schedule_mode_buttons.dart';
 import 'package:syncrow_web/pages/device_managment/water_heater/models/schedule_entry.dart';
-import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class ScheduleDialogHelper {
@@ -58,7 +58,7 @@ class ScheduleDialogHelper {
                       Text(
                         isEdit ? 'Edit Schedule' : 'Add Schedule',
                         style: Theme.of(context).textTheme.titleLarge!.copyWith(
-                              color: ColorsManager.primaryColorWithOpacity,
+                              color: ColorsManager.opaquePrimary,
                               fontWeight: FontWeight.w700,
                               fontSize: 30,
                             ),
@@ -171,8 +171,8 @@ class ScheduleDialogHelper {
     return result;
   }
 
-  static Widget _buildDayCheckboxes(BuildContext ctx, List<bool> selectedDays,
-      Function(int, bool) onChanged) {
+  static Widget _buildDayCheckboxes(
+      BuildContext ctx, List<bool> selectedDays, Function(int, bool) onChanged) {
     final dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     return Row(
       mainAxisAlignment: MainAxisAlignment.start,
@@ -197,8 +197,7 @@ class ScheduleDialogHelper {
       children: [
         Text(
           'Function:',
-          style:
-              Theme.of(ctx).textTheme.bodySmall!.copyWith(color: Colors.grey),
+          style: Theme.of(ctx).textTheme.bodySmall!.copyWith(color: Colors.grey),
         ),
         const SizedBox(width: 10),
         Radio<bool>(
@@ -213,7 +212,6 @@ class ScheduleDialogHelper {
         Radio<bool>(
           activeColor: ColorsManager.secondaryColor,
           focusColor: ColorsManager.secondaryColor,
-
           value: false,
           groupValue: isOn,
           onChanged: (val) => onChanged(false),

lib/pages/roles_and_permission/users_page/add_user_dialog/view/popup_menu_filter.dart

@@ -17,7 +17,7 @@ Future<void> showPopUpFilterMenu({
   await showMenu(
     context: context,
     position: position,
-    color: ColorsManager.whiteColors,
+    color: ColorsManager.white,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(10)),
     ),

lib/pages/roles_and_permission/users_page/add_user_dialog/view/role_dropdown.dart

@@ -51,7 +51,7 @@ class _RoleDropdownState extends State<RoleDropdown> {
           const SizedBox(height: 8),
           SizedBox(
             child: DropdownButtonFormField<String>(
-              dropdownColor: ColorsManager.whiteColors,
+              dropdownColor: ColorsManager.white,
               // alignment: Alignment.,
               focusColor: Colors.white,
               autofocus: true,

lib/pages/roles_and_permission/users_page/add_user_dialog/view/roles_and_permission.dart

@@ -28,9 +28,7 @@ class RolesAndPermission extends StatelessWidget {
               Text(
                 'Role & Permissions',
                 style: context.textTheme.bodyLarge?.copyWith(
-                    fontWeight: FontWeight.w700,
-                    fontSize: 20,
-                    color: Colors.black),
+                    fontWeight: FontWeight.w700, fontSize: 20, color: Colors.black),
               ),
               const SizedBox(
                 height: 15,
@@ -67,21 +65,18 @@ class RolesAndPermission extends StatelessWidget {
                                         border: Border.all(
                                             color: ColorsManager.grayBorder)),
                                     child: TextFormField(
-                                      style:
-                                          const TextStyle(color: Colors.black),
-                                      controller:
-                                          _blocRole.roleSearchController,
+                                      style: const TextStyle(color: Colors.black),
+                                      controller: _blocRole.roleSearchController,
                                       onChanged: (value) {
                                         _blocRole.add(SearchPermission(
                                             nodes: _blocRole.permissions,
                                             searchTerm: value));
                                       },
-                                      decoration: textBoxDecoration(radios: 20)!
-                                          .copyWith(
+                                      decoration:
+                                          textBoxDecoration(radios: 20)!.copyWith(
                                         fillColor: Colors.white,
                                         suffixIcon: Padding(
-                                          padding:
-                                              const EdgeInsets.only(right: 16),
+                                          padding: const EdgeInsets.only(right: 16),
                                           child: SvgPicture.asset(
                                             Assets.textFieldSearch,
                                             width: 24,
@@ -108,7 +103,7 @@ class RolesAndPermission extends StatelessWidget {
                               color: ColorsManager.circleRolesBackground,
                               padding: const EdgeInsets.all(8.0),
                               child: Container(
-                                  color: ColorsManager.whiteColors,
+                                  color: ColorsManager.white,
                                   child: PermissionManagement(
                                     bloc: _blocRole,
                                   ))))

lib/pages/roles_and_permission/users_page/users_table/view/creation_date_filter.dart

@@ -23,7 +23,7 @@ Future<void> showDateFilterMenu({
   await showMenu(
     context: context,
     position: position,
-    color: ColorsManager.whiteColors,
+    color: ColorsManager.white,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.only(
         bottomRight: Radius.circular(10),
@@ -41,9 +41,8 @@ Future<void> showDateFilterMenu({
           title: Text(
             "Sort from newest to oldest",
             style: TextStyle(
-                color: isSelected == "NewestToOldest"
-                    ? Colors.black
-                    : Colors.blueGrey),
+                color:
+                    isSelected == "NewestToOldest" ? Colors.black : Colors.blueGrey),
           ),
         ),
       ),
@@ -57,9 +56,8 @@ Future<void> showDateFilterMenu({
           title: Text(
             "Sort from oldest to newest",
             style: TextStyle(
-                color: isSelected == "OldestToNewest"
-                    ? Colors.black
-                    : Colors.blueGrey),
+                color:
+                    isSelected == "OldestToNewest" ? Colors.black : Colors.blueGrey),
           ),
         ),
       ),

lib/pages/roles_and_permission/users_page/users_table/view/de_activate_filter.dart

@@ -23,7 +23,7 @@ Future<void> showDeActivateFilterMenu({
   await showMenu(
     context: context,
     position: position,
-    color: ColorsManager.whiteColors,
+    color: ColorsManager.white,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.only(
         bottomRight: Radius.circular(10),
@@ -41,9 +41,8 @@ Future<void> showDeActivateFilterMenu({
           title: Text(
             "Sort A to Z",
             style: TextStyle(
-                color: isSelected == "NewestToOldest"
-                    ? Colors.black
-                    : Colors.blueGrey),
+                color:
+                    isSelected == "NewestToOldest" ? Colors.black : Colors.blueGrey),
           ),
         ),
       ),
@@ -57,9 +56,8 @@ Future<void> showDeActivateFilterMenu({
           title: Text(
             "Sort Z to A",
             style: TextStyle(
-                color: isSelected == "OldestToNewest"
-                    ? Colors.black
-                    : Colors.blueGrey),
+                color:
+                    isSelected == "OldestToNewest" ? Colors.black : Colors.blueGrey),
           ),
         ),
       ),

lib/pages/roles_and_permission/users_page/users_table/view/name_filter.dart

@@ -23,7 +23,7 @@ Future<void> showNameMenu({
   await showMenu(
     context: context,
     position: position,
-    color: ColorsManager.whiteColors,
+    color: ColorsManager.white,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.only(
         bottomRight: Radius.circular(10),

lib/pages/roles_and_permission/users_page/users_table/view/user_table.dart

@@ -83,8 +83,7 @@ class _TableRow extends StatelessWidget {
             for (int i = 0; i < cells.length; i++)
               Container(
                 width: columnWidths[i],
-                padding:
-                    const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                 // decoration: BoxDecoration(
                 //   border: Border(
                 //     right: BorderSide(color: ColorsManager.boxDivider),
@@ -201,7 +200,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
 
     return Container(
       decoration: containerDecoration.copyWith(
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         borderRadius: const BorderRadius.only(
           bottomLeft: Radius.circular(15),
           bottomRight: Radius.circular(15),
@@ -231,8 +230,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
         if (_lastAvailableWidth != availableWidth) {
           final equalWidth =
               (availableWidth - totalDividersWidth) / widget.titles.length;
-          final clampedWidth =
-              equalWidth.clamp(_minColumnWidth, _maxColumnWidth);
+          final clampedWidth = equalWidth.clamp(_minColumnWidth, _maxColumnWidth);
 
           WidgetsBinding.instance.addPostFrameCallback((_) {
             setState(() {
@@ -249,7 +247,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
           child: Container(
             width: totalTableWidth,
             decoration: containerDecoration.copyWith(
-              color: ColorsManager.whiteColors,
+              color: ColorsManager.white,
               borderRadius: const BorderRadius.all(Radius.circular(20)),
             ),
             child: Column(

lib/pages/roles_and_permission/users_page/users_table/view/users_page.dart

@@ -61,8 +61,7 @@ class UsersPage extends StatelessWidget {
                     : ColorsManager.disabledPink.withOpacity(0.5),
           ),
           child: Padding(
-            padding:
-                const EdgeInsets.only(left: 10, right: 10, bottom: 5, top: 5),
+            padding: const EdgeInsets.only(left: 10, right: 10, bottom: 5, top: 5),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -93,8 +92,7 @@ class UsersPage extends StatelessWidget {
         child: InkWell(
           onTap: onTap,
           child: Padding(
-            padding:
-                const EdgeInsets.only(left: 5, right: 5, bottom: 5, top: 5),
+            padding: const EdgeInsets.only(left: 5, right: 5, bottom: 5, top: 5),
             child: SvgPicture.asset(
               status == "invited"
                   ? Assets.invitedIcon
@@ -142,7 +140,7 @@ class UsersPage extends StatelessWidget {
                           },
                           style: const TextStyle(color: Colors.black),
                           decoration: textBoxDecoration(radios: 15)!.copyWith(
-                            fillColor: ColorsManager.whiteColors,
+                            fillColor: ColorsManager.white,
                             errorStyle: const TextStyle(height: 0),
                             hintStyle: context.textTheme.titleSmall?.copyWith(
                               color: Colors.grey,
@@ -430,14 +428,12 @@ class UsersPage extends StatelessWidget {
                           Text(user.createdTime ?? ''),
                           Text(user.invitedBy),
                           status(
-                            status: user.isEnabled == false
-                                ? 'disabled'
-                                : user.status,
+                            status:
+                                user.isEnabled == false ? 'disabled' : user.status,
                           ),
                           changeIconStatus(
-                            status: user.isEnabled == false
-                                ? 'disabled'
-                                : user.status,
+                            status:
+                                user.isEnabled == false ? 'disabled' : user.status,
                             userId: user.uuid,
                             onTap: user.status != "invited"
                                 ? () {
@@ -484,11 +480,10 @@ class UsersPage extends StatelessWidget {
                                     context: context,
                                     barrierDismissible: false,
                                     builder: (BuildContext context) {
-                                      return DeleteUserDialog(
-                                          onTapDelete: () async {
+                                      return DeleteUserDialog(onTapDelete: () async {
                                         try {
-                                          _blocRole.add(DeleteUserEvent(
-                                              user.uuid, context));
+                                          _blocRole.add(
+                                              DeleteUserEvent(user.uuid, context));
                                           await Future.delayed(
                                               const Duration(seconds: 2));
                                           return true;
@@ -521,8 +516,7 @@ class UsersPage extends StatelessWidget {
                             visiblePagesCount: 4,
                             buttonRadius: 10,
                             selectedButtonColor: ColorsManager.secondaryColor,
-                            buttonUnSelectedBorderColor:
-                                ColorsManager.grayBorder,
+                            buttonUnSelectedBorderColor: ColorsManager.grayBorder,
                             lastPageIcon:
                                 const Icon(Icons.keyboard_double_arrow_right),
                             firstPageIcon:

lib/pages/roles_and_permission/view/role_card.dart

@@ -9,7 +9,7 @@ class RoleCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: ColorsManager.whiteColors, // Card background color
+        color: ColorsManager.white, // Card background color
         borderRadius: BorderRadius.circular(20), // Rounded corners
         boxShadow: [
           BoxShadow(
@@ -22,8 +22,8 @@ class RoleCard extends StatelessWidget {
       ),
       child: Container(
         decoration: BoxDecoration(
-          color: ColorsManager.whiteColors,
-          borderRadius: BorderRadius.circular(20), 
+          color: ColorsManager.white,
+          borderRadius: BorderRadius.circular(20),
         ),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,

lib/pages/roles_and_permission/view/roles_and_permission_page.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
 import 'package:syncrow_web/pages/roles_and_permission/bloc/roles_permission_bloc.dart';
 import 'package:syncrow_web/pages/roles_and_permission/bloc/roles_permission_state.dart';
@@ -30,8 +29,7 @@ class RolesAndPermissionPage extends StatelessWidget {
                   enableMenuSidebar: false,
                   appBarTitle: Text(
                     'Roles & Permissions',
-                    style:
-                        ResponsiveTextTheme.of(context).deviceManagementTitle,
+                    style: ResponsiveTextTheme.of(context).deviceManagementTitle,
                   ),
                   rightBody: const NavigateHomeGridView(),
                   centerBody: Row(
@@ -66,7 +64,7 @@ class RolesAndPermissionPage extends StatelessWidget {
                           'Users',
                           style: context.textTheme.titleMedium?.copyWith(
                             color: (_blocRole.tapSelect == true)
-                                ? ColorsManager.whiteColors
+                                ? ColorsManager.white
                                 : ColorsManager.grayColor,
                             fontWeight: (_blocRole.tapSelect == true)
                                 ? FontWeight.w700

lib/pages/roles_and_permission/view/roles_page.dart

@@ -32,7 +32,7 @@ class RolesPage extends StatelessWidget {
             controller: searchController,
             style: const TextStyle(color: Colors.black),
             decoration: textBoxDecoration(radios: 15)!.copyWith(
-                fillColor: ColorsManager.whiteColors,
+                fillColor: ColorsManager.white,
                 errorStyle: const TextStyle(height: 0),
                 hintStyle: context.textTheme.titleSmall?.copyWith(
                   color: Colors.grey,

lib/pages/routines/create_new_routines/commu_dropdown.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/routines/create_new_routines/dropdown_menu_content.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+
 import 'space_tree_dropdown_bloc.dart';
 
 class SpaceTreeDropdown extends StatelessWidget {
@@ -176,7 +177,7 @@ class _DropdownContentState extends State<_DropdownContent> {
           showWhenUnlinked: false,
           offset: const Offset(0, 48),
           child: Material(
-            color: ColorsManager.whiteColors,
+            color: ColorsManager.white,
             elevation: 8,
             borderRadius: BorderRadius.circular(12),
             child: BlocProvider.value(
@@ -201,8 +202,7 @@ class _DropdownContentState extends State<_DropdownContent> {
     Overlay.of(context).insert(_overlayEntry!);
   }
 
-  CommunityModel? _findCommunity(
-      SpaceTreeDropdownState state, String? communityId) {
+  CommunityModel? _findCommunity(SpaceTreeDropdownState state, String? communityId) {
     if (communityId == null) return null;
     try {
       return state.filteredCommunities.firstWhere((c) => c.uuid == communityId);

lib/pages/routines/create_new_routines/space_dropdown.dart

@@ -35,8 +35,7 @@ class SpaceDropdown extends StatelessWidget {
           DropdownButton2<String>(
             underline: const SizedBox(),
             buttonStyleData: ButtonStyleData(
-              decoration:
-                  BoxDecoration(borderRadius: BorderRadius.circular(12)),
+              decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)),
             ),
             value: selectedValue,
             items: spaces.map((space) {
@@ -98,9 +97,7 @@ class SpaceDropdown extends StatelessWidget {
                       padding: const EdgeInsets.only(left: 10),
                       child: Text(
                         selectedValue != null
-                            ? spaces
-                                .firstWhere((e) => e.uuid == selectedValue)
-                                .name
+                            ? spaces.firstWhere((e) => e.uuid == selectedValue).name
                             : hintMessage,
                         style: Theme.of(context).textTheme.bodySmall!.copyWith(
                               fontSize: 13,
@@ -134,7 +131,7 @@ class SpaceDropdown extends StatelessWidget {
             dropdownStyleData: DropdownStyleData(
               maxHeight: MediaQuery.of(context).size.height * 0.4,
               decoration: BoxDecoration(
-                color: ColorsManager.whiteColors,
+                color: ColorsManager.white,
                 borderRadius: BorderRadius.circular(10),
               ),
             ),

lib/pages/routines/helper/save_routine_helper.dart

@@ -17,10 +17,9 @@ class SaveRoutineHelper {
       builder: (context) {
         return BlocBuilder<RoutineBloc, RoutineState>(
           builder: (context, state) {
-            final selectedConditionLabel =
-                state.selectedAutomationOperator == 'and'
-                    ? 'All Conditions are met'
-                    : 'Any Condition is met';
+            final selectedConditionLabel = state.selectedAutomationOperator == 'and'
+                ? 'All Conditions are met'
+                : 'Any Condition is met';
 
             return AlertDialog(
               contentPadding: EdgeInsets.zero,
@@ -38,11 +37,10 @@ class SaveRoutineHelper {
                     Text(
                       'Create a scene: ${state.routineName ?? ""}',
                       textAlign: TextAlign.center,
-                      style:
-                          Theme.of(context).textTheme.headlineMedium!.copyWith(
-                                color: ColorsManager.primaryColorWithOpacity,
-                                fontWeight: FontWeight.bold,
-                              ),
+                      style: Theme.of(context).textTheme.headlineMedium!.copyWith(
+                            color: ColorsManager.opaquePrimary,
+                            fontWeight: FontWeight.bold,
+                          ),
                     ),
                     const SizedBox(height: 18),
                     _buildDivider(),
@@ -60,8 +58,7 @@ class SaveRoutineHelper {
                             _buildIfConditions(state, context),
                             Container(
                               width: 1,
-                              color: ColorsManager.greyColor
-                                  .withValues(alpha: 0.8),
+                              color: ColorsManager.greyColor.withValues(alpha: 0.8),
                             ),
                             _buildThenActions(state, context),
                           ],
@@ -100,8 +97,7 @@ class SaveRoutineHelper {
       child: Row(
         spacing: 16,
         children: [
-          Expanded(
-              child: Text('IF: $selectedConditionLabel', style: textStyle)),
+          Expanded(child: Text('IF: $selectedConditionLabel', style: textStyle)),
           const Expanded(child: Text('THEN:', style: textStyle)),
         ],
       ),
@@ -136,7 +132,7 @@ class SaveRoutineHelper {
 
             Navigator.pop(context);
           },
-          textColor: ColorsManager.primaryColorWithOpacity,
+          textColor: ColorsManager.opaquePrimary,
         ),
       ],
     );
@@ -147,8 +143,7 @@ class SaveRoutineHelper {
       child: ListView(
         // shrinkWrap: true,
         children: state.thenItems.map((item) {
-          final functions =
-              state.selectedFunctions[item['uniqueCustomId']] ?? [];
+          final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
           return functionRow(item, context, functions);
         }).toList(),
       ),
@@ -208,20 +203,19 @@ class SaveRoutineHelper {
                     ),
                   ),
                   child: Center(
-                    child:
-                        item['type'] == 'tap_to_run' || item['type'] == 'scene'
-                            ? Image.memory(
-                                base64Decode(item['icon']),
-                                width: 12,
-                                height: 22,
-                                fit: BoxFit.scaleDown,
-                              )
-                            : SvgPicture.asset(
-                                item['imagePath'],
-                                width: 12,
-                                height: 12,
-                                fit: BoxFit.scaleDown,
-                              ),
+                    child: item['type'] == 'tap_to_run' || item['type'] == 'scene'
+                        ? Image.memory(
+                            base64Decode(item['icon']),
+                            width: 12,
+                            height: 22,
+                            fit: BoxFit.scaleDown,
+                          )
+                        : SvgPicture.asset(
+                            item['imagePath'],
+                            width: 12,
+                            height: 12,
+                            fit: BoxFit.scaleDown,
+                          ),
                   ),
                 ),
                 Flexible(

lib/pages/routines/view/create_new_routine_view.dart

@@ -35,7 +35,7 @@ class CreateNewRoutineView extends StatelessWidget {
                   child: Card(
                     child: Container(
                         decoration: BoxDecoration(
-                          color: ColorsManager.whiteColors,
+                          color: ColorsManager.white,
                           borderRadius: BorderRadius.circular(15),
                         ),
                         child: const ConditionsRoutinesDevicesView()),
@@ -53,7 +53,7 @@ class CreateNewRoutineView extends StatelessWidget {
                           margin: EdgeInsets.zero,
                           child: Container(
                             decoration: const BoxDecoration(
-                              color: ColorsManager.whiteColors,
+                              color: ColorsManager.white,
                               borderRadius: BorderRadius.only(
                                 topLeft: Radius.circular(15),
                                 topRight: Radius.circular(15),

lib/pages/routines/widgets/condition_toggle.dart

@@ -12,11 +12,7 @@ class ConditionToggle extends StatelessWidget {
   });
 
   static const _conditions = ["<", "==", ">"];
-  static const _icons = [
-    Icons.chevron_left,
-    Icons.drag_handle,
-    Icons.chevron_right
-  ];
+  static const _icons = [Icons.chevron_left, Icons.drag_handle, Icons.chevron_right];
 
   @override
   Widget build(BuildContext context) {
@@ -41,16 +37,14 @@ class ConditionToggle extends StatelessWidget {
                 duration: const Duration(milliseconds: 180),
                 curve: Curves.ease,
                 decoration: BoxDecoration(
-                  color:
-                      isSelected ? ColorsManager.vividBlue : Colors.transparent,
+                  color: isSelected ? ColorsManager.vividBlue : Colors.transparent,
                 ),
                 child: Center(
                   child: Icon(
                     _icons[index],
                     size: 20,
-                    color: isSelected
-                        ? ColorsManager.whiteColors
-                        : ColorsManager.blackColor,
+                    color:
+                        isSelected ? ColorsManager.white : ColorsManager.blackColor,
                     weight: isSelected ? 700 : 500,
                   ),
                 ),

lib/pages/routines/widgets/delete_scene.dart

@@ -39,7 +39,8 @@ class DeleteSceneWidget extends StatelessWidget {
                           ),
                         ),
                       ),
-                      Container(width: 1, height: 50, color: ColorsManager.greyColor),
+                      Container(
+                          width: 1, height: 50, color: ColorsManager.greyColor),
                       InkWell(
                         onTap: () {
                           context.read<RoutineBloc>().add(const DeleteScene());
@@ -51,7 +52,7 @@ class DeleteSceneWidget extends StatelessWidget {
                           child: Text(
                             'Confirm',
                             style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                                  color: ColorsManager.primaryColorWithOpacity,
+                                  color: ColorsManager.opaquePrimary,
                                 ),
                           ),
                         ),

lib/pages/routines/widgets/dialog_footer.dart

@@ -37,9 +37,7 @@ class DialogFooter extends StatelessWidget {
             DialogFooterButton(
               text: 'Confirm',
               onTap: onConfirm,
-              textColor: isConfirmEnabled
-                  ? ColorsManager.primaryColorWithOpacity
-                  : Colors.red,
+              textColor: isConfirmEnabled ? ColorsManager.opaquePrimary : Colors.red,
             ),
           ],
         ],
@@ -65,7 +63,7 @@ class DialogFooterButton extends StatelessWidget {
     return Expanded(
       child: TextButton(
         style: TextButton.styleFrom(
-          foregroundColor: ColorsManager.primaryColorWithOpacity,
+          foregroundColor: ColorsManager.opaquePrimary,
           disabledForegroundColor: ColorsManager.primaryColor,
         ),
         onPressed: onTap,

lib/pages/routines/widgets/dialog_header.dart

@@ -18,7 +18,7 @@ class DialogHeader extends StatelessWidget {
           title,
           textAlign: TextAlign.center,
           style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                color: ColorsManager.primaryColorWithOpacity,
+                color: ColorsManager.opaquePrimary,
                 fontWeight: FontWeight.bold,
               ),
         ),

lib/pages/routines/widgets/dragable_card.dart

@@ -33,17 +33,18 @@ class DraggableCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocBuilder<RoutineBloc, RoutineState>(
       builder: (context, state) {
-        final deviceFunctions = state.selectedFunctions[deviceData['uniqueCustomId']] ?? [];
+        final deviceFunctions =
+            state.selectedFunctions[deviceData['uniqueCustomId']] ?? [];
 
-        int index = state.thenItems
-            .indexWhere((item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
+        int index = state.thenItems.indexWhere(
+            (item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
 
         if (index != -1) {
           return _buildCardContent(context, deviceFunctions, padding: padding);
         }
 
-        int ifIndex = state.ifItems
-            .indexWhere((item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
+        int ifIndex = state.ifItems.indexWhere(
+            (item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
 
         if (ifIndex != -1) {
           return _buildCardContent(context, deviceFunctions, padding: padding);
@@ -62,12 +63,13 @@ class DraggableCard extends StatelessWidget {
     );
   }
 
-  Widget _buildCardContent(BuildContext context, List<DeviceFunctionData> deviceFunctions,
+  Widget _buildCardContent(
+      BuildContext context, List<DeviceFunctionData> deviceFunctions,
       {EdgeInsetsGeometry? padding}) {
     return Stack(
       children: [
         Card(
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           child: Container(
             padding: const EdgeInsets.all(16),
             width: 110,
@@ -92,7 +94,8 @@ class DraggableCard extends StatelessWidget {
                         ),
                       ),
                       padding: const EdgeInsets.all(8),
-                      child: deviceData['type'] == 'tap_to_run' || deviceData['type'] == 'scene'
+                      child: deviceData['type'] == 'tap_to_run' ||
+                              deviceData['type'] == 'scene'
                           ? Image.memory(
                               base64Decode(deviceData['icon']),
                             )
@@ -123,7 +126,9 @@ class DraggableCard extends StatelessWidget {
                         spacing: 2,
                         children: [
                           SizedBox(
-                              width: 8, height: 8, child: SvgPicture.asset(Assets.deviceTagIcon)),
+                              width: 8,
+                              height: 8,
+                              child: SvgPicture.asset(Assets.deviceTagIcon)),
                           Flexible(
                             child: Text(
                               deviceData['tag'] ?? '',
@@ -141,13 +146,15 @@ class DraggableCard extends StatelessWidget {
                       ),
                     ),
                     Visibility(
-                      visible: deviceData['subSpace'] != null && deviceData['subSpace'] != '',
+                      visible: deviceData['subSpace'] != null &&
+                          deviceData['subSpace'] != '',
                       child: const SizedBox(
                         height: 4,
                       ),
                     ),
                     Visibility(
-                      visible: deviceData['subSpace'] != null && deviceData['subSpace'] != '',
+                      visible: deviceData['subSpace'] != null &&
+                          deviceData['subSpace'] != '',
                       child: Row(
                         spacing: 2,
                         children: [
@@ -222,7 +229,8 @@ class DraggableCard extends StatelessWidget {
   }
 
   String _formatFunctionValue(DeviceFunctionData function) {
-    if (function.functionCode == 'temp_set' || function.functionCode == 'temp_current') {
+    if (function.functionCode == 'temp_set' ||
+        function.functionCode == 'temp_current') {
       return '${(function.value / 10).toStringAsFixed(0)}°C';
     } else if (function.functionCode.contains('countdown')) {
       final seconds = function.value?.toInt() ?? 0;

lib/pages/routines/widgets/if_container.dart

@@ -32,8 +32,7 @@ class IfContainer extends StatelessWidget {
                                 fontSize: 18, fontWeight: FontWeight.bold)),
                         if (state.isAutomation && state.ifItems.isNotEmpty)
                           AutomationOperatorSelector(
-                              selectedOperator:
-                                  state.selectedAutomationOperator),
+                              selectedOperator: state.selectedAutomationOperator),
                       ],
                     ),
                     const SizedBox(height: 16),
@@ -57,8 +56,8 @@ class IfContainer extends StatelessWidget {
                             (index) => GestureDetector(
                                   onTap: () async {
                                     if (!state.isTabToRun) {
-                                      final result = await DeviceDialogHelper
-                                          .showDeviceDialog(
+                                      final result =
+                                          await DeviceDialogHelper.showDeviceDialog(
                                               context: context,
                                               data: state.ifItems[index],
                                               removeComparetors: false,
@@ -79,8 +78,8 @@ class IfContainer extends StatelessWidget {
                                         'NCPS',
                                         'WH',
                                         'PC',
-                                      ].contains(state.ifItems[index]
-                                          ['productType'])) {
+                                      ].contains(
+                                          state.ifItems[index]['productType'])) {
                                         context.read<RoutineBloc>().add(
                                             AddToIfContainer(
                                                 state.ifItems[index], false));
@@ -97,12 +96,11 @@ class IfContainer extends StatelessWidget {
                                     isFromThen: false,
                                     isFromIf: true,
                                     onRemove: () {
-                                      context.read<RoutineBloc>().add(
-                                          RemoveDragCard(
-                                              index: index,
-                                              isFromThen: false,
-                                              key: state.ifItems[index]
-                                                  ['uniqueCustomId']));
+                                      context.read<RoutineBloc>().add(RemoveDragCard(
+                                          index: index,
+                                          isFromThen: false,
+                                          key: state.ifItems[index]
+                                              ['uniqueCustomId']));
                                     },
                                   ),
                                 )),
@@ -123,9 +121,7 @@ class IfContainer extends StatelessWidget {
 
             if (!state.isTabToRun) {
               if (mutableData['deviceId'] == 'tab_to_run') {
-                context
-                    .read<RoutineBloc>()
-                    .add(AddToIfContainer(mutableData, true));
+                context.read<RoutineBloc>().add(AddToIfContainer(mutableData, true));
               } else {
                 final result = await DeviceDialogHelper.showDeviceDialog(
                     dialogType: 'IF',
@@ -184,7 +180,7 @@ class AutomationOperatorSelector extends StatelessWidget {
             style: TextButton.styleFrom(
               backgroundColor: selectedOperator.toLowerCase() == 'or'
                   ? ColorsManager.dialogBlueTitle
-                  : ColorsManager.whiteColors,
+                  : ColorsManager.white,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(0),
               ),
@@ -193,7 +189,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               'Any condition is met',
               style: context.textTheme.bodyMedium?.copyWith(
                 color: selectedOperator.toLowerCase() == 'or'
-                    ? ColorsManager.whiteColors
+                    ? ColorsManager.white
                     : ColorsManager.blackColor,
               ),
             ),
@@ -212,7 +208,7 @@ class AutomationOperatorSelector extends StatelessWidget {
             style: TextButton.styleFrom(
               backgroundColor: selectedOperator.toLowerCase() == 'and'
                   ? ColorsManager.dialogBlueTitle
-                  : ColorsManager.whiteColors,
+                  : ColorsManager.white,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(0),
               ),
@@ -221,7 +217,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               'All condition is met',
               style: context.textTheme.bodyMedium?.copyWith(
                 color: selectedOperator.toLowerCase() == 'and'
-                    ? ColorsManager.whiteColors
+                    ? ColorsManager.white
                     : ColorsManager.blackColor,
               ),
             ),

lib/pages/routines/widgets/main_routine_view/routine_view_card.dart

@@ -91,7 +91,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(10),
         ),
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         child: InkWell(
           borderRadius: BorderRadius.circular(10),
           child: Padding(
@@ -121,8 +121,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                 child: SizedBox(
                                   width: 16,
                                   height: 16,
-                                  child:
-                                      CircularProgressIndicator(strokeWidth: 2),
+                                  child: CircularProgressIndicator(strokeWidth: 2),
                                 ),
                               ),
                             )
@@ -160,9 +159,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       height: iconSize,
                                       width: iconSize,
                                       fit: BoxFit.contain,
-                                      errorBuilder:
-                                          (context, error, stackTrace) =>
-                                              Image.asset(
+                                      errorBuilder: (context, error, stackTrace) =>
+                                          Image.asset(
                                         Assets.logo,
                                         height: iconSize,
                                         width: iconSize,
@@ -205,8 +203,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                             maxLines: 1,
                             style: context.textTheme.bodySmall?.copyWith(
                               color: ColorsManager.blackColor,
-                              fontSize:
-                                  widget.isSmallScreenSize(context) ? 10 : 12,
+                              fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
                             ),
                           ),
                           if (widget.spaceName != '')
@@ -225,9 +222,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   maxLines: 1,
                                   style: context.textTheme.bodySmall?.copyWith(
                                     color: ColorsManager.blackColor,
-                                    fontSize: widget.isSmallScreenSize(context)
-                                        ? 10
-                                        : 12,
+                                    fontSize:
+                                        widget.isSmallScreenSize(context) ? 10 : 12,
                                   ),
                                 ),
                               ],

lib/pages/routines/widgets/routine_dialog_selection_list_tile.dart

@@ -37,9 +37,7 @@ class RoutineDialogSelectionListTile extends StatelessWidget {
       trailing: Icon(
         isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
         size: 24,
-        color: isSelected
-            ? ColorsManager.primaryColorWithOpacity
-            : ColorsManager.textGray,
+        color: isSelected ? ColorsManager.opaquePrimary : ColorsManager.textGray,
       ),
       onTap: onTap,
     );

lib/pages/routines/widgets/routine_dialogs/ac_dialog.dart

@@ -65,9 +65,8 @@ class ACHelper {
                   child: Column(
                     mainAxisSize: MainAxisSize.min,
                     children: [
-                      DialogHeader(dialogType == 'THEN'
-                          ? 'AC Functions'
-                          : 'AC Conditions'),
+                      DialogHeader(
+                          dialogType == 'THEN' ? 'AC Functions' : 'AC Conditions'),
                       Expanded(
                         child: Row(
                           crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -78,15 +77,12 @@ class ACHelper {
                               child: _buildFunctionsList(
                                   context: context,
                                   acFunctions: acFunctions,
-                                  onFunctionSelected:
-                                      (functionCode, operationName) {
-                                    RoutineTapFunctionHelper.onTapFunction(
-                                        context,
+                                  onFunctionSelected: (functionCode, operationName) {
+                                    RoutineTapFunctionHelper.onTapFunction(context,
                                         functionCode: functionCode,
                                         functionOperationName: operationName,
                                         functionValueDescription:
-                                            selectedFunctionData
-                                                .valueDescription,
+                                            selectedFunctionData.valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'temp_set',
@@ -119,8 +115,7 @@ class ACHelper {
                             ? () {
                                 final selectedFunctionData =
                                     state.addedFunctions.firstWhere(
-                                  (f) =>
-                                      f.functionCode == state.selectedFunction,
+                                  (f) => f.functionCode == state.selectedFunction,
                                   orElse: () => DeviceFunctionData(
                                     entityId: '',
                                     functionCode: state.selectedFunction ?? '',
@@ -214,12 +209,10 @@ class ACHelper {
     required String operationName,
     bool? removeComparators,
   }) {
-    final selectedFn =
-        acFunctions.firstWhere((f) => f.code == selectedFunction);
+    final selectedFn = acFunctions.firstWhere((f) => f.code == selectedFunction);
 
     if (selectedFunction == 'temp_set' || selectedFunction == 'temp_current') {
-      final displayValue =
-          (selectedFunctionData?.value ?? selectedFn.min!) / 10;
+      final displayValue = (selectedFunctionData?.value ?? selectedFn.min!) / 10;
       final minValue = selectedFn.min! / 10;
       final maxValue = selectedFn.max! / 10;
 
@@ -462,13 +455,9 @@ class ACHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected
-                ? Icons.radio_button_checked
-                : Icons.radio_button_unchecked,
+            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected
-                ? ColorsManager.primaryColorWithOpacity
-                : ColorsManager.textGray,
+            color: isSelected ? ColorsManager.opaquePrimary : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -480,8 +469,7 @@ class ACHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription:
-                            selectedFunctionData?.valueDescription,
+                        valueDescription: selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/curtain_dialog.dart

@@ -71,10 +71,8 @@ class CurtainHelper {
                             child: _buildFunctionsList(
                                 context: context,
                                 curtainFunctions: curtainFunctions,
-                                onFunctionSelected:
-                                    (functionCode, operationName) {
-                                  RoutineTapFunctionHelper.onTapFunction(
-                                      context,
+                                onFunctionSelected: (functionCode, operationName) {
+                                  RoutineTapFunctionHelper.onTapFunction(context,
                                       functionCode: functionCode,
                                       functionOperationName: operationName,
                                       functionValueDescription:
@@ -240,13 +238,9 @@ class CurtainHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected
-                ? Icons.radio_button_checked
-                : Icons.radio_button_unchecked,
+            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected
-                ? ColorsManager.primaryColorWithOpacity
-                : ColorsManager.textGray,
+            color: isSelected ? ColorsManager.opaquePrimary : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -258,8 +252,7 @@ class CurtainHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription:
-                            selectedFunctionData?.valueDescription,
+                        valueDescription: selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/one_gang_switch_dialog.dart

@@ -89,15 +89,14 @@ class OneGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () => RoutineTapFunctionHelper
-                                          .onTapFunction(
+                                      onTap: () =>
+                                          RoutineTapFunctionHelper.onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData
-                                                .valueDescription,
+                                            selectedFunctionData.valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'countdown_1',
@@ -113,12 +112,10 @@ class OneGangSwitchHelper {
                                   child: _buildValueSelector(
                                       context: context,
                                       selectedFunction: selectedFunction,
-                                      selectedFunctionData:
-                                          selectedFunctionData,
+                                      selectedFunctionData: selectedFunctionData,
                                       acFunctions: oneGangFunctions,
                                       device: device,
-                                      operationName:
-                                          selectedOperationName ?? '',
+                                      operationName: selectedOperationName ?? '',
                                       removeComparetors: removeComparetors,
                                       dialogType: dialogType),
                                 ),
@@ -318,13 +315,9 @@ class OneGangSwitchHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected
-                ? Icons.radio_button_checked
-                : Icons.radio_button_unchecked,
+            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected
-                ? ColorsManager.primaryColorWithOpacity
-                : ColorsManager.textGray,
+            color: isSelected ? ColorsManager.opaquePrimary : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -336,8 +329,7 @@ class OneGangSwitchHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription:
-                            selectedFunctionData?.valueDescription,
+                        valueDescription: selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/setting_dialog.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_bloc.dart';
@@ -13,7 +14,6 @@ import 'package:syncrow_web/pages/routines/view/effective_period_view.dart';
 import 'package:syncrow_web/pages/routines/widgets/delete_scene.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:flutter/cupertino.dart';
 
 class SettingHelper {
   static Future<String?> showSettingDialog({
@@ -30,14 +30,16 @@ class SettingHelper {
           providers: [
             if (effectiveTime != null)
               BlocProvider(
-                create: (_) => EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
+                create: (_) =>
+                    EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
               ),
             if (effectiveTime == null)
               BlocProvider(
                 create: (_) => EffectPeriodBloc(),
               ),
             BlocProvider(
-                create: (_) => SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
+                create: (_) =>
+                    SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
           ],
           child: AlertDialog(
             contentPadding: EdgeInsets.zero,
@@ -53,7 +55,9 @@ class SettingHelper {
                   }
                   return Container(
                     width: context.read<SettingBloc>().isExpanded ? 800 : 400,
-                    height: context.read<SettingBloc>().isExpanded && isAutomation ? 500 : 350,
+                    height: context.read<SettingBloc>().isExpanded && isAutomation
+                        ? 500
+                        : 350,
                     decoration: BoxDecoration(
                       color: Colors.white,
                       borderRadius: BorderRadius.circular(20),
@@ -76,14 +80,18 @@ class SettingHelper {
                                       children: [
                                         Container(
                                             padding: const EdgeInsets.only(
-                                                top: 10, left: 10, right: 10, bottom: 10),
+                                                top: 10,
+                                                left: 10,
+                                                right: 10,
+                                                bottom: 10),
                                             child: Column(
                                               children: [
                                                 InkWell(
                                                   onTap: () {},
                                                   child: Row(
                                                     mainAxisAlignment:
-                                                        MainAxisAlignment.spaceBetween,
+                                                        MainAxisAlignment
+                                                            .spaceBetween,
                                                     children: [
                                                       Text(
                                                         'Validity',
@@ -91,14 +99,17 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color:
-                                                                    ColorsManager.textPrimaryColor,
-                                                                fontWeight: FontWeight.w400,
+                                                                color: ColorsManager
+                                                                    .textPrimaryColor,
+                                                                fontWeight:
+                                                                    FontWeight.w400,
                                                                 fontSize: 14),
                                                       ),
                                                       const Icon(
-                                                        Icons.arrow_forward_ios_outlined,
-                                                        color: ColorsManager.textGray,
+                                                        Icons
+                                                            .arrow_forward_ios_outlined,
+                                                        color:
+                                                            ColorsManager.textGray,
                                                         size: 15,
                                                       )
                                                     ],
@@ -115,15 +126,17 @@ class SettingHelper {
                                                 ),
                                                 InkWell(
                                                   onTap: () {
-                                                    BlocProvider.of<SettingBloc>(context).add(
-                                                        FetchIcons(
+                                                    BlocProvider.of<SettingBloc>(
+                                                            context)
+                                                        .add(FetchIcons(
                                                             expanded: !context
                                                                 .read<SettingBloc>()
                                                                 .isExpanded));
                                                   },
                                                   child: Row(
                                                     mainAxisAlignment:
-                                                        MainAxisAlignment.spaceBetween,
+                                                        MainAxisAlignment
+                                                            .spaceBetween,
                                                     children: [
                                                       Text(
                                                         'Effective Period',
@@ -131,14 +144,17 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color:
-                                                                    ColorsManager.textPrimaryColor,
-                                                                fontWeight: FontWeight.w400,
+                                                                color: ColorsManager
+                                                                    .textPrimaryColor,
+                                                                fontWeight:
+                                                                    FontWeight.w400,
                                                                 fontSize: 14),
                                                       ),
                                                       const Icon(
-                                                        Icons.arrow_forward_ios_outlined,
-                                                        color: ColorsManager.textGray,
+                                                        Icons
+                                                            .arrow_forward_ios_outlined,
+                                                        color:
+                                                            ColorsManager.textGray,
                                                         size: 15,
                                                       )
                                                     ],
@@ -154,7 +170,8 @@ class SettingHelper {
                                                   height: 5,
                                                 ),
                                                 Row(
-                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                                  mainAxisAlignment:
+                                                      MainAxisAlignment.spaceBetween,
                                                   children: [
                                                     Text(
                                                       'Executed by',
@@ -162,8 +179,10 @@ class SettingHelper {
                                                           .textTheme
                                                           .bodyMedium!
                                                           .copyWith(
-                                                              color: ColorsManager.textPrimaryColor,
-                                                              fontWeight: FontWeight.w400,
+                                                              color: ColorsManager
+                                                                  .textPrimaryColor,
+                                                              fontWeight:
+                                                                  FontWeight.w400,
                                                               fontSize: 14),
                                                     ),
                                                     Text('Cloud',
@@ -171,12 +190,17 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager.textGray,
-                                                                fontWeight: FontWeight.w400,
+                                                                color: ColorsManager
+                                                                    .textGray,
+                                                                fontWeight:
+                                                                    FontWeight.w400,
                                                                 fontSize: 14)),
                                                   ],
                                                 ),
-                                                if (context.read<RoutineBloc>().state.isUpdate ??
+                                                if (context
+                                                        .read<RoutineBloc>()
+                                                        .state
+                                                        .isUpdate ??
                                                     false)
                                                   const DeleteSceneWidget()
                                               ],
@@ -188,20 +212,25 @@ class SettingHelper {
                                       children: [
                                         Container(
                                             padding: const EdgeInsets.only(
-                                                top: 10, left: 10, right: 10, bottom: 10),
+                                                top: 10,
+                                                left: 10,
+                                                right: 10,
+                                                bottom: 10),
                                             child: Column(
                                               children: [
                                                 InkWell(
                                                   onTap: () {
-                                                    BlocProvider.of<SettingBloc>(context).add(
-                                                        FetchIcons(
+                                                    BlocProvider.of<SettingBloc>(
+                                                            context)
+                                                        .add(FetchIcons(
                                                             expanded: !context
                                                                 .read<SettingBloc>()
                                                                 .isExpanded));
                                                   },
                                                   child: Row(
                                                     mainAxisAlignment:
-                                                        MainAxisAlignment.spaceBetween,
+                                                        MainAxisAlignment
+                                                            .spaceBetween,
                                                     children: [
                                                       Text(
                                                         'Icons',
@@ -209,14 +238,17 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color:
-                                                                    ColorsManager.textPrimaryColor,
-                                                                fontWeight: FontWeight.w400,
+                                                                color: ColorsManager
+                                                                    .textPrimaryColor,
+                                                                fontWeight:
+                                                                    FontWeight.w400,
                                                                 fontSize: 14),
                                                       ),
                                                       const Icon(
-                                                        Icons.arrow_forward_ios_outlined,
-                                                        color: ColorsManager.textGray,
+                                                        Icons
+                                                            .arrow_forward_ios_outlined,
+                                                        color:
+                                                            ColorsManager.textGray,
                                                         size: 15,
                                                       )
                                                     ],
@@ -232,7 +264,8 @@ class SettingHelper {
                                                   height: 5,
                                                 ),
                                                 Row(
-                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                                  mainAxisAlignment:
+                                                      MainAxisAlignment.spaceBetween,
                                                   children: [
                                                     Text(
                                                       'Show on devices page',
@@ -240,17 +273,21 @@ class SettingHelper {
                                                           .textTheme
                                                           .bodyMedium!
                                                           .copyWith(
-                                                              color: ColorsManager.textPrimaryColor,
-                                                              fontWeight: FontWeight.w400,
+                                                              color: ColorsManager
+                                                                  .textPrimaryColor,
+                                                              fontWeight:
+                                                                  FontWeight.w400,
                                                               fontSize: 14),
                                                     ),
                                                     Row(
-                                                      mainAxisAlignment: MainAxisAlignment.end,
+                                                      mainAxisAlignment:
+                                                          MainAxisAlignment.end,
                                                       children: [
                                                         Container(
                                                           height: 30,
                                                           width: 1,
-                                                          color: ColorsManager.graysColor,
+                                                          color: ColorsManager
+                                                              .graysColor,
                                                         ),
                                                         Transform.scale(
                                                           scale: .8,
@@ -274,7 +311,8 @@ class SettingHelper {
                                                   height: 5,
                                                 ),
                                                 Row(
-                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                                  mainAxisAlignment:
+                                                      MainAxisAlignment.spaceBetween,
                                                   children: [
                                                     Text(
                                                       'Executed by',
@@ -282,8 +320,10 @@ class SettingHelper {
                                                           .textTheme
                                                           .bodyMedium!
                                                           .copyWith(
-                                                              color: ColorsManager.textPrimaryColor,
-                                                              fontWeight: FontWeight.w400,
+                                                              color: ColorsManager
+                                                                  .textPrimaryColor,
+                                                              fontWeight:
+                                                                  FontWeight.w400,
                                                               fontSize: 14),
                                                     ),
                                                     Text('Cloud',
@@ -291,12 +331,17 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager.textGray,
-                                                                fontWeight: FontWeight.w400,
+                                                                color: ColorsManager
+                                                                    .textGray,
+                                                                fontWeight:
+                                                                    FontWeight.w400,
                                                                 fontSize: 14)),
                                                   ],
                                                 ),
-                                                if (context.read<RoutineBloc>().state.isUpdate ??
+                                                if (context
+                                                        .read<RoutineBloc>()
+                                                        .state
+                                                        .isUpdate ??
                                                     false)
                                                   const DeleteSceneWidget()
                                               ],
@@ -304,12 +349,14 @@ class SettingHelper {
                                       ],
                                     ),
                             ),
-                            if (context.read<SettingBloc>().isExpanded && !isAutomation)
+                            if (context.read<SettingBloc>().isExpanded &&
+                                !isAutomation)
                               SizedBox(
                                   width: 400,
                                   height: 150,
                                   child: settingState is LoadingState
-                                      ? const Center(child: CircularProgressIndicator())
+                                      ? const Center(
+                                          child: CircularProgressIndicator())
                                       : GridView.builder(
                                           gridDelegate:
                                               const SliverGridDelegateWithFixedCrossAxisCount(
@@ -326,7 +373,8 @@ class SettingHelper {
                                               height: 35,
                                               child: InkWell(
                                                 onTap: () {
-                                                  BlocProvider.of<SettingBloc>(context)
+                                                  BlocProvider.of<SettingBloc>(
+                                                          context)
                                                       .add(SelectIcon(
                                                     iconId: iconModel.uuid,
                                                   ));
@@ -335,12 +383,14 @@ class SettingHelper {
                                                 child: SizedBox(
                                                   child: ClipOval(
                                                     child: Container(
-                                                      padding: const EdgeInsets.all(1),
+                                                      padding:
+                                                          const EdgeInsets.all(1),
                                                       decoration: BoxDecoration(
                                                         border: Border.all(
-                                                          color: selectedIcon == iconModel.uuid
+                                                          color: selectedIcon ==
+                                                                  iconModel.uuid
                                                               ? ColorsManager
-                                                                  .primaryColorWithOpacity
+                                                                  .opaquePrimary
                                                               : Colors.transparent,
                                                           width: 2,
                                                         ),
@@ -356,8 +406,12 @@ class SettingHelper {
                                             );
                                           },
                                         )),
-                            if (context.read<SettingBloc>().isExpanded && isAutomation)
-                              const SizedBox(height: 350, width: 400, child: EffectivePeriodView())
+                            if (context.read<SettingBloc>().isExpanded &&
+                                isAutomation)
+                              const SizedBox(
+                                  height: 350,
+                                  width: 400,
+                                  child: EffectivePeriodView())
                           ],
                         ),
                         Container(
@@ -381,23 +435,31 @@ class SettingHelper {
                                     alignment: AlignmentDirectional.center,
                                     child: Text(
                                       'Cancel',
-                                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .bodyMedium!
+                                          .copyWith(
                                             color: ColorsManager.textGray,
                                           ),
                                     ),
                                   ),
                                 ),
                               ),
-                              Container(width: 1, height: 50, color: ColorsManager.greyColor),
+                              Container(
+                                  width: 1,
+                                  height: 50,
+                                  color: ColorsManager.greyColor),
                               Expanded(
                                 child: InkWell(
                                   onTap: () {
                                     if (isAutomation) {
                                       BlocProvider.of<RoutineBloc>(context).add(
                                           EffectiveTimePeriodEvent(EffectiveTime(
-                                              start: effectPeriodState.customStartTime!,
+                                              start:
+                                                  effectPeriodState.customStartTime!,
                                               end: effectPeriodState.customEndTime!,
-                                              loops: effectPeriodState.selectedDaysBinary)));
+                                              loops: effectPeriodState
+                                                  .selectedDaysBinary)));
                                       Navigator.of(context).pop();
                                     } else {
                                       Navigator.of(context).pop(selectedIcon);
@@ -407,8 +469,11 @@ class SettingHelper {
                                     alignment: AlignmentDirectional.center,
                                     child: Text(
                                       'Confirm',
-                                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                                            color: ColorsManager.primaryColorWithOpacity,
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .bodyMedium!
+                                          .copyWith(
+                                            color: ColorsManager.opaquePrimary,
                                           ),
                                     ),
                                   ),

lib/pages/routines/widgets/routine_dialogs/three_gang_switch_dialog.dart

@@ -88,19 +88,17 @@ class ThreeGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () => RoutineTapFunctionHelper
-                                          .onTapFunction(
+                                      onTap: () =>
+                                          RoutineTapFunctionHelper.onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData
-                                                .valueDescription,
+                                            selectedFunctionData.valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue:
-                                            function.code
-                                                    .startsWith('countdown')
+                                            function.code.startsWith('countdown')
                                                 ? [function.code]
                                                 : [],
                                       ),
@@ -114,12 +112,10 @@ class ThreeGangSwitchHelper {
                                   child: _buildValueSelector(
                                       context: context,
                                       selectedFunction: selectedFunction,
-                                      selectedFunctionData:
-                                          selectedFunctionData,
+                                      selectedFunctionData: selectedFunctionData,
                                       switchFunctions: switchFunctions,
                                       device: device,
-                                      operationName:
-                                          selectedOperationName ?? '',
+                                      operationName: selectedOperationName ?? '',
                                       removeComparetors: removeComparetors,
                                       dialogType: dialogType),
                                 ),
@@ -188,8 +184,7 @@ class ThreeGangSwitchHelper {
           dialogType: dialogType);
     }
 
-    final selectedFn =
-        switchFunctions.firstWhere((f) => f.code == selectedFunction);
+    final selectedFn = switchFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     return _buildOperationalValuesList(
@@ -307,13 +302,9 @@ class ThreeGangSwitchHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected
-                ? Icons.radio_button_checked
-                : Icons.radio_button_unchecked,
+            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected
-                ? ColorsManager.primaryColorWithOpacity
-                : ColorsManager.textGray,
+            color: isSelected ? ColorsManager.opaquePrimary : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -325,8 +316,7 @@ class ThreeGangSwitchHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription:
-                            selectedFunctionData?.valueDescription,
+                        valueDescription: selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/two_gang_switch_dialog.dart

@@ -89,15 +89,14 @@ class TwoGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () => RoutineTapFunctionHelper
-                                          .onTapFunction(
+                                      onTap: () =>
+                                          RoutineTapFunctionHelper.onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData
-                                                .valueDescription,
+                                            selectedFunctionData.valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'countdown_1',
@@ -147,13 +146,10 @@ class TwoGangSwitchHelper {
                                   // }
                                   final selectedFunctionData =
                                       state.addedFunctions.firstWhere(
-                                    (f) =>
-                                        f.functionCode ==
-                                        state.selectedFunction,
+                                    (f) => f.functionCode == state.selectedFunction,
                                     orElse: () => DeviceFunctionData(
                                       entityId: '',
-                                      functionCode:
-                                          state.selectedFunction ?? '',
+                                      functionCode: state.selectedFunction ?? '',
                                       operationName: '',
                                       value: null,
                                     ),
@@ -192,8 +188,7 @@ class TwoGangSwitchHelper {
     required bool removeComparetors,
     required String dialogType,
   }) {
-    if (selectedFunction == 'countdown_1' ||
-        selectedFunction == 'countdown_2') {
+    if (selectedFunction == 'countdown_1' || selectedFunction == 'countdown_2') {
       final initialValue = selectedFunctionData?.value ?? 0;
       return _buildTemperatureSelector(
           context: context,
@@ -207,8 +202,7 @@ class TwoGangSwitchHelper {
           dialogType: dialogType);
     }
 
-    final selectedFn =
-        switchFunctions.firstWhere((f) => f.code == selectedFunction);
+    final selectedFn = switchFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     return _buildOperationalValuesList(
@@ -270,16 +264,15 @@ class TwoGangSwitchHelper {
             );
       },
       borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
+      selectedBorderColor: ColorsManager.opaquePrimary,
       selectedColor: Colors.white,
-      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.primaryColorWithOpacity,
+      fillColor: ColorsManager.opaquePrimary,
+      color: ColorsManager.opaquePrimary,
       constraints: const BoxConstraints(
         minHeight: 40.0,
         minWidth: 40.0,
       ),
-      isSelected:
-          conditions.map((c) => c == (currentCondition ?? "==")).toList(),
+      isSelected: conditions.map((c) => c == (currentCondition ?? "==")).toList(),
       children: conditions.map((c) => Text(c)).toList(),
     );
   }
@@ -295,13 +288,13 @@ class TwoGangSwitchHelper {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
       decoration: BoxDecoration(
-        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
+        color: ColorsManager.opaquePrimary.withOpacity(0.1),
         borderRadius: BorderRadius.circular(10),
       ),
       child: Text(
         DurationFormatMixin.formatDuration(initialValue?.toInt() ?? 0),
         style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.primaryColorWithOpacity,
+          color: ColorsManager.opaquePrimary,
         ),
       ),
     );
@@ -338,8 +331,7 @@ class TwoGangSwitchHelper {
             );
       },
       onTextChanged: (value) {
-        final roundedValue =
-            value.round(); // Round to nearest integer (stepSize 1)
+        final roundedValue = value.round(); // Round to nearest integer (stepSize 1)
         context.read<FunctionBloc>().add(
               AddFunction(
                 functionData: DeviceFunctionData(
@@ -391,13 +383,9 @@ class TwoGangSwitchHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected
-                ? Icons.radio_button_checked
-                : Icons.radio_button_unchecked,
+            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected
-                ? ColorsManager.primaryColorWithOpacity
-                : ColorsManager.textGray,
+            color: isSelected ? ColorsManager.opaquePrimary : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -409,8 +397,7 @@ class TwoGangSwitchHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription:
-                            selectedFunctionData?.valueDescription,
+                        valueDescription: selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_search_and_buttons.dart

@@ -61,8 +61,9 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                         children: [
                           ConstrainedBox(
                             constraints: BoxConstraints(
-                                maxWidth:
-                                    constraints.maxWidth > 700 ? 450 : constraints.maxWidth - 32),
+                                maxWidth: constraints.maxWidth > 700
+                                    ? 450
+                                    : constraints.maxWidth - 32),
                             child: Column(
                               mainAxisAlignment: MainAxisAlignment.start,
                               crossAxisAlignment: CrossAxisAlignment.start,
@@ -71,7 +72,9 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   children: [
                                     Text('* ',
                                         style: context.textTheme.bodyMedium!
-                                            .copyWith(color: ColorsManager.red, fontSize: 13)),
+                                            .copyWith(
+                                                color: ColorsManager.red,
+                                                fontSize: 13)),
                                     Text(
                                       'Routine Name',
                                       style: context.textTheme.bodyMedium!.copyWith(
@@ -93,9 +96,11 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                     decoration: InputDecoration(
                                       hintText: 'Please enter the name',
                                       hintStyle: context.textTheme.bodyMedium!
-                                          .copyWith(fontSize: 12, color: ColorsManager.grayColor),
-                                      contentPadding:
-                                          const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                                          .copyWith(
+                                              fontSize: 12,
+                                              color: ColorsManager.grayColor),
+                                      contentPadding: const EdgeInsets.symmetric(
+                                          horizontal: 12, vertical: 10),
                                       border: InputBorder.none,
                                     ),
                                     onTapOutside: (_) {
@@ -121,9 +126,11 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   width: 200,
                                   child: Center(
                                     child: DefaultButton(
-                                      onPressed: state.isAutomation || state.isTabToRun
+                                      onPressed: state.isAutomation ||
+                                              state.isTabToRun
                                           ? () async {
-                                              final result = await SettingHelper.showSettingDialog(
+                                              final result = await SettingHelper
+                                                  .showSettingDialog(
                                                 context: context,
                                                 iconId: state.selectedIcon ?? '',
                                               );
@@ -186,10 +193,12 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                             child: Center(
                               child: DefaultButton(
                                 onPressed: () async {
-                                  if (state.routineName == null || state.routineName!.isEmpty) {
+                                  if (state.routineName == null ||
+                                      state.routineName!.isEmpty) {
                                     ScaffoldMessenger.of(context).showSnackBar(
                                       SnackBar(
-                                        content: const Text('Please enter the routine name'),
+                                        content: const Text(
+                                            'Please enter the routine name'),
                                         duration: const Duration(seconds: 2),
                                         backgroundColor: ColorsManager.red,
                                         action: SnackBarAction(
@@ -203,10 +212,12 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                     return;
                                   }
 
-                                  if (state.ifItems.isEmpty || state.thenItems.isEmpty) {
+                                  if (state.ifItems.isEmpty ||
+                                      state.thenItems.isEmpty) {
                                     ScaffoldMessenger.of(context).showSnackBar(
                                       SnackBar(
-                                        content: const Text('Please add if and then condition'),
+                                        content: const Text(
+                                            'Please add if and then condition'),
                                         duration: const Duration(seconds: 2),
                                         backgroundColor: ColorsManager.red,
                                         action: SnackBarAction(
@@ -221,7 +232,8 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   }
                                   // final result =
                                   // await
-                                  BlocProvider.of<RoutineBloc>(context).add(ResetErrorMessage());
+                                  BlocProvider.of<RoutineBloc>(context)
+                                      .add(ResetErrorMessage());
                                   SaveRoutineHelper.showSaveRoutineDialog(context);
                                   // if (result != null && result) {
                                   //   BlocProvider.of<RoutineBloc>(context).add(
@@ -240,7 +252,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   textAlign: TextAlign.center,
                                   style: TextStyle(
                                     fontSize: 12,
-                                    color: ColorsManager.whiteColors,
+                                    color: ColorsManager.white,
                                   ),
                                 ),
                               ),
@@ -261,10 +273,14 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                           child: DefaultButton(
                             onPressed: state.isAutomation || state.isTabToRun
                                 ? () async {
-                                    final result = await SettingHelper.showSettingDialog(
-                                        context: context, iconId: state.selectedIcon ?? '');
+                                    final result =
+                                        await SettingHelper.showSettingDialog(
+                                            context: context,
+                                            iconId: state.selectedIcon ?? '');
                                     if (result != null) {
-                                      context.read<RoutineBloc>().add(AddSelectedIcon(result));
+                                      context
+                                          .read<RoutineBloc>()
+                                          .add(AddSelectedIcon(result));
                                     }
                                   }
                                 : null,
@@ -314,10 +330,12 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                         child: Center(
                           child: DefaultButton(
                             onPressed: () async {
-                              if (state.routineName == null || state.routineName!.isEmpty) {
+                              if (state.routineName == null ||
+                                  state.routineName!.isEmpty) {
                                 ScaffoldMessenger.of(context).showSnackBar(
                                   SnackBar(
-                                    content: const Text('Please enter the routine name'),
+                                    content:
+                                        const Text('Please enter the routine name'),
                                     duration: const Duration(seconds: 2),
                                     backgroundColor: ColorsManager.red,
                                     action: SnackBarAction(
@@ -334,7 +352,8 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                               if (state.ifItems.isEmpty || state.thenItems.isEmpty) {
                                 ScaffoldMessenger.of(context).showSnackBar(
                                   SnackBar(
-                                    content: const Text('Please add if and then condition'),
+                                    content: const Text(
+                                        'Please add if and then condition'),
                                     duration: const Duration(seconds: 2),
                                     backgroundColor: ColorsManager.red,
                                     action: SnackBarAction(
@@ -349,7 +368,8 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                               }
                               // final result =
                               // await
-                              BlocProvider.of<RoutineBloc>(context).add(ResetErrorMessage());
+                              BlocProvider.of<RoutineBloc>(context)
+                                  .add(ResetErrorMessage());
                               SaveRoutineHelper.showSaveRoutineDialog(context);
                               // if (result != null && result) {
                               //   BlocProvider.of<RoutineBloc>(context).add(
@@ -368,7 +388,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                               textAlign: TextAlign.center,
                               style: TextStyle(
                                 fontSize: 12,
-                                color: ColorsManager.whiteColors,
+                                color: ColorsManager.white,
                               ),
                             ),
                           ),

lib/pages/routines/widgets/value_display.dart

@@ -19,13 +19,13 @@ class ValueDisplay extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
       decoration: BoxDecoration(
-        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
+        color: ColorsManager.opaquePrimary.withOpacity(0.1),
         borderRadius: BorderRadius.circular(10),
       ),
       child: Text(
         '$label $unit ',
         style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.primaryColorWithOpacity,
+          color: ColorsManager.opaquePrimary,
         ),
       ),
     );

lib/pages/space_management_v2/main_module/helpers/spaces_recursive_helper.dart

@@ -68,4 +68,20 @@ abstract final class SpacesRecursiveHelper {
       return space;
     }).toList();
   }
+
+  static SpaceModel? findParent(
+    List<SpaceModel> spaces,
+    String targetUuid,
+  ) {
+    for (final space in spaces) {
+      if (space.children.any((child) => child.uuid == targetUuid)) {
+        return space;
+      }
+      final parent = findParent(space.children, targetUuid);
+      if (parent != null) {
+        return parent;
+      }
+    }
+    return null;
+  }
 }

lib/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart

@@ -1,12 +1,29 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/update_community/presentation/edit_community_dialog.dart';
+import 'package:syncrow_web/utils/extension/app_snack_bar.dart';
 
 abstract final class SpaceManagementCommunityDialogHelper {
   static void showCreateDialog(BuildContext context) => showDialog<void>(
         context: context,
-        builder: (_) => const CreateCommunityDialog(),
+        builder: (_) => CreateCommunityDialog(
+          onSuccess: (community) {
+            context.showSuccessSnackbar(
+              '${community.name} community created successfully',
+            );
+            context.read<CommunitiesBloc>().add(
+                  InsertCommunity(community),
+                );
+
+            context.read<CommunitiesTreeSelectionBloc>().add(
+                  SelectCommunityEvent(community: community),
+                );
+          },
+        ),
       );
 
   static void showEditDialog(

lib/pages/space_management_v2/main_module/shared/widgets/community_dialog.dart

@@ -50,7 +50,7 @@ class _CommunityDialogState extends State<CommunityDialog> {
         width: MediaQuery.of(context).size.width * 0.3,
         padding: const EdgeInsets.all(20),
         decoration: BoxDecoration(
-          color: ColorsManager.whiteColors,
+          color: ColorsManager.white,
           borderRadius: BorderRadius.circular(20),
           boxShadow: [
             BoxShadow(
@@ -110,7 +110,7 @@ class _CommunityDialogState extends State<CommunityDialog> {
           }
         },
         borderRadius: 10,
-        foregroundColor: ColorsManager.whiteColors,
+        foregroundColor: ColorsManager.white,
         child: const Text('OK'),
       ),
     );

lib/pages/space_management_v2/main_module/widgets/community_structure_header.dart

@@ -17,7 +17,7 @@ class CommunityStructureHeader extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
       decoration: BoxDecoration(
-        color: ColorsManager.whiteColors,
+        color: ColorsManager.white,
         boxShadow: [
           BoxShadow(
             color: ColorsManager.shadowBlackColor.withValues(alpha: 0.1),

lib/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons_composer.dart

@@ -49,8 +49,8 @@ class CommunityStructureHeaderActionButtonsComposer extends StatelessWidget {
         context: context,
         builder: (_) => DuplicateSpaceDialog(
           initialName: space.spaceName,
-          selectedSpaceUuid: space.uuid,
-          selectedCommunityUuid: selectedCommunity.uuid,
+          selectedSpace: space,
+          selectedCommunity: selectedCommunity,
           onSuccess: (spaces) {
             final updatedCommunity = selectedCommunity.copyWith(
               spaces: spaces,