space canvas initial commit

lib/pages/common/buttons/add_space_button.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class AddSpaceButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const AddSpaceButton({super.key, required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap, // Handle tap event
+      child: Container(
+        width: 120, // Width of the button
+        height: 60, // Height of the button
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(20), // Rounded corners
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.5), // Shadow color
+              spreadRadius: 5, // Spread radius of the shadow
+              blurRadius: 7, // Blur effect
+              offset: const Offset(0, 3), // Shadow position
+            ),
+          ],
+        ),
+        child: Center(
+          child: Container(
+            width: 40, // Size of the inner circle
+            height: 40,
+            decoration: BoxDecoration(
+              color: const Color(0xFFF5F6F7), // Light gray background
+              shape: BoxShape.circle, // Circular shape for the icon container
+            ),
+            child: const Icon(
+              Icons.add, // Add icon
+              color: Colors.blue, // Icon color
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/common/buttons/cancel_button.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CancelButton extends StatelessWidget {
+  final String label;
+  final VoidCallback? onPressed;
+  final double? height; // Optional height parameter for customization
+  final double? borderRadius; // Optional border radius customization
+  final double? width;
+
+  const CancelButton({
+    super.key,
+    required this.label, // Button label
+    required this.onPressed, // Button action
+    this.height = 40, // Default height
+    this.width = 140,
+    this.borderRadius = 10, // Default border radius
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: onPressed,
+      style: ButtonStyle(
+        backgroundColor: WidgetStateProperty.all(ColorsManager.boxColor), // White background
+        foregroundColor: WidgetStateProperty.all(Colors.black), // Black text color
+        shape: WidgetStateProperty.all<RoundedRectangleBorder>(
+          RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(borderRadius ?? 10),
+            side: const BorderSide(color: ColorsManager.boxColor), // Black border
+          ),
+        ),
+        fixedSize: WidgetStateProperty.all(Size(width ?? 50, height ?? 40)), // Set button height
+      ),
+      child: Text(label), // Dynamic label
+    );
+  }
+}

lib/pages/common/buttons/default_button.dart

@@ -15,7 +15,8 @@ class DefaultButton extends StatelessWidget {
     this.backgroundColor,
     this.foregroundColor,
     this.borderRadius,
-    this.height,
+    this.height = 40,
+    this.width = 140,
     this.padding,
   });
   final void Function()? onPressed;
@@ -31,6 +32,8 @@ class DefaultButton extends StatelessWidget {
   final ButtonStyle? customButtonStyle;
   final Color? backgroundColor;
   final Color? foregroundColor;
+  final double? width;
+
   @override
   Widget build(BuildContext context) {
     return ElevatedButton(
@@ -39,6 +42,7 @@ class DefaultButton extends StatelessWidget {
           ? null
           : customButtonStyle ??
               ButtonStyle(
+                fixedSize: WidgetStateProperty.all(Size(width ?? 50, height ?? 40)), // Set button height
                 textStyle: MaterialStateProperty.all(
                   customTextStyle ??
                       Theme.of(context).textTheme.bodySmall!.copyWith(
@@ -59,14 +63,11 @@ class DefaultButton extends StatelessWidget {
                       ? backgroundColor ?? ColorsManager.primaryColor
                       : Colors.black.withOpacity(0.2);
                 }),
-                shape: MaterialStateProperty.all(
+                shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                   RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(borderRadius ?? 20),
+                    borderRadius: BorderRadius.circular(borderRadius ?? 10),
                   ),
                 ),
-                fixedSize: MaterialStateProperty.all(
-                  const Size.fromHeight(50),
-                ),
                 padding: MaterialStateProperty.all(
                   EdgeInsets.all(padding ?? 10),
                 ),