diff --git a/lib/pages/common/buttons/add_space_button.dart b/lib/pages/common/buttons/add_space_button.dart index 8348b390..28de2af9 100644 --- a/lib/pages/common/buttons/add_space_button.dart +++ b/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( - color: const Color(0xFFF5F6F7), // Light gray background + decoration: const BoxDecoration( + color: ColorsManager.boxColor, // Light gray background shape: BoxShape.circle, // Circular shape for the icon container ), child: const Icon( diff --git a/lib/pages/spaces_management/widgets/dialogs/create_community_dialog.dart b/lib/pages/spaces_management/widgets/dialogs/create_community_dialog.dart index f875f5ef..0a16b6c9 100644 --- a/lib/pages/spaces_management/widgets/dialogs/create_community_dialog.dart +++ b/lib/pages/spaces_management/widgets/dialogs/create_community_dialog.dart @@ -62,26 +62,26 @@ class CreateCommunityDialogState extends State { 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 { 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), ), diff --git a/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart b/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart index b7a17b76..5953951c 100644 --- a/lib/pages/spaces_management/widgets/dialogs/create_space_dialog.dart +++ b/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 { } void _showIconSelectionDialog() { - final screenWidth = MediaQuery.of(context).size.width; - showDialog( context: context, builder: (BuildContext context) { - return AlertDialog( - title: const Text('Select Icon'), - backgroundColor: Colors.white, - content: Container( - width: screenWidth * 0.5, - 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, - ), - ); - }, - ), - ), + return IconSelectionDialog( + spaceIconList: spaceIconList, + onIconSelected: (String selectedIcon) { + setState(() { + this.selectedIcon = selectedIcon; + }); + }, ); }, ); @@ -316,7 +288,7 @@ class CreateSpaceDialogState extends State { borderRadius: BorderRadius.circular(12), border: Border.all( color: ColorsManager.neutralGray, - width: 2, // Set the border width + width: 2, ), ), child: Wrap( diff --git a/lib/pages/spaces_management/widgets/dialogs/icon_selection_dialog.dart b/lib/pages/spaces_management/widgets/dialogs/icon_selection_dialog.dart new file mode 100644 index 00000000..5251ba32 --- /dev/null +++ b/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 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, + ), + ); + }, + ), + ), + ), + ), + ); + } +}