Fix/agentflow - Fixes for minor UI issues in extracted canvas (#6190)

* Fix c=incorrect color for edit nodes

* Fix to ensure all input fields have same width

* Fix accordian having an extra line

* Fix gemini comment

* Test fix

packages/agentflow/src/atoms/ConditionBuilder.tsx

@@ -171,17 +171,19 @@ export function ConditionBuilder({
                 </Typography>
             </Box>
 
-            <Button
-                fullWidth
-                size='small'
-                variant='outlined'
-                disabled={disabled}
-                sx={{ borderRadius: '16px', mt: 2 }}
-                startIcon={<IconPlus />}
-                onClick={handleAddItem}
-            >
-                Add Condition
-            </Button>
+            <Box sx={{ px: 2 }}>
+                <Button
+                    fullWidth
+                    size='small'
+                    variant='outlined'
+                    disabled={disabled}
+                    sx={{ borderRadius: '16px', mt: 2 }}
+                    startIcon={<IconPlus />}
+                    onClick={handleAddItem}
+                >
+                    Add Condition
+                </Button>
+            </Box>
         </>
     )
 }

packages/agentflow/src/atoms/MessagesInput.tsx

@@ -219,17 +219,19 @@ export function MessagesInput({ inputParam, data, disabled = false, variableItem
             ))}
 
             {/* Add button */}
-            <Button
-                fullWidth
-                size='small'
-                variant='outlined'
-                disabled={isAddDisabled}
-                sx={{ borderRadius: '16px', mt: 2 }}
-                startIcon={<IconPlus />}
-                onClick={handleAddMessage}
-            >
-                Add {inputParam.label}
-            </Button>
+            <Box sx={{ px: 2 }}>
+                <Button
+                    fullWidth
+                    size='small'
+                    variant='outlined'
+                    disabled={isAddDisabled}
+                    sx={{ borderRadius: '16px', mt: 2 }}
+                    startIcon={<IconPlus />}
+                    onClick={handleAddMessage}
+                >
+                    Add {inputParam.label}
+                </Button>
+            </Box>
 
             {/* Expand content dialog — conditionally mounted so it always initializes fresh */}
             {expandIndex !== null && (

packages/agentflow/src/atoms/StructuredOutputBuilder.tsx

@@ -245,17 +245,19 @@ export function StructuredOutputBuilder({ inputParam, data, disabled = false, on
             ))}
 
             {/* Add button */}
-            <Button
-                fullWidth
-                size='small'
-                variant='outlined'
-                disabled={isAddDisabled}
-                sx={{ borderRadius: '16px', mt: 2 }}
-                startIcon={<IconPlus />}
-                onClick={handleAddEntry}
-            >
-                Add {inputParam.label}
-            </Button>
+            <Box sx={{ px: 2 }}>
+                <Button
+                    fullWidth
+                    size='small'
+                    variant='outlined'
+                    disabled={isAddDisabled}
+                    sx={{ borderRadius: '16px', mt: 2 }}
+                    startIcon={<IconPlus />}
+                    onClick={handleAddEntry}
+                >
+                    Add {inputParam.label}
+                </Button>
+            </Box>
 
             {/* Expand dialog for JSON Schema */}
             {expandOpen && (

packages/agentflow/src/core/theme/createAgentflowTheme.test.ts

@@ -32,8 +32,8 @@ describe('createAgentflowTheme', () => {
             expect(theme.palette.divider).toBe(tokens.colors.border.default.light)
         })
 
-        it('should set primary color from agent node color', () => {
-            expect(theme.palette.primary.main).toBe(tokens.colors.nodes.agent)
+        it('should set primary color from palette token', () => {
+            expect(theme.palette.primary.main).toBe(tokens.colors.palette.primary.main)
         })
 
         it('should set custom card palette color', () => {

packages/agentflow/src/core/theme/createAgentflowTheme.ts

@@ -17,9 +17,11 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme {
     return createTheme({
         palette: {
             mode,
-            primary: {
-                main: tokens.colors.nodes.agent
-            },
+            primary: tokens.colors.palette.primary,
+            secondary: tokens.colors.palette.secondary,
+            success: tokens.colors.palette.success,
+            error: tokens.colors.palette.error,
+            warning: tokens.colors.palette.warning,
             background: {
                 default: tokens.colors.background.canvas[mode],
                 paper: tokens.colors.background.card[mode]
@@ -46,6 +48,18 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme {
             body1: { fontSize: '0.875rem', fontWeight: 400 },
             body2: { fontSize: '0.75rem', fontWeight: 400 }
         },
+        components: {
+            MuiPaper: {
+                defaultProps: {
+                    elevation: 0
+                },
+                styleOverrides: {
+                    root: {
+                        backgroundImage: 'none'
+                    }
+                }
+            }
+        },
         spacing: 8, // MUI's default base unit
         shape: {
             borderRadius: tokens.borderRadius.md

packages/agentflow/src/core/theme/tokens.ts

@@ -45,6 +45,31 @@ const baseColors = {
     warningText: '#744210',
     info: '#2196f3',
 
+    // MUI palette colors - primary (blue)
+    primaryLight: '#e3f2fd',
+    primaryMain: '#2196f3',
+    primaryDark: '#1e88e5',
+
+    // MUI palette colors - secondary (purple)
+    secondaryLight: '#ede7f6',
+    secondaryMain: '#673ab7',
+    secondaryDark: '#5e35b1',
+
+    // MUI palette colors - success (green)
+    successLight: '#cdf5d8',
+    successMain: '#00e676',
+    successDark: '#00c853',
+
+    // MUI palette colors - error (red)
+    errorLight: '#f3d2d2',
+    errorMain: '#f44336',
+    errorDark: '#c62828',
+
+    // MUI palette colors - warning (yellow)
+    warningLight: '#fff8e1',
+    warningMain: '#ffe57f',
+    warningDark: '#ffc107',
+
     // Node type colors (brand colors)
     nodeCondition: '#FFB938',
     nodeStart: '#7EE787',
@@ -109,6 +134,35 @@ export const tokens = {
             tertiary: { light: baseColors.gray600, dark: baseColors.gray500 }
         },
 
+        // MUI theme palette colors - referenced from base
+        palette: {
+            primary: {
+                light: baseColors.primaryLight,
+                main: baseColors.primaryMain,
+                dark: baseColors.primaryDark
+            },
+            secondary: {
+                light: baseColors.secondaryLight,
+                main: baseColors.secondaryMain,
+                dark: baseColors.secondaryDark
+            },
+            success: {
+                light: baseColors.successLight,
+                main: baseColors.successMain,
+                dark: baseColors.successDark
+            },
+            error: {
+                light: baseColors.errorLight,
+                main: baseColors.errorMain,
+                dark: baseColors.errorDark
+            },
+            warning: {
+                light: baseColors.warningLight,
+                main: baseColors.warningMain,
+                dark: baseColors.warningDark
+            }
+        },
+
         // Semantic status colors - referenced from base
         semantic: {
             success: baseColors.success,

packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx

@@ -55,7 +55,7 @@ function NodeToolbarActionsComponent({ nodeId, nodeName, isVisible, onInfoClick
                         title='Edit'
                         onClick={handleEditClick}
                         sx={{
-                            color: isDarkMode ? 'white' : theme.palette.grey[600],
+                            color: isDarkMode ? 'white' : 'inherit',
                             '&:hover': { color: theme.palette.primary.main }
                         }}
                     >