Fix booking API endpoint month format by changing separator from '/' to '-'.

lib/common/dialog_dropdown.dart

@@ -66,7 +66,7 @@ class _DialogDropdownState extends State<DialogDropdown> {
                 child: Material(
                   elevation: 4.0,
                   child: Container(
-                    color: ColorsManager.white,
+                    color: ColorsManager.whiteColors,
                     constraints: const BoxConstraints(
                       maxHeight: 200.0, // Set max height for dropdown
                     ),
@@ -87,10 +87,12 @@ class _DialogDropdownState extends State<DialogDropdown> {
                           child: ListTile(
                             title: Text(
                               item,
-                              style:
+                              style: Theme.of(context)
-                                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                  .textTheme
-                                        color: ColorsManager.textPrimaryColor,
+                                  .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.white,
+    this.backgroundColor = ColorsManager.whiteColors,
     this.borderColor = ColorsManager.spaceColor,
     this.borderRadius = 16.0,
   }) : super(key: key);
@@ -24,9 +24,10 @@ class EditChip extends StatelessWidget {
     return GestureDetector(
       onTap: onTap,
       child: Chip(
-        label: Text(label,
+        label: Text(
-            style:
+          label,
-                Theme.of(context).textTheme.bodySmall!.copyWith(color: labelColor)),
+          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,7 +17,8 @@ class TagDialogTextfieldDropdown extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _DialogTextfieldDropdownState createState() => _DialogTextfieldDropdownState();
+  _DialogTextfieldDropdownState createState() =>
+      _DialogTextfieldDropdownState();
 }
 
 class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
@@ -96,7 +97,7 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
                 child: Material(
                   elevation: 4.0,
                   child: Container(
-                    color: ColorsManager.white,
+                    color: ColorsManager.whiteColors,
                     constraints: const BoxConstraints(maxHeight: 200.0),
                     child: StatefulBuilder(
                       builder: (context, setStateDropdown) {
@@ -121,7 +122,8 @@ 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,20 +5,19 @@ class CustomExpansionTile extends StatefulWidget {
   final String title;
   final List<Widget>? children;
   final bool initiallyExpanded;
-  final bool isSelected;
+  final bool isSelected; // Add this to track selection
-  final bool? isExpanded;
+  final bool? isExpanded; // External control over expansion
-  final ValueChanged<bool>? onExpansionChanged;
+  final ValueChanged<bool>? onExpansionChanged; // Notify when expansion changes
-  final VoidCallback? onItemSelected;
+  final VoidCallback? onItemSelected; // Callback for selecting the item
 
-  const CustomExpansionTile({
+  CustomExpansionTile({
-    super.key,
     required this.title,
     this.children,
     this.initiallyExpanded = false,
-    this.isExpanded,
+    this.isExpanded, // Allow external control over expansion
-    this.onExpansionChanged,
+    this.onExpansionChanged, // Notify when expansion changes
-    this.onItemSelected,
+    this.onItemSelected, // Trigger item selection when name is tapped
-    required this.isSelected,
+    required this.isSelected, // Add this to initialize selection state
   });
 
   @override
@@ -26,7 +25,7 @@ class CustomExpansionTile extends StatefulWidget {
 }
 
 class CustomExpansionTileState extends State<CustomExpansionTile> {
-  bool _isExpanded = false;
+  bool _isExpanded = false; // Local expansion state
 
   @override
   void initState() {
@@ -37,6 +36,7 @@ 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,6 +44,7 @@ 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);
@@ -55,6 +56,7 @@ 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: () {
@@ -68,33 +70,38 @@ class CustomExpansionTileState extends State<CustomExpansionTile> {
                       ? Icons.keyboard_arrow_down
                       : Icons.keyboard_arrow_right,
                   color: ColorsManager.lightGrayColor,
-                  size: 16,
+                  size: 16.0, // Adjusted size for better alignment
                 ),
               ),
+            // The title text, wrapped in GestureDetector to handle selection
             Expanded(
               child: GestureDetector(
                 onTap: () {
                   if (widget.onItemSelected != null) {
-                    widget.onItemSelected!.call();
+                    widget.onItemSelected!();
                   }
                 },
                 child: Text(
                   _capitalizeFirstLetter(widget.title),
                   style: TextStyle(
                     color: widget.isSelected
-                        ? ColorsManager.blackColor
+                        ? ColorsManager
-                        : ColorsManager.lightGrayColor,
+                            .blackColor // Change color to black when selected
-                    fontWeight:
+                        : ColorsManager
-                        widget.isSelected ? FontWeight.w600 : FontWeight.w400,
+                            .lightGrayColor, // Gray when not selected
+                    fontWeight: FontWeight.w400,
                   ),
                 ),
               ),
             ),
           ],
         ),
-        if (_isExpanded && widget.children != null && widget.children!.isNotEmpty)
+        // The expanded section (children) that shows when the tile is expanded
+        if (_isExpanded &&
+            widget.children != null &&
+            widget.children!.isNotEmpty)
           Padding(
-            padding: const EdgeInsets.only(left: 24),
+            padding: const EdgeInsets.only(left: 24.0), // Indented children
             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 void Function(String)? onSearchChanged;
+  final Function(String)? onSearchChanged; // Callback for search input changes
 
   const CustomSearchBar({
     super.key,
@@ -34,10 +34,10 @@ class _CustomSearchBarState extends State<CustomSearchBar> {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
         boxShadow: [
           BoxShadow(
-            color: ColorsManager.shadowBlackColor.withValues(alpha: 0.1),
+            color: Colors.black.withOpacity(0.2),
             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,
+          onChanged: widget.onSearchChanged, // Call the callback on text change
           decoration: InputDecoration(
             filled: true,
             fillColor: ColorsManager.textFieldGreyColor,

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

@@ -1,7 +1,6 @@
-import 'package:calendar_view/calendar_view.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/data/services/memory_bookable_space_service.dart';
+import 'package:calendar_view/calendar_view.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';
@@ -9,6 +8,7 @@ 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.white,
+                    color: ColorsManager.whiteColors,
                     boxShadow: [
                       BoxShadow(
                         color: ColorsManager.blackColor.withOpacity(0.1),
@@ -142,7 +142,8 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                         ),
                       ),
                       Expanded(
-                        child: BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                        child:
+                            BlocBuilder<DateSelectionBloc, DateSelectionState>(
                           builder: (context, dateState) {
                             return CustomCalendarPage(
                               selectedDate: dateState.selectedDate,
@@ -151,9 +152,8 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                 context
                                     .read<DateSelectionBloc>()
                                     .add(SelectDate(newDate));
-                                context
+                                context.read<DateSelectionBloc>().add(
-                                    .read<DateSelectionBloc>()
+                                    SelectDateFromSidebarCalendar(newDate));
-                                    .add(SelectDateFromSidebarCalendar(newDate));
                               },
                             );
                           },
@@ -193,7 +193,8 @@ 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,
@@ -203,7 +204,9 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                       .add(PreviousWeek());
                                 },
                                 onNextWeek: () {
-                                  context.read<DateSelectionBloc>().add(NextWeek());
+                                  context
+                                      .read<DateSelectionBloc>()
+                                      .add(NextWeek());
                                 },
                               );
                             },
@@ -216,7 +219,8 @@ 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) {
@@ -224,10 +228,12 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                     CalendarEventState>(
                                   builder: (context, eventState) {
                                     return WeeklyCalendarPage(
-                                      key: ValueKey(selectedRoom?.uuid ?? 'no-room'),
+                                      key: ValueKey(
-                                      startTime:
+                                          selectedRoom?.uuid ?? 'no-room'),
-                                          selectedRoom?.bookableConfig.startTime,
+                                      startTime: selectedRoom
-                                      endTime: selectedRoom?.bookableConfig.endTime,
+                                          ?.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.white,
+                    color: ColorsManager.whiteColors,
                     boxShadow: [
                       BoxShadow(
                         color: ColorsManager.blackColor.withOpacity(0.1),
@@ -94,7 +94,7 @@ class __SidebarContentState extends State<_SidebarContent> {
             ),
             Container(
               decoration: BoxDecoration(
-                color: ColorsManager.white,
+                color: ColorsManager.whiteColors,
                 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:
+                    padding: const EdgeInsets.symmetric(
-                        const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+                        horizontal: 16.0, vertical: 8.0),
                     child: Container(
                       decoration: BoxDecoration(
                         color: ColorsManager.counterBackgroundColor,
@@ -119,10 +119,12 @@ class __SidebarContentState extends State<_SidebarContent> {
                         children: [
                           Expanded(
                             child: TextField(
-                              style:
+                              style: Theme.of(context)
-                                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                  .textTheme
-                                        color: ColorsManager.blackColor,
+                                  .bodyMedium
-                                      ),
+                                  ?.copyWith(
+                                    color: ColorsManager.blackColor,
+                                  ),
                               controller: searchController,
                               onChanged: _handleSearch,
                               decoration: InputDecoration(
@@ -172,7 +174,8 @@ 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);
@@ -183,7 +186,9 @@ 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,20 +52,21 @@ class _SetupBookableSpacesDialogState extends State<SetupBookableSpacesDialog> {
             ),
           )..add(
               LoadUnBookableSpacesEvent(
-                nonBookableSpacesParams: NonBookableSpacesParams(currentPage: 1),
+                nonBookableSpacesParams:
+                    NonBookableSpacesParams(currentPage: 1),
               ),
             ),
         ),
         BlocProvider<SetupBookableSpacesBloc>(
           create: widget.editingBookableSpace == null
-              ? (context) =>
+              ? (context) => SetupBookableSpacesBloc(
-                  SetupBookableSpacesBloc(RemoteNonBookableSpaces(HTTPService()))
+                  RemoteNonBookableSpaces(HTTPService()))
-              : (context) =>
+              : (context) => SetupBookableSpacesBloc(
-                  SetupBookableSpacesBloc(RemoteNonBookableSpaces(HTTPService()))
+                  RemoteNonBookableSpaces(HTTPService()))
-                    ..add(
+                ..add(
-                      EditModeSelected(
+                  EditModeSelected(
-                          editingBookableSpace: widget.editingBookableSpace!),
+                      editingBookableSpace: widget.editingBookableSpace!),
-                    ),
+                ),
         ),
         BlocProvider(
           create: (context) => SendBookableSpacesBloc(
@@ -74,7 +75,7 @@ class _SetupBookableSpacesDialogState extends State<SetupBookableSpacesDialog> {
         )
       ],
       child: AlertDialog(
-        backgroundColor: ColorsManager.white,
+        backgroundColor: ColorsManager.whiteColors,
         contentPadding: EdgeInsets.zero,
         title: Center(
           child: Text(

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

@@ -21,14 +21,16 @@ 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,
                     ),
                   );
             }
@@ -40,16 +42,16 @@ class BookableSpaceSwitchActivationWidget extends StatelessWidget {
               return const Center(child: CircularProgressIndicator());
             }
             return Switch(
-              trackOutlineColor:
+              trackOutlineColor: WidgetStateProperty.resolveWith<Color>(
-                  WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) {
+                  (Set<WidgetState> states) {
-                return ColorsManager.white;
+                return ColorsManager.whiteColors;
               }),
               value: space.spaceConfig!.availability,
               activeTrackColor: ColorsManager.dialogBlueTitle,
               inactiveTrackColor: ColorsManager.grayBorder,
-              thumbColor:
+              thumbColor: WidgetStateProperty.resolveWith<Color>(
-                  WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) {
+                  (Set<WidgetState> states) {
-                return ColorsManager.white;
+                return ColorsManager.whiteColors;
               }),
               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.white,
+                            : ColorsManager.whiteColors,
                         borderRadius: BorderRadius.circular(8),
                         border: Border.all(
                           color: ColorsManager.lightGrayBorderColor,
@@ -77,8 +77,9 @@ class PaginationButtonsWidget extends StatelessWidget {
                       '$i',
                       style: TextStyle(
                         color: i == currentPage ? Colors.white : Colors.black,
-                        fontWeight:
+                        fontWeight: i == currentPage
-                            i == currentPage ? FontWeight.bold : FontWeight.normal,
+                            ? FontWeight.bold
+                            : FontWeight.normal,
                       ),
                     ),
                   ),
@@ -128,7 +129,8 @@ 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(
@@ -138,7 +140,7 @@ class PaginationButtonsWidget extends StatelessWidget {
           height: 30,
           alignment: Alignment.center,
           decoration: BoxDecoration(
-              color: ColorsManager.white,
+              color: ColorsManager.whiteColors,
               borderRadius: BorderRadius.circular(8),
               border: Border.all(
                 color: ColorsManager.lightGrayBorderColor,

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

@@ -62,13 +62,16 @@ class _PointsPartWidgetState extends State<PointsPartWidget> {
                   scale: 0.7,
                   child: Switch(
                     materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                    trackOutlineColor: WidgetStateProperty.all(ColorsManager.white),
+                    trackOutlineColor:
+                        WidgetStateProperty.all(ColorsManager.whiteColors),
                     activeTrackColor: ColorsManager.dialogBlueTitle,
                     inactiveTrackColor: ColorsManager.lightGrayBorderColor,
-                    thumbColor: WidgetStateProperty.all(ColorsManager.white),
+                    thumbColor:
+                        WidgetStateProperty.all(ColorsManager.whiteColors),
                     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,11 +36,12 @@ class SearchUnbookableSpacesWidget extends StatelessWidget {
       height: height ?? 40,
       padding: const EdgeInsets.only(top: 4),
       decoration: BoxDecoration(
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
         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.white,
+                  circleColor: ColorsManager.whiteColors,
                   borderColor: ColorsManager.textGray,
                 )
               ],
@@ -49,7 +49,7 @@ class StepperPartWidget extends StatelessWidget {
                   titleColor: ColorsManager.softGray,
                   cicleIcon: Icon(
                     Icons.check,
-                    color: ColorsManager.white,
+                    color: ColorsManager.whiteColors,
                     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.white,
+        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
         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.white,
+        getTooltipColor: (_) => ColorsManager.whiteColors,
         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.white,
+          color: ColorsManager.whiteColors,
           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.white,
+          color: ColorsManager.whiteColors,
           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.white,
+          color: ColorsManager.whiteColors,
           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.white,
+        dropdownColor: ColorsManager.whiteColors,
         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.white,
+        color: ColorsManager.whiteColors,
         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.white,
+      backgroundColor: ColorsManager.whiteColors,
       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.white,
+                      color: ColorsManager.whiteColors,
                     ),
                   ),
                 ),
@@ -217,7 +217,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
                 style: context.textTheme.titleSmall?.copyWith(
                   fontSize: 12,
                   color: isSelected
-                      ? ColorsManager.white
+                      ? ColorsManager.whiteColors
                       : 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.white),
+        decoration: const BoxDecoration(color: ColorsManager.whiteColors),
         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.white,
+      backgroundColor: ColorsManager.whiteColors,
       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.white,
+                      color: ColorsManager.whiteColors,
                     ),
                   ),
                 ),
@@ -144,7 +144,7 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
                 style: context.textTheme.titleSmall?.copyWith(
                   fontSize: 12,
                   color: isSelected
-                      ? ColorsManager.white
+                      ? ColorsManager.whiteColors
                       : 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.white,
+      getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
       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.white,
+      dropdownColor: ColorsManager.whiteColors,
       underline: const SizedBox.shrink(),
       icon: const RotatedBox(
         quarterTurns: 1,

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

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

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.white,
+        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
         tooltipBorder: const BorderSide(
           color: ColorsManager.semiTransparentBlack,
         ),

lib/pages/auth/view/login_web_page.dart

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

lib/pages/common/custom_table.dart

@@ -127,11 +127,13 @@ 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(
@@ -193,25 +195,29 @@ 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(
+                                                            (widget.headers
-                                                                    'Settings')
+                                                                    .contains(
+                                                                        'Settings')
                                                                 ? _settingsColumnWidth
                                                                 : 0)) /
                                                         (widget.headers.length -
-                                                            (widget.headers.contains(
+                                                            (widget.headers
-                                                                    'Settings')
+                                                                    .contains(
+                                                                        'Settings')
                                                                 ? 1
                                                                 : 0)),
                                                 rowIndex: rowIndex,
@@ -235,7 +241,7 @@ class _DynamicTableState extends State<DynamicTable> {
 
   Widget _buildEmptyState() => Container(
         height: widget.size.height,
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
@@ -275,8 +281,9 @@ class _DynamicTableState extends State<DynamicTable> {
       ),
       child: Checkbox(
         value: _selectAll,
-        onChanged:
+        onChanged: widget.withSelectAll && widget.data.isNotEmpty
-            widget.withSelectAll && widget.data.isNotEmpty ? _toggleSelectAll : null,
+            ? _toggleSelectAll
+            : null,
       ),
     );
   }
@@ -293,7 +300,7 @@ class _DynamicTableState extends State<DynamicTable> {
             width: 1.0,
           ),
         ),
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
       ),
       alignment: Alignment.centerLeft,
       child: Center(
@@ -334,7 +341,9 @@ 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;
 
@@ -406,7 +415,7 @@ class _DynamicTableState extends State<DynamicTable> {
       height: _fixedRowHeight,
       padding: const EdgeInsets.only(left: 15, top: 10, bottom: 10),
       decoration: const BoxDecoration(
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
         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(
+          _buildIconContainer(context, TempModes.cold, Assets.freezing,
-              context, TempModes.cold, Assets.freezing, value == TempModes.cold),
+              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.white,
+            color: ColorsManager.whiteColors,
             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(
+              _buildIconContainer(context, FanSpeeds.low, Assets.acFanLow,
-                  context, FanSpeeds.low, Assets.acFanLow, value == FanSpeeds.low),
+                  value == FanSpeeds.low),
             ],
           ),
           const SizedBox(height: 8),
@@ -52,8 +52,8 @@ class BatchFanSpeedControl extends StatelessWidget {
     );
   }
 
-  Widget _buildIconContainer(
+  Widget _buildIconContainer(BuildContext context, FanSpeeds speed,
-      BuildContext context, FanSpeeds speed, String assetPath, bool isSelected) {
+      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.white,
+          color: ColorsManager.whiteColors,
           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(
+          _buildIconContainer(context, TempModes.cold, Assets.freezing,
-              context, TempModes.cold, Assets.freezing, value == TempModes.cold),
+              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.white,
+            color: ColorsManager.whiteColors,
             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.white,
+                  color: ColorsManager.whiteColors,
                 ),
                 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(
+              _buildIconContainer(context, FanSpeeds.low, Assets.acFanLow,
-                  context, FanSpeeds.low, Assets.acFanLow, value == FanSpeeds.low),
+                  value == FanSpeeds.low),
             ],
           ),
           const SizedBox(height: 8),
@@ -51,8 +51,8 @@ class FanSpeedControl extends StatelessWidget {
     );
   }
 
-  Widget _buildIconContainer(
+  Widget _buildIconContainer(BuildContext context, FanSpeeds speed,
-      BuildContext context, FanSpeeds speed, String assetPath, bool isSelected) {
+      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.white,
+          color: ColorsManager.whiteColors,
           border: Border.all(
             color: isSelected ? Colors.blue : Colors.transparent,
             width: 2.0,

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

@@ -35,7 +35,8 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
     return MultiBlocProvider(
       providers: [
         BlocProvider(
-          create: (context) => DeviceManagementBloc()..add(FetchDevices(context)),
+          create: (context) =>
+              DeviceManagementBloc()..add(FetchDevices(context)),
         ),
       ],
       child: WebScaffold(
@@ -58,9 +59,8 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
                         BlocProvider.of<CreateRoutineBloc>(context)
                             .add(const ResetSelectedEvent());
 
-                        context
+                        context.read<RoutineBloc>().add(
-                            .read<RoutineBloc>()
+                            const TriggerSwitchTabsEvent(isRoutineTab: false));
-                            .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.white
+                        ? ColorsManager.whiteColors
                         : 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
+                        context.read<RoutineBloc>().add(
-                            .read<RoutineBloc>()
+                            const TriggerSwitchTabsEvent(isRoutineTab: true));
-                            .add(const TriggerSwitchTabsEvent(isRoutineTab: true));
                       },
                 child: Text(
                   'Workflow Automation',
                   style: context.textTheme.titleMedium?.copyWith(
                     color: state.routineTab
-                        ? ColorsManager.white
+                        ? ColorsManager.whiteColors
                         : ColorsManager.grayColor,
-                    fontWeight: state.routineTab ? FontWeight.w700 : FontWeight.w400,
+                    fontWeight:
+                        state.routineTab ? FontWeight.w700 : FontWeight.w400,
                   ),
                 ),
               ),
@@ -120,7 +120,8 @@ 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,7 +120,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                                   content: Text(
                                                     'This Device is Offline',
                                                   ),
-                                                  duration: Duration(seconds: 2),
+                                                  duration:
+                                                      Duration(seconds: 2),
                                                 ),
                                               );
                                               return;
@@ -134,11 +135,13 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                                   device: selectedDevices.first,
                                                 ),
                                               );
-                                            } else if (selectedDevices.length > 1) {
+                                            } else if (selectedDevices.length >
-                                              final productTypes = selectedDevices
+                                                1) {
-                                                  .map(
+                                              final productTypes =
-                                                      (device) => device.productType)
+                                                  selectedDevices
-                                                  .toSet();
+                                                      .map((device) =>
+                                                          device.productType)
+                                                      .toSet();
                                               if (productTypes.length == 1) {
                                                 showDialog(
                                                   context: context,
@@ -221,11 +224,13 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                   device.batteryLevel != null
                                       ? '${device.batteryLevel}%'
                                       : '-',
-                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
+                                  formatDateTime(
-                                      (device.createTime ?? 0) * 1000)),
+                                      DateTime.fromMillisecondsSinceEpoch(
+                                          (device.createTime ?? 0) * 1000)),
                                   device.online == true ? 'Online' : 'Offline',
-                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
+                                  formatDateTime(
-                                      (device.updateTime ?? 0) * 1000)),
+                                      DateTime.fromMillisecondsSinceEpoch(
+                                          (device.updateTime ?? 0) * 1000)),
                                   'Settings',
                                 ];
                               }).toList(),
@@ -268,7 +273,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           child: Material(
             child: Container(
               width: MediaQuery.of(context).size.width * 0.3,
-              color: ColorsManager.white,
+              color: ColorsManager.whiteColors,
               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.white,
+      backgroundColor: ColorsManager.whiteColors,
       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.white,
+      backgroundColor: ColorsManager.whiteColors,
       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.white,
+      backgroundColor: ColorsManager.whiteColors,
       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.white,
+        color: ColorsManager.whiteColors,
         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.white,
+          inactiveColor: ColorsManager.whiteColors,
 
           // Start dragging — use local control
           onChangeStart: (_) {

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

@@ -47,9 +47,10 @@ class PrefReversCardWidget extends StatelessWidget {
                   child: Container(
                     padding: const EdgeInsets.all(3),
                     decoration: BoxDecoration(
-                        color: ColorsManager.white,
+                        color: ColorsManager.whiteColors,
                         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.white,
+      backgroundColor: ColorsManager.whiteColors,
       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.white,
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Quick Calibration',

lib/pages/device_managment/device_setting/device_settings_panel.dart

@@ -1,4 +1,5 @@
 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';
@@ -46,8 +47,8 @@ class DeviceSettingsPanel extends StatelessWidget {
           return BlocBuilder<SettingDeviceBloc, DeviceSettingsState>(
             builder: (context, state) {
               final _bloc = context.read<SettingDeviceBloc>();
-              final iconPath =
+              final iconPath = DeviceIconTypeHelper.getDeviceIconByTypeCode(
-                  DeviceIconTypeHelper.getDeviceIconByTypeCode(device.productType);
+                  device.productType);
               final deviceInfo = state is DeviceSettingsUpdate
                   ? state.deviceInfo ?? DeviceInfoModel.empty()
                   : DeviceInfoModel.empty();
@@ -76,9 +77,11 @@ 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),
                             ),
                           ],
@@ -95,7 +98,7 @@ class DeviceSettingsPanel extends StatelessWidget {
                                   backgroundColor:
                                       ColorsManager.grayBorder.withOpacity(0.5),
                                   child: CircleAvatar(
-                                    backgroundColor: ColorsManager.white,
+                                    backgroundColor: ColorsManager.whiteColors,
                                     radius: 36,
                                     child: SvgPicture.asset(
                                       iconPath,
@@ -113,7 +116,8 @@ class DeviceSettingsPanel extends StatelessWidget {
                                     const SizedBox(height: 15),
                                     Text(
                                       'Device Name:',
-                                      style: context.textTheme.bodyMedium!.copyWith(
+                                      style: context.textTheme.bodyMedium!
+                                          .copyWith(
                                         color: ColorsManager.grayColor,
                                       ),
                                     ),
@@ -139,13 +143,13 @@ class DeviceSettingsPanel extends StatelessWidget {
                                                 _bloc.add(const ChangeNameEvent(
                                                     value: false));
                                                 deviceManagementBloc
-                                                  ..add(UpdateDeviceName(
+                                                    ..add(UpdateDeviceName(
-                                                      deviceId: device.uuid!,
+                                                        deviceId: device.uuid!,
-                                                      newName:
+                                                        newName: _bloc
-                                                          _bloc.nameController.text))
+                                                            .nameController
-                                                  ..add(ResetSelectedDevices());
+                                                            .text))..add(ResetSelectedDevices());
                                               },
-                                              decoration: const InputDecoration(
+                                              decoration:const InputDecoration(
                                                 isDense: true,
                                                 contentPadding: EdgeInsets.zero,
                                                 border: InputBorder.none,
@@ -160,16 +164,18 @@ 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.white,
+      backgroundColor: ColorsManager.whiteColors,
       insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 60),
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(28),

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

@@ -100,6 +100,7 @@ class _DeviceItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    
     return DeviceControlsContainer(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -109,7 +110,7 @@ class _DeviceItem extends StatelessWidget {
             height: 60,
             width: 60,
             padding: const EdgeInsets.all(8),
-            color: ColorsManager.white,
+            color: ColorsManager.whiteColors,
             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.white,
+      color: ColorsManager.whiteColors,
       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.white,
+          color: ColorsManager.whiteColors,
           borderRadius: BorderRadius.circular(20),
         ),
         height: 55,

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

@@ -12,7 +12,8 @@ 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});
@@ -128,7 +129,7 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                 bottom: 10,
               ),
               decoration: BoxDecoration(
-                color: ColorsManager.white,
+                color: ColorsManager.whiteColors,
                 borderRadius: BorderRadius.circular(20),
               ),
               height: 300,
@@ -148,7 +149,8 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                           onPressed: blocProvider.currentPage <= 0
                               ? null
                               : () {
-                                  blocProvider.add(SmartPowerArrowPressedEvent(-1));
+                                  blocProvider
+                                      .add(SmartPowerArrowPressedEvent(-1));
                                   pageController.previousPage(
                                     duration: const Duration(milliseconds: 300),
                                     curve: Curves.easeInOut,
@@ -170,7 +172,8 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                           onPressed: blocProvider.currentPage >= 3
                               ? null
                               : () {
-                                  blocProvider.add(SmartPowerArrowPressedEvent(1));
+                                  blocProvider
+                                      .add(SmartPowerArrowPressedEvent(1));
                                   pageController.nextPage(
                                     duration: const Duration(milliseconds: 300),
                                     curve: Curves.easeInOut,
@@ -199,8 +202,8 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                             blocProvider.add(SelectDateEvent(context: context));
                             blocProvider.add(FilterRecordsByDateEvent(
                                 selectedDate: blocProvider.dateTime!,
-                                viewType:
+                                viewType: blocProvider
-                                    blocProvider.views[blocProvider.currentIndex]));
+                                    .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.white,
+                color: ColorsManager.whiteColors,
               ),
               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.opaquePrimary,
+            color: ColorsManager.primaryColorWithOpacity,
             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.white,
+                            color: ColorsManager.whiteColors,
                             fontWeight: FontWeight.w400,
                             fontSize: 12,
                           ),
@@ -95,7 +95,7 @@ class _FactoryResetWidgetState extends State<FactoryResetWidget> {
                 children: [
                   ClipOval(
                     child: Container(
-                      color: ColorsManager.white,
+                      color: ColorsManager.whiteColors,
                       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.white,
+                color: ColorsManager.whiteColors,
                 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/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/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.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';
 
 class PresenceSpaceType extends StatelessWidget {
   const PresenceSpaceType({
@@ -59,7 +59,7 @@ class PresenceSpaceType extends StatelessWidget {
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(100),
                     color: value == spaceType
-                        ? ColorsManager.opaquePrimary
+                        ? ColorsManager.primaryColorWithOpacity
                         : 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.white,
+                        color: ColorsManager.whiteColors,
                         child: SvgPicture.asset(
                           icon ?? Assets.lightPulp,
                           width: 35,

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

@@ -1,4 +1,5 @@
 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';
@@ -6,8 +7,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class CeilingLight extends StatelessWidget {
-  const CeilingLight(
+  const CeilingLight({super.key, required this.value, required this.code, required this.deviceId});
-      {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.white,
+              color: ColorsManager.whiteColors,
               child: SvgPicture.asset(
                 Assets.lightPulp,
                 width: 60,

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

@@ -1,4 +1,5 @@
 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';
@@ -6,8 +7,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class SpotLight extends StatelessWidget {
-  const SpotLight(
+  const SpotLight({super.key, required this.value, required this.code, required this.deviceId});
-      {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.white,
+              color: ColorsManager.whiteColors,
               child: SvgPicture.asset(
                 Assets.lightPulp,
                 width: 60,

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

@@ -1,4 +1,5 @@
 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';
@@ -6,8 +7,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class WallLight extends StatelessWidget {
-  const WallLight(
+  const WallLight({super.key, required this.value, required this.code, required this.deviceId});
-      {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.white,
+              color: ColorsManager.whiteColors,
               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.opaquePrimary,
+                              color: ColorsManager.primaryColorWithOpacity,
                               fontWeight: FontWeight.w700,
                               fontSize: 30,
                             ),
@@ -171,8 +171,8 @@ class ScheduleDialogHelper {
     return result;
   }
 
-  static Widget _buildDayCheckboxes(
+  static Widget _buildDayCheckboxes(BuildContext ctx, List<bool> selectedDays,
-      BuildContext ctx, List<bool> selectedDays, Function(int, bool) onChanged) {
+      Function(int, bool) onChanged) {
     final dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     return Row(
       mainAxisAlignment: MainAxisAlignment.start,
@@ -197,7 +197,8 @@ 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>(
@@ -212,6 +213,7 @@ 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.white,
+    color: ColorsManager.whiteColors,
     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.white,
+              dropdownColor: ColorsManager.whiteColors,
               // alignment: Alignment.,
               focusColor: Colors.white,
               autofocus: true,

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

@@ -28,7 +28,9 @@ 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,
@@ -65,18 +67,21 @@ class RolesAndPermission extends StatelessWidget {
                                         border: Border.all(
                                             color: ColorsManager.grayBorder)),
                                     child: TextFormField(
-                                      style: const TextStyle(color: Colors.black),
+                                      style:
-                                      controller: _blocRole.roleSearchController,
+                                          const TextStyle(color: Colors.black),
+                                      controller:
+                                          _blocRole.roleSearchController,
                                       onChanged: (value) {
                                         _blocRole.add(SearchPermission(
                                             nodes: _blocRole.permissions,
                                             searchTerm: value));
                                       },
-                                      decoration:
+                                      decoration: textBoxDecoration(radios: 20)!
-                                          textBoxDecoration(radios: 20)!.copyWith(
+                                          .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,
@@ -103,7 +108,7 @@ class RolesAndPermission extends StatelessWidget {
                               color: ColorsManager.circleRolesBackground,
                               padding: const EdgeInsets.all(8.0),
                               child: Container(
-                                  color: ColorsManager.white,
+                                  color: ColorsManager.whiteColors,
                                   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.white,
+    color: ColorsManager.whiteColors,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.only(
         bottomRight: Radius.circular(10),
@@ -41,8 +41,9 @@ Future<void> showDateFilterMenu({
           title: Text(
             "Sort from newest to oldest",
             style: TextStyle(
-                color:
+                color: isSelected == "NewestToOldest"
-                    isSelected == "NewestToOldest" ? Colors.black : Colors.blueGrey),
+                    ? Colors.black
+                    : Colors.blueGrey),
           ),
         ),
       ),
@@ -56,8 +57,9 @@ Future<void> showDateFilterMenu({
           title: Text(
             "Sort from oldest to newest",
             style: TextStyle(
-                color:
+                color: isSelected == "OldestToNewest"
-                    isSelected == "OldestToNewest" ? Colors.black : Colors.blueGrey),
+                    ? 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.white,
+    color: ColorsManager.whiteColors,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.only(
         bottomRight: Radius.circular(10),
@@ -41,8 +41,9 @@ Future<void> showDeActivateFilterMenu({
           title: Text(
             "Sort A to Z",
             style: TextStyle(
-                color:
+                color: isSelected == "NewestToOldest"
-                    isSelected == "NewestToOldest" ? Colors.black : Colors.blueGrey),
+                    ? Colors.black
+                    : Colors.blueGrey),
           ),
         ),
       ),
@@ -56,8 +57,9 @@ Future<void> showDeActivateFilterMenu({
           title: Text(
             "Sort Z to A",
             style: TextStyle(
-                color:
+                color: isSelected == "OldestToNewest"
-                    isSelected == "OldestToNewest" ? Colors.black : Colors.blueGrey),
+                    ? 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.white,
+    color: ColorsManager.whiteColors,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.only(
         bottomRight: Radius.circular(10),

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

@@ -83,7 +83,8 @@ 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),
@@ -200,7 +201,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
 
     return Container(
       decoration: containerDecoration.copyWith(
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
         borderRadius: const BorderRadius.only(
           bottomLeft: Radius.circular(15),
           bottomRight: Radius.circular(15),
@@ -230,7 +231,8 @@ 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(() {
@@ -247,7 +249,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
           child: Container(
             width: totalTableWidth,
             decoration: containerDecoration.copyWith(
-              color: ColorsManager.white,
+              color: ColorsManager.whiteColors,
               borderRadius: const BorderRadius.all(Radius.circular(20)),
             ),
             child: Column(

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

@@ -61,7 +61,8 @@ 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,
@@ -92,7 +93,8 @@ 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
@@ -140,7 +142,7 @@ class UsersPage extends StatelessWidget {
                           },
                           style: const TextStyle(color: Colors.black),
                           decoration: textBoxDecoration(radios: 15)!.copyWith(
-                            fillColor: ColorsManager.white,
+                            fillColor: ColorsManager.whiteColors,
                             errorStyle: const TextStyle(height: 0),
                             hintStyle: context.textTheme.titleSmall?.copyWith(
                               color: Colors.grey,
@@ -428,12 +430,14 @@ class UsersPage extends StatelessWidget {
                           Text(user.createdTime ?? ''),
                           Text(user.invitedBy),
                           status(
-                            status:
+                            status: user.isEnabled == false
-                                user.isEnabled == false ? 'disabled' : user.status,
+                                ? 'disabled'
+                                : user.status,
                           ),
                           changeIconStatus(
-                            status:
+                            status: user.isEnabled == false
-                                user.isEnabled == false ? 'disabled' : user.status,
+                                ? 'disabled'
+                                : user.status,
                             userId: user.uuid,
                             onTap: user.status != "invited"
                                 ? () {
@@ -480,10 +484,11 @@ class UsersPage extends StatelessWidget {
                                     context: context,
                                     barrierDismissible: false,
                                     builder: (BuildContext context) {
-                                      return DeleteUserDialog(onTapDelete: () async {
+                                      return DeleteUserDialog(
+                                          onTapDelete: () async {
                                         try {
-                                          _blocRole.add(
+                                          _blocRole.add(DeleteUserEvent(
-                                              DeleteUserEvent(user.uuid, context));
+                                              user.uuid, context));
                                           await Future.delayed(
                                               const Duration(seconds: 2));
                                           return true;
@@ -516,7 +521,8 @@ 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.white, // Card background color
+        color: ColorsManager.whiteColors, // 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.white,
+          color: ColorsManager.whiteColors,
-          borderRadius: BorderRadius.circular(20),
+          borderRadius: BorderRadius.circular(20), 
         ),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,

lib/pages/roles_and_permission/view/roles_and_permission_page.dart

@@ -1,5 +1,6 @@
 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';
@@ -29,7 +30,8 @@ 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(
@@ -64,7 +66,7 @@ class RolesAndPermissionPage extends StatelessWidget {
                           'Users',
                           style: context.textTheme.titleMedium?.copyWith(
                             color: (_blocRole.tapSelect == true)
-                                ? ColorsManager.white
+                                ? ColorsManager.whiteColors
                                 : 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.white,
+                fillColor: ColorsManager.whiteColors,
                 errorStyle: const TextStyle(height: 0),
                 hintStyle: context.textTheme.titleSmall?.copyWith(
                   color: Colors.grey,

lib/pages/routines/create_new_routines/commu_dropdown.dart

@@ -3,7 +3,6 @@ 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 {
@@ -177,7 +176,7 @@ class _DropdownContentState extends State<_DropdownContent> {
           showWhenUnlinked: false,
           offset: const Offset(0, 48),
           child: Material(
-            color: ColorsManager.white,
+            color: ColorsManager.whiteColors,
             elevation: 8,
             borderRadius: BorderRadius.circular(12),
             child: BlocProvider.value(
@@ -202,7 +201,8 @@ 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,7 +35,8 @@ 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) {
@@ -97,7 +98,9 @@ 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,
@@ -131,7 +134,7 @@ class SpaceDropdown extends StatelessWidget {
             dropdownStyleData: DropdownStyleData(
               maxHeight: MediaQuery.of(context).size.height * 0.4,
               decoration: BoxDecoration(
-                color: ColorsManager.white,
+                color: ColorsManager.whiteColors,
                 borderRadius: BorderRadius.circular(10),
               ),
             ),

lib/pages/routines/helper/save_routine_helper.dart

@@ -17,9 +17,10 @@ class SaveRoutineHelper {
       builder: (context) {
         return BlocBuilder<RoutineBloc, RoutineState>(
           builder: (context, state) {
-            final selectedConditionLabel = state.selectedAutomationOperator == 'and'
+            final selectedConditionLabel =
-                ? 'All Conditions are met'
+                state.selectedAutomationOperator == 'and'
-                : 'Any Condition is met';
+                    ? 'All Conditions are met'
+                    : 'Any Condition is met';
 
             return AlertDialog(
               contentPadding: EdgeInsets.zero,
@@ -37,10 +38,11 @@ class SaveRoutineHelper {
                     Text(
                       'Create a scene: ${state.routineName ?? ""}',
                       textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.headlineMedium!.copyWith(
+                      style:
-                            color: ColorsManager.opaquePrimary,
+                          Theme.of(context).textTheme.headlineMedium!.copyWith(
-                            fontWeight: FontWeight.bold,
+                                color: ColorsManager.primaryColorWithOpacity,
-                          ),
+                                fontWeight: FontWeight.bold,
+                              ),
                     ),
                     const SizedBox(height: 18),
                     _buildDivider(),
@@ -58,7 +60,8 @@ 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),
                           ],
@@ -97,7 +100,8 @@ 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)),
         ],
       ),
@@ -132,7 +136,7 @@ class SaveRoutineHelper {
 
             Navigator.pop(context);
           },
-          textColor: ColorsManager.opaquePrimary,
+          textColor: ColorsManager.primaryColorWithOpacity,
         ),
       ],
     );
@@ -143,7 +147,8 @@ 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(),
       ),
@@ -203,19 +208,20 @@ class SaveRoutineHelper {
                     ),
                   ),
                   child: Center(
-                    child: item['type'] == 'tap_to_run' || item['type'] == 'scene'
+                    child:
-                        ? Image.memory(
+                        item['type'] == 'tap_to_run' || item['type'] == 'scene'
-                            base64Decode(item['icon']),
+                            ? Image.memory(
-                            width: 12,
+                                base64Decode(item['icon']),
-                            height: 22,
+                                width: 12,
-                            fit: BoxFit.scaleDown,
+                                height: 22,
-                          )
+                                fit: BoxFit.scaleDown,
-                        : SvgPicture.asset(
+                              )
-                            item['imagePath'],
+                            : SvgPicture.asset(
-                            width: 12,
+                                item['imagePath'],
-                            height: 12,
+                                width: 12,
-                            fit: BoxFit.scaleDown,
+                                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.white,
+                          color: ColorsManager.whiteColors,
                           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.white,
+                              color: ColorsManager.whiteColors,
                               borderRadius: BorderRadius.only(
                                 topLeft: Radius.circular(15),
                                 topRight: Radius.circular(15),

lib/pages/routines/widgets/condition_toggle.dart

@@ -12,7 +12,11 @@ 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) {
@@ -37,14 +41,16 @@ 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:
+                    color: isSelected
-                        isSelected ? ColorsManager.white : ColorsManager.blackColor,
+                        ? ColorsManager.whiteColors
+                        : ColorsManager.blackColor,
                     weight: isSelected ? 700 : 500,
                   ),
                 ),

lib/pages/routines/widgets/delete_scene.dart

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

lib/pages/routines/widgets/dialog_footer.dart

@@ -37,7 +37,9 @@ class DialogFooter extends StatelessWidget {
             DialogFooterButton(
               text: 'Confirm',
               onTap: onConfirm,
-              textColor: isConfirmEnabled ? ColorsManager.opaquePrimary : Colors.red,
+              textColor: isConfirmEnabled
+                  ? ColorsManager.primaryColorWithOpacity
+                  : Colors.red,
             ),
           ],
         ],
@@ -63,7 +65,7 @@ class DialogFooterButton extends StatelessWidget {
     return Expanded(
       child: TextButton(
         style: TextButton.styleFrom(
-          foregroundColor: ColorsManager.opaquePrimary,
+          foregroundColor: ColorsManager.primaryColorWithOpacity,
           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.opaquePrimary,
+                color: ColorsManager.primaryColorWithOpacity,
                 fontWeight: FontWeight.bold,
               ),
         ),

lib/pages/routines/widgets/dragable_card.dart

@@ -33,18 +33,17 @@ class DraggableCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocBuilder<RoutineBloc, RoutineState>(
       builder: (context, state) {
-        final deviceFunctions =
+        final deviceFunctions = state.selectedFunctions[deviceData['uniqueCustomId']] ?? [];
-            state.selectedFunctions[deviceData['uniqueCustomId']] ?? [];
 
-        int index = state.thenItems.indexWhere(
+        int index = state.thenItems
-            (item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
+            .indexWhere((item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
 
         if (index != -1) {
           return _buildCardContent(context, deviceFunctions, padding: padding);
         }
 
-        int ifIndex = state.ifItems.indexWhere(
+        int ifIndex = state.ifItems
-            (item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
+            .indexWhere((item) => item['uniqueCustomId'] == deviceData['uniqueCustomId']);
 
         if (ifIndex != -1) {
           return _buildCardContent(context, deviceFunctions, padding: padding);
@@ -63,13 +62,12 @@ class DraggableCard extends StatelessWidget {
     );
   }
 
-  Widget _buildCardContent(
+  Widget _buildCardContent(BuildContext context, List<DeviceFunctionData> deviceFunctions,
-      BuildContext context, List<DeviceFunctionData> deviceFunctions,
       {EdgeInsetsGeometry? padding}) {
     return Stack(
       children: [
         Card(
-          color: ColorsManager.white,
+          color: ColorsManager.whiteColors,
           child: Container(
             padding: const EdgeInsets.all(16),
             width: 110,
@@ -94,8 +92,7 @@ class DraggableCard extends StatelessWidget {
                         ),
                       ),
                       padding: const EdgeInsets.all(8),
-                      child: deviceData['type'] == 'tap_to_run' ||
+                      child: deviceData['type'] == 'tap_to_run' || deviceData['type'] == 'scene'
-                              deviceData['type'] == 'scene'
                           ? Image.memory(
                               base64Decode(deviceData['icon']),
                             )
@@ -126,9 +123,7 @@ class DraggableCard extends StatelessWidget {
                         spacing: 2,
                         children: [
                           SizedBox(
-                              width: 8,
+                              width: 8, height: 8, child: SvgPicture.asset(Assets.deviceTagIcon)),
-                              height: 8,
-                              child: SvgPicture.asset(Assets.deviceTagIcon)),
                           Flexible(
                             child: Text(
                               deviceData['tag'] ?? '',
@@ -146,15 +141,13 @@ class DraggableCard extends StatelessWidget {
                       ),
                     ),
                     Visibility(
-                      visible: deviceData['subSpace'] != null &&
+                      visible: deviceData['subSpace'] != null && deviceData['subSpace'] != '',
-                          deviceData['subSpace'] != '',
                       child: const SizedBox(
                         height: 4,
                       ),
                     ),
                     Visibility(
-                      visible: deviceData['subSpace'] != null &&
+                      visible: deviceData['subSpace'] != null && deviceData['subSpace'] != '',
-                          deviceData['subSpace'] != '',
                       child: Row(
                         spacing: 2,
                         children: [
@@ -229,8 +222,7 @@ class DraggableCard extends StatelessWidget {
   }
 
   String _formatFunctionValue(DeviceFunctionData function) {
-    if (function.functionCode == 'temp_set' ||
+    if (function.functionCode == 'temp_set' || function.functionCode == 'temp_current') {
-        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,7 +32,8 @@ 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),
@@ -56,8 +57,8 @@ class IfContainer extends StatelessWidget {
                             (index) => GestureDetector(
                                   onTap: () async {
                                     if (!state.isTabToRun) {
-                                      final result =
+                                      final result = await DeviceDialogHelper
-                                          await DeviceDialogHelper.showDeviceDialog(
+                                          .showDeviceDialog(
                                               context: context,
                                               data: state.ifItems[index],
                                               removeComparetors: false,
@@ -78,8 +79,8 @@ class IfContainer extends StatelessWidget {
                                         'NCPS',
                                         'WH',
                                         'PC',
-                                      ].contains(
+                                      ].contains(state.ifItems[index]
-                                          state.ifItems[index]['productType'])) {
+                                          ['productType'])) {
                                         context.read<RoutineBloc>().add(
                                             AddToIfContainer(
                                                 state.ifItems[index], false));
@@ -96,11 +97,12 @@ class IfContainer extends StatelessWidget {
                                     isFromThen: false,
                                     isFromIf: true,
                                     onRemove: () {
-                                      context.read<RoutineBloc>().add(RemoveDragCard(
+                                      context.read<RoutineBloc>().add(
-                                          index: index,
+                                          RemoveDragCard(
-                                          isFromThen: false,
+                                              index: index,
-                                          key: state.ifItems[index]
+                                              isFromThen: false,
-                                              ['uniqueCustomId']));
+                                              key: state.ifItems[index]
+                                                  ['uniqueCustomId']));
                                     },
                                   ),
                                 )),
@@ -121,7 +123,9 @@ 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',
@@ -180,7 +184,7 @@ class AutomationOperatorSelector extends StatelessWidget {
             style: TextButton.styleFrom(
               backgroundColor: selectedOperator.toLowerCase() == 'or'
                   ? ColorsManager.dialogBlueTitle
-                  : ColorsManager.white,
+                  : ColorsManager.whiteColors,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(0),
               ),
@@ -189,7 +193,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               'Any condition is met',
               style: context.textTheme.bodyMedium?.copyWith(
                 color: selectedOperator.toLowerCase() == 'or'
-                    ? ColorsManager.white
+                    ? ColorsManager.whiteColors
                     : ColorsManager.blackColor,
               ),
             ),
@@ -208,7 +212,7 @@ class AutomationOperatorSelector extends StatelessWidget {
             style: TextButton.styleFrom(
               backgroundColor: selectedOperator.toLowerCase() == 'and'
                   ? ColorsManager.dialogBlueTitle
-                  : ColorsManager.white,
+                  : ColorsManager.whiteColors,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(0),
               ),
@@ -217,7 +221,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               'All condition is met',
               style: context.textTheme.bodyMedium?.copyWith(
                 color: selectedOperator.toLowerCase() == 'and'
-                    ? ColorsManager.white
+                    ? ColorsManager.whiteColors
                     : 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.white,
+        color: ColorsManager.whiteColors,
         child: InkWell(
           borderRadius: BorderRadius.circular(10),
           child: Padding(
@@ -121,7 +121,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                 child: SizedBox(
                                   width: 16,
                                   height: 16,
-                                  child: CircularProgressIndicator(strokeWidth: 2),
+                                  child:
+                                      CircularProgressIndicator(strokeWidth: 2),
                                 ),
                               ),
                             )
@@ -159,8 +160,9 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       height: iconSize,
                                       width: iconSize,
                                       fit: BoxFit.contain,
-                                      errorBuilder: (context, error, stackTrace) =>
+                                      errorBuilder:
-                                          Image.asset(
+                                          (context, error, stackTrace) =>
+                                              Image.asset(
                                         Assets.logo,
                                         height: iconSize,
                                         width: iconSize,
@@ -203,7 +205,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,
                             ),
                           ),
                           if (widget.spaceName != '')
@@ -222,8 +225,9 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   maxLines: 1,
                                   style: context.textTheme.bodySmall?.copyWith(
                                     color: ColorsManager.blackColor,
-                                    fontSize:
+                                    fontSize: widget.isSmallScreenSize(context)
-                                        widget.isSmallScreenSize(context) ? 10 : 12,
+                                        ? 10
+                                        : 12,
                                   ),
                                 ),
                               ],

lib/pages/routines/widgets/routine_dialog_selection_list_tile.dart

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

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

@@ -65,8 +65,9 @@ class ACHelper {
                   child: Column(
                     mainAxisSize: MainAxisSize.min,
                     children: [
-                      DialogHeader(
+                      DialogHeader(dialogType == 'THEN'
-                          dialogType == 'THEN' ? 'AC Functions' : 'AC Conditions'),
+                          ? 'AC Functions'
+                          : 'AC Conditions'),
                       Expanded(
                         child: Row(
                           crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -77,12 +78,15 @@ class ACHelper {
                               child: _buildFunctionsList(
                                   context: context,
                                   acFunctions: acFunctions,
-                                  onFunctionSelected: (functionCode, operationName) {
+                                  onFunctionSelected:
-                                    RoutineTapFunctionHelper.onTapFunction(context,
+                                      (functionCode, operationName) {
+                                    RoutineTapFunctionHelper.onTapFunction(
+                                        context,
                                         functionCode: functionCode,
                                         functionOperationName: operationName,
                                         functionValueDescription:
-                                            selectedFunctionData.valueDescription,
+                                            selectedFunctionData
+                                                .valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'temp_set',
@@ -115,7 +119,8 @@ class ACHelper {
                             ? () {
                                 final selectedFunctionData =
                                     state.addedFunctions.firstWhere(
-                                  (f) => f.functionCode == state.selectedFunction,
+                                  (f) =>
+                                      f.functionCode == state.selectedFunction,
                                   orElse: () => DeviceFunctionData(
                                     entityId: '',
                                     functionCode: state.selectedFunction ?? '',
@@ -209,10 +214,12 @@ 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;
 
@@ -455,9 +462,13 @@ 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.opaquePrimary : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -469,7 +480,8 @@ 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,8 +71,10 @@ class CurtainHelper {
                             child: _buildFunctionsList(
                                 context: context,
                                 curtainFunctions: curtainFunctions,
-                                onFunctionSelected: (functionCode, operationName) {
+                                onFunctionSelected:
-                                  RoutineTapFunctionHelper.onTapFunction(context,
+                                    (functionCode, operationName) {
+                                  RoutineTapFunctionHelper.onTapFunction(
+                                      context,
                                       functionCode: functionCode,
                                       functionOperationName: operationName,
                                       functionValueDescription:
@@ -238,9 +240,13 @@ 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.opaquePrimary : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -252,7 +258,8 @@ 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,14 +89,15 @@ class OneGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () =>
+                                      onTap: () => RoutineTapFunctionHelper
-                                          RoutineTapFunctionHelper.onTapFunction(
+                                          .onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData.valueDescription,
+                                            selectedFunctionData
+                                                .valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'countdown_1',
@@ -112,10 +113,12 @@ class OneGangSwitchHelper {
                                   child: _buildValueSelector(
                                       context: context,
                                       selectedFunction: selectedFunction,
-                                      selectedFunctionData: selectedFunctionData,
+                                      selectedFunctionData:
+                                          selectedFunctionData,
                                       acFunctions: oneGangFunctions,
                                       device: device,
-                                      operationName: selectedOperationName ?? '',
+                                      operationName:
+                                          selectedOperationName ?? '',
                                       removeComparetors: removeComparetors,
                                       dialogType: dialogType),
                                 ),
@@ -315,9 +318,13 @@ 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.opaquePrimary : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -329,7 +336,8 @@ 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,4 +1,3 @@
-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';
@@ -14,6 +13,7 @@ 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,16 +30,14 @@ class SettingHelper {
           providers: [
             if (effectiveTime != null)
               BlocProvider(
-                create: (_) =>
+                create: (_) => EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
-                    EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
               ),
             if (effectiveTime == null)
               BlocProvider(
                 create: (_) => EffectPeriodBloc(),
               ),
             BlocProvider(
-                create: (_) =>
+                create: (_) => SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
-                    SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
           ],
           child: AlertDialog(
             contentPadding: EdgeInsets.zero,
@@ -55,9 +53,7 @@ class SettingHelper {
                   }
                   return Container(
                     width: context.read<SettingBloc>().isExpanded ? 800 : 400,
-                    height: context.read<SettingBloc>().isExpanded && isAutomation
+                    height: context.read<SettingBloc>().isExpanded && isAutomation ? 500 : 350,
-                        ? 500
-                        : 350,
                     decoration: BoxDecoration(
                       color: Colors.white,
                       borderRadius: BorderRadius.circular(20),
@@ -80,18 +76,14 @@ class SettingHelper {
                                       children: [
                                         Container(
                                             padding: const EdgeInsets.only(
-                                                top: 10,
+                                                top: 10, left: 10, right: 10, bottom: 10),
-                                                left: 10,
-                                                right: 10,
-                                                bottom: 10),
                                             child: Column(
                                               children: [
                                                 InkWell(
                                                   onTap: () {},
                                                   child: Row(
                                                     mainAxisAlignment:
-                                                        MainAxisAlignment
+                                                        MainAxisAlignment.spaceBetween,
-                                                            .spaceBetween,
                                                     children: [
                                                       Text(
                                                         'Validity',
@@ -99,17 +91,14 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager
+                                                                color:
-                                                                    .textPrimaryColor,
+                                                                    ColorsManager.textPrimaryColor,
-                                                                fontWeight:
+                                                                fontWeight: FontWeight.w400,
-                                                                    FontWeight.w400,
                                                                 fontSize: 14),
                                                       ),
                                                       const Icon(
-                                                        Icons
+                                                        Icons.arrow_forward_ios_outlined,
-                                                            .arrow_forward_ios_outlined,
+                                                        color: ColorsManager.textGray,
-                                                        color:
-                                                            ColorsManager.textGray,
                                                         size: 15,
                                                       )
                                                     ],
@@ -126,17 +115,15 @@ class SettingHelper {
                                                 ),
                                                 InkWell(
                                                   onTap: () {
-                                                    BlocProvider.of<SettingBloc>(
+                                                    BlocProvider.of<SettingBloc>(context).add(
-                                                            context)
+                                                        FetchIcons(
-                                                        .add(FetchIcons(
                                                             expanded: !context
                                                                 .read<SettingBloc>()
                                                                 .isExpanded));
                                                   },
                                                   child: Row(
                                                     mainAxisAlignment:
-                                                        MainAxisAlignment
+                                                        MainAxisAlignment.spaceBetween,
-                                                            .spaceBetween,
                                                     children: [
                                                       Text(
                                                         'Effective Period',
@@ -144,17 +131,14 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager
+                                                                color:
-                                                                    .textPrimaryColor,
+                                                                    ColorsManager.textPrimaryColor,
-                                                                fontWeight:
+                                                                fontWeight: FontWeight.w400,
-                                                                    FontWeight.w400,
                                                                 fontSize: 14),
                                                       ),
                                                       const Icon(
-                                                        Icons
+                                                        Icons.arrow_forward_ios_outlined,
-                                                            .arrow_forward_ios_outlined,
+                                                        color: ColorsManager.textGray,
-                                                        color:
-                                                            ColorsManager.textGray,
                                                         size: 15,
                                                       )
                                                     ],
@@ -170,8 +154,7 @@ class SettingHelper {
                                                   height: 5,
                                                 ),
                                                 Row(
-                                                  mainAxisAlignment:
+                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                                                      MainAxisAlignment.spaceBetween,
                                                   children: [
                                                     Text(
                                                       'Executed by',
@@ -179,10 +162,8 @@ class SettingHelper {
                                                           .textTheme
                                                           .bodyMedium!
                                                           .copyWith(
-                                                              color: ColorsManager
+                                                              color: ColorsManager.textPrimaryColor,
-                                                                  .textPrimaryColor,
+                                                              fontWeight: FontWeight.w400,
-                                                              fontWeight:
-                                                                  FontWeight.w400,
                                                               fontSize: 14),
                                                     ),
                                                     Text('Cloud',
@@ -190,17 +171,12 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager
+                                                                color: ColorsManager.textGray,
-                                                                    .textGray,
+                                                                fontWeight: FontWeight.w400,
-                                                                fontWeight:
-                                                                    FontWeight.w400,
                                                                 fontSize: 14)),
                                                   ],
                                                 ),
-                                                if (context
+                                                if (context.read<RoutineBloc>().state.isUpdate ??
-                                                        .read<RoutineBloc>()
-                                                        .state
-                                                        .isUpdate ??
                                                     false)
                                                   const DeleteSceneWidget()
                                               ],
@@ -212,25 +188,20 @@ class SettingHelper {
                                       children: [
                                         Container(
                                             padding: const EdgeInsets.only(
-                                                top: 10,
+                                                top: 10, left: 10, right: 10, bottom: 10),
-                                                left: 10,
-                                                right: 10,
-                                                bottom: 10),
                                             child: Column(
                                               children: [
                                                 InkWell(
                                                   onTap: () {
-                                                    BlocProvider.of<SettingBloc>(
+                                                    BlocProvider.of<SettingBloc>(context).add(
-                                                            context)
+                                                        FetchIcons(
-                                                        .add(FetchIcons(
                                                             expanded: !context
                                                                 .read<SettingBloc>()
                                                                 .isExpanded));
                                                   },
                                                   child: Row(
                                                     mainAxisAlignment:
-                                                        MainAxisAlignment
+                                                        MainAxisAlignment.spaceBetween,
-                                                            .spaceBetween,
                                                     children: [
                                                       Text(
                                                         'Icons',
@@ -238,17 +209,14 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager
+                                                                color:
-                                                                    .textPrimaryColor,
+                                                                    ColorsManager.textPrimaryColor,
-                                                                fontWeight:
+                                                                fontWeight: FontWeight.w400,
-                                                                    FontWeight.w400,
                                                                 fontSize: 14),
                                                       ),
                                                       const Icon(
-                                                        Icons
+                                                        Icons.arrow_forward_ios_outlined,
-                                                            .arrow_forward_ios_outlined,
+                                                        color: ColorsManager.textGray,
-                                                        color:
-                                                            ColorsManager.textGray,
                                                         size: 15,
                                                       )
                                                     ],
@@ -264,8 +232,7 @@ class SettingHelper {
                                                   height: 5,
                                                 ),
                                                 Row(
-                                                  mainAxisAlignment:
+                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                                                      MainAxisAlignment.spaceBetween,
                                                   children: [
                                                     Text(
                                                       'Show on devices page',
@@ -273,21 +240,17 @@ class SettingHelper {
                                                           .textTheme
                                                           .bodyMedium!
                                                           .copyWith(
-                                                              color: ColorsManager
+                                                              color: ColorsManager.textPrimaryColor,
-                                                                  .textPrimaryColor,
+                                                              fontWeight: FontWeight.w400,
-                                                              fontWeight:
-                                                                  FontWeight.w400,
                                                               fontSize: 14),
                                                     ),
                                                     Row(
-                                                      mainAxisAlignment:
+                                                      mainAxisAlignment: MainAxisAlignment.end,
-                                                          MainAxisAlignment.end,
                                                       children: [
                                                         Container(
                                                           height: 30,
                                                           width: 1,
-                                                          color: ColorsManager
+                                                          color: ColorsManager.graysColor,
-                                                              .graysColor,
                                                         ),
                                                         Transform.scale(
                                                           scale: .8,
@@ -311,8 +274,7 @@ class SettingHelper {
                                                   height: 5,
                                                 ),
                                                 Row(
-                                                  mainAxisAlignment:
+                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                                                      MainAxisAlignment.spaceBetween,
                                                   children: [
                                                     Text(
                                                       'Executed by',
@@ -320,10 +282,8 @@ class SettingHelper {
                                                           .textTheme
                                                           .bodyMedium!
                                                           .copyWith(
-                                                              color: ColorsManager
+                                                              color: ColorsManager.textPrimaryColor,
-                                                                  .textPrimaryColor,
+                                                              fontWeight: FontWeight.w400,
-                                                              fontWeight:
-                                                                  FontWeight.w400,
                                                               fontSize: 14),
                                                     ),
                                                     Text('Cloud',
@@ -331,17 +291,12 @@ class SettingHelper {
                                                             .textTheme
                                                             .bodyMedium!
                                                             .copyWith(
-                                                                color: ColorsManager
+                                                                color: ColorsManager.textGray,
-                                                                    .textGray,
+                                                                fontWeight: FontWeight.w400,
-                                                                fontWeight:
-                                                                    FontWeight.w400,
                                                                 fontSize: 14)),
                                                   ],
                                                 ),
-                                                if (context
+                                                if (context.read<RoutineBloc>().state.isUpdate ??
-                                                        .read<RoutineBloc>()
-                                                        .state
-                                                        .isUpdate ??
                                                     false)
                                                   const DeleteSceneWidget()
                                               ],
@@ -349,14 +304,12 @@ class SettingHelper {
                                       ],
                                     ),
                             ),
-                            if (context.read<SettingBloc>().isExpanded &&
+                            if (context.read<SettingBloc>().isExpanded && !isAutomation)
-                                !isAutomation)
                               SizedBox(
                                   width: 400,
                                   height: 150,
                                   child: settingState is LoadingState
-                                      ? const Center(
+                                      ? const Center(child: CircularProgressIndicator())
-                                          child: CircularProgressIndicator())
                                       : GridView.builder(
                                           gridDelegate:
                                               const SliverGridDelegateWithFixedCrossAxisCount(
@@ -373,8 +326,7 @@ class SettingHelper {
                                               height: 35,
                                               child: InkWell(
                                                 onTap: () {
-                                                  BlocProvider.of<SettingBloc>(
+                                                  BlocProvider.of<SettingBloc>(context)
-                                                          context)
                                                       .add(SelectIcon(
                                                     iconId: iconModel.uuid,
                                                   ));
@@ -383,14 +335,12 @@ class SettingHelper {
                                                 child: SizedBox(
                                                   child: ClipOval(
                                                     child: Container(
-                                                      padding:
+                                                      padding: const EdgeInsets.all(1),
-                                                          const EdgeInsets.all(1),
                                                       decoration: BoxDecoration(
                                                         border: Border.all(
-                                                          color: selectedIcon ==
+                                                          color: selectedIcon == iconModel.uuid
-                                                                  iconModel.uuid
                                                               ? ColorsManager
-                                                                  .opaquePrimary
+                                                                  .primaryColorWithOpacity
                                                               : Colors.transparent,
                                                           width: 2,
                                                         ),
@@ -406,12 +356,8 @@ class SettingHelper {
                                             );
                                           },
                                         )),
-                            if (context.read<SettingBloc>().isExpanded &&
+                            if (context.read<SettingBloc>().isExpanded && isAutomation)
-                                isAutomation)
+                              const SizedBox(height: 350, width: 400, child: EffectivePeriodView())
-                              const SizedBox(
-                                  height: 350,
-                                  width: 400,
-                                  child: EffectivePeriodView())
                           ],
                         ),
                         Container(
@@ -435,31 +381,23 @@ class SettingHelper {
                                     alignment: AlignmentDirectional.center,
                                     child: Text(
                                       'Cancel',
-                                      style: Theme.of(context)
+                                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                                          .textTheme
-                                          .bodyMedium!
-                                          .copyWith(
                                             color: ColorsManager.textGray,
                                           ),
                                     ),
                                   ),
                                 ),
                               ),
-                              Container(
+                              Container(width: 1, height: 50, color: ColorsManager.greyColor),
-                                  width: 1,
-                                  height: 50,
-                                  color: ColorsManager.greyColor),
                               Expanded(
                                 child: InkWell(
                                   onTap: () {
                                     if (isAutomation) {
                                       BlocProvider.of<RoutineBloc>(context).add(
                                           EffectiveTimePeriodEvent(EffectiveTime(
-                                              start:
+                                              start: effectPeriodState.customStartTime!,
-                                                  effectPeriodState.customStartTime!,
                                               end: effectPeriodState.customEndTime!,
-                                              loops: effectPeriodState
+                                              loops: effectPeriodState.selectedDaysBinary)));
-                                                  .selectedDaysBinary)));
                                       Navigator.of(context).pop();
                                     } else {
                                       Navigator.of(context).pop(selectedIcon);
@@ -469,11 +407,8 @@ class SettingHelper {
                                     alignment: AlignmentDirectional.center,
                                     child: Text(
                                       'Confirm',
-                                      style: Theme.of(context)
+                                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                                          .textTheme
+                                            color: ColorsManager.primaryColorWithOpacity,
-                                          .bodyMedium!
-                                          .copyWith(
-                                            color: ColorsManager.opaquePrimary,
                                           ),
                                     ),
                                   ),

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

@@ -88,17 +88,19 @@ class ThreeGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () =>
+                                      onTap: () => RoutineTapFunctionHelper
-                                          RoutineTapFunctionHelper.onTapFunction(
+                                          .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]
                                                 : [],
                                       ),
@@ -112,10 +114,12 @@ class ThreeGangSwitchHelper {
                                   child: _buildValueSelector(
                                       context: context,
                                       selectedFunction: selectedFunction,
-                                      selectedFunctionData: selectedFunctionData,
+                                      selectedFunctionData:
+                                          selectedFunctionData,
                                       switchFunctions: switchFunctions,
                                       device: device,
-                                      operationName: selectedOperationName ?? '',
+                                      operationName:
+                                          selectedOperationName ?? '',
                                       removeComparetors: removeComparetors,
                                       dialogType: dialogType),
                                 ),
@@ -184,7 +188,8 @@ 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(
@@ -302,9 +307,13 @@ 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.opaquePrimary : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -316,7 +325,8 @@ 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,14 +89,15 @@ class TwoGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () =>
+                                      onTap: () => RoutineTapFunctionHelper
-                                          RoutineTapFunctionHelper.onTapFunction(
+                                          .onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData.valueDescription,
+                                            selectedFunctionData
+                                                .valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'countdown_1',
@@ -146,10 +147,13 @@ 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,
                                     ),
@@ -188,7 +192,8 @@ 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,
@@ -202,7 +207,8 @@ 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(
@@ -264,15 +270,16 @@ class TwoGangSwitchHelper {
             );
       },
       borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.opaquePrimary,
+      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
       selectedColor: Colors.white,
-      fillColor: ColorsManager.opaquePrimary,
+      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.opaquePrimary,
+      color: ColorsManager.primaryColorWithOpacity,
       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(),
     );
   }
@@ -288,13 +295,13 @@ class TwoGangSwitchHelper {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
       decoration: BoxDecoration(
-        color: ColorsManager.opaquePrimary.withOpacity(0.1),
+        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
         borderRadius: BorderRadius.circular(10),
       ),
       child: Text(
         DurationFormatMixin.formatDuration(initialValue?.toInt() ?? 0),
         style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.opaquePrimary,
+          color: ColorsManager.primaryColorWithOpacity,
         ),
       ),
     );
@@ -331,7 +338,8 @@ 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(
@@ -383,9 +391,13 @@ 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.opaquePrimary : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -397,7 +409,8 @@ 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,9 +61,8 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                         children: [
                           ConstrainedBox(
                             constraints: BoxConstraints(
-                                maxWidth: constraints.maxWidth > 700
+                                maxWidth:
-                                    ? 450
+                                    constraints.maxWidth > 700 ? 450 : constraints.maxWidth - 32),
-                                    : constraints.maxWidth - 32),
                             child: Column(
                               mainAxisAlignment: MainAxisAlignment.start,
                               crossAxisAlignment: CrossAxisAlignment.start,
@@ -72,9 +71,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   children: [
                                     Text('* ',
                                         style: context.textTheme.bodyMedium!
-                                            .copyWith(
+                                            .copyWith(color: ColorsManager.red, fontSize: 13)),
-                                                color: ColorsManager.red,
-                                                fontSize: 13)),
                                     Text(
                                       'Routine Name',
                                       style: context.textTheme.bodyMedium!.copyWith(
@@ -96,11 +93,9 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                     decoration: InputDecoration(
                                       hintText: 'Please enter the name',
                                       hintStyle: context.textTheme.bodyMedium!
-                                          .copyWith(
+                                          .copyWith(fontSize: 12, color: ColorsManager.grayColor),
-                                              fontSize: 12,
+                                      contentPadding:
-                                              color: ColorsManager.grayColor),
+                                          const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
-                                      contentPadding: const EdgeInsets.symmetric(
-                                          horizontal: 12, vertical: 10),
                                       border: InputBorder.none,
                                     ),
                                     onTapOutside: (_) {
@@ -126,11 +121,9 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   width: 200,
                                   child: Center(
                                     child: DefaultButton(
-                                      onPressed: state.isAutomation ||
+                                      onPressed: state.isAutomation || state.isTabToRun
-                                              state.isTabToRun
                                           ? () async {
-                                              final result = await SettingHelper
+                                              final result = await SettingHelper.showSettingDialog(
-                                                  .showSettingDialog(
                                                 context: context,
                                                 iconId: state.selectedIcon ?? '',
                                               );
@@ -193,12 +186,10 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                             child: Center(
                               child: DefaultButton(
                                 onPressed: () async {
-                                  if (state.routineName == null ||
+                                  if (state.routineName == null || state.routineName!.isEmpty) {
-                                      state.routineName!.isEmpty) {
                                     ScaffoldMessenger.of(context).showSnackBar(
                                       SnackBar(
-                                        content: const Text(
+                                        content: const Text('Please enter the routine name'),
-                                            'Please enter the routine name'),
                                         duration: const Duration(seconds: 2),
                                         backgroundColor: ColorsManager.red,
                                         action: SnackBarAction(
@@ -212,12 +203,10 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                     return;
                                   }
 
-                                  if (state.ifItems.isEmpty ||
+                                  if (state.ifItems.isEmpty || state.thenItems.isEmpty) {
-                                      state.thenItems.isEmpty) {
                                     ScaffoldMessenger.of(context).showSnackBar(
                                       SnackBar(
-                                        content: const Text(
+                                        content: const Text('Please add if and then condition'),
-                                            'Please add if and then condition'),
                                         duration: const Duration(seconds: 2),
                                         backgroundColor: ColorsManager.red,
                                         action: SnackBarAction(
@@ -232,8 +221,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   }
                                   // final result =
                                   // await
-                                  BlocProvider.of<RoutineBloc>(context)
+                                  BlocProvider.of<RoutineBloc>(context).add(ResetErrorMessage());
-                                      .add(ResetErrorMessage());
                                   SaveRoutineHelper.showSaveRoutineDialog(context);
                                   // if (result != null && result) {
                                   //   BlocProvider.of<RoutineBloc>(context).add(
@@ -252,7 +240,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                                   textAlign: TextAlign.center,
                                   style: TextStyle(
                                     fontSize: 12,
-                                    color: ColorsManager.white,
+                                    color: ColorsManager.whiteColors,
                                   ),
                                 ),
                               ),
@@ -273,14 +261,10 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                           child: DefaultButton(
                             onPressed: state.isAutomation || state.isTabToRun
                                 ? () async {
-                                    final result =
+                                    final result = await SettingHelper.showSettingDialog(
-                                        await SettingHelper.showSettingDialog(
+                                        context: context, iconId: state.selectedIcon ?? '');
-                                            context: context,
-                                            iconId: state.selectedIcon ?? '');
                                     if (result != null) {
-                                      context
+                                      context.read<RoutineBloc>().add(AddSelectedIcon(result));
-                                          .read<RoutineBloc>()
-                                          .add(AddSelectedIcon(result));
                                     }
                                   }
                                 : null,
@@ -330,12 +314,10 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                         child: Center(
                           child: DefaultButton(
                             onPressed: () async {
-                              if (state.routineName == null ||
+                              if (state.routineName == null || state.routineName!.isEmpty) {
-                                  state.routineName!.isEmpty) {
                                 ScaffoldMessenger.of(context).showSnackBar(
                                   SnackBar(
-                                    content:
+                                    content: const Text('Please enter the routine name'),
-                                        const Text('Please enter the routine name'),
                                     duration: const Duration(seconds: 2),
                                     backgroundColor: ColorsManager.red,
                                     action: SnackBarAction(
@@ -352,8 +334,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                               if (state.ifItems.isEmpty || state.thenItems.isEmpty) {
                                 ScaffoldMessenger.of(context).showSnackBar(
                                   SnackBar(
-                                    content: const Text(
+                                    content: const Text('Please add if and then condition'),
-                                        'Please add if and then condition'),
                                     duration: const Duration(seconds: 2),
                                     backgroundColor: ColorsManager.red,
                                     action: SnackBarAction(
@@ -368,8 +349,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                               }
                               // final result =
                               // await
-                              BlocProvider.of<RoutineBloc>(context)
+                              BlocProvider.of<RoutineBloc>(context).add(ResetErrorMessage());
-                                  .add(ResetErrorMessage());
                               SaveRoutineHelper.showSaveRoutineDialog(context);
                               // if (result != null && result) {
                               //   BlocProvider.of<RoutineBloc>(context).add(
@@ -388,7 +368,7 @@ class _RoutineSearchAndButtonsState extends State<RoutineSearchAndButtons> {
                               textAlign: TextAlign.center,
                               style: TextStyle(
                                 fontSize: 12,
-                                color: ColorsManager.white,
+                                color: ColorsManager.whiteColors,
                               ),
                             ),
                           ),

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.opaquePrimary.withOpacity(0.1),
+        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
         borderRadius: BorderRadius.circular(10),
       ),
       child: Text(
         '$label $unit ',
         style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.opaquePrimary,
+          color: ColorsManager.primaryColorWithOpacity,
         ),
       ),
     );

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

@@ -1,29 +1,12 @@
 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: (_) => CreateCommunityDialog(
+        builder: (_) => const 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.white,
+          color: ColorsManager.whiteColors,
           borderRadius: BorderRadius.circular(20),
           boxShadow: [
             BoxShadow(
@@ -110,7 +110,7 @@ class _CommunityDialogState extends State<CommunityDialog> {
           }
         },
         borderRadius: 10,
-        foregroundColor: ColorsManager.white,
+        foregroundColor: ColorsManager.whiteColors,
         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.white,
+        color: ColorsManager.whiteColors,
         boxShadow: [
           BoxShadow(
             color: ColorsManager.shadowBlackColor.withValues(alpha: 0.1),

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

@@ -23,55 +23,62 @@ class _CreateSpaceButtonState extends State<CreateSpaceButton> {
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return Tooltip(
-      onTap: () => SpaceDetailsDialogHelper.showCreate(
+      margin: const EdgeInsets.symmetric(vertical: 24),
-        context,
+      message: 'Create a new space',
-        communityUuid: widget.community.uuid,
+      child: InkWell(
-        onSuccess: (updatedSpaceModel) {
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
-          final newCommunity = widget.community.copyWith(
+          context,
-            spaces: [...widget.community.spaces, updatedSpaceModel],
+          communityUuid: widget.community.uuid,
-          );
+          onSuccess: (updatedSpaceModel) {
-          context.read<CommunitiesBloc>().add(
+            final newCommunity = widget.community.copyWith(
-                CommunitiesUpdateCommunity(newCommunity),
+              spaces: [...widget.community.spaces, updatedSpaceModel],
-              );
+            );
-          context.read<CommunitiesTreeSelectionBloc>().add(
+            context.read<CommunitiesBloc>().add(
-                SelectSpaceEvent(
+                  CommunitiesUpdateCommunity(newCommunity),
-                  space: updatedSpaceModel,
+                );
-                  community: newCommunity,
+            context.read<CommunitiesTreeSelectionBloc>().add(
-                ),
+                  SelectSpaceEvent(
-              );
+                    space: updatedSpaceModel,
-        },
+                    community: newCommunity,
-      ),
+                  ),
-      child: MouseRegion(
+                );
-        onEnter: (_) => setState(() => _isHovered = true),
+          },
-        onExit: (_) => setState(() => _isHovered = false),
+        ),
-        child: AnimatedOpacity(
+        child: MouseRegion(
-          duration: const Duration(milliseconds: 100),
+          onEnter: (_) => setState(() => _isHovered = true),
-          opacity: _isHovered ? 1.0 : 0.45,
+          onExit: (_) => setState(() => _isHovered = false),
-          child: Container(
+          child: AnimatedOpacity(
-            width: 150,
+            duration: const Duration(milliseconds: 100),
-            height: 90,
+            opacity: _isHovered ? 1.0 : 0.45,
-            decoration: BoxDecoration(
-              color: Colors.white,
-              borderRadius: BorderRadius.circular(20),
-              boxShadow: [
-                BoxShadow(
-                  color: Colors.grey.withValues(alpha: 0.8),
-                  spreadRadius: 3,
-                  blurRadius: 8,
-                  offset: const Offset(0, 4),
-                ),
-              ],
-            ),
             child: Container(
-              margin: const EdgeInsets.symmetric(vertical: 20),
+              width: 150,
+              height: 90,
               decoration: BoxDecoration(
-                border: Border.all(color: ColorsManager.borderColor, width: 2),
+                color: Colors.white,
-                color: ColorsManager.boxColor,
+                borderRadius: BorderRadius.circular(20),
-                shape: BoxShape.circle,
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.grey.withValues(alpha: 0.2),
+                    spreadRadius: 3,
+                    blurRadius: 8,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
               ),
-              child: const Center(
+              child: Container(
-                child: Icon(Icons.add, color: ColorsManager.vividBlue),
+                margin: const EdgeInsets.symmetric(vertical: 20),
+                decoration: BoxDecoration(
+                  border: Border.all(color: ColorsManager.borderColor, width: 2),
+                  color: ColorsManager.boxColor,
+                  shape: BoxShape.circle,
+                ),
+                child: const Center(
+                  child: Icon(
+                    Icons.add,
+                    color: Colors.blue,
+                  ),
+                ),
               ),
             ),
           ),

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

@@ -16,7 +16,7 @@ class PlusButtonWidget extends StatelessWidget {
       style: IconButton.styleFrom(backgroundColor: ColorsManager.spaceColor),
       icon: const Icon(
         Icons.add,
-        color: ColorsManager.white,
+        color: ColorsManager.whiteColors,
         size: 20,
       ),
     );