From 9e6b14737f5a438f15ac74d20523c73d69a70c3f Mon Sep 17 00:00:00 2001
From: Faris Armoush <farmoush@uba.com.jo>
Date: Tue, 8 Jul 2025 13:07:26 +0300
Subject: [PATCH] Refactor CreateSpaceButton: Changed from StatelessWidget to
 StatefulWidget to manage hover state and added tooltip for improved user
 experience. Enhanced button styling and interaction feedback for better
 visual cues during space creation.

---
 .../widgets/create_space_button.dart          | 80 ++++++++++++-------
 1 file changed, 50 insertions(+), 30 deletions(-)

diff --git a/lib/pages/space_management_v2/main_module/widgets/create_space_button.dart b/lib/pages/space_management_v2/main_module/widgets/create_space_button.dart
index b7259d21..90d359e2 100644
--- a/lib/pages/space_management_v2/main_module/widgets/create_space_button.dart
+++ b/lib/pages/space_management_v2/main_module/widgets/create_space_button.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
-class CreateSpaceButton extends StatelessWidget {
+class CreateSpaceButton extends StatefulWidget {
   const CreateSpaceButton({
     required this.communityUuid,
     super.key,
@@ -10,38 +10,58 @@ class CreateSpaceButton extends StatelessWidget {
 
   final String communityUuid;
 
+  @override
+  State<CreateSpaceButton> createState() => _CreateSpaceButtonState();
+}
+
+class _CreateSpaceButtonState extends State<CreateSpaceButton> {
+  bool _isHovered = false;
+
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: () => SpaceDetailsDialogHelper.showCreate(
-        context,
-        communityUuid: communityUuid,
-      ),
-      child: Container(
-        height: 60,
-        decoration: BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(20),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.grey.withValues(alpha: 0.5),
-              spreadRadius: 5,
-              blurRadius: 7,
-              offset: const Offset(0, 3),
-            ),
-          ],
+    return Tooltip(
+      margin: const EdgeInsets.symmetric(vertical: 24),
+      message: 'Create a new space',
+      child: GestureDetector(
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
+          context,
+          communityUuid: widget.communityUuid,
         ),
-        child: Center(
-          child: Container(
-            width: 40,
-            height: 40,
-            decoration: const BoxDecoration(
-              color: ColorsManager.boxColor,
-              shape: BoxShape.circle,
-            ),
-            child: const Icon(
-              Icons.add,
-              color: Colors.blue,
+        child: MouseRegion(
+          onEnter: (_) => setState(() => _isHovered = true),
+          onExit: (_) => setState(() => _isHovered = false),
+          child: AnimatedOpacity(
+            duration: const Duration(milliseconds: 100),
+            opacity: _isHovered ? 1.0 : 0.45,
+            child: Container(
+              width: 150,
+              height: 90,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(20),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.grey.withValues(alpha: 0.2),
+                    spreadRadius: 3,
+                    blurRadius: 8,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
+              ),
+              child: Container(
+                margin: const EdgeInsets.symmetric(vertical: 20),
+                decoration: BoxDecoration(
+                  border: Border.all(color: ColorsManager.borderColor, width: 2),
+                  color: ColorsManager.boxColor,
+                  shape: BoxShape.circle,
+                ),
+                child: const Center(
+                  child: Icon(
+                    Icons.add,
+                    color: Colors.blue,
+                  ),
+                ),
+              ),
             ),
           ),
         ),