CookethOrg · TeeWrath · Aug 22, 2025 · Aug 22, 2025 · Aug 22, 2025
diff --git a/lib/features/workspace/pages/desktop/workspace_desktop.dart b/lib/features/workspace/pages/desktop/workspace_desktop.dart
@@ -37,7 +37,7 @@ class WorkspaceDesktop extends StatelessWidget {
               const WorkspaceDrawer(),
               SizedBox(width: 20.w),
               Positioned(top: 0, left: 0.21.sw, child: UndoRedoButton(su: suprovider,)),
-              Positioned(top: 0, right: 0.001.sw, child: ExportProjectButton()),
+              Positioned(top: 0, right: 0.001.sw, child: ExportProjectButton(su: suprovider,)),
 
               Positioned(right: 0, top: 0.10.sh, child: ToolBar()),
 

diff --git a/lib/features/workspace/pages/mobile/workspace_mobile.dart b/lib/features/workspace/pages/mobile/workspace_mobile.dart
@@ -26,8 +26,8 @@ class WorkspaceMobile extends StatelessWidget {
   Widget build(BuildContext context) {
     rh.DeviceType device = rh.ResponsiveLayoutHelper.getDeviceType(context);
 
-    return Consumer2<WorkspaceProvider,SupabaseService>(
-      builder: (context, provider,suprovider, child) {
+    return Consumer2<WorkspaceProvider, SupabaseService>(
+      builder: (context, provider, suprovider, child) {
         return Scaffold(
           backgroundColor: provider.currentWorkspaceColor,
           body: Padding(
@@ -37,7 +37,11 @@ class WorkspaceMobile extends StatelessWidget {
               children: [
                 const CanvasPage(),
                 workspaceDrawerMob(device),
-                Positioned(top: 120.h, right: 0.h, child: UndoRedoButton(su: suprovider,)),
+                Positioned(
+                  top: 120.h,
+                  right: 0.h,
+                  child: UndoRedoButton(su: suprovider),
+                ),
                 Padding(
                   padding: EdgeInsets.only(bottom: 40.h),
                   child: Align(
@@ -103,9 +107,9 @@ class WorkspaceMobile extends StatelessWidget {
   }
 }
 
-Widget workspaceDrawerMob(rh.DeviceType device,) {
-  return Consumer<WorkspaceProvider>(
-    builder: (context, provider, child) {
+Widget workspaceDrawerMob(rh.DeviceType device) {
+  return Consumer2<WorkspaceProvider, SupabaseService>(
+    builder: (context, provider, suprovider, child) {
       Color defaultBorderColor = const Color(0xFFD9D9D9);
 
       // Check if currentWorkspace is set before accessing its properties
@@ -172,7 +176,7 @@ Widget workspaceDrawerMob(rh.DeviceType device,) {
                   onPressed: () {
                     showDialog(
                       context: context,
-                      builder: (context) => ExportDialog(),
+                      builder: (context) => ExportDialog(su: suprovider),
                     );
                   },
                   style: ElevatedButton.styleFrom(

diff --git a/lib/features/workspace/pages/tablet/workspace_tablet.dart b/lib/features/workspace/pages/tablet/workspace_tablet.dart
@@ -39,7 +39,7 @@ class WorkspaceTablet extends StatelessWidget {
                 Positioned(
                   top: 0,
                   right: 0.001.sw,
-                  child: ExportProjectButton(),
+                  child: ExportProjectButton(su: suprovider,),
                 ),
 
                 // Container(

diff --git a/lib/features/workspace/widgets/export_dialog.dart b/lib/features/workspace/widgets/export_dialog.dart
@@ -1,10 +1,12 @@
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
 
 class ExportDialog extends StatefulWidget {
-  const ExportDialog({super.key});
+  final SupabaseService su;
+  const ExportDialog({super.key, required this.su});
 
   @override
   State<ExportDialog> createState() => _ExportDialogState();
@@ -24,7 +26,8 @@ class _ExportDialogState extends State<ExportDialog> {
         width: 320.w,
         padding: EdgeInsets.all(24.r),
         decoration: BoxDecoration(
-          color: Colors.white,
+          color:
+              widget.su.isDark ? Color.fromRGBO(48, 48, 48, 1) : Colors.white,
           borderRadius: BorderRadius.circular(16.r),
           boxShadow: [
             BoxShadow(
@@ -52,14 +55,26 @@ class _ExportDialogState extends State<ExportDialog> {
                             ? 22.sp
                             : 60.sp,
                     fontWeight: FontWeight.w600,
-                    color: const Color(0xFF111827),
+                    color:
+                        widget.su.isDark
+                            ? Colors.white
+                            : const Color(0xFF111827),
                   ),
                 ),
                 IconButton(
-                  icon: Icon(PhosphorIconsRegular.x, size:device == rh.DeviceType.desktop ? 24.sp : device == rh.DeviceType.tab ? 24.sp : 55.sp),
+                  icon: Icon(
+                    PhosphorIconsRegular.x,
+                    size:
+                        device == rh.DeviceType.desktop
+                            ? 24.sp
+                            : device == rh.DeviceType.tab
+                            ? 24.sp
+                            : 55.sp,
+                  ),
                   onPressed: () => Navigator.of(context).pop(),
                   padding: EdgeInsets.zero,
                   constraints: const BoxConstraints(),
+                  color: widget.su.isDark ? Colors.white : Colors.black,
                 ),
               ],
             ),
@@ -71,7 +86,15 @@ class _ExportDialogState extends State<ExportDialog> {
               children: [
                 Text(
                   'Export as',
-                  style: TextStyle(fontSize:device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp, color: Colors.grey[700]),
+                  style: TextStyle(
+                    fontSize:
+                        device == rh.DeviceType.desktop
+                            ? 16.sp
+                            : device == rh.DeviceType.tab
+                            ? 16.sp
+                            : 45.sp,
+                    color: widget.su.isDark ? Colors.white : Colors.grey[700],
+                  ),
                 ),
                 Container(
                   padding: EdgeInsets.symmetric(horizontal: 12.w),
@@ -82,7 +105,15 @@ class _ExportDialogState extends State<ExportDialog> {
                   child: DropdownButton<String>(
                     value: _selectedFormat,
                     underline: const SizedBox.shrink(),
-                    icon: Icon(PhosphorIconsRegular.caretDown, size:device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp),
+                    icon: Icon(
+                      PhosphorIconsRegular.caretDown,
+                      size:
+                          device == rh.DeviceType.desktop
+                              ? 16.sp
+                              : device == rh.DeviceType.tab
+                              ? 16.sp
+                              : 45.sp,
+                    ),
                     onChanged: (String? newValue) {
                       if (newValue != null) {
                         setState(() {
@@ -96,7 +127,18 @@ class _ExportDialogState extends State<ExportDialog> {
                             value: value,
                             child: Text(
                               value,
-                              style: TextStyle(fontSize: device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp),
+                              style: TextStyle(
+                                fontSize:
+                                    device == rh.DeviceType.desktop
+                                        ? 16.sp
+                                        : device == rh.DeviceType.tab
+                                        ? 16.sp
+                                        : 45.sp,
+                                color:
+                                    widget.su.isDark
+                                        ? Colors.white
+                                        : Colors.black,
+                              ),
                             ),
                           );
                         }).toList(),
@@ -127,7 +169,12 @@ class _ExportDialogState extends State<ExportDialog> {
                 child: Text(
                   'Export Flowchart',
                   style: TextStyle(
-                    fontSize:device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp,
+                    fontSize:
+                        device == rh.DeviceType.desktop
+                            ? 16.sp
+                            : device == rh.DeviceType.tab
+                            ? 16.sp
+                            : 45.sp,
                     fontWeight: FontWeight.w600,
                   ),
                 ),

diff --git a/lib/features/workspace/widgets/export_project_button.dart b/lib/features/workspace/widgets/export_project_button.dart
@@ -1,19 +1,21 @@
 import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:cookethflow/core/theme/colors.dart';
 import 'package:cookethflow/features/workspace/widgets/export_dialog.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 
 class ExportProjectButton extends StatelessWidget {
-  const ExportProjectButton({super.key});
+  final SupabaseService su;
+  const ExportProjectButton({super.key, required this.su});
 
   @override
   Widget build(BuildContext context) {
-      final device = rh.ResponsiveLayoutHelper.getDeviceType(context);
+    final device = rh.ResponsiveLayoutHelper.getDeviceType(context);
     return ElevatedButton(
       onPressed: () {
-        showDialog(context: context, builder: (context) => ExportDialog(),);
+        showDialog(context: context, builder: (context) => ExportDialog(su: su,));
       },
       style: ElevatedButton.styleFrom(
         elevation: 0,
@@ -30,13 +32,17 @@ class ExportProjectButton extends StatelessWidget {
             'Export Flowchart',
             style: TextStyle(
               fontFamily: 'Fredrik',
-              fontSize:device == rh.DeviceType.desktop? 18.sp : 25.sp,
+              fontSize: device == rh.DeviceType.desktop ? 18.sp : 25.sp,
               color: Colors.white,
               fontWeight: FontWeight.w500,
             ),
           ),
           SizedBox(width: 16.w),
-          Icon(PhosphorIconsRegular.export, color: Colors.white, size:device == rh.DeviceType.desktop? 24.sp : 40.sp),
+          Icon(
+            PhosphorIconsRegular.export,
+            color: Colors.white,
+            size: device == rh.DeviceType.desktop ? 24.sp : 40.sp,
+          ),
         ],
       ),
     );

diff --git a/lib/features/workspace/widgets/node_colour.dart b/lib/features/workspace/widgets/node_colour.dart
@@ -1,5 +1,7 @@
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:cookethflow/core/theme/colors.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class NodeColourPicker extends StatelessWidget {
   final ValueChanged<Color> onColorSelected;
@@ -13,16 +15,14 @@ class NodeColourPicker extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final su = context.read<SupabaseService>();
     return Dialog(
-      insetPadding: const EdgeInsets.symmetric(
-        horizontal: 20,
-        vertical: 20,
-      ),
+      insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
       child: Container(
         width: 320, // Adjusted width as mode buttons are removed
         padding: const EdgeInsets.all(20),
         decoration: BoxDecoration(
-          color: Colors.white,
+          color:su.isDark?Color.fromRGBO(48, 48, 48, 1): Colors.white,
           borderRadius: BorderRadius.circular(12),
           border: Border.all(color: const Color(0xFFE0E0E0), width: 1),
         ),
@@ -34,18 +34,15 @@ class NodeColourPicker extends StatelessWidget {
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                const Text(
+                 Text(
                   'Change Color',
-                  style: TextStyle(
-                    fontSize: 18,
-                    fontWeight: FontWeight.w600,
-                  ),
+                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: su.isDark?Colors.white:Colors.black),
                 ),
                 IconButton(
-                  icon: const Icon(
+                  icon:  Icon(
                     Icons.close,
                     size: 24,
-                    color: Colors.black54,
+                    color:su.isDark?Colors.white: Colors.black54,
                   ),
                   onPressed: () => Navigator.pop(context),
                   padding: EdgeInsets.zero,
@@ -62,25 +59,29 @@ class NodeColourPicker extends StatelessWidget {
                 Wrap(
                   spacing: 12, // Horizontal gap between color boxes
                   runSpacing: 12, // Vertical gap between rows
-                  children: secondaryColors
-                      .map((color) => _buildColorBox(
-                            color,
-                            isSelected: initialColor?.value == color.value,
-                          ))
-                      .toList(),
+                  children:
+                      secondaryColors
+                          .map(
+                            (color) => _buildColorBox(
+                              color,
+                              isSelected: initialColor?.value == color.value,
+                            ),
+                          )
+                          .toList(),
                 ),
                 const SizedBox(height: 12),
                 // Bottom row
                 Wrap(
                   spacing: 12, // Horizontal gap between color boxes
                   runSpacing: 12,
-                  children: tertiaryColors.asMap().entries.map((entry) {
-                    Color color = entry.value;
-                    return _buildColorBox(
-                      color,
-                      isSelected: initialColor?.value == color.value,
-                    );
-                  }).toList(),
+                  children:
+                      tertiaryColors.asMap().entries.map((entry) {
+                        Color color = entry.value;
+                        return _buildColorBox(
+                          color,
+                          isSelected: initialColor?.value == color.value,
+                        );
+                      }).toList(),
                 ),
               ],
             ),
@@ -90,10 +91,7 @@ class NodeColourPicker extends StatelessWidget {
     );
   }
 
-  Widget _buildColorBox(
-    Color color, {
-    bool isSelected = false,
-  }) {
+  Widget _buildColorBox(Color color, {bool isSelected = false}) {
     return GestureDetector(
       onTap: () {
         onColorSelected(color);
@@ -104,14 +102,16 @@ class NodeColourPicker extends StatelessWidget {
         decoration: BoxDecoration(
           color: color,
           borderRadius: BorderRadius.circular(4), // Added border radius
-          border: isSelected
-              ? Border.all(
-                  color: Colors.blue,
-                  width: 2.5,
-                  strokeAlign: BorderSide.strokeAlignOutside)
-              : Border.all(color: Colors.grey.shade300, width: 1),
+          border:
+              isSelected
+                  ? Border.all(
+                    color: Colors.blue,
+                    width: 2.5,
+                    strokeAlign: BorderSide.strokeAlignOutside,
+                  )
+                  : Border.all(color: Colors.grey.shade300, width: 1),
         ),
       ),
     );
   }
-}
+}