Merge pull request #602 from bavitha01/improve-import-dialog

bugfix: Resolve padding and spacing issues in import dialog UI alignment

Author: ashitaprasad

lib/consts.dart

@@ -432,6 +432,7 @@ const kLabelSelect = "Select";
 const kLabelContinue = "Continue";
 const kLabelCancel = "Cancel";
 const kLabelOk = "Ok";
+const kLabelImport = "Import";
 const kUntitled = "untitled";
 // Request Pane
 const kLabelRequest = "Request";

lib/widgets/dialog_import.dart

@@ -1,8 +1,9 @@
-import 'package:apidash/consts.dart';
+import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:file_selector/file_selector.dart';
 import 'drag_and_drop_area.dart';
 import 'dropdown_import_format.dart';
+import '../consts.dart';
 
 showImportDialog({
   required BuildContext context,
@@ -17,14 +18,15 @@ showImportDialog({
       return StatefulBuilder(
         builder: (context, StateSetter setState) {
           return AlertDialog(
-            contentPadding: const EdgeInsets.all(12),
+            contentPadding: kP12,
             content: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                 Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    const Text("Import "),
+                    const Text(kLabelImport),
+                    kHSpacer8,
                     DropdownButtonImportFormat(
                       importFormat: fmt,
                       onChanged: (format) {
@@ -38,6 +40,7 @@ showImportDialog({
                     ),
                   ],
                 ),
+                kVSpacer6,
                 DragAndDropArea(
                   onFileDropped: onFileDropped,
                 ),

lib/widgets/menu_sidebar_top.dart

@@ -10,13 +10,14 @@ class SidebarTopMenu extends StatelessWidget {
     this.splashRadius = 14,
     this.tooltip,
     this.shape,
+    this.menuPadding,
   });
   final Widget? child;
   final Offset offset;
   final double splashRadius;
   final String? tooltip;
   final ShapeBorder? shape;
-
+  final EdgeInsets? menuPadding;
   final Function(SidebarMenuOption)? onSelected;
 
   @override
@@ -30,6 +31,7 @@ class SidebarTopMenu extends StatelessWidget {
       offset: offset,
       onSelected: onSelected,
       shape: shape,
+      menuPadding: menuPadding,
       itemBuilder: (BuildContext context) => SidebarMenuOption.values
           .map<PopupMenuEntry<SidebarMenuOption>>(
             (e) => PopupMenuItem<SidebarMenuOption>(

packages/apidash_design_system/lib/tokens/measurements.dart

@@ -26,13 +26,14 @@ const kP4 = EdgeInsets.all(4);
 const kP5 = EdgeInsets.all(5);
 const kP6 = EdgeInsets.all(6);
 const kP8 = EdgeInsets.all(8);
+const kP10 = EdgeInsets.all(10);
+const kP12 = EdgeInsets.all(12);
 const kPs8 = EdgeInsets.only(left: 8);
 const kPs2 = EdgeInsets.only(left: 2);
 const kPe4 = EdgeInsets.only(right: 4);
 const kPe8 = EdgeInsets.only(right: 8);
 const kPh20v5 = EdgeInsets.symmetric(horizontal: 20, vertical: 5);
 const kPh20v10 = EdgeInsets.symmetric(horizontal: 20, vertical: 10);
-const kP10 = EdgeInsets.all(10);
 const kPv2 = EdgeInsets.symmetric(vertical: 2);
 const kPv6 = EdgeInsets.symmetric(vertical: 6);
 const kPv8 = EdgeInsets.symmetric(vertical: 8);
@@ -92,6 +93,7 @@ const kHSpacer20 = SizedBox(width: 20);
 const kHSpacer40 = SizedBox(width: 40);
 const kVSpacer3 = SizedBox(height: 3);
 const kVSpacer5 = SizedBox(height: 5);
+const kVSpacer6 = SizedBox(height: 6);
 const kVSpacer8 = SizedBox(height: 8);
 const kVSpacer10 = SizedBox(height: 10);
 const kVSpacer16 = SizedBox(height: 16);