TF-612 App new design for list email rule filter

core/lib/presentation/extensions/color_extension.dart

@@ -131,6 +131,8 @@ extension AppColor on Color {
   static const colorSelectedRichTextButton = Color(0x99EBEDF0);
   static const colorShadowDestinationPicker = Color(0x33000000);
   static const colorBackgroundSnackBar = Color(0xFF343438);
+  static const colorBackgroundHeaderListRuleFilter = Color(0xFFFAF7F7);
+  static const colorBorderListRuleFilter = Color(0xFFE7E8EC);
   static const colorBackgroundFieldConditionRulesFilter = Color(0xFFF2F3F5);
   static const colorDividerRuleFilter = Color(0xFFE7E8EC);
 

lib/features/manage_account/presentation/email_rules/email_rules_view.dart

@@ -20,17 +20,7 @@ class EmailRulesView extends GetWidget<EmailRulesController> with AppLoaderMixin
           : Colors.white,
       body: Container(
         width: double.infinity,
-        margin: _responsiveUtils.isWebDesktop(context)
+        margin: _getMarginView(context),
-            ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24)
-            : EdgeInsets.zero,
-        child: ClipRRect(
-          borderRadius: BorderRadius.circular(
-              _responsiveUtils.isWebDesktop(context) ? 20 : 0),
-          child: Padding(
-            padding: EdgeInsets.only(
-                left: _responsiveUtils.isWebDesktop(context) ? 24 : 10,
-                top: 24,
-                right: 24),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -39,17 +29,37 @@ class EmailRulesView extends GetWidget<EmailRulesController> with AppLoaderMixin
               responsiveUtils: _responsiveUtils,
               createRule: () => controller.goToCreateNewRule(),
             ),
-                const SizedBox(height: 22),
+            SizedBox(height: _responsiveUtils.isWebDesktop(context) ? 24 : 16),
             _buildLoadingView(),
             const Expanded(child: ListEmailRulesWidget())
           ],
         ),
       ),
-        ),
-      ),
     );
   }
 
+  EdgeInsets _getMarginView(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isDesktop(context)) {
+        return const EdgeInsets.only(left: 16, top: 16, right: 24, bottom: 24);
+      } else if (_responsiveUtils.isTabletLarge(context) ||
+          _responsiveUtils.isTablet(context)) {
+        return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
+      } else {
+        return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
+      }
+    } else {
+      if (_responsiveUtils.isDesktop(context) ||
+          _responsiveUtils.isLandscapeTablet(context) ||
+          _responsiveUtils.isTabletLarge(context) ||
+          _responsiveUtils.isTablet(context)) {
+        return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
+      } else {
+        return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
+      }
+    }
+  }
+
   Widget _buildLoadingView() {
     return Obx(() => controller.viewState.value.fold(
             (failure) => const SizedBox.shrink(),

lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart

@@ -20,6 +20,7 @@ class EmailRulesHeaderWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: double.infinity,
       padding: const EdgeInsets.all(24),
       decoration: BoxDecoration(
         color: AppColor.colorBackgroundWrapIconStyleCode,

lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart

@@ -17,12 +17,24 @@ class ListEmailRulesWidget extends GetWidget<EmailRulesController> {
       decoration: BoxDecoration(
         color: AppColor.colorBackgroundWrapIconStyleCode,
         borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+            width: 1,
+            color: AppColor.colorBorderListRuleFilter)
       ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(16),
         child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisSize: MainAxisSize.min,
             children: [
-            Padding(
+              Container(
+                width: double.infinity,
+                decoration: const BoxDecoration(
+                  color: AppColor.colorBackgroundHeaderListRuleFilter,
+                  borderRadius: BorderRadius.only(
+                      topLeft: Radius.circular(16),
+                      topRight: Radius.circular(16)),
+                ),
                 padding: const EdgeInsets.symmetric(
                   vertical: 28,
                   horizontal: 24,
@@ -59,6 +71,7 @@ class ListEmailRulesWidget extends GetWidget<EmailRulesController> {
                 }),
               ),
             ]),
+      ),
     );
   }
 }