progress towards matching the design of save routine dialog.

lib/pages/routines/helper/save_routine_helper.dart

@@ -6,7 +6,6 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
-import 'package:syncrow_web/pages/routines/widgets/dialog_header.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';
@@ -18,6 +17,10 @@ class SaveRoutineHelper {
       builder: (BuildContext context) {
         return BlocBuilder<RoutineBloc, RoutineState>(
           builder: (context, state) {
+            final selectedConditionLabel = state.selectedAutomationOperator == 'and'
+                ? 'All Conditions are met'
+                : 'Any Condition is met';
+
             return AlertDialog(
               contentPadding: EdgeInsets.zero,
               content: Container(
@@ -29,22 +32,35 @@ class SaveRoutineHelper {
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    DialogHeader('Create a scene: ${state.routineName ?? ""}'),
+                    const SizedBox(height: 18),
+                    Text(
+                      'Create a scene: ${state.routineName ?? ""}',
+                      textAlign: TextAlign.center,
+                      style: Theme.of(context).textTheme.headlineMedium!.copyWith(
+                            color: ColorsManager.primaryColorWithOpacity,
+                            fontWeight: FontWeight.bold,
+                          ),
+                    ),
+                    const SizedBox(height: 18),
+                    _buildDivider(),
+                    _buildListsLabelRow(selectedConditionLabel),
                     Padding(
-                      padding: const EdgeInsets.symmetric(
+                      padding: const EdgeInsetsDirectional.symmetric(
                         horizontal: 16,
-                        vertical: 8,
                       ),
                       child: Row(
                         crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisSize: MainAxisSize.min,
                         children: [
                           _buildIfConditions(state, context),
-                          const SizedBox(width: 16),
                           _buildThenActions(state, context),
                         ],
                       ),
                     ),
+                    _buildDivider(),
+                    const SizedBox(height: 8),
                     _buildDialogFooter(context, state),
+                    const SizedBox(height: 8),
                   ],
                 ),
               ),
@@ -55,63 +71,82 @@ class SaveRoutineHelper {
     );
   }
 
-  static DialogFooter _buildDialogFooter(BuildContext context, RoutineState state) {
-    return DialogFooter(
-      onCancel: () => Navigator.pop(context),
-      onConfirm: () {
-        if (state.isAutomation) {
-          if (state.isUpdate ?? false) {
-            context.read<RoutineBloc>().add(const UpdateAutomation());
-          } else {
-            context.read<RoutineBloc>().add(const CreateAutomationEvent());
-          }
-        } else {
-          if (state.isUpdate ?? false) {
-            context.read<RoutineBloc>().add(const UpdateScene());
-          } else {
-            context.read<RoutineBloc>().add(const CreateSceneEvent());
-          }
-        }
-
-        Navigator.pop(context);
-      },
-      isConfirmEnabled: true,
+  static Container _buildDivider() {
+    return Container(
+      height: 1,
+      width: double.infinity,
+      color: ColorsManager.greyColor,
     );
   }
 
-  static Expanded _buildThenActions(RoutineState state, BuildContext context) {
-    return Expanded(
-      child: ListView(
-        shrinkWrap: true,
+  static Widget _buildListsLabelRow(String selectedConditionLabel) {
+    const textStyle = TextStyle(
+      fontSize: 16,
+    );
+    return Container(
+      color: ColorsManager.backgroundColor.withValues(alpha: 0.5),
+      padding: const EdgeInsetsDirectional.all(20),
+      child: Row(
+        spacing: 16,
         children: [
-          const Text(
-            'THEN:',
-            style: TextStyle(
-              fontSize: 16,
-            ),
-          ),
-          const SizedBox(height: 8),
-          ...state.thenItems.map((item) {
-            final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
-            return functionRow(item, context, functions);
-          }),
+          Expanded(child: Text('IF: $selectedConditionLabel', style: textStyle)),
+          const Expanded(child: Text('THEN:', style: textStyle)),
         ],
       ),
     );
   }
 
-  static Expanded _buildIfConditions(RoutineState state, BuildContext context) {
+  static Widget _buildDialogFooter(BuildContext context, RoutineState state) {
+    return Row(
+      spacing: 16,
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: [
+        DialogFooterButton(
+          text: 'Cancel',
+          onTap: () => Navigator.pop(context),
+        ),
+        DialogFooterButton(
+          text: 'Confirm',
+          onTap: () {
+            if (state.isAutomation) {
+              if (state.isUpdate ?? false) {
+                context.read<RoutineBloc>().add(const UpdateAutomation());
+              } else {
+                context.read<RoutineBloc>().add(const CreateAutomationEvent());
+              }
+            } else {
+              if (state.isUpdate ?? false) {
+                context.read<RoutineBloc>().add(const UpdateScene());
+              } else {
+                context.read<RoutineBloc>().add(const CreateSceneEvent());
+              }
+            }
+
+            Navigator.pop(context);
+          },
+          textColor: ColorsManager.primaryColorWithOpacity,
+        ),
+      ],
+    );
+  }
+
+  static Widget _buildThenActions(RoutineState state, BuildContext context) {
+    return Expanded(
+      child: ListView(
+        shrinkWrap: true,
+        children: state.thenItems.map((item) {
+          final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
+          return functionRow(item, context, functions);
+        }).toList(),
+      ),
+    );
+  }
+
+  static Widget _buildIfConditions(RoutineState state, BuildContext context) {
     return Expanded(
       child: ListView(
         shrinkWrap: true,
         children: [
-          const Text(
-            'IF:',
-            style: TextStyle(
-              fontSize: 16,
-            ),
-          ),
-          const SizedBox(height: 8),
           if (state.isTabToRun)
             ListTile(
               leading: SvgPicture.asset(

lib/pages/routines/widgets/dialog_footer.dart

@@ -28,32 +28,40 @@ class DialogFooter extends StatelessWidget {
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
-          _buildFooterButton(
-            context: context,
+          DialogFooterButton(
             text: 'Cancel',
             onTap: onCancel,
           ),
           if (isConfirmEnabled) ...[
             Container(width: 1, height: 50, color: ColorsManager.greyColor),
-            _buildFooterButton(
-              context: context,
+            DialogFooterButton(
               text: 'Confirm',
               onTap: onConfirm,
-              textColor:
-                  isConfirmEnabled ? ColorsManager.primaryColorWithOpacity : Colors.red,
+              textColor: isConfirmEnabled
+                  ? ColorsManager.primaryColorWithOpacity
+                  : Colors.red,
             ),
           ],
         ],
       ),
     );
   }
+}
 
-  Widget _buildFooterButton({
-    required BuildContext context,
-    required String text,
-    required VoidCallback? onTap,
-    Color? textColor,
-  }) {
+class DialogFooterButton extends StatelessWidget {
+  const DialogFooterButton({
+    required this.text,
+    required this.onTap,
+    this.textColor,
+    super.key,
+  });
+
+  final String text;
+  final VoidCallback? onTap;
+  final Color? textColor;
+
+  @override
+  Widget build(BuildContext context) {
     return Expanded(
       child: TextButton(
         style: TextButton.styleFrom(

lib/pages/routines/widgets/dialog_header.dart

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