add tow gang and change gang device ui

assets/icons/cancel_icon.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7302_4118)">
+<path d="M11.1049 10.0001L19.7712 1.33381C20.0763 1.02869 20.0763 0.534007 19.7712 0.228929C19.4661 -0.0761485 18.9714 -0.0761876 18.6663 0.228929L9.99999 8.89524L1.33372 0.228929C1.0286 -0.0761876 0.533915 -0.0761876 0.228837 0.228929C-0.0762401 0.534046 -0.0762792 1.02873 0.228837 1.33381L8.89511 10.0001L0.228837 18.6664C-0.0762792 18.9715 -0.0762792 19.4662 0.228837 19.7713C0.381376 19.9238 0.581337 20.0001 0.781297 20.0001C0.981258 20.0001 1.18118 19.9238 1.33376 19.7713L9.99999 11.105L18.6663 19.7713C18.8188 19.9238 19.0188 20.0001 19.2187 20.0001C19.4187 20.0001 19.6186 19.9238 19.7712 19.7713C20.0763 19.4662 20.0763 18.9715 19.7712 18.6664L11.1049 10.0001Z" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_7302_4118">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/save_routines_icon.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7302_4149)">
+<path d="M19.9969 4.94279C19.986 4.83232 19.943 4.72146 19.8674 4.62924C19.8382 4.59358 20.1367 4.89431 15.4141 0.17176C15.3015 0.0591838 15.1487 8.30277e-05 14.9996 0.00012209C14.6443 0.00012209 2.11177 0.00012209 1.75779 0.00012209C0.788544 0.00012209 0 0.788666 0 1.75791V18.2421C0 19.2113 0.788544 19.9998 1.75779 19.9998H18.2419C19.2112 19.9998 19.9997 19.2113 19.9997 18.2421C19.9998 4.01624 20.0013 4.98771 19.9969 4.94279ZM13.4764 1.17198V5.00005C13.4764 5.32314 13.2136 5.58598 12.8905 5.58598H12.1483V1.17198H13.4764ZM10.9765 1.17198V5.58598H5.54684C5.22376 5.58598 4.96091 5.32314 4.96091 5.00005V1.17198H10.9765ZM13.4764 12.539H4.96091V11.7968C4.96091 11.4738 5.22376 11.2109 5.54684 11.2109H12.8905C13.2136 11.2109 13.4764 11.4738 13.4764 11.7968V12.539ZM4.96091 18.828V13.7109H13.4764V18.828H4.96091ZM18.8279 18.2421C18.8279 18.5651 18.5651 18.828 18.242 18.828H14.6483C14.6483 18.0641 14.6483 12.6676 14.6483 11.7968C14.6483 10.8276 13.8597 10.039 12.8905 10.039H5.54684C4.57759 10.039 3.78905 10.8276 3.78905 11.7968V18.828H1.75783C1.43475 18.828 1.1719 18.5651 1.1719 18.2421V1.75791C1.1719 1.43483 1.43475 1.17198 1.75783 1.17198H3.78905V5.00005C3.78905 5.9693 4.57759 6.75784 5.54684 6.75784H12.8905C13.8597 6.75784 14.6483 5.9693 14.6483 5.00005V1.17198H14.7571L18.8279 5.24278V18.2421Z" fill="#023DFE" fill-opacity="0.6"/>
+</g>
+<defs>
+<clipPath id="clip0_7302_4149">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

lib/features/devices/bloc/device_manager_bloc/device_manager_bloc.dart

@@ -178,6 +178,7 @@ class DeviceManagerBloc extends Bloc<DeviceManagerEvent, DeviceManagerState> {
       DeviceType.CeilingSensor,
       DeviceType.ThreeGang,
       DeviceType.OneGang,
+      DeviceType.TwoGang
     };
 
     return devices

lib/features/scene/helper/functions_per_device/three_gang_functions.dart

@@ -10,7 +10,7 @@ class ThreeGangHelperFunctions {
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsAcPower,
-        operationName: 'Light 1 Switch',
+        operationName: 'L - Light Switch',
         code: 'switch_1',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.onOff,
@@ -21,11 +21,23 @@ class ThreeGangHelperFunctions {
               icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
         ],
       ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsLightCountdown,
+        operationName: 'L - Light Countdown',
+        code: 'countdown_1',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.countdown,
+        operationalValues: [
+          SceneOperationalValue(icon: '', value: 0),
+        ],
+      ),
       SceneStaticFunction(
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsAcPower,
-        operationName: 'Light 2 Switch',
+        operationName: 'M - Light Switch',
         code: 'switch_2',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.onOff,
@@ -36,11 +48,23 @@ class ThreeGangHelperFunctions {
               icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
         ],
       ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsLightCountdown,
+        operationName: 'M - Light Countdown',
+        code: 'countdown_2',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.countdown,
+        operationalValues: [
+          SceneOperationalValue(icon: '', value: 0),
+        ],
+      ),
       SceneStaticFunction(
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsAcPower,
-        operationName: 'Light 3 Switch',
+        operationName: 'R - Light Switch',
         code: 'switch_3',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.onOff,
@@ -55,31 +79,7 @@ class ThreeGangHelperFunctions {
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsLightCountdown,
-        operationName: 'Light 1 CountDown',
+        operationName: 'R - Light Countdown',
-        code: 'countdown_1',
-        functionValue: functionValue,
-        operationDialogType: OperationDialogType.countdown,
-        operationalValues: [
-          SceneOperationalValue(icon: '', value: 0),
-        ],
-      ),
-      SceneStaticFunction(
-        deviceId: deviceId,
-        deviceName: deviceName,
-        icon: Assets.assetsLightCountdown,
-        operationName: 'Light 2 CountDown',
-        code: 'countdown_2',
-        functionValue: functionValue,
-        operationDialogType: OperationDialogType.countdown,
-        operationalValues: [
-          SceneOperationalValue(icon: '', value: 0),
-        ],
-      ),
-      SceneStaticFunction(
-        deviceId: deviceId,
-        deviceName: deviceName,
-        icon: Assets.assetsLightCountdown,
-        operationName: 'Light 3 CountDown',
         code: 'countdown_3',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.countdown,
@@ -97,7 +97,7 @@ class ThreeGangHelperFunctions {
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsAcPower,
-        operationName: 'Light 1 Switch',
+        operationName: 'L - Light Switch',
         code: 'switch_1',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.onOff,
@@ -108,41 +108,11 @@ class ThreeGangHelperFunctions {
               icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
         ],
       ),
-      SceneStaticFunction(
-        deviceId: deviceId,
-        deviceName: deviceName,
-        icon: Assets.assetsAcPower,
-        operationName: 'Light 2 Switch',
-        code: 'switch_2',
-        functionValue: functionValue,
-        operationDialogType: OperationDialogType.onOff,
-        operationalValues: [
-          SceneOperationalValue(
-              icon: Assets.assetsAcPower, description: "ON", value: true),
-          SceneOperationalValue(
-              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
-        ],
-      ),
-      SceneStaticFunction(
-        deviceId: deviceId,
-        deviceName: deviceName,
-        icon: Assets.assetsAcPower,
-        operationName: 'Light 3 Switch',
-        code: 'switch_3',
-        functionValue: functionValue,
-        operationDialogType: OperationDialogType.onOff,
-        operationalValues: [
-          SceneOperationalValue(
-              icon: Assets.assetsAcPower, description: "ON", value: true),
-          SceneOperationalValue(
-              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
-        ],
-      ),
       SceneStaticFunction(
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsLightCountdown,
-        operationName: 'Light 1 CountDown',
+        operationName: 'L - Light Countdown',
         code: 'countdown_1',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.integerSteps,
@@ -157,11 +127,26 @@ class ThreeGangHelperFunctions {
           ),
         ],
       ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsAcPower,
+        operationName: 'M - Light Switch',
+        code: 'switch_2',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.onOff,
+        operationalValues: [
+          SceneOperationalValue(
+              icon: Assets.assetsAcPower, description: "ON", value: true),
+          SceneOperationalValue(
+              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
+        ],
+      ),
       SceneStaticFunction(
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsLightCountdown,
-        operationName: 'Light 2 CountDown',
+        operationName: 'M - Light Countdown',
         code: 'countdown_2',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.integerSteps,
@@ -176,11 +161,26 @@ class ThreeGangHelperFunctions {
           ),
         ],
       ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsAcPower,
+        operationName: 'R - Light Switch',
+        code: 'switch_3',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.onOff,
+        operationalValues: [
+          SceneOperationalValue(
+              icon: Assets.assetsAcPower, description: "ON", value: true),
+          SceneOperationalValue(
+              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
+        ],
+      ),
       SceneStaticFunction(
         deviceId: deviceId,
         deviceName: deviceName,
         icon: Assets.assetsLightCountdown,
-        operationName: 'Light 3 CountDown',
+        operationName: 'R - Light Countdown',
         code: 'countdown_3',
         functionValue: functionValue,
         operationDialogType: OperationDialogType.integerSteps,

lib/features/scene/helper/functions_per_device/tow_gang_helper_functions.dart

@@ -0,0 +1,139 @@
+import 'package:syncrow_app/features/scene/enum/operation_dialog_type.dart';
+import 'package:syncrow_app/features/scene/model/scene_static_function.dart';
+import 'package:syncrow_app/generated/assets.dart';
+
+class TowGangHelperFunctions {
+  static List<SceneStaticFunction> towGangHelperFunctions(
+      String deviceId, String deviceName, functionValue) {
+    return [
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsAcPower,
+        operationName: 'L - Light Switch',
+        code: 'switch_1',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.onOff,
+        operationalValues: [
+          SceneOperationalValue(
+              icon: Assets.assetsAcPower, description: "ON", value: true),
+          SceneOperationalValue(
+              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
+        ],
+      ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsLightCountdown,
+        operationName: 'L - Light CountDown',
+        code: 'countdown_1',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.countdown,
+        operationalValues: [
+          SceneOperationalValue(icon: '', value: 0),
+        ],
+      ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsAcPower,
+        operationName: 'R - Light Switch',
+        code: 'switch_2',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.onOff,
+        operationalValues: [
+          SceneOperationalValue(
+              icon: Assets.assetsAcPower, description: "ON", value: true),
+          SceneOperationalValue(
+              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
+        ],
+      ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsLightCountdown,
+        operationName: 'R - Light CountDown',
+        code: 'countdown_2',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.countdown,
+        operationalValues: [
+          SceneOperationalValue(icon: '', value: 0),
+        ],
+      ),
+    ];
+  }
+
+  static List<SceneStaticFunction> towGangAutomationFunctions(
+      String deviceId, String deviceName, functionValue) {
+    return [
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsAcPower,
+        operationName: 'L - Light Switch',
+        code: 'switch_1',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.onOff,
+        operationalValues: [
+          SceneOperationalValue(
+              icon: Assets.assetsAcPower, description: "ON", value: true),
+          SceneOperationalValue(
+              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
+        ],
+      ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsLightCountdown,
+        operationName: 'R - Light CountDown',
+        code: 'countdown_1',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.integerSteps,
+        operationalValues: [
+          SceneOperationalValue(
+            icon: '',
+            description: "sec",
+            value: 0.0,
+            minValue: 0,
+            maxValue: 43200,
+            stepValue: 1,
+          ),
+        ],
+      ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsAcPower,
+        operationName: 'R - Light Switch',
+        code: 'switch_2',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.onOff,
+        operationalValues: [
+          SceneOperationalValue(
+              icon: Assets.assetsAcPower, description: "ON", value: true),
+          SceneOperationalValue(
+              icon: Assets.assetsAcPowerOFF, description: "OFF", value: false),
+        ],
+      ),
+      SceneStaticFunction(
+        deviceId: deviceId,
+        deviceName: deviceName,
+        icon: Assets.assetsLightCountdown,
+        operationName: 'R - Light CountDown',
+        code: 'countdown_2',
+        functionValue: functionValue,
+        operationDialogType: OperationDialogType.integerSteps,
+        operationalValues: [
+          SceneOperationalValue(
+            icon: '',
+            description: "sec",
+            value: 0.0,
+            minValue: 0,
+            maxValue: 43200,
+            stepValue: 1,
+          ),
+        ],
+      ),
+    ];
+  }
+}

lib/features/scene/helper/scene_operations_data_helper.dart

@@ -9,6 +9,7 @@ import 'package:syncrow_app/features/scene/helper/functions_per_device/human_pre
 import 'package:syncrow_app/features/scene/helper/functions_per_device/one_gang_functions.dart';
 import 'package:syncrow_app/features/scene/helper/functions_per_device/presence_sensor.dart';
 import 'package:syncrow_app/features/scene/helper/functions_per_device/three_gang_functions.dart';
+import 'package:syncrow_app/features/scene/helper/functions_per_device/tow_gang_helper_functions.dart';
 import 'package:syncrow_app/features/scene/model/scene_details_model.dart';
 import 'package:syncrow_app/features/scene/model/scene_static_function.dart';
 import 'package:syncrow_app/generated/assets.dart';
@@ -27,6 +28,7 @@ mixin SceneOperationsDataHelper {
     DeviceType.ThreeGang: threeGangFunctions,
     DeviceType.Gateway: gatewayFunctions,
     DeviceType.OneGang: oneGangFunctions,
+    DeviceType.TwoGang: towGangFunctions,
   };
 
   final Map<DeviceType, String> _titleMap = {
@@ -39,8 +41,8 @@ mixin SceneOperationsDataHelper {
     DeviceType.ThreeGang: '3G Light Switch Functions',
     DeviceType.Gateway: 'Gateway Functions',
     DeviceType.OneGang: '1G Light Switch Conditions',
+    DeviceType.TwoGang: '2G Light Switch Conditions',
   };
-  static String _productTypeCache = '';
 
   //one gang functions
   static List<SceneStaticFunction> oneGangFunctions(
@@ -57,6 +59,20 @@ mixin SceneOperationsDataHelper {
         deviceId, deviceName, functionValue);
   }
 
+  static List<SceneStaticFunction> towGangFunctions(
+      List<FunctionModel> functions,
+      String deviceId,
+      String deviceName,
+      dynamic functionValue,
+      bool isAutomation) {
+    if (isAutomation) {
+      return TowGangHelperFunctions.towGangAutomationFunctions(
+          deviceId, deviceName, functionValue);
+    }
+    return TowGangHelperFunctions.towGangHelperFunctions(
+        deviceId, deviceName, functionValue);
+  }
+
   List<SceneStaticFunction> getFunctionsWithIcons({
     DeviceType? type,
     required List<FunctionModel> functions,
@@ -830,6 +846,18 @@ mixin SceneOperationsDataHelper {
           comparator,
           uniqueCustomId,
         );
+      case "2G":
+        return _createSceneFunction(
+          action,
+          '2 Gang Button Switch L-L',
+          Assets.twoGang,
+          'Light 1 Switch',
+          OperationDialogType.onOff,
+          _createOnOffOptions(),
+          isAutomation,
+          comparator,
+          uniqueCustomId,
+        );
       default:
         return _createSceneFunction(
           action,
@@ -847,17 +875,44 @@ mixin SceneOperationsDataHelper {
 
   SceneStaticFunction _createSwitch2Function(Action action, bool isAutomation,
       String? comparator, String? uniqueCustomId) {
-    return _createSceneFunction(
+    switch (action.productType) {
-      action,
+      case "3G":
-      '3 Gang Button Switch L-L',
+        return _createSceneFunction(
-      Assets.assetsIcons3GangSwitch,
+          action,
-      'Light 2 Switch',
+          '3 Gang Button Switch L-L',
-      OperationDialogType.onOff,
+          Assets.assetsIcons3GangSwitch,
-      _createOnOffOptions(),
+          'Light 2 Switch',
-      isAutomation,
+          OperationDialogType.onOff,
-      comparator,
+          _createOnOffOptions(),
-      uniqueCustomId,
+          isAutomation,
-    );
+          comparator,
+          uniqueCustomId,
+        );
+      case "2G":
+        return _createSceneFunction(
+          action,
+          '2 Gang Button Switch L-L',
+          Assets.twoGang,
+          'Light 2 Switch',
+          OperationDialogType.onOff,
+          _createOnOffOptions(),
+          isAutomation,
+          comparator,
+          uniqueCustomId,
+        );
+      default:
+        return _createSceneFunction(
+          action,
+          '1 Gang Button Switch L-L',
+          Assets.oneGang,
+          'Light Switch',
+          OperationDialogType.onOff,
+          _createOnOffOptions(),
+          isAutomation,
+          comparator,
+          uniqueCustomId,
+        );
+    }
   }
 
   SceneStaticFunction _createSwitch3Function(Action action, bool isAutomation,
@@ -894,6 +949,22 @@ mixin SceneOperationsDataHelper {
           comparator,
           uniqueCustomId,
         );
+      case "2G":
+        return _createSceneFunction(
+          action,
+          '2 Gang Button Switch L-L',
+          Assets.twoGang,
+          'Light 1 CountDown',
+          isAutomation
+              ? OperationDialogType.integerSteps
+              : OperationDialogType.countdown,
+          isAutomation
+              ? _createAutomationCountDownOptions()
+              : _createCountdownOptions(),
+          isAutomation,
+          comparator,
+          uniqueCustomId,
+        );
       default:
         return _createSceneFunction(
           action,
@@ -915,21 +986,56 @@ mixin SceneOperationsDataHelper {
 
   SceneStaticFunction _createCountdown2Function(Action action,
       bool isAutomation, String? comparator, String? uniqueCustomId) {
-    return _createSceneFunction(
+    switch (action.productType) {
-      action,
+      case "3G":
-      '3 Gang Button Switch L-L',
+        return _createSceneFunction(
-      Assets.assetsIcons3GangSwitch,
+          action,
-      'Light 2 CountDown',
+          '3 Gang Button Switch L-L',
-      isAutomation
+          Assets.assetsIcons3GangSwitch,
-          ? OperationDialogType.integerSteps
+          'Light 2 CountDown',
-          : OperationDialogType.countdown,
+          isAutomation
-      isAutomation
+              ? OperationDialogType.integerSteps
-          ? _createAutomationCountDownOptions()
+              : OperationDialogType.countdown,
-          : _createCountdownOptions(),
+          isAutomation
-      isAutomation,
+              ? _createAutomationCountDownOptions()
-      comparator,
+              : _createCountdownOptions(),
-      uniqueCustomId,
+          isAutomation,
-    );
+          comparator,
+          uniqueCustomId,
+        );
+      case "2G":
+        return _createSceneFunction(
+          action,
+          '2 Gang Button Switch L-L',
+          Assets.twoGang,
+          'Light 2 CountDown',
+          isAutomation
+              ? OperationDialogType.integerSteps
+              : OperationDialogType.countdown,
+          isAutomation
+              ? _createAutomationCountDownOptions()
+              : _createCountdownOptions(),
+          isAutomation,
+          comparator,
+          uniqueCustomId,
+        );
+      default:
+        return _createSceneFunction(
+          action,
+          '1 Gang Button Switch L-L',
+          Assets.oneGang,
+          'Light CountDown',
+          isAutomation
+              ? OperationDialogType.integerSteps
+              : OperationDialogType.countdown,
+          isAutomation
+              ? _createAutomationCountDownOptions()
+              : _createCountdownOptions(),
+          isAutomation,
+          comparator,
+          uniqueCustomId,
+        );
+    }
   }
 
   SceneStaticFunction _createCountdown3Function(Action action,

lib/features/scene/view/device_functions_view.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_app/features/devices/model/device_control_model.dart';
 import 'package:syncrow_app/features/devices/model/device_model.dart';
 import 'package:syncrow_app/features/scene/bloc/create_scene/create_scene_bloc.dart';
@@ -12,6 +13,7 @@ import 'package:syncrow_app/features/shared_widgets/default_container.dart';
 import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
 import 'package:syncrow_app/features/shared_widgets/light_divider.dart';
 import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
+import 'package:syncrow_app/generated/assets.dart';
 import 'package:syncrow_app/navigation/navigate_to_route.dart';
 import 'package:syncrow_app/navigation/routing_constants.dart';
 import 'package:syncrow_app/utils/context_extension.dart';
@@ -51,22 +53,14 @@ class DeviceFunctionsView extends StatelessWidget
                 .add(AddTaskEvent(isAutomation: isAutomation));
             navigateToRoute(context, Routes.sceneTasksRoute);
           },
-          child: BodyMedium(
+          child: SvgPicture.asset(Assets.saveRoutinesIcon),
-            text: 'Save',
-            fontWeight: FontWeight.normal,
-            fontColor: ColorsManager.secondaryColor.withOpacity(0.6),
-          ),
         ),
       ],
       leading: TextButton(
         onPressed: () {
           _cancelOperation(context, device, isAutomation);
         },
-        child: BodyMedium(
+        child: SvgPicture.asset(Assets.cancelIcon),
-          text: 'Cancel',
-          fontWeight: FontWeight.normal,
-          fontColor: ColorsManager.textPrimaryColor.withOpacity(0.6),
-        ),
       ),
       leadingWidth: 80,
       padding: EdgeInsets.zero,
@@ -75,65 +69,63 @@ class DeviceFunctionsView extends StatelessWidget
         itemCount: functions.length,
         padding: const EdgeInsets.only(top: 24.0),
         itemBuilder: (context, index) {
-          return DefaultContainer(
+          final bool isFirstInPair = index % 2 == 0;
-            padding: index == 0
+          final bool isLastInPair =
-                ? const EdgeInsets.only(top: 8)
+              index % 2 == 1 || index == functions.length - 1;
-                : index == functions.length - 1
+          final bool isLastItem = index == functions.length - 1;
-                    ? const EdgeInsets.only(bottom: 8)
+
-                    : EdgeInsets.zero,
+          return Column(
-            margin: EdgeInsets.zero,
+            mainAxisSize: MainAxisSize.min,
-            borderRadius: index == 0
+            children: [
-                ? const BorderRadius.only(
+              if (isFirstInPair && index != 0) const SizedBox(height: 16),
-                    topLeft: Radius.circular(20), topRight: Radius.circular(20))
+              DefaultContainer(
-                : index == functions.length - 1
+                padding: EdgeInsets.only(
-                    ? const BorderRadius.only(
+                  top: isFirstInPair ? 8 : 0,
-                        bottomLeft: Radius.circular(20),
+                  bottom: isLastInPair ? 8 : 0,
-                        bottomRight: Radius.circular(20))
+                ),
-                    : BorderRadius.zero,
+                margin: EdgeInsets.zero,
-            child: Column(
+                borderRadius: BorderRadius.only(
-              mainAxisSize: MainAxisSize.min,
+                  topLeft: Radius.circular(isFirstInPair ? 20 : 0),
-              children: [
+                  topRight: Radius.circular(isFirstInPair ? 20 : 0),
-                BlocBuilder<CreateSceneBloc, CreateSceneState>(
+                  bottomLeft: Radius.circular(isLastInPair ? 20 : 0),
-                  builder: (context, state) {
+                  bottomRight: Radius.circular(isLastInPair ? 20 : 0),
-                    return SceneListTile(
+                ),
-                      iconsSize: 22,
+                child: Column(
-                      minLeadingWidth: 20,
+                  mainAxisSize: MainAxisSize.min,
-                      assetPath: functions[index].icon,
+                  children: [
-                      titleString: functions[index].operationName,
+                    BlocBuilder<CreateSceneBloc, CreateSceneState>(
-                      trailingWidget: const Row(
+                      builder: (context, state) {
-                        mainAxisSize: MainAxisSize.min,
+                        return SceneListTile(
-                        children: [
+                          iconsSize: 22,
-                          Icon(
+                          minLeadingWidth: 20,
+                          assetPath: functions[index].icon,
+                          titleString: functions[index].operationName,
+                          trailingWidget: const Icon(
                             Icons.arrow_forward_ios_rounded,
                             color: ColorsManager.greyColor,
                             size: 16,
                           ),
-                        ],
+                          onPressed: () {
-                      ),
+                            if (isAutomation) {
-                      onPressed: () {
+                              _showAutomationDialog(
-                        if (isAutomation) {
+                                  context, functions[index], device);
-                          _showAutomationDialog(
+                            } else {
-                            context,
+                              _showTabToRunDialog(
-                            functions[index],
+                                  context, functions[index], device);
-                            device,
+                            }
-                          );
+                          },
-                        } else {
+                        );
-                          _showTabToRunDialog(
-                            context,
-                            functions[index],
-                            device,
-                          );
-                        }
                       },
-                    );
+                    ),
-                  },
+                    if (isFirstInPair && !isLastItem)
+                      SizedBox(
+                        width: context.width * 0.8,
+                        child: const LightDivider(),
+                      ),
+                  ],
                 ),
-                index != functions.length - 1
+              ),
-                    ? SizedBox(
+            ],
-                        width: context.width * 0.8, child: const LightDivider())
-                    : const SizedBox(),
-              ],
-            ),
           );
         },
       ),

lib/generated/assets.dart

@@ -1142,5 +1142,9 @@ class Assets {
 
     static const String toggleSwitchSmall = 'assets/icons/toggleSwitchSmall.svg';
     static const String offToggleSwitchSmall = 'assets/icons/offToggleSwitchSmall.svg';
+    static const String saveRoutinesIcon = 'assets/icons/save_routines_icon.svg';
+    static const String cancelIcon = 'assets/icons/cancel_icon.svg';
+
+
 
 }