From 2d1ee0b191b62862cda38a9ee240748af71dd359 Mon Sep 17 00:00:00 2001 From: Imran Hassanali Date: Sun, 8 Feb 2026 09:20:55 -0800 Subject: [PATCH] fixes --- .../src/components/AgentApiKeyManager.tsx | 6 +- frontend/src/components/AgentDetailView.tsx | 8 +- .../src/components/AgentMarketplaceCard.tsx | 16 +-- frontend/src/components/AgentMemoryViewer.tsx | 32 ++--- frontend/src/components/AgentResumeModal.tsx | 24 ++-- frontend/src/components/ApiKeyModal.tsx | 2 +- frontend/src/components/ApiKeyOnboarding.tsx | 24 ++-- frontend/src/components/ApiKeyPrompt.tsx | 8 +- .../src/components/ApiKeyValidationAlert.tsx | 4 +- frontend/src/components/AssignTeamModal.tsx | 10 +- frontend/src/components/AuthTooltip.tsx | 4 +- frontend/src/components/BetaBanner.tsx | 6 +- frontend/src/components/ConfigurationCard.tsx | 12 +- .../src/components/ConfigurationModal.tsx | 8 +- frontend/src/components/CreateAgentForm.tsx | 16 +-- frontend/src/components/CreateTeamForm.tsx | 4 +- frontend/src/components/EditAgentForm.tsx | 8 +- .../src/components/EnhancedTextEditor.tsx | 57 +++------ .../components/ExecutionComparisonChart.tsx | 110 +++++++++++------- .../src/components/ExecutionFlowGraph.tsx | 46 ++++---- .../components/ExecutionLoadingIndicator.tsx | 4 +- frontend/src/components/ExecutionLogsCard.tsx | 14 +-- .../src/components/ExecutionResultsViewer.tsx | 52 ++++----- frontend/src/components/ExecutionRunCard.tsx | 6 +- frontend/src/components/ExecutionTags.tsx | 6 +- frontend/src/components/FunctionsModal.tsx | 10 +- frontend/src/components/GitHubAuthSetup.tsx | 2 +- .../src/components/GitHubOnboardingSetup.tsx | 2 +- .../src/components/GroupedFunctionList.tsx | 2 +- frontend/src/components/JsonEditor.tsx | 24 ++-- .../src/components/LiveExecutionViewer.tsx | 14 +-- frontend/src/components/OtherOptionsModal.tsx | 12 +- frontend/src/components/ResultCard.tsx | 32 ++--- frontend/src/components/SessionManager.tsx | 16 +-- frontend/src/components/TeamCard.tsx | 2 +- frontend/src/components/TeamMemoryViewer.tsx | 26 ++--- frontend/src/components/TeamResumeModal.tsx | 12 +- frontend/src/components/TemplateCard.tsx | 4 +- frontend/src/components/TemplateForm.tsx | 34 +++--- frontend/src/components/TextEditor.tsx | 39 ++----- frontend/src/components/Toast.tsx | 8 +- frontend/src/components/UserStatusBar.tsx | 8 +- frontend/src/screens/DocumentationScreen.tsx | 8 +- frontend/src/screens/HistoryScreen.tsx | 34 +++--- 44 files changed, 380 insertions(+), 396 deletions(-) diff --git a/frontend/src/components/AgentApiKeyManager.tsx b/frontend/src/components/AgentApiKeyManager.tsx index 443b214..9849b56 100644 --- a/frontend/src/components/AgentApiKeyManager.tsx +++ b/frontend/src/components/AgentApiKeyManager.tsx @@ -195,7 +195,7 @@ const AgentApiKeyManager: React.FC = ({ defaultText: { fontSize: 14, fontWeight: '500' as const, - color: '#FFD700', + color: colors.statusWarning, }, priorityText: { fontSize: 14, @@ -495,7 +495,7 @@ const AgentApiKeyManager: React.FC = ({ switch (status?.toLowerCase()) { case 'valid': return colors.statusSuccess; case 'invalid': return colors.statusError; - case 'expired': return '#fd7e14'; + case 'expired': return colors.statusWarning; case 'untested': return colors.textSecondary; case 'rate_limited': return colors.statusWarning; default: return colors.textSecondary; @@ -538,7 +538,7 @@ const AgentApiKeyManager: React.FC = ({ {item.isDefault && ( - + Default for Service )} diff --git a/frontend/src/components/AgentDetailView.tsx b/frontend/src/components/AgentDetailView.tsx index c0a79d3..30481e5 100644 --- a/frontend/src/components/AgentDetailView.tsx +++ b/frontend/src/components/AgentDetailView.tsx @@ -273,7 +273,7 @@ const AgentDetailView: React.FC = ({ errorText: { fontSize: 16, fontWeight: '500' as const, - color: '#FF6B35', + color: colors.statusError, marginTop: 12, marginBottom: 4, textAlign: 'center' as const, @@ -745,13 +745,13 @@ const AgentDetailView: React.FC = ({ - + {agentStats.averageExecutionTime.toFixed(1)}s Avg Duration - + {agentStats.totalExecutions > 0 ? Math.round((agentStats.completedExecutions / agentStats.totalExecutions) * 100) @@ -846,7 +846,7 @@ const AgentDetailView: React.FC = ({ ) : loadError ? ( - + Failed to load executions {loadError} = ({ }, modelText: { fontSize: 12, - color: '#AF52DE', + color: colors.accent, fontWeight: '500' as const, }, apiKeyTag: { - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, paddingHorizontal: 8, paddingVertical: 3, borderRadius: 6, }, apiKeyText: { fontSize: 11, - color: '#1976D2', + color: colors.accent, fontWeight: '500' as const, }, description: { fontSize: 15, - color: '#6B6B6B', + color: colors.textSecondary, lineHeight: 22, marginBottom: 16, }, @@ -171,7 +171,7 @@ const AgentMarketplaceCard: React.FC = ({ }, moreSkillsText: { fontSize: 12, - color: '#6B6B6B', + color: colors.textSecondary, fontWeight: '500' as const, }, statsContainer: { @@ -189,7 +189,7 @@ const AgentMarketplaceCard: React.FC = ({ }, statText: { fontSize: 12, - color: '#6B6B6B', + color: colors.textSecondary, fontWeight: '500' as const, }, ctaContainer: { @@ -213,9 +213,9 @@ const AgentMarketplaceCard: React.FC = ({ const getExperienceColor = (level: string) => { switch (level) { case 'Junior': return colors.accent; - case 'Mid-Level': return '#32D74B'; + case 'Mid-Level': return colors.statusSuccess; case 'Senior': return colors.statusWarning; - case 'Expert': return '#AF52DE'; + case 'Expert': return colors.accent; default: return colors.accent; } }; diff --git a/frontend/src/components/AgentMemoryViewer.tsx b/frontend/src/components/AgentMemoryViewer.tsx index ad79aa1..69d591a 100644 --- a/frontend/src/components/AgentMemoryViewer.tsx +++ b/frontend/src/components/AgentMemoryViewer.tsx @@ -78,7 +78,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC backgroundColor: colors.bgSurface, }, filterButtonActive: { - backgroundColor: '#4CAF50', + backgroundColor: colors.statusSuccess, }, filterButtonText: { color: colors.textSecondary, @@ -91,13 +91,13 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC flexDirection: 'row' as const, alignItems: 'center' as const, padding: 16, - backgroundColor: '#ffebee', + backgroundColor: `${colors.statusError}15`, marginHorizontal: 16, marginTop: 8, borderRadius: 8, }, errorText: { - color: '#f44336', + color: colors.statusError, marginLeft: 8, flex: 1, }, @@ -134,10 +134,10 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC borderRadius: 6, }, selectedNode: { - backgroundColor: '#e3f2fd', + backgroundColor: colors.accentSoft, }, contextNode: { - backgroundColor: '#f1f8e9', + backgroundColor: `${colors.statusSuccess}15`, }, nodeContent: { flexDirection: 'row' as const, @@ -196,7 +196,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC borderRadius: 8, marginBottom: 8, borderLeftWidth: 3, - borderLeftColor: '#4CAF50', + borderLeftColor: colors.statusSuccess, }, searchResultHeader: { flexDirection: 'row' as const, @@ -224,7 +224,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC }, searchResultRelevance: { fontSize: 12, - color: '#4CAF50', + color: colors.statusSuccess, fontWeight: 'bold' as const, }, noResults: { @@ -246,11 +246,11 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC }, relationship: { padding: 12, - backgroundColor: '#fff3e0', + backgroundColor: `${colors.statusWarning}15`, borderRadius: 8, marginBottom: 8, borderLeftWidth: 3, - borderLeftColor: '#FF9800', + borderLeftColor: colors.statusWarning, }, relationshipText: { fontSize: 14, @@ -259,7 +259,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC }, relationshipStrength: { fontSize: 12, - color: '#FF9800', + color: colors.statusWarning, fontWeight: 'bold' as const, }, emptyStateContainer: { @@ -512,10 +512,10 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC size={16} color={ node.type === 'context' - ? '#4CAF50' + ? colors.statusSuccess : node.type === 'relationship' - ? '#FF9800' - : '#2196F3' + ? colors.statusWarning + : colors.accent } style={styles.nodeIcon} /> @@ -530,7 +530,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC style={styles.clearButton} onPress={() => clearMemoryContext(node.context!)} > - + )} @@ -592,7 +592,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC - + {agent.firstName} {agent.lastName} - Memory @@ -636,7 +636,7 @@ export const AgentMemoryViewer: React.FC = ({ agent, onC {error && ( - + {error} )} diff --git a/frontend/src/components/AgentResumeModal.tsx b/frontend/src/components/AgentResumeModal.tsx index 032f75c..26f0804 100644 --- a/frontend/src/components/AgentResumeModal.tsx +++ b/frontend/src/components/AgentResumeModal.tsx @@ -122,7 +122,7 @@ const AgentResumeModal: React.FC = ({ }, availability: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, fontWeight: '500' as const, }, apiRequirementsSection: { @@ -145,7 +145,7 @@ const AgentResumeModal: React.FC = ({ apiRequirementTag: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16, @@ -153,7 +153,7 @@ const AgentResumeModal: React.FC = ({ }, apiRequirementText: { fontSize: 14, - color: '#1976D2', + color: colors.accent, fontWeight: '500' as const, }, modelConfigSection: { @@ -178,7 +178,7 @@ const AgentResumeModal: React.FC = ({ }, modelConfigLabel: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, fontWeight: '500' as const, }, modelConfigValue: { @@ -199,7 +199,7 @@ const AgentResumeModal: React.FC = ({ }, description: { fontSize: 16, - color: '#6B6B6B', + color: colors.textSecondary, lineHeight: 24, }, highlight: { @@ -245,7 +245,7 @@ const AgentResumeModal: React.FC = ({ }, capabilityCount: { fontSize: 12, - color: '#6B6B6B', + color: colors.textSecondary, }, specialtiesContainer: { flexDirection: 'row' as const, @@ -253,14 +253,14 @@ const AgentResumeModal: React.FC = ({ gap: 8, }, specialtyTag: { - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16, }, specialtyText: { fontSize: 14, - color: '#1976D2', + color: colors.accent, fontWeight: '500' as const, }, toolsContainer: { @@ -299,7 +299,7 @@ const AgentResumeModal: React.FC = ({ }, statLabel: { fontSize: 12, - color: '#6B6B6B', + color: colors.textSecondary, textAlign: 'center' as const, }, templateCard: { @@ -324,11 +324,11 @@ const AgentResumeModal: React.FC = ({ }, templateCategory: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, }, templateDescription: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, lineHeight: 20, }, actionContainer: { @@ -614,7 +614,7 @@ const AgentResumeModal: React.FC = ({ Execution Template - + {agent.templateName} {agent.category} diff --git a/frontend/src/components/ApiKeyModal.tsx b/frontend/src/components/ApiKeyModal.tsx index 9d35236..c2c4432 100644 --- a/frontend/src/components/ApiKeyModal.tsx +++ b/frontend/src/components/ApiKeyModal.tsx @@ -374,7 +374,7 @@ const ApiKeyModal: React.FC = ({ }, environmentCardSelected: { borderColor: colors.statusSuccess, - backgroundColor: '#F0FFF4', + backgroundColor: `${colors.statusSuccess}15`, }, environmentText: { fontSize: 12, diff --git a/frontend/src/components/ApiKeyOnboarding.tsx b/frontend/src/components/ApiKeyOnboarding.tsx index 28a3a19..1147cfe 100644 --- a/frontend/src/components/ApiKeyOnboarding.tsx +++ b/frontend/src/components/ApiKeyOnboarding.tsx @@ -147,13 +147,13 @@ const createStyles = (colors: ThemeColors) => ({ fontWeight: '600' as const, }, statusCard: { - backgroundColor: '#E8F5E8', + backgroundColor: `${colors.statusSuccess}15`, borderRadius: 12, padding: 20, marginBottom: 20, width: '100%' as const, borderWidth: 1, - borderColor: '#C8E6C8', + borderColor: `${colors.statusSuccess}30`, }, statusHeader: { flexDirection: 'row' as const, @@ -163,7 +163,7 @@ const createStyles = (colors: ThemeColors) => ({ statusTitle: { fontSize: 18, fontWeight: '600' as const, - color: '#2D5016', + color: colors.statusSuccess, marginLeft: 8, }, statusItem: { @@ -173,7 +173,7 @@ const createStyles = (colors: ThemeColors) => ({ }, statusText: { fontSize: 14, - color: '#2D5016', + color: colors.textPrimary, marginLeft: 12, flex: 1, lineHeight: 20, @@ -182,13 +182,13 @@ const createStyles = (colors: ThemeColors) => ({ fontWeight: '600' as const, }, costWarningCard: { - backgroundColor: '#FFF9F0', + backgroundColor: `${colors.statusWarning}15`, borderRadius: 12, padding: 20, marginBottom: 20, width: '100%' as const, borderWidth: 1, - borderColor: '#FFE4B5', + borderColor: `${colors.statusWarning}30`, }, warningHeader: { flexDirection: 'row' as const, @@ -203,7 +203,7 @@ const createStyles = (colors: ThemeColors) => ({ }, warningText: { fontSize: 14, - color: '#8B4513', + color: colors.textPrimary, lineHeight: 20, }, benefitsCard: { @@ -273,7 +273,7 @@ const createStyles = (colors: ThemeColors) => ({ fontSize: 10, fontWeight: '700' as const, color: colors.statusSuccess, - backgroundColor: '#E8F5E8', + backgroundColor: `${colors.statusSuccess}15`, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6, @@ -282,7 +282,7 @@ const createStyles = (colors: ThemeColors) => ({ fontSize: 10, fontWeight: '700' as const, color: colors.accent, - backgroundColor: '#E6F3FF', + backgroundColor: colors.accentSoft, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6, @@ -394,7 +394,7 @@ const createStyles = (colors: ThemeColors) => ({ }, invalidInput: { borderColor: colors.statusError, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}10`, }, errorText: { fontSize: 12, @@ -431,7 +431,7 @@ const createStyles = (colors: ThemeColors) => ({ optionalBadge: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#E6F3FF', + backgroundColor: colors.accentSoft, paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20, @@ -478,7 +478,7 @@ const createStyles = (colors: ThemeColors) => ({ fontSize: 10, fontWeight: '700' as const, color: colors.statusWarning, - backgroundColor: '#FFF4E6', + backgroundColor: `${colors.statusWarning}15`, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, diff --git a/frontend/src/components/ApiKeyPrompt.tsx b/frontend/src/components/ApiKeyPrompt.tsx index 591d168..27b99ee 100644 --- a/frontend/src/components/ApiKeyPrompt.tsx +++ b/frontend/src/components/ApiKeyPrompt.tsx @@ -99,7 +99,7 @@ export const ApiKeyPrompt: React.FC = ({ }, required: { fontSize: 12, - color: '#e74c3c', + color: colors.statusError, marginLeft: 4, alignSelf: 'flex-start' as const, flexShrink: 0, @@ -114,12 +114,12 @@ export const ApiKeyPrompt: React.FC = ({ backgroundColor: colors.bgCard, }, inputError: { - borderColor: '#e74c3c', - backgroundColor: '#fef7f7', + borderColor: colors.statusError, + backgroundColor: `${colors.statusError}15`, }, errorText: { fontSize: 12, - color: '#e74c3c', + color: colors.statusError, marginTop: 4, }, helpText: { diff --git a/frontend/src/components/ApiKeyValidationAlert.tsx b/frontend/src/components/ApiKeyValidationAlert.tsx index 0310802..db0fe27 100644 --- a/frontend/src/components/ApiKeyValidationAlert.tsx +++ b/frontend/src/components/ApiKeyValidationAlert.tsx @@ -60,7 +60,7 @@ const ApiKeyValidationAlert: React.FC = ({ }, message: { fontSize: 16, - color: '#3C3C43', + color: colors.textSecondary, lineHeight: 22, marginBottom: 20, }, @@ -84,7 +84,7 @@ const ApiKeyValidationAlert: React.FC = ({ }, serviceName: { fontSize: 14, - color: '#3C3C43', + color: colors.textSecondary, }, buttonContainer: { flexDirection: 'row' as const, diff --git a/frontend/src/components/AssignTeamModal.tsx b/frontend/src/components/AssignTeamModal.tsx index 1d7e182..76e8be5 100644 --- a/frontend/src/components/AssignTeamModal.tsx +++ b/frontend/src/components/AssignTeamModal.tsx @@ -77,7 +77,7 @@ const AssignTeamModal: React.FC = ({ }, agentSubtitle: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, marginTop: 4, }, currentTeamSection: { @@ -158,7 +158,7 @@ const AssignTeamModal: React.FC = ({ }, loadingText: { fontSize: 16, - color: '#6B6B6B', + color: colors.textSecondary, marginTop: 12, }, emptyContainer: { @@ -177,7 +177,7 @@ const AssignTeamModal: React.FC = ({ }, emptySubtitle: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, textAlign: 'center' as const, marginTop: 8, lineHeight: 20, @@ -232,7 +232,7 @@ const AssignTeamModal: React.FC = ({ }, teamDescription: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, marginTop: 2, lineHeight: 18, }, @@ -247,7 +247,7 @@ const AssignTeamModal: React.FC = ({ }, statText: { fontSize: 12, - color: '#6B6B6B', + color: colors.textSecondary, marginLeft: 4, }, currentBadge: { diff --git a/frontend/src/components/AuthTooltip.tsx b/frontend/src/components/AuthTooltip.tsx index f59ec92..e8b9e57 100644 --- a/frontend/src/components/AuthTooltip.tsx +++ b/frontend/src/components/AuthTooltip.tsx @@ -129,7 +129,7 @@ export const AuthTooltip: React.FC = ({ flexDirection: 'row' as const, marginBottom: 12, alignItems: 'flex-start' as const, - backgroundColor: '#FFF9E6', + backgroundColor: `${colors.statusWarning}15`, padding: 12, borderRadius: 8, borderLeftWidth: 3, @@ -138,7 +138,7 @@ export const AuthTooltip: React.FC = ({ warningText: { fontSize: 14, lineHeight: 20, - color: '#8B4513', + color: colors.statusWarning, marginLeft: 8, flex: 1, }, diff --git a/frontend/src/components/BetaBanner.tsx b/frontend/src/components/BetaBanner.tsx index 02ce586..4bf532f 100644 --- a/frontend/src/components/BetaBanner.tsx +++ b/frontend/src/components/BetaBanner.tsx @@ -7,16 +7,16 @@ export const BetaBanner: React.FC = () => { const styles = useThemedStyles((colors: ThemeColors) => ({ banner: { width: '100%' as const, - backgroundColor: '#FFF4E5', + backgroundColor: `${colors.statusWarning}15`, borderBottomWidth: 1, - borderColor: '#FFE0B2', + borderColor: `${colors.statusWarning}30`, paddingVertical: 8, paddingHorizontal: 12, alignItems: 'center' as const, justifyContent: 'center' as const, }, text: { - color: '#8A5200', + color: colors.statusWarning, fontSize: 13, fontWeight: '600' as const, textAlign: 'center' as const, diff --git a/frontend/src/components/ConfigurationCard.tsx b/frontend/src/components/ConfigurationCard.tsx index cee330e..bc26b60 100644 --- a/frontend/src/components/ConfigurationCard.tsx +++ b/frontend/src/components/ConfigurationCard.tsx @@ -35,10 +35,10 @@ const ConfigurationCard: React.FC = ({ systemContainer: { borderColor: colors.accent, borderWidth: 1.5, - backgroundColor: '#F8F9FE', + backgroundColor: colors.bgSurface, }, systemBadge: { - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, paddingHorizontal: 8, paddingVertical: 4, flexDirection: 'row' as const, @@ -145,15 +145,15 @@ const ConfigurationCard: React.FC = ({ lineHeight: 18, }, systemInfo: { - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, paddingHorizontal: 12, paddingVertical: 8, borderTopWidth: 1, - borderTopColor: '#B3D9FF', + borderTopColor: `${colors.accent}40`, }, systemInfoText: { fontSize: 11, - color: '#1976D2', + color: colors.accent, textAlign: 'center' as const, lineHeight: 14, }, @@ -212,7 +212,7 @@ const ConfigurationCard: React.FC = ({ const getTemperatureColor = (temperature?: number) => { if (!temperature) return colors.textSecondary; if (temperature <= 0.3) return colors.statusSuccess; // Green for conservative - if (temperature <= 0.7) return '#FF9500'; // Orange for balanced + if (temperature <= 0.7) return colors.statusWarning; // Orange for balanced return colors.statusError; // Red for creative }; diff --git a/frontend/src/components/ConfigurationModal.tsx b/frontend/src/components/ConfigurationModal.tsx index 734cd57..6ae7598 100644 --- a/frontend/src/components/ConfigurationModal.tsx +++ b/frontend/src/components/ConfigurationModal.tsx @@ -100,7 +100,7 @@ const ConfigurationModal: React.FC = ({ fontSize: 14, fontWeight: '600' as const, color: colors.accent, - backgroundColor: '#F0F8FF', + backgroundColor: colors.accentSoft, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, @@ -190,7 +190,7 @@ const ConfigurationModal: React.FC = ({ }, configCardSelected: { borderColor: colors.accent, - backgroundColor: '#F8FBFF', + backgroundColor: colors.accentSoft, }, configHeader: { flexDirection: 'row' as const, @@ -216,7 +216,7 @@ const ConfigurationModal: React.FC = ({ color: colors.textSecondary, }, configModelSelected: { - color: '#0056CC', + color: colors.accent, }, checkbox: { width: 24, @@ -239,7 +239,7 @@ const ConfigurationModal: React.FC = ({ marginBottom: 8, }, configPromptSelected: { - color: '#0056CC', + color: colors.accent, }, configMeta: { flexDirection: 'row' as const, diff --git a/frontend/src/components/CreateAgentForm.tsx b/frontend/src/components/CreateAgentForm.tsx index d34d85c..575fbcf 100644 --- a/frontend/src/components/CreateAgentForm.tsx +++ b/frontend/src/components/CreateAgentForm.tsx @@ -140,7 +140,7 @@ const useCreateAgentStyles = (colors: ReturnType['colors']) => marketplaceCard: { margin: 16, marginBottom: 8, - backgroundColor: '#F0F8FF', + backgroundColor: colors.accentSoft, borderWidth: 1, borderColor: colors.accent, }, @@ -175,7 +175,7 @@ const useCreateAgentStyles = (colors: ReturnType['colors']) => }, marketplaceDescription: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, lineHeight: 20, marginBottom: 16, }, @@ -196,7 +196,7 @@ const useCreateAgentStyles = (colors: ReturnType['colors']) => apiKeyChip: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, @@ -204,7 +204,7 @@ const useCreateAgentStyles = (colors: ReturnType['colors']) => }, apiKeyText: { fontSize: 12, - color: '#1976D2', + color: colors.accent, fontWeight: '500' as const, }, modelSection: { @@ -218,7 +218,7 @@ const useCreateAgentStyles = (colors: ReturnType['colors']) => }, modelText: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, fontWeight: '500' as const, }, characterPreview: { @@ -550,7 +550,7 @@ const useCreateAgentStyles = (colors: ReturnType['colors']) => opacity: 0.9, }, recommendedBadge: { - backgroundColor: '#FF9500', + backgroundColor: colors.statusWarning, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6, @@ -708,7 +708,7 @@ const CreateAgentForm: React.FC = ({ onSuccess, onCancel, return { title: 'Standby Mode', description: 'Agent will log actions but not execute them. Perfect for testing and validation.', - color: '#FF9500', + color: colors.statusWarning, icon: 'pause-circle' as const, details: 'In standby mode, your agent will go through all the motions of executing tasks but won\'t actually perform any actions. You\'ll see all logs and can verify the agent is working correctly before going live.' }; @@ -846,7 +846,7 @@ const CreateAgentForm: React.FC = ({ onSuccess, onCancel, {/* Introduction Card */} - + {prefilledData?.marketplaceAgent ? 'Customize Your Agent' : 'Creating Your AI Agent'} diff --git a/frontend/src/components/CreateTeamForm.tsx b/frontend/src/components/CreateTeamForm.tsx index 845ddf6..cd632bf 100644 --- a/frontend/src/components/CreateTeamForm.tsx +++ b/frontend/src/components/CreateTeamForm.tsx @@ -133,7 +133,7 @@ const CreateTeamForm: React.FC = ({ }, inputError: { borderColor: colors.statusError, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}15`, }, errorText: { fontSize: 14, @@ -142,7 +142,7 @@ const CreateTeamForm: React.FC = ({ }, helpText: { fontSize: 14, - color: '#6B6B6B', + color: colors.textSecondary, marginTop: 4, }, characterCount: { diff --git a/frontend/src/components/EditAgentForm.tsx b/frontend/src/components/EditAgentForm.tsx index bd3d4df..63ba8a0 100644 --- a/frontend/src/components/EditAgentForm.tsx +++ b/frontend/src/components/EditAgentForm.tsx @@ -545,19 +545,19 @@ const EditAgentForm: React.FC = ({ agent, onSuccess, onCance case 'STANDBY': return { description: 'Testing mode - Logs actions but doesn\'t execute them', - color: '#ffc107', + color: colors.statusWarning, icon: 'pause-circle' }; case 'ACTIVE': return { description: 'Fully operational - Executes tasks according to schedule', - color: '#28a745', + color: colors.statusSuccess, icon: 'play-circle' }; case 'PAUSED': return { description: 'Temporarily stopped - Can be resumed anytime', - color: '#6c757d', + color: colors.textSecondary, icon: 'stop-circle' }; case 'KILLED': @@ -567,7 +567,7 @@ const EditAgentForm: React.FC = ({ agent, onSuccess, onCance icon: 'close-circle' }; default: - return { description: '', color: '#6c757d', icon: 'help-circle' }; + return { description: '', color: colors.textSecondary, icon: 'help-circle' }; } }; diff --git a/frontend/src/components/EnhancedTextEditor.tsx b/frontend/src/components/EnhancedTextEditor.tsx index 202c5fe..d28df0e 100644 --- a/frontend/src/components/EnhancedTextEditor.tsx +++ b/frontend/src/components/EnhancedTextEditor.tsx @@ -373,47 +373,26 @@ const EnhancedTextEditor: React.FC = ({ // Theme configuration const { colors: appColors } = useTheme(); const styles = useThemedStyles(createStyles); - const themeColors = { - light: { - background: appColors.bgCard, - border: appColors.borderLight, - focusBorder: appColors.accent, - errorBorder: appColors.statusError, - text: appColors.textPrimary, - placeholder: appColors.textSecondary, - lineNumbers: appColors.textTertiary, - lineNumberBg: appColors.bgSurface, - stats: appColors.textSecondary, - headerBg: appColors.bgSurface, - toolbarBg: appColors.bgCard, - toolbarBorder: appColors.borderLight, - shadowColor: appColors.shadowColor, - overlayBg: 'rgba(0, 0, 0, 0.4)', - helperText: appColors.textSecondary, - errorText: appColors.statusError, - }, - dark: { - background: '#1C1C1E', - border: '#38383A', - focusBorder: '#0A84FF', - errorBorder: '#FF453A', - text: '#FFFFFF', - placeholder: '#8E8E93', - lineNumbers: '#8E8E93', - lineNumberBg: '#2C2C2E', - stats: '#8E8E93', - headerBg: '#2C2C2E', - toolbarBg: '#1C1C1E', - toolbarBorder: '#38383A', - shadowColor: '#FFF', - overlayBg: 'rgba(255, 255, 255, 0.1)', - helperText: '#8E8E93', - errorText: '#FF453A', - }, + // Use app theme colors for consistent theming + const colors = { + background: appColors.bgCard, + border: appColors.borderLight, + focusBorder: appColors.accent, + errorBorder: appColors.statusError, + text: appColors.textPrimary, + placeholder: appColors.textSecondary, + lineNumbers: appColors.textTertiary, + lineNumberBg: appColors.bgSurface, + stats: appColors.textSecondary, + headerBg: appColors.bgSurface, + toolbarBg: appColors.bgCard, + toolbarBorder: appColors.borderLight, + shadowColor: appColors.shadowColor, + overlayBg: 'rgba(0, 0, 0, 0.4)', + helperText: appColors.textSecondary, + errorText: appColors.statusError, }; - const colors = themeColors[theme]; - // History management const addToHistory = useCallback((text: string) => { const newStack = historyStack.slice(0, historyIndex + 1); diff --git a/frontend/src/components/ExecutionComparisonChart.tsx b/frontend/src/components/ExecutionComparisonChart.tsx index df440c7..69bdb94 100644 --- a/frontend/src/components/ExecutionComparisonChart.tsx +++ b/frontend/src/components/ExecutionComparisonChart.tsx @@ -29,34 +29,49 @@ interface MetricDisplay { description?: string; } -const getQualityLabel = (score: number) => { - if (score >= 0.8) return { label: 'Excellent', color: '#4CAF50', icon: 'star' }; - if (score >= 0.6) return { label: 'Good', color: '#8BC34A', icon: 'thumbs-up' }; - if (score >= 0.4) return { label: 'Fair', color: '#FFC107', icon: 'remove' }; - if (score >= 0.2) return { label: 'Poor', color: '#FF9800', icon: 'thumbs-down' }; - return { label: 'Very Poor', color: '#F44336', icon: 'close' }; +// Note: These functions use hardcoded colors because they return color values +// that will be used dynamically. The colors will be applied by the component. +const getQualityLabel = (score: number, colors?: any) => { + const statusSuccess = colors?.statusSuccess || '#4CAF50'; + const statusWarning = colors?.statusWarning || '#FFC107'; + const statusError = colors?.statusError || '#F44336'; + + if (score >= 0.8) return { label: 'Excellent', color: statusSuccess, icon: 'star' }; + if (score >= 0.6) return { label: 'Good', color: statusSuccess, icon: 'thumbs-up' }; + if (score >= 0.4) return { label: 'Fair', color: statusWarning, icon: 'remove' }; + if (score >= 0.2) return { label: 'Poor', color: statusWarning, icon: 'thumbs-down' }; + return { label: 'Very Poor', color: statusError, icon: 'close' }; }; -const getSpeedLabel = (timeMs: number, allTimes: number[]) => { +const getSpeedLabel = (timeMs: number, allTimes: number[], colors?: any) => { const minTime = Math.min(...allTimes); const maxTime = Math.max(...allTimes); const relative = (timeMs - minTime) / (maxTime - minTime); - if (timeMs === minTime) return { label: 'Fastest', color: '#4CAF50', icon: 'flash' }; - if (relative <= 0.3) return { label: 'Fast', color: '#8BC34A', icon: 'rocket' }; - if (relative <= 0.7) return { label: 'Moderate', color: '#FFC107', icon: 'time' }; - return { label: 'Slow', color: '#FF5722', icon: 'hourglass' }; + const statusSuccess = colors?.statusSuccess || '#4CAF50'; + const statusWarning = colors?.statusWarning || '#FFC107'; + const statusError = colors?.statusError || '#FF5722'; + + if (timeMs === minTime) return { label: 'Fastest', color: statusSuccess, icon: 'flash' }; + if (relative <= 0.3) return { label: 'Fast', color: statusSuccess, icon: 'rocket' }; + if (relative <= 0.7) return { label: 'Moderate', color: statusWarning, icon: 'time' }; + return { label: 'Slow', color: statusError, icon: 'hourglass' }; }; -const getTokenEfficiencyDisplay = (score: number, result: VariationResult) => { +const getTokenEfficiencyDisplay = (score: number, result: VariationResult, colors?: any) => { const usage = result.response.usageMetadata; - if (!usage) return { value: 'N/A', label: 'No data', color: '#9E9E9E' }; + const textSecondary = colors?.textSecondary || '#9E9E9E'; + const statusSuccess = colors?.statusSuccess || '#4CAF50'; + const statusWarning = colors?.statusWarning || '#FFC107'; + const statusError = colors?.statusError || '#FF5722'; + + if (!usage) return { value: 'N/A', label: 'No data', color: textSecondary }; const totalTokens = usage.totalTokens || usage.total_tokens || 0; const completionTokens = usage.completionTokens || usage.completion_tokens || usage.candidatesTokenCount || 0; const promptTokens = usage.promptTokens || usage.prompt_tokens || 0; - if (totalTokens === 0) return { value: 'N/A', label: 'No tokens', color: '#9E9E9E' }; + if (totalTokens === 0) return { value: 'N/A', label: 'No tokens', color: textSecondary }; const efficiency = completionTokens / totalTokens; const tokensPerSecond = Math.round(totalTokens / (result.executionTime / 1000)); @@ -66,13 +81,13 @@ const getTokenEfficiencyDisplay = (score: number, result: VariationResult) => { if (efficiency >= 0.4) { label = `Efficient (${tokensPerSecond}/s)`; - color = '#4CAF50'; + color = statusSuccess; } else if (efficiency >= 0.25) { label = `Moderate (${tokensPerSecond}/s)`; - color = '#FFC107'; + color = statusWarning; } else { label = `Low efficiency (${tokensPerSecond}/s)`; - color = '#FF5722'; + color = statusError; } return { @@ -83,12 +98,17 @@ const getTokenEfficiencyDisplay = (score: number, result: VariationResult) => { }; }; -const getCostEffectivenessDisplay = (score: number, result: VariationResult) => { +const getCostEffectivenessDisplay = (score: number, result: VariationResult, colors?: any) => { const usage = result.response.usageMetadata; - if (!usage) return { value: 'N/A', label: 'No data', color: '#9E9E9E' }; + const textSecondary = colors?.textSecondary || '#9E9E9E'; + const statusSuccess = colors?.statusSuccess || '#4CAF50'; + const statusWarning = colors?.statusWarning || '#FFC107'; + const statusError = colors?.statusError || '#FF5722'; + + if (!usage) return { value: 'N/A', label: 'No data', color: textSecondary }; const totalTokens = usage.totalTokens || usage.total_tokens || 0; - if (totalTokens === 0) return { value: 'N/A', label: 'No tokens', color: '#9E9E9E' }; + if (totalTokens === 0) return { value: 'N/A', label: 'No tokens', color: textSecondary }; const costPer1kTokens = result.configuration.modelName?.includes('flash') ? 0.00015 : 0.002; const estimatedCost = (totalTokens / 1000) * costPer1kTokens; @@ -98,16 +118,16 @@ const getCostEffectivenessDisplay = (score: number, result: VariationResult) => if (estimatedCost <= 0.001) { label = 'Very economical'; - color = '#4CAF50'; + color = statusSuccess; } else if (estimatedCost <= 0.01) { label = 'Cost effective'; - color = '#8BC34A'; + color = statusSuccess; } else if (estimatedCost <= 0.05) { label = 'Moderate cost'; - color = '#FFC107'; + color = statusWarning; } else { label = 'Expensive'; - color = '#FF5722'; + color = statusError; } return { @@ -246,7 +266,7 @@ const ExecutionComparisonChart: React.FC = ({ }, activeTab: { borderBottomWidth: 2, - borderBottomColor: '#2196F3', + borderBottomColor: colors.accent, }, tabText: { marginLeft: 8, @@ -255,7 +275,7 @@ const ExecutionComparisonChart: React.FC = ({ fontWeight: '500' as const, }, activeTabText: { - color: '#2196F3', + color: colors.accent, fontWeight: '600' as const, }, tabContent: { @@ -290,7 +310,7 @@ const ExecutionComparisonChart: React.FC = ({ marginBottom: 12, }, bestConfigCard: { - borderColor: '#4CAF50', + borderColor: colors.statusSuccess, borderWidth: 2, }, configHeader: { @@ -308,10 +328,10 @@ const ExecutionComparisonChart: React.FC = ({ flex: 1, }, bestConfigText: { - color: '#4CAF50', + color: colors.statusSuccess, }, bestConfigTextSmall: { - color: '#4CAF50', + color: colors.statusSuccess, fontWeight: '600' as const, }, trophyIcon: { @@ -433,7 +453,7 @@ const ExecutionComparisonChart: React.FC = ({ borderColor: colors.borderLight, }, bestTokenCard: { - borderColor: '#4CAF50', + borderColor: colors.statusSuccess, borderWidth: 2, }, tokenHeader: { @@ -524,7 +544,7 @@ const ExecutionComparisonChart: React.FC = ({ fastestBadge: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#4CAF50', + backgroundColor: colors.statusSuccess, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, @@ -532,7 +552,7 @@ const ExecutionComparisonChart: React.FC = ({ bestBadge: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#2196F3', + backgroundColor: colors.accent, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, @@ -572,7 +592,7 @@ const ExecutionComparisonChart: React.FC = ({ marginBottom: 12, }, bestConfigDetailsCard: { - borderColor: '#4CAF50', + borderColor: colors.statusSuccess, borderWidth: 2, }, configDetailsHeader: { @@ -647,7 +667,7 @@ const ExecutionComparisonChart: React.FC = ({ {result.configuration.variationName} {isBest && ( - + )} @@ -689,7 +709,7 @@ const ExecutionComparisonChart: React.FC = ({ styles.scoreBarFill, { width: `${Math.round(scores.overall_score * 100)}%`, - backgroundColor: isBest ? '#4CAF50' : '#2196F3' + backgroundColor: isBest ? colors.statusSuccess : colors.accent } ]} /> @@ -745,7 +765,7 @@ const ExecutionComparisonChart: React.FC = ({ {metricValues.map((item) => { const displayInfo = metric.getDisplayValue ? metric.getDisplayValue(item.value, item.result) : - { value: String(item.value), label: '', color: '#9E9E9E' }; + { value: String(item.value), label: '', color: colors.textSecondary }; return ( @@ -754,7 +774,7 @@ const ExecutionComparisonChart: React.FC = ({ {item.configName} {item.isBest && ( - + )} @@ -806,7 +826,7 @@ const ExecutionComparisonChart: React.FC = ({ {result.configuration.variationName} - {isBest && } + {isBest && } @@ -817,11 +837,11 @@ const ExecutionComparisonChart: React.FC = ({ - + Prompt: {promptTokens.toLocaleString()} - + Completion: {completionTokens.toLocaleString()} @@ -831,7 +851,7 @@ const ExecutionComparisonChart: React.FC = ({ style={[ styles.tokenBar, { - backgroundColor: '#4CAF50', + backgroundColor: colors.statusSuccess, flex: promptTokens || 1 } ]} @@ -840,7 +860,7 @@ const ExecutionComparisonChart: React.FC = ({ style={[ styles.tokenBar, { - backgroundColor: '#2196F3', + backgroundColor: colors.accent, flex: completionTokens || 1 } ]} @@ -909,7 +929,7 @@ const ExecutionComparisonChart: React.FC = ({ styles.performanceBarFill, { width: `${percentage}%`, - backgroundColor: isFastest ? '#4CAF50' : isBest ? '#2196F3' : '#9E9E9E' + backgroundColor: isFastest ? colors.statusSuccess : isBest ? colors.accent : colors.textSecondary } ]} /> @@ -933,7 +953,7 @@ const ExecutionComparisonChart: React.FC = ({ {config.variationName} - {isBest && } + {isBest && } @@ -1011,7 +1031,7 @@ const ExecutionComparisonChart: React.FC = ({ {tab.label} diff --git a/frontend/src/components/ExecutionFlowGraph.tsx b/frontend/src/components/ExecutionFlowGraph.tsx index d1d808c..b4bc281 100644 --- a/frontend/src/components/ExecutionFlowGraph.tsx +++ b/frontend/src/components/ExecutionFlowGraph.tsx @@ -565,7 +565,7 @@ const ExecutionFlowGraph: React.FC = ({ lineHeight: 16, }, eventDetailErrorContainer: { - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}15`, borderRadius: 8, padding: 12, borderLeftWidth: 4, @@ -908,25 +908,25 @@ const ExecutionFlowGraph: React.FC = ({ const getEventTypeColor = (eventType: string): string => { switch (eventType) { - case 'prompt_start': return '#007AFF'; - case 'ai_model_call': return '#5856D6'; - case 'function_call_start': return '#FF9500'; - case 'function_call_end': return '#34C759'; - case 'ai_response': return '#32D74B'; - case 'error_occurred': return '#FF3B30'; - case 'retry_attempt': return '#FF9500'; - case 'execution_complete': return '#30B0C7'; - default: return '#8E8E93'; + case 'prompt_start': return colors.accent; + case 'ai_model_call': return colors.accent; + case 'function_call_start': return colors.statusWarning; + case 'function_call_end': return colors.statusSuccess; + case 'ai_response': return colors.statusSuccess; + case 'error_occurred': return colors.statusError; + case 'retry_attempt': return colors.statusWarning; + case 'execution_complete': return colors.accent; + default: return colors.textSecondary; } }; const getStatusColor = (status: string): string => { switch (status) { - case 'success': return '#34C759'; - case 'error': return '#FF3B30'; - case 'timeout': return '#FF9500'; - case 'pending': return '#8E8E93'; - default: return '#8E8E93'; + case 'success': return colors.statusSuccess; + case 'error': return colors.statusError; + case 'timeout': return colors.statusWarning; + case 'pending': return colors.textSecondary; + default: return colors.textSecondary; } }; @@ -1105,14 +1105,14 @@ const ExecutionFlowGraph: React.FC = ({ const getEventColor = (eventType: string) => { switch (eventType) { - case 'prompt_start': return '#28A745'; // Vibrant green - case 'ai_model_call': return '#0066CC'; // Rich blue - case 'function_call_start': return '#FD7E14'; // Bright orange - case 'function_call_end': return '#20C997'; // Teal green - case 'ai_response': return '#6F42C1'; // Purple - case 'error_occurred': return '#DC3545'; // Red - case 'execution_complete': return '#17A2B8'; // Cyan - default: return '#6C757D'; // Gray + case 'prompt_start': return colors.statusSuccess; + case 'ai_model_call': return colors.accent; + case 'function_call_start': return colors.statusWarning; + case 'function_call_end': return colors.statusSuccess; + case 'ai_response': return colors.accent; + case 'error_occurred': return colors.statusError; + case 'execution_complete': return colors.accent; + default: return colors.textSecondary; } }; diff --git a/frontend/src/components/ExecutionLoadingIndicator.tsx b/frontend/src/components/ExecutionLoadingIndicator.tsx index 34668d1..d1b1d49 100644 --- a/frontend/src/components/ExecutionLoadingIndicator.tsx +++ b/frontend/src/components/ExecutionLoadingIndicator.tsx @@ -103,10 +103,10 @@ const ExecutionLoadingIndicator: React.FC = ({ marginTop: 20, paddingVertical: 10, paddingHorizontal: 16, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}10`, borderRadius: 8, borderWidth: 1, - borderColor: '#FFE4E1', + borderColor: `${colors.statusError}20`, gap: 8, }, cancelButtonText: { diff --git a/frontend/src/components/ExecutionLogsCard.tsx b/frontend/src/components/ExecutionLogsCard.tsx index ff2a350..d4e6910 100644 --- a/frontend/src/components/ExecutionLogsCard.tsx +++ b/frontend/src/components/ExecutionLogsCard.tsx @@ -400,7 +400,7 @@ const ExecutionLogsCard: React.FC = ({ flexDirection: 'row' as const, alignItems: 'center' as const, justifyContent: 'center' as const, - backgroundColor: '#FFE0E0', + backgroundColor: `${colors.statusError}15`, borderRadius: 8, paddingVertical: 10, marginTop: 12, @@ -615,12 +615,12 @@ const ExecutionLogsCard: React.FC = ({ const getCategoryColor = (category: LogCategory): string => { switch (category) { - case 'FUNCTION_CALL': return '#FF6B6B'; - case 'API_CALL': return '#4ECDC4'; - case 'SETUP': return '#45B7D1'; - case 'EXECUTION': return '#F9A825'; - case 'COMPLETION': return '#66BB6A'; - case 'ERROR': return '#EF5350'; + case 'FUNCTION_CALL': return colors.statusError; + case 'API_CALL': return colors.accent; + case 'SETUP': return colors.accentSecondary; + case 'EXECUTION': return colors.statusWarning; + case 'COMPLETION': return colors.statusSuccess; + case 'ERROR': return colors.statusError; default: return colors.textSecondary; } }; diff --git a/frontend/src/components/ExecutionResultsViewer.tsx b/frontend/src/components/ExecutionResultsViewer.tsx index 4e4c517..b3042f3 100644 --- a/frontend/src/components/ExecutionResultsViewer.tsx +++ b/frontend/src/components/ExecutionResultsViewer.tsx @@ -179,7 +179,7 @@ const ExecutionResultsViewer: React.FC = ({ detailedComparisonButton: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#2196F3', + backgroundColor: colors.accent, paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20, @@ -195,8 +195,8 @@ const ExecutionResultsViewer: React.FC = ({ borderRadius: 12, padding: 16, borderWidth: 2, - borderColor: '#FFD700', - shadowColor: '#FFD700', + borderColor: colors.statusWarning, + shadowColor: colors.statusWarning, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, @@ -210,7 +210,7 @@ const ExecutionResultsViewer: React.FC = ({ bestConfigTitle: { fontSize: 18, fontWeight: '700' as const, - color: '#B8860B', + color: colors.statusWarning, marginLeft: 8, }, bestConfigDetails: { @@ -223,16 +223,16 @@ const ExecutionResultsViewer: React.FC = ({ fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', }, analysisNotesContainer: { - backgroundColor: '#FFFEF7', + backgroundColor: `${colors.statusWarning}10`, borderRadius: 8, padding: 12, borderLeftWidth: 3, - borderLeftColor: '#FFD700', + borderLeftColor: colors.statusWarning, }, analysisNotesLabel: { fontSize: 14, fontWeight: '600' as const, - color: '#B8860B', + color: colors.statusWarning, marginBottom: 4, }, analysisNotes: { @@ -294,8 +294,8 @@ const ExecutionResultsViewer: React.FC = ({ borderColor: colors.borderLight, }, bestQuickMetricCard: { - backgroundColor: '#E8F5E8', - borderColor: '#4CAF50', + backgroundColor: `${colors.statusSuccess}15`, + borderColor: colors.statusSuccess, }, quickMetricName: { fontSize: 14, @@ -304,7 +304,7 @@ const ExecutionResultsViewer: React.FC = ({ marginBottom: 8, }, bestQuickMetricText: { - color: '#4CAF50', + color: colors.statusSuccess, }, quickMetricStats: { gap: 4, @@ -316,10 +316,10 @@ const ExecutionResultsViewer: React.FC = ({ quickMetricScore: { fontSize: 14, fontWeight: 'bold' as const, - color: '#2196F3', + color: colors.accent, }, bestQuickMetricScore: { - color: '#4CAF50', + color: colors.statusSuccess, }, modalCloseButton: { padding: 8, @@ -340,8 +340,8 @@ const ExecutionResultsViewer: React.FC = ({ }, bestResultCard: { borderWidth: 2, - borderColor: '#FFD700', - shadowColor: '#FFD700', + borderColor: colors.statusWarning, + shadowColor: colors.statusWarning, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, @@ -363,12 +363,12 @@ const ExecutionResultsViewer: React.FC = ({ flex: 1, }, bestConfigName: { - color: '#B8860B', + color: colors.statusWarning, }, bestBadge: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#FFD700', + backgroundColor: colors.statusWarning, borderRadius: 6, paddingHorizontal: 8, paddingVertical: 4, @@ -377,7 +377,7 @@ const ExecutionResultsViewer: React.FC = ({ bestBadgeText: { fontSize: 10, fontWeight: '700' as const, - color: '#B8860B', + color: colors.statusWarning, }, resultMeta: { flexDirection: 'row' as const, @@ -426,7 +426,7 @@ const ExecutionResultsViewer: React.FC = ({ color: colors.textPrimary, }, errorContainer: { - backgroundColor: '#FFEBEE', + backgroundColor: `${colors.statusError}15`, borderRadius: 8, padding: 12, marginBottom: 12, @@ -436,13 +436,13 @@ const ExecutionResultsViewer: React.FC = ({ errorLabel: { fontSize: 14, fontWeight: '600' as const, - color: '#D32F2F', + color: colors.statusError, marginBottom: 8, }, errorText: { fontSize: 15, lineHeight: 22, - color: '#D32F2F', + color: colors.statusError, }, usageContainer: { backgroundColor: colors.bgHover, @@ -462,14 +462,14 @@ const ExecutionResultsViewer: React.FC = ({ fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', }, functionsContainer: { - backgroundColor: '#FFF8E1', + backgroundColor: `${colors.statusWarning}15`, borderRadius: 8, padding: 12, }, functionsLabel: { fontSize: 14, fontWeight: '600' as const, - color: '#F57C00', + color: colors.statusWarning, marginBottom: 8, }, functionCall: { @@ -483,7 +483,7 @@ const ExecutionResultsViewer: React.FC = ({ functionName: { fontSize: 13, fontWeight: '600' as const, - color: '#F57C00', + color: colors.statusWarning, marginBottom: 4, fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', }, @@ -656,7 +656,7 @@ const ExecutionResultsViewer: React.FC = ({ {executionResult.comparison?.bestConfigurationId && ( - + Best Found )} @@ -728,7 +728,7 @@ const ExecutionResultsViewer: React.FC = ({ {executionResult.comparison?.bestConfigurationId ? ( - + Best Configuration @@ -835,7 +835,7 @@ const ExecutionResultsViewer: React.FC = ({ {isBestConfig && ( - + BEST )} diff --git a/frontend/src/components/ExecutionRunCard.tsx b/frontend/src/components/ExecutionRunCard.tsx index 40f8f08..dd94f62 100644 --- a/frontend/src/components/ExecutionRunCard.tsx +++ b/frontend/src/components/ExecutionRunCard.tsx @@ -66,7 +66,7 @@ const ExecutionRunCard: React.FC = ({ deleteButton: { padding: 8, borderRadius: 6, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}10`, }, descriptionContainer: { marginBottom: 8, @@ -98,12 +98,12 @@ const ExecutionRunCard: React.FC = ({ createTemplateButton: { padding: 8, borderRadius: 6, - backgroundColor: '#F0FDF4', + backgroundColor: `${colors.statusSuccess}10`, }, reExecuteButton: { padding: 8, borderRadius: 6, - backgroundColor: '#F0F9FF', + backgroundColor: colors.accentSoft, }, })); diff --git a/frontend/src/components/ExecutionTags.tsx b/frontend/src/components/ExecutionTags.tsx index 5069990..1879f07 100644 --- a/frontend/src/components/ExecutionTags.tsx +++ b/frontend/src/components/ExecutionTags.tsx @@ -46,7 +46,7 @@ const ExecutionTag: React.FC = ({ paddingHorizontal: 16, borderRadius: 8, borderWidth: 1, - borderColor: 'rgba(0, 122, 255, 0.2)', + borderColor: `${colors.accent}33`, gap: 6, }, tagCompact: { @@ -166,7 +166,7 @@ const ExecutionTags: React.FC = ({ icon="extension-puzzle" onPress={onFunctionsPress} color={selectedFunctionsCount > 0 ? colors.statusSuccess : colors.textSecondary} - backgroundColor={selectedFunctionsCount > 0 ? "#F0FDF4" : colors.bgSurface} + backgroundColor={selectedFunctionsCount > 0 ? `${colors.statusSuccess}15` : colors.bgSurface} /> = ({ icon="ellipsis-horizontal" onPress={onOtherOptionsPress} color={otherOptionsCount > 0 ? colors.statusWarning : colors.textSecondary} - backgroundColor={otherOptionsCount > 0 ? "#FFF8F0" : colors.bgSurface} + backgroundColor={otherOptionsCount > 0 ? `${colors.statusWarning}15` : colors.bgSurface} /> diff --git a/frontend/src/components/FunctionsModal.tsx b/frontend/src/components/FunctionsModal.tsx index d0f4278..0e8e2cd 100644 --- a/frontend/src/components/FunctionsModal.tsx +++ b/frontend/src/components/FunctionsModal.tsx @@ -97,7 +97,7 @@ const FunctionsModal: React.FC = ({ fontSize: 14, fontWeight: '600' as const, color: colors.statusSuccess, - backgroundColor: '#F0FDF4', + backgroundColor: `${colors.statusSuccess}15`, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, @@ -221,7 +221,7 @@ const FunctionsModal: React.FC = ({ }, functionCardSelected: { borderColor: colors.statusSuccess, - backgroundColor: '#F8FFF9', + backgroundColor: `${colors.statusSuccess}10`, }, functionHeader: { flexDirection: 'row' as const, @@ -252,8 +252,8 @@ const FunctionsModal: React.FC = ({ alignSelf: 'flex-start' as const, }, functionCategorySelected: { - color: '#2D7D32', - backgroundColor: '#E8F5E8', + color: colors.statusSuccess, + backgroundColor: `${colors.statusSuccess}15`, }, checkbox: { width: 20, @@ -276,7 +276,7 @@ const FunctionsModal: React.FC = ({ marginBottom: 8, }, functionDescriptionSelected: { - color: '#2D7D32', + color: colors.statusSuccess, }, functionMeta: { flexDirection: 'row' as const, diff --git a/frontend/src/components/GitHubAuthSetup.tsx b/frontend/src/components/GitHubAuthSetup.tsx index c25665c..ba2a3a4 100644 --- a/frontend/src/components/GitHubAuthSetup.tsx +++ b/frontend/src/components/GitHubAuthSetup.tsx @@ -88,7 +88,7 @@ export const GitHubAuthSetup: React.FC = ({ fontSize: 10, fontWeight: '700' as const, color: colors.statusWarning, - backgroundColor: '#FFF4E6', + backgroundColor: `${colors.statusWarning}15`, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, diff --git a/frontend/src/components/GitHubOnboardingSetup.tsx b/frontend/src/components/GitHubOnboardingSetup.tsx index 52f37a5..9ff34ad 100644 --- a/frontend/src/components/GitHubOnboardingSetup.tsx +++ b/frontend/src/components/GitHubOnboardingSetup.tsx @@ -125,7 +125,7 @@ export const GitHubOnboardingSetup: React.FC = ({ fontSize: 10, fontWeight: '700' as const, color: colors.statusWarning, - backgroundColor: '#FFF4E6', + backgroundColor: `${colors.statusWarning}15`, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6, diff --git a/frontend/src/components/GroupedFunctionList.tsx b/frontend/src/components/GroupedFunctionList.tsx index 1b28fdc..8daaeba 100644 --- a/frontend/src/components/GroupedFunctionList.tsx +++ b/frontend/src/components/GroupedFunctionList.tsx @@ -120,7 +120,7 @@ const GroupedFunctionList: React.FC = ({ elevation: 1, }, selectedFunctionItem: { - backgroundColor: '#E8F4FD', + backgroundColor: colors.accentSoft, borderWidth: 1, borderColor: colors.accent, }, diff --git a/frontend/src/components/JsonEditor.tsx b/frontend/src/components/JsonEditor.tsx index 151f732..c4311f9 100644 --- a/frontend/src/components/JsonEditor.tsx +++ b/frontend/src/components/JsonEditor.tsx @@ -107,12 +107,12 @@ const JsonEditor: React.FC = ({ color: colors.textInverse, }, toolbarButtonDisabledText: { - color: '#C7C7CC', + color: colors.textTertiary, }, clearButton: { - backgroundColor: '#FFF0F0', + backgroundColor: `${colors.statusError}10`, borderWidth: 1, - borderColor: '#FFB3B3', + borderColor: `${colors.statusError}40`, }, editorContent: { position: 'relative' as const, @@ -152,9 +152,9 @@ const JsonEditor: React.FC = ({ alignItems: 'center' as const, gap: 8, padding: 12, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}15`, borderTopWidth: 1, - borderTopColor: '#FED7D7', + borderTopColor: `${colors.statusError}30`, }, errorText: { fontSize: 12, @@ -260,10 +260,10 @@ const JsonEditor: React.FC = ({ onPress={formatJson} disabled={!isValid} > - = ({ onPress={minifyJson} disabled={!isValid} > - = ({ value={value} onChangeText={onChangeText} placeholder={placeholder} - placeholderTextColor="#C7C7CC" + placeholderTextColor={colors.textTertiary} multiline textAlignVertical="top" scrollEnabled={true} diff --git a/frontend/src/components/LiveExecutionViewer.tsx b/frontend/src/components/LiveExecutionViewer.tsx index 0f39da5..8f6c914 100644 --- a/frontend/src/components/LiveExecutionViewer.tsx +++ b/frontend/src/components/LiveExecutionViewer.tsx @@ -107,10 +107,10 @@ const createStyles = (colors: ThemeColors) => ({ alignItems: 'center' as const, paddingHorizontal: 12, paddingVertical: 8, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}10`, borderRadius: 8, borderWidth: 1, - borderColor: '#FFE4E1', + borderColor: `${colors.statusError}20`, gap: 4, }, cancelButtonText: { @@ -153,9 +153,9 @@ const createStyles = (colors: ThemeColors) => ({ flexDirection: 'row' as const, alignItems: 'center' as const, padding: 12, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}10`, borderBottomWidth: 1, - borderBottomColor: '#FFE4E1', + borderBottomColor: `${colors.statusError}20`, gap: 8, }, errorText: { @@ -1132,7 +1132,7 @@ const LiveExecutionViewer: React.FC = ({ 🚀 @@ -1149,7 +1149,7 @@ const LiveExecutionViewer: React.FC = ({ 🤖 @@ -1173,7 +1173,7 @@ const LiveExecutionViewer: React.FC = ({ = maxProgress ? '#34C759' : '#FF9500' } + { backgroundColor: progress >= maxProgress ? colors.statusSuccess : colors.statusWarning } ]}> ✅ diff --git a/frontend/src/components/OtherOptionsModal.tsx b/frontend/src/components/OtherOptionsModal.tsx index 32eddd8..9ec2e98 100644 --- a/frontend/src/components/OtherOptionsModal.tsx +++ b/frontend/src/components/OtherOptionsModal.tsx @@ -95,7 +95,7 @@ const OtherOptionsModal: React.FC = ({ fontSize: 14, fontWeight: '600' as const, color: colors.statusWarning, - backgroundColor: '#FFF8F0', + backgroundColor: `${colors.statusWarning}15`, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, @@ -114,10 +114,10 @@ const OtherOptionsModal: React.FC = ({ alignItems: 'center' as const, paddingHorizontal: 16, paddingVertical: 8, - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}15`, borderRadius: 6, borderWidth: 1, - borderColor: '#FFD7D7', + borderColor: `${colors.statusError}40`, gap: 6, }, clearButtonText: { @@ -177,12 +177,12 @@ const OtherOptionsModal: React.FC = ({ marginTop: 4, }, tipsContainer: { - backgroundColor: '#FFF8F0', + backgroundColor: `${colors.statusWarning}15`, borderRadius: 12, padding: 16, marginTop: 8, borderWidth: 1, - borderColor: '#FFE4B5', + borderColor: `${colors.statusWarning}40`, }, tipsHeader: { flexDirection: 'row' as const, @@ -212,7 +212,7 @@ const OtherOptionsModal: React.FC = ({ tipText: { flex: 1, fontSize: 14, - color: '#B8860B', + color: colors.statusWarning, lineHeight: 20, }, })); diff --git a/frontend/src/components/ResultCard.tsx b/frontend/src/components/ResultCard.tsx index 18baf38..47bdc8f 100644 --- a/frontend/src/components/ResultCard.tsx +++ b/frontend/src/components/ResultCard.tsx @@ -39,18 +39,18 @@ const ResultCard: React.FC = ({ overflow: 'hidden' as const, }, bestConfigContainer: { - borderColor: '#FFD700', + borderColor: colors.statusWarning, borderWidth: 2, - shadowColor: '#FFD700', + shadowColor: colors.statusWarning, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 4, }, bestConfigBadge: { - backgroundColor: '#FFF8DC', + backgroundColor: `${colors.statusWarning}15`, borderBottomWidth: 1, - borderBottomColor: '#FFD700', + borderBottomColor: colors.statusWarning, paddingHorizontal: 12, paddingVertical: 8, flexDirection: 'row' as const, @@ -60,7 +60,7 @@ const ResultCard: React.FC = ({ bestConfigText: { fontSize: 12, fontWeight: '600' as const, - color: '#B8860B', + color: colors.statusWarning, }, header: { flexDirection: 'row' as const, @@ -151,7 +151,7 @@ const ResultCard: React.FC = ({ borderRadius: 4, }, chevronContainerExpanded: { - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, }, expandedContent: { padding: 16, @@ -269,7 +269,7 @@ const ResultCard: React.FC = ({ functionCallsContainer: { marginTop: 16, padding: 12, - backgroundColor: '#F0F8FF', + backgroundColor: colors.accentSoft, borderRadius: 8, borderWidth: 1, borderColor: colors.accent, @@ -361,9 +361,9 @@ const ResultCard: React.FC = ({ marginLeft: 4, }, bestConfigDetailItem: { - borderColor: '#FFD700', + borderColor: colors.statusWarning, borderWidth: 1, - backgroundColor: '#FFF8DC', + backgroundColor: `${colors.statusWarning}15`, }, configIdLabelRow: { flexDirection: 'row' as const, @@ -374,7 +374,7 @@ const ResultCard: React.FC = ({ bestIndicatorSmall: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#FFD700', + backgroundColor: colors.statusWarning, borderRadius: 6, paddingHorizontal: 3, paddingVertical: 1, @@ -386,7 +386,7 @@ const ResultCard: React.FC = ({ color: colors.textInverse, }, bestConfigValue: { - color: '#B8860B', + color: colors.statusWarning, fontWeight: '600' as const, }, })); @@ -405,7 +405,7 @@ const ResultCard: React.FC = ({ case 'error': return colors.statusError; case 'timeout': - return '#FF9500'; + return colors.statusWarning; default: return colors.textSecondary; } @@ -434,7 +434,7 @@ const ResultCard: React.FC = ({ const getTemperatureColor = (temperature?: number) => { if (!temperature) return colors.textSecondary; if (temperature <= 0.3) return colors.statusSuccess; - if (temperature <= 0.7) return '#FF9500'; + if (temperature <= 0.7) return colors.statusWarning; return colors.statusError; }; @@ -451,7 +451,7 @@ const ResultCard: React.FC = ({ {/* Best Configuration Badge */} {isBestConfiguration && ( - + Best Configuration )} @@ -492,7 +492,7 @@ const ResultCard: React.FC = ({ {isBestConfiguration && ( - + )} @@ -581,7 +581,7 @@ const ResultCard: React.FC = ({ Configuration ID {isBestConfiguration && ( - + BEST )} diff --git a/frontend/src/components/SessionManager.tsx b/frontend/src/components/SessionManager.tsx index 0710f1d..80e412c 100644 --- a/frontend/src/components/SessionManager.tsx +++ b/frontend/src/components/SessionManager.tsx @@ -151,7 +151,7 @@ export const SessionManager: React.FC = ({ gap: 12, }, loginButton: { - backgroundColor: '#F0F8FF', + backgroundColor: colors.accentSoft, borderWidth: 1, borderColor: colors.accent, }, @@ -161,17 +161,17 @@ export const SessionManager: React.FC = ({ color: colors.accent, }, logoutButton: { - backgroundColor: '#FFF8F0', + backgroundColor: `${colors.statusWarning}15`, borderWidth: 1, - borderColor: '#FF9500', + borderColor: colors.statusWarning, }, logoutButtonText: { fontSize: 14, fontWeight: '500' as const, - color: '#FF9500', + color: colors.statusWarning, }, exportButton: { - backgroundColor: '#F0F8FF', + backgroundColor: colors.accentSoft, borderWidth: 1, borderColor: colors.accent, }, @@ -181,7 +181,7 @@ export const SessionManager: React.FC = ({ color: colors.accent, }, clearButton: { - backgroundColor: '#FFF0F0', + backgroundColor: `${colors.statusError}15`, borderWidth: 1, borderColor: colors.statusError, }, @@ -191,7 +191,7 @@ export const SessionManager: React.FC = ({ color: colors.statusError, }, cleanupButton: { - backgroundColor: '#FFF0F0', + backgroundColor: `${colors.statusError}15`, borderWidth: 1, borderColor: colors.statusError, }, @@ -513,7 +513,7 @@ export const SessionManager: React.FC = ({ if (user.is_temporary) { return { icon: 'time-outline' as any, - color: '#FF9500', + color: colors.statusWarning, title: 'Temporary User', subtitle: `${user.username} (unsaved session)`, }; diff --git a/frontend/src/components/TeamCard.tsx b/frontend/src/components/TeamCard.tsx index 039752d..3bd4736 100644 --- a/frontend/src/components/TeamCard.tsx +++ b/frontend/src/components/TeamCard.tsx @@ -361,7 +361,7 @@ const TeamCard: React.FC = ({ onPress={() => setShowEditContextModal(true)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} > - + = ({ team, onClos backgroundColor: colors.bgSurface, }, filterButtonActive: { - backgroundColor: '#FF6B35', + backgroundColor: colors.accent, }, filterButtonText: { color: colors.textSecondary, @@ -81,7 +81,7 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos flexDirection: 'row' as const, alignItems: 'center' as const, padding: 16, - backgroundColor: '#ffebee', + backgroundColor: `${colors.statusError}15`, marginHorizontal: 16, marginTop: 8, borderRadius: 8, @@ -124,10 +124,10 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos borderRadius: 6, }, selectedNode: { - backgroundColor: '#e3f2fd', + backgroundColor: colors.accentSoft, }, contextNode: { - backgroundColor: '#fff3e0', + backgroundColor: `${colors.statusWarning}15`, }, nodeContent: { flexDirection: 'row' as const, @@ -186,7 +186,7 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos borderRadius: 8, marginBottom: 8, borderLeftWidth: 3, - borderLeftColor: '#FF6B35', + borderLeftColor: colors.accent, }, searchResultHeader: { flexDirection: 'row' as const, @@ -214,7 +214,7 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos }, searchResultRelevance: { fontSize: 12, - color: '#FF6B35', + color: colors.accent, fontWeight: 'bold' as const, }, noResults: { @@ -236,11 +236,11 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos }, relationship: { padding: 12, - backgroundColor: '#fff3e0', + backgroundColor: `${colors.statusWarning}15`, borderRadius: 8, marginBottom: 8, borderLeftWidth: 3, - borderLeftColor: '#FF9800', + borderLeftColor: colors.statusWarning, }, relationshipText: { fontSize: 14, @@ -249,7 +249,7 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos }, relationshipStrength: { fontSize: 12, - color: '#FF9800', + color: colors.statusWarning, fontWeight: 'bold' as const, }, emptyStateContainer: { @@ -534,10 +534,10 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos size={16} color={ node.type === 'context' - ? '#FF6B35' + ? colors.accent : node.type === 'relationship' - ? '#FF9800' - : '#2196F3' + ? colors.statusWarning + : colors.accentSecondary } style={styles.nodeIcon} /> @@ -614,7 +614,7 @@ export const TeamMemoryViewer: React.FC = ({ team, onClos - + {team.name} - Team Memory diff --git a/frontend/src/components/TeamResumeModal.tsx b/frontend/src/components/TeamResumeModal.tsx index aa4ccd1..cda7477 100644 --- a/frontend/src/components/TeamResumeModal.tsx +++ b/frontend/src/components/TeamResumeModal.tsx @@ -167,14 +167,14 @@ const TeamResumeModal: React.FC = ({ gap: 6, }, capabilityTag: { - backgroundColor: '#E3F2FD', + backgroundColor: colors.accentSoft, borderRadius: 6, paddingHorizontal: 8, paddingVertical: 4, }, capabilityTagText: { fontSize: 12, - color: '#1976D2', + color: colors.accent, fontWeight: '500' as const, }, moreCapabilities: { @@ -200,25 +200,25 @@ const TeamResumeModal: React.FC = ({ gap: 8, }, coverageTag: { - backgroundColor: '#E8F5E8', + backgroundColor: `${colors.statusSuccess}15`, borderRadius: 8, paddingHorizontal: 12, paddingVertical: 6, }, coverageTagText: { fontSize: 14, - color: '#2E7D32', + color: colors.statusSuccess, fontWeight: '500' as const, }, integrationTag: { - backgroundColor: '#FFF3E0', + backgroundColor: `${colors.statusWarning}15`, borderRadius: 8, paddingHorizontal: 12, paddingVertical: 6, }, integrationTagText: { fontSize: 14, - color: '#F57C00', + color: colors.statusWarning, fontWeight: '500' as const, }, apiKeyItem: { diff --git a/frontend/src/components/TemplateCard.tsx b/frontend/src/components/TemplateCard.tsx index 05dc191..a17d354 100644 --- a/frontend/src/components/TemplateCard.tsx +++ b/frontend/src/components/TemplateCard.tsx @@ -68,7 +68,7 @@ const TemplateCard: React.FC = ({ systemBadge: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#E8F4FD', + backgroundColor: colors.accentSoft, borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2, @@ -115,7 +115,7 @@ const TemplateCard: React.FC = ({ marginTop: 8, }, tag: { - backgroundColor: '#E8F4FD', + backgroundColor: colors.accentSoft, borderRadius: 12, paddingHorizontal: 8, paddingVertical: 4, diff --git a/frontend/src/components/TemplateForm.tsx b/frontend/src/components/TemplateForm.tsx index 30c0ba9..30d91bc 100644 --- a/frontend/src/components/TemplateForm.tsx +++ b/frontend/src/components/TemplateForm.tsx @@ -163,7 +163,7 @@ const TemplateForm: React.FC = ({ sectionTitle: { fontSize: 18, fontWeight: '600' as const, color: colors.textPrimary, flex: 1 }, tooltipButton: { padding: 4 }, infoCard: { backgroundColor: colors.bgSurface, padding: 16, borderRadius: 12, borderLeftWidth: 4, borderLeftColor: colors.accent }, - infoText: { fontSize: 14, color: '#5A6C7D', lineHeight: 20 }, + infoText: { fontSize: 14, color: colors.textSecondary, lineHeight: 20 }, inputRow: { flexDirection: 'row' as const, gap: 12, marginBottom: 16 }, inputContainer: { flex: 1 }, labelContainer: { flexDirection: 'row' as const, alignItems: 'center' as const, justifyContent: 'space-between' as const, marginBottom: 8 }, @@ -175,11 +175,11 @@ const TemplateForm: React.FC = ({ variableChips: { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 8 }, variableChip: { backgroundColor: colors.accent, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 }, variableChipText: { fontSize: 12, fontWeight: '500' as const, color: colors.textInverse }, - detectedParametersContainer: { backgroundColor: '#F0F9FF', borderRadius: 8, padding: 12, marginTop: 12, borderLeftWidth: 3, borderLeftColor: '#0EA5E9' }, - detectedParametersLabel: { fontSize: 12, fontWeight: '600' as const, color: '#0369A1', marginBottom: 8 }, + detectedParametersContainer: { backgroundColor: colors.accentSoft, borderRadius: 8, padding: 12, marginTop: 12, borderLeftWidth: 3, borderLeftColor: colors.accent }, + detectedParametersLabel: { fontSize: 12, fontWeight: '600' as const, color: colors.accent, marginBottom: 8 }, detectedParametersList: { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 6 }, - detectedParameterChip: { backgroundColor: '#E0F2FE', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, borderWidth: 1, borderColor: '#0EA5E9' }, - detectedParameterText: { fontSize: 11, fontWeight: '600' as const, color: '#0369A1', fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace' }, + detectedParameterChip: { backgroundColor: colors.bgSurface, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, borderWidth: 1, borderColor: colors.accent }, + detectedParameterText: { fontSize: 11, fontWeight: '600' as const, color: colors.accent, fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace' }, selectorButton: { backgroundColor: colors.bgCard, borderRadius: 12, padding: 16, borderWidth: 1, borderColor: colors.borderLight }, selectorContent: { flexDirection: 'row' as const, alignItems: 'center' as const, justifyContent: 'space-between' as const }, selectorMain: { flex: 1 }, @@ -191,7 +191,7 @@ const TemplateForm: React.FC = ({ modelSelectorHeader: { flexDirection: 'row' as const, alignItems: 'center' as const, justifyContent: 'space-between' as const, marginBottom: 4 }, modelSelectorLabel: { fontSize: 12, fontWeight: '500' as const, color: colors.textSecondary }, modelSelectorValue: { fontSize: 16, fontWeight: '600' as const, color: colors.textPrimary, marginBottom: 4 }, - modelSelectorDescription: { fontSize: 14, color: '#5A6C7D', lineHeight: 18, marginBottom: 4 }, + modelSelectorDescription: { fontSize: 14, color: colors.textSecondary, lineHeight: 18, marginBottom: 4 }, modelIdealFor: { fontSize: 12, color: colors.accent, fontWeight: '500' as const, marginBottom: 4 }, modelTokenInfo: { fontSize: 11, color: colors.textSecondary, fontWeight: '400' as const }, switchContainer: { flexDirection: 'row' as const, alignItems: 'center' as const, justifyContent: 'space-between' as const, backgroundColor: colors.bgCard, padding: 16, borderRadius: 12, borderWidth: 1, borderColor: colors.borderLight }, @@ -222,11 +222,11 @@ const TemplateForm: React.FC = ({ picker: { height: 44 }, addParameterButton: { flexDirection: 'row' as const, alignItems: 'center' as const, justifyContent: 'center' as const, backgroundColor: colors.bgSurface, padding: 16, borderRadius: 12, borderWidth: 2, borderColor: colors.accent, borderStyle: 'dashed' as const, gap: 8 }, addParameterText: { fontSize: 16, fontWeight: '500' as const, color: colors.accent }, - parametersInfo: { backgroundColor: '#F0F7FF', borderRadius: 8, padding: 12, marginBottom: 16, borderLeftWidth: 4, borderLeftColor: colors.accent }, - parametersInfoText: { fontSize: 14, color: '#2C5282', lineHeight: 18 }, + parametersInfo: { backgroundColor: colors.accentSoft, borderRadius: 8, padding: 12, marginBottom: 16, borderLeftWidth: 4, borderLeftColor: colors.accent }, + parametersInfoText: { fontSize: 14, color: colors.textPrimary, lineHeight: 18 }, parameterHeaderLeft: { flexDirection: 'row' as const, alignItems: 'center' as const, flex: 1, gap: 8 }, - autoDetectedBadge: { backgroundColor: '#E8F5E8', paddingHorizontal: 8, paddingVertical: 2, borderRadius: 12, borderWidth: 1, borderColor: '#4CAF50' }, - autoDetectedText: { fontSize: 10, fontWeight: '600' as const, color: '#2E7D32' }, + autoDetectedBadge: { backgroundColor: `${colors.statusSuccess}15`, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 12, borderWidth: 1, borderColor: colors.statusSuccess }, + autoDetectedText: { fontSize: 10, fontWeight: '600' as const, color: colors.statusSuccess }, parameterNameContainer: { backgroundColor: colors.bgSurface, borderRadius: 8, padding: 12, borderWidth: 1, borderColor: colors.borderLight }, parameterNameValue: { fontSize: 14, fontWeight: '600' as const, color: colors.textPrimary, fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace' }, parameterNameNote: { fontSize: 12, color: colors.textSecondary, marginTop: 2 }, @@ -246,7 +246,7 @@ const TemplateForm: React.FC = ({ modelCardDescription: { fontSize: 14, color: colors.textSecondary, lineHeight: 18, marginBottom: 4 }, modelCardDescriptionSelected: { color: colors.textInverse, opacity: 0.9 }, modelCardTokens: { fontSize: 12, color: colors.textSecondary, fontWeight: '500' as const }, - recommendedBadge: { backgroundColor: '#FF9500', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6 }, + recommendedBadge: { backgroundColor: colors.statusWarning, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6 }, badgeText: { fontSize: 12, fontWeight: '600' as const, color: colors.textInverse }, selectedIndicator: { position: 'absolute' as const, top: 16, right: 16 }, enhancedModelCard: { backgroundColor: colors.bgCard, borderRadius: 16, padding: 20, marginBottom: 16, borderWidth: 1, borderColor: colors.borderLight, position: 'relative' as const }, @@ -255,16 +255,16 @@ const TemplateForm: React.FC = ({ modelCardTitleRow: { flexDirection: 'row' as const, alignItems: 'center' as const, flex: 1, gap: 12 }, enhancedModelCardTitle: { fontSize: 18, fontWeight: '700' as const, color: colors.textPrimary, flex: 1 }, enhancedModelCardTitleSelected: { color: colors.accent }, - enhancedModelCardDescription: { fontSize: 15, color: '#5A6C7D', lineHeight: 20, marginBottom: 8 }, - enhancedModelCardDescriptionSelected: { color: '#5A6C7D', opacity: 1 }, + enhancedModelCardDescription: { fontSize: 15, color: colors.textSecondary, lineHeight: 20, marginBottom: 8 }, + enhancedModelCardDescriptionSelected: { color: colors.textSecondary, opacity: 1 }, modelIdealForCard: { fontSize: 13, color: colors.accent, fontWeight: '600' as const, marginBottom: 8, fontStyle: 'italic' as const }, modelDetailsRow: { flexDirection: 'row' as const, justifyContent: 'space-between' as const, alignItems: 'center' as const, marginBottom: 12 }, useCasesContainer: { marginTop: 8 }, - useCasesTitle: { fontSize: 12, fontWeight: '600' as const, color: '#5A6C7D', marginBottom: 8 }, + useCasesTitle: { fontSize: 12, fontWeight: '600' as const, color: colors.textSecondary, marginBottom: 8 }, useCasesList: { flexDirection: 'row' as const, flexWrap: 'wrap' as const, gap: 6 }, - useCaseChip: { backgroundColor: '#F0F7FF', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 16, borderWidth: 1, borderColor: '#B3D9FF' }, - useCaseText: { fontSize: 11, fontWeight: '500' as const, color: '#2C5282' }, - useCaseTextSelected: { color: '#2C5282' }, + useCaseChip: { backgroundColor: colors.accentSoft, paddingHorizontal: 10, paddingVertical: 4, borderRadius: 16, borderWidth: 1, borderColor: `${colors.accent}40` }, + useCaseText: { fontSize: 11, fontWeight: '500' as const, color: colors.textSecondary }, + useCaseTextSelected: { color: colors.accent }, tooltipOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center' as const, alignItems: 'center' as const, paddingHorizontal: 20 }, tooltipContainer: { backgroundColor: colors.bgCard, borderRadius: 16, padding: 20, maxWidth: '90%' as const }, tooltipHeader: { flexDirection: 'row' as const, alignItems: 'center' as const, marginBottom: 12 }, diff --git a/frontend/src/components/TextEditor.tsx b/frontend/src/components/TextEditor.tsx index 79be3ea..0754f55 100644 --- a/frontend/src/components/TextEditor.tsx +++ b/frontend/src/components/TextEditor.tsx @@ -235,35 +235,20 @@ const TextEditor: React.FC = ({ const wordCount = value.trim() === '' ? 0 : value.trim().split(/\s+/).length; const lineCount = lines.length; - const themeColors = { - light: { - background: appColors.bgCard, - border: appColors.borderLight, - focusBorder: appColors.accent, - text: appColors.textPrimary, - placeholder: appColors.textSecondary, - lineNumbers: appColors.textTertiary, - lineNumberBg: appColors.bgSurface, - stats: appColors.textSecondary, - headerBg: appColors.bgSurface, - shadowColor: appColors.shadowColor, - }, - dark: { - background: '#1C1C1E', - border: '#38383A', - focusBorder: '#0A84FF', - text: '#FFFFFF', - placeholder: '#8E8E93', - lineNumbers: '#8E8E93', - lineNumberBg: '#2C2C2E', - stats: '#8E8E93', - headerBg: '#2C2C2E', - shadowColor: '#FFF', - }, + // Use app theme colors for both light and dark modes + const colors = { + background: appColors.bgCard, + border: appColors.borderLight, + focusBorder: appColors.accent, + text: appColors.textPrimary, + placeholder: appColors.textSecondary, + lineNumbers: appColors.textTertiary, + lineNumberBg: appColors.bgSurface, + stats: appColors.textSecondary, + headerBg: appColors.bgSurface, + shadowColor: appColors.shadowColor, }; - const colors = themeColors[theme]; - const handleContentSizeChange = useCallback((event: any) => { const newHeight = Math.max( minHeight, diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx index cd5c307..b774163 100644 --- a/frontend/src/components/Toast.tsx +++ b/frontend/src/components/Toast.tsx @@ -140,10 +140,10 @@ const ToastItem: React.FC = ({ toast, onDismiss }) => { const getColors = () => { switch (toast.type) { - case 'success': return { bg: colors.accentSoft, border: colors.statusSuccess, icon: colors.statusSuccess, text: colors.accent }; - case 'error': return { bg: '#FEE2E2', border: colors.statusError, icon: colors.statusError, text: colors.statusError }; - case 'warning': return { bg: '#FEF3C7', border: '#F59E0B', icon: '#D97706', text: '#78350F' }; - case 'info': return { bg: '#DBEAFE', border: colors.statusInfo, icon: colors.statusInfo, text: '#1E3A8A' }; + case 'success': return { bg: `${colors.statusSuccess}15`, border: colors.statusSuccess, icon: colors.statusSuccess, text: colors.statusSuccess }; + case 'error': return { bg: `${colors.statusError}15`, border: colors.statusError, icon: colors.statusError, text: colors.statusError }; + case 'warning': return { bg: `${colors.statusWarning}15`, border: colors.statusWarning, icon: colors.statusWarning, text: colors.statusWarning }; + case 'info': return { bg: colors.accentSoft, border: colors.accent, icon: colors.accent, text: colors.accent }; default: return { bg: colors.bgSurface, border: colors.textSecondary, icon: colors.textPrimary, text: colors.textPrimary }; } }; diff --git a/frontend/src/components/UserStatusBar.tsx b/frontend/src/components/UserStatusBar.tsx index 0b67b34..7092c37 100644 --- a/frontend/src/components/UserStatusBar.tsx +++ b/frontend/src/components/UserStatusBar.tsx @@ -78,7 +78,7 @@ export const UserStatusBar: React.FC = () => { warningText: { fontSize: 8, fontWeight: '700' as const, - color: '#FFFFFF', + color: colors.textInverse, letterSpacing: 0.3, }, warningTextCompact: { @@ -107,7 +107,7 @@ export const UserStatusBar: React.FC = () => { logoutButtonText: { fontSize: 10, fontWeight: '600' as const, - color: '#FFFFFF', + color: colors.textInverse, }, sessionButton: { backgroundColor: 'rgba(255, 255, 255, 0.9)', @@ -167,7 +167,7 @@ export const UserStatusBar: React.FC = () => { if (user.is_temporary) { return { icon: 'warning' as any, - color: '#FFFFFF', + color: colors.textInverse, backgroundColor: colors.accentSecondary, title: isNarrowScreen ? 'TEMP SESSION' : 'TEMPORARY SESSION', subtitle: `User: ${user.username}`, @@ -178,7 +178,7 @@ export const UserStatusBar: React.FC = () => { return { icon: 'checkmark-circle' as any, - color: '#FFFFFF', + color: colors.textInverse, backgroundColor: colors.statusSuccess, title: 'Authenticated', subtitle: `${user.username} (${user.email || 'no email'})`, diff --git a/frontend/src/screens/DocumentationScreen.tsx b/frontend/src/screens/DocumentationScreen.tsx index 10010b2..7d7c798 100644 --- a/frontend/src/screens/DocumentationScreen.tsx +++ b/frontend/src/screens/DocumentationScreen.tsx @@ -674,7 +674,7 @@ const DocumentationScreen: React.FC = () => { practiceItem: { flexDirection: 'row' as const, alignItems: 'flex-start' as const, - backgroundColor: '#FFF9E6', + backgroundColor: `${colors.statusWarning}15`, padding: 16, borderRadius: 12, borderLeftWidth: 4, @@ -706,7 +706,7 @@ const DocumentationScreen: React.FC = () => { marginTop: 16, }, troubleshootingItem: { - backgroundColor: '#FFF5F5', + backgroundColor: `${colors.statusError}15`, padding: 16, borderRadius: 12, borderLeftWidth: 4, @@ -762,7 +762,7 @@ const DocumentationScreen: React.FC = () => { width: 40, height: 40, borderRadius: 20, - backgroundColor: '#30D158', + backgroundColor: colors.statusSuccess, justifyContent: 'center' as const, alignItems: 'center' as const, marginRight: 16, @@ -795,7 +795,7 @@ const DocumentationScreen: React.FC = () => { }, quickStartTime: { fontSize: 12, - color: '#30D158', + color: colors.statusSuccess, fontWeight: '600' as const, marginBottom: 12, }, diff --git a/frontend/src/screens/HistoryScreen.tsx b/frontend/src/screens/HistoryScreen.tsx index 656947a..c87b9fb 100644 --- a/frontend/src/screens/HistoryScreen.tsx +++ b/frontend/src/screens/HistoryScreen.tsx @@ -76,7 +76,7 @@ const HistoryScreen: React.FC = () => { color: colors.accent, }, anonymousBadge: { - backgroundColor: '#FFF3E0', + backgroundColor: `${colors.statusWarning}15`, }, anonymousText: { color: colors.statusWarning, @@ -252,9 +252,9 @@ const HistoryScreen: React.FC = () => { color: colors.textSecondary, }, bestConfigPreviewItem: { - borderColor: '#FFD700', + borderColor: colors.statusWarning, borderWidth: 2, - backgroundColor: '#FFF8DC', + backgroundColor: `${colors.statusWarning}15`, }, configHeaderRow: { flexDirection: 'row' as const, @@ -265,7 +265,7 @@ const HistoryScreen: React.FC = () => { bestConfigBadgeSmall: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#FFD700', + backgroundColor: colors.statusWarning, borderRadius: 8, paddingHorizontal: 4, paddingVertical: 2, @@ -289,7 +289,7 @@ const HistoryScreen: React.FC = () => { }, bestConfigIndicator: { fontSize: 8, - color: '#B8860B', + color: colors.statusWarning, fontWeight: '600' as const, }, bestConfigSummary: { @@ -440,9 +440,9 @@ const HistoryScreen: React.FC = () => { borderColor: colors.borderSubtle, }, bestResultCard: { - borderColor: '#FFD700', + borderColor: colors.statusWarning, borderWidth: 2, - backgroundColor: '#FFFEF7', + backgroundColor: `${colors.statusWarning}10`, }, resultHeader: { flexDirection: 'row' as const, @@ -456,12 +456,12 @@ const HistoryScreen: React.FC = () => { color: colors.textPrimary, }, bestConfigName: { - color: '#B8860B', + color: colors.statusWarning, }, bestBadge: { flexDirection: 'row' as const, alignItems: 'center' as const, - backgroundColor: '#FFD700', + backgroundColor: colors.statusWarning, borderRadius: 6, paddingHorizontal: 8, paddingVertical: 4, @@ -470,7 +470,7 @@ const HistoryScreen: React.FC = () => { bestBadgeText: { fontSize: 10, fontWeight: '700' as const, - color: '#B8860B', + color: colors.textInverse, }, resultDetails: { fontSize: 14, @@ -496,7 +496,7 @@ const HistoryScreen: React.FC = () => { color: colors.textPrimary, }, errorContainer: { - backgroundColor: '#FFEBEE', + backgroundColor: `${colors.statusError}15`, borderRadius: 8, padding: 12, borderLeftWidth: 3, @@ -505,13 +505,13 @@ const HistoryScreen: React.FC = () => { errorLabel: { fontSize: 14, fontWeight: '600' as const, - color: '#D32F2F', + color: colors.statusError, marginBottom: 8, }, errorText: { fontSize: 15, lineHeight: 22, - color: '#D32F2F', + color: colors.statusError, }, showLogsButton: { flexDirection: 'row' as const, @@ -1049,7 +1049,7 @@ const HistoryScreen: React.FC = () => { const renderEmptyState = () => ( - + No Execution History {!state.isConnected @@ -1228,7 +1228,7 @@ const HistoryScreen: React.FC = () => { {isBestConfig && ( - + BEST )} @@ -1275,7 +1275,7 @@ const HistoryScreen: React.FC = () => { styles.resultStatus, { backgroundColor: result.response.responseStatus === 'success' - ? (isBestConfig ? '#FFD700' : styles.responseContainer.borderLeftColor) + ? (isBestConfig ? colors.statusWarning : styles.responseContainer.borderLeftColor) : styles.errorContainer.borderLeftColor } ]}> @@ -1285,7 +1285,7 @@ const HistoryScreen: React.FC = () => { (result.response.responseStatus === 'success' ? 'checkmark' : 'close') } size={12} - color="#FFFFFF" + color={colors.textInverse} />