fixed size of icon

lib/pages/common/buttons/add_space_button.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class AddSpaceButton extends StatelessWidget {
   final VoidCallback onTap;
@@ -28,8 +29,8 @@ class AddSpaceButton extends StatelessWidget {
           child: Container(
             width: 40, // Size of the inner circle
             height: 40,
-            decoration: BoxDecoration(
+            decoration: const BoxDecoration(
-              color: const Color(0xFFF5F6F7), // Light gray background
+              color: ColorsManager.boxColor, // Light gray background
               shape: BoxShape.circle, // Circular shape for the icon container
             ),
             child: const Icon(

lib/pages/spaces_management/widgets/dialogs/create_community_dialog.dart

@@ -62,26 +62,26 @@ class CreateCommunityDialogState extends State<CreateCommunityDialog> {
                   decoration: InputDecoration(
                     hintText: 'Please enter the community name',
                     filled: true,
-                    fillColor: const Color(0xFFF5F6F7),
+                    fillColor: ColorsManager.boxColor,
                     hintStyle: const TextStyle(
                       fontSize: 14,
-                      color: Color(0xFF999999),
+                      color: ColorsManager.boxColor,
                       fontWeight: FontWeight.w400,
                     ),
                     border: OutlineInputBorder(
                       borderSide:
-                          const BorderSide(color: Color(0xFFF5F6F7), width: 1),
+                          const BorderSide(color: ColorsManager.boxColor, width: 1),
                       borderRadius: BorderRadius.circular(10),
                     ),
                     enabledBorder: OutlineInputBorder(
                       borderSide:
-                          const BorderSide(color: Color(0xFFF5F6F7), width: 1),
+                          const BorderSide(color: ColorsManager.boxColor, width: 1),
                       borderRadius: BorderRadius.circular(10),
                     ),
                     focusedBorder: OutlineInputBorder(
                       borderRadius: BorderRadius.circular(10),
                       borderSide:
-                          const BorderSide(color: Color(0xFFF5F6F7), width: 1),
+                          const BorderSide(color: ColorsManager.boxColor, width: 1),
                     ),
                   ),
                 ),
@@ -95,7 +95,7 @@ class CreateCommunityDialogState extends State<CreateCommunityDialog> {
                         onPressed: () => Navigator.of(context).pop(),
                         style: TextButton.styleFrom(
                           padding: const EdgeInsets.symmetric(vertical: 16),
-                          backgroundColor: const Color(0xFFF5F6F7),
+                          backgroundColor: ColorsManager.boxColor,
                           shape: RoundedRectangleBorder(
                             borderRadius: BorderRadius.circular(10),
                           ),

lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart

@@ -5,6 +5,7 @@ import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/selected_product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/icon_selection_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/hoverable_button.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -261,45 +262,16 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
   }
 
   void _showIconSelectionDialog() {
-    final screenWidth = MediaQuery.of(context).size.width;
-
     showDialog(
       context: context,
       builder: (BuildContext context) {
-        return AlertDialog(
+        return IconSelectionDialog(
-          title: const Text('Select Icon'),
+          spaceIconList: spaceIconList,
-          backgroundColor: Colors.white,
+          onIconSelected: (String selectedIcon) {
-          content: Container(
+            setState(() {
-            width: screenWidth * 0.5,
+              this.selectedIcon = selectedIcon; 
-            padding: const EdgeInsets.all(18),
+            });
-            decoration: BoxDecoration(
+          },
-              color: ColorsManager.boxColor,
-              borderRadius: BorderRadius.circular(12),
-            ),
-            child: GridView.builder(
-              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                crossAxisCount: 7,
-                crossAxisSpacing: 10,
-                mainAxisSpacing: 22,
-              ),
-              itemCount: spaceIconList.length,
-              itemBuilder: (BuildContext context, int index) {
-                return GestureDetector(
-                  onTap: () {
-                    setState(() {
-                      selectedIcon = spaceIconList[index];
-                    });
-                    Navigator.of(context).pop();
-                  },
-                  child: SvgPicture.asset(
-                    spaceIconList[index],
-                    width: screenWidth * 0.06,
-                    height: screenWidth * 0.06,
-                  ),
-                );
-              },
-            ),
-          ),
         );
       },
     );
@@ -316,7 +288,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
         borderRadius: BorderRadius.circular(12),
         border: Border.all(
           color: ColorsManager.neutralGray,
-          width: 2, // Set the border width
+          width: 2,
         ),
       ),
       child: Wrap(

lib/pages/spaces_management/widgets/dialogs/icon_selection_dialog.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class IconSelectionDialog extends StatelessWidget {
+  final List<String> spaceIconList;
+  final Function(String selectedIcon) onIconSelected;
+
+  const IconSelectionDialog({
+    Key? key,
+    required this.spaceIconList,
+    required this.onIconSelected,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    final screenHeight = MediaQuery.of(context).size.height;
+
+    return Dialog(
+      elevation: 0,
+      backgroundColor: ColorsManager.transparentColor,
+      child: Container(
+        width: screenWidth * 0.44, 
+        height: screenHeight * 0.45,
+        decoration: BoxDecoration(
+          color: ColorsManager.whiteColors,
+          borderRadius: BorderRadius.circular(12),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.2), // Shadow color
+              blurRadius: 20, // Spread of the blur
+              offset: const Offset(0, 8), // Offset of the shadow
+            ),
+          ],
+        ),
+        child: AlertDialog(
+          title: Text('Space Icon',style: Theme.of(context).textTheme.headlineMedium),
+          backgroundColor: ColorsManager.whiteColors,
+          content: Container(
+            width: screenWidth * 0.4,
+            height: screenHeight * 0.45,
+            padding: const EdgeInsets.all(12),
+            decoration: BoxDecoration(
+              color: ColorsManager.boxColor,
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: GridView.builder(
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 7,
+                crossAxisSpacing: 8,
+                mainAxisSpacing: 16,
+              ),
+              itemCount: spaceIconList.length,
+              itemBuilder: (BuildContext context, int index) {
+                return GestureDetector(
+                  onTap: () {
+                    onIconSelected(spaceIconList[index]);
+                    Navigator.of(context).pop();
+                  },
+                  child: SvgPicture.asset(
+                    spaceIconList[index],
+                    width: screenWidth * 0.03,
+                    height: screenWidth * 0.03,
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}