From 316f23ec70593f9c09ee80e38ce4d5801c1b04a9 Mon Sep 17 00:00:00 2001 From: Aditya <60684641+0x0elliot@users.noreply.github.com> Date: Tue, 10 Feb 2026 18:29:21 +0530 Subject: [PATCH] fix: build errors --- frontend/src/components/CacheView.jsx | 2 - frontend/src/components/ParsedActionNew.jsx | 1 - frontend/src/components/RuntimeDebugger.jsx | 2 +- .../src/components/ShuffleCodeEditor1.jsx | 2 +- frontend/src/theme.jsx | 175 ++++++++++-------- frontend/src/views/AppExplorer.jsx | 1 - 6 files changed, 95 insertions(+), 88 deletions(-) diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx index 26b751a0..ef5719e7 100644 --- a/frontend/src/components/CacheView.jsx +++ b/frontend/src/components/CacheView.jsx @@ -55,7 +55,6 @@ import { OpenInNew as OpenInNewIcon, CloudDownload as CloudDownloadIcon, Description as DescriptionIcon, - Polymer as PolymerIcon, CheckCircle as CheckCircleIcon, Close as CloseIcon, Apps as AppsIcon, @@ -63,7 +62,6 @@ import { Cached as CachedIcon, AccessibilityNew as AccessibilityNewIcon, Lock as LockIcon, - Eco as EcoIcon, Schedule as ScheduleIcon, Cloud as CloudIcon, Business as BusinessIcon, diff --git a/frontend/src/components/ParsedActionNew.jsx b/frontend/src/components/ParsedActionNew.jsx index 883506b2..a9bb974c 100644 --- a/frontend/src/components/ParsedActionNew.jsx +++ b/frontend/src/components/ParsedActionNew.jsx @@ -70,7 +70,6 @@ import { Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, - Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, diff --git a/frontend/src/components/RuntimeDebugger.jsx b/frontend/src/components/RuntimeDebugger.jsx index 4aa5a4d4..ba531c5b 100644 --- a/frontend/src/components/RuntimeDebugger.jsx +++ b/frontend/src/components/RuntimeDebugger.jsx @@ -44,7 +44,7 @@ import { Send as SendIcon, } from '@mui/icons-material'; -import { DataGrid, GridValueGetterParams } from '@mui/x-data-grid' +import { DataGrid } from '@mui/x-data-grid' import { Search as SearchIcon, } from "@mui/icons-material"; diff --git a/frontend/src/components/ShuffleCodeEditor1.jsx b/frontend/src/components/ShuffleCodeEditor1.jsx index 54792955..3059d936 100644 --- a/frontend/src/components/ShuffleCodeEditor1.jsx +++ b/frontend/src/components/ShuffleCodeEditor1.jsx @@ -1597,7 +1597,7 @@ const CodeEditor = (props) => { if (e.srcElement.className === "ace_content") { console.log("DRAG STOP IN CONTENT!", e.srcElement.className) - const usedposition = e.offsetY + let usedposition = e.offsetY if (usedposition === undefined || usedposition === null) { toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`) return diff --git a/frontend/src/theme.jsx b/frontend/src/theme.jsx index ea04b13b..f9eb69a8 100644 --- a/frontend/src/theme.jsx +++ b/frontend/src/theme.jsx @@ -153,10 +153,20 @@ const theme = createTheme(adaptV4Theme({ export default theme; -export const getTheme = (themeMode, brandColor) => - createTheme({ +export const getTheme = (themeMode, brandColor) => { + // Handle "system" mode by checking user's system preference + let resolvedMode = themeMode; + if (themeMode === "system" || !themeMode) { + resolvedMode = window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light"; + } + // Ensure mode is only "dark" or "light" + if (resolvedMode !== "dark" && resolvedMode !== "light") { + resolvedMode = "dark"; + } + + return createTheme({ palette: { - mode: themeMode, + mode: resolvedMode, main: brandColor || "#FF8544", primary: { main: brandColor || "#FF8544", @@ -167,35 +177,35 @@ export const getTheme = (themeMode, brandColor) => contrastText:"#000000", }, text: { - primary: themeMode === "dark" ? "#ffffff" : "#1A1A1A", - secondary: themeMode === "dark" ? "#9E9E9E" : "#616161", + primary: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A", + secondary: resolvedMode === "dark" ? "#9E9E9E" : "#616161", }, - type: themeMode, - inputColor: themeMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)", - textColor: themeMode === "dark" ? "#F1F1F1" : "#1A1A1A", - textPrimary: themeMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)", - surfaceColor: themeMode === "dark" ? "#27292d" : "#EFEFEF", - platformColor: themeMode === "dark" ? "#212121" : "#ffffff", - backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#f1f1f1", - cytoscapeBackgroundColor: themeMode === "dark" ? "#161616" : "#f5f5f5", - distributionColor: themeMode === "dark" ? "#40E0D0" : "#008080", - cardBackgroundColor: themeMode === "dark" ? "#1e1e1e" : "#eaeaea", - cardHoverColor: themeMode === "dark" ? "#323232" : "#F0F0F0", - hoverColor: themeMode === "dark" ? "#323232" : "#D6D6D6", - usecaseCardColor: themeMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)", - usecaseCardHoverColor: themeMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)", - usecaseDialogFieldColor: themeMode === "dark" ? "#2B2B2B" : "#F5F5F5", - accentColor: themeMode === "dark" ? "#ff8544" : "#ff8544", - green: themeMode === "dark" ? "#5cc879" : "#008000", - defaultBorder: themeMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC', + type: resolvedMode, + inputColor: resolvedMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)", + textColor: resolvedMode === "dark" ? "#F1F1F1" : "#1A1A1A", + textPrimary: resolvedMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)", + surfaceColor: resolvedMode === "dark" ? "#27292d" : "#EFEFEF", + platformColor: resolvedMode === "dark" ? "#212121" : "#ffffff", + backgroundColor: resolvedMode === "dark" ? "#1a1a1a" : "#f1f1f1", + cytoscapeBackgroundColor: resolvedMode === "dark" ? "#161616" : "#f5f5f5", + distributionColor: resolvedMode === "dark" ? "#40E0D0" : "#008080", + cardBackgroundColor: resolvedMode === "dark" ? "#1e1e1e" : "#eaeaea", + cardHoverColor: resolvedMode === "dark" ? "#323232" : "#F0F0F0", + hoverColor: resolvedMode === "dark" ? "#323232" : "#D6D6D6", + usecaseCardColor: resolvedMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)", + usecaseCardHoverColor: resolvedMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)", + usecaseDialogFieldColor: resolvedMode === "dark" ? "#2B2B2B" : "#F5F5F5", + accentColor: resolvedMode === "dark" ? "#ff8544" : "#ff8544", + green: resolvedMode === "dark" ? "#5cc879" : "#008000", + defaultBorder: resolvedMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC', linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor, - slateGrayColor: themeMode === "dark" ? "#494949" : "#CCCCCC", - parsedAppPaperColor: themeMode === "dark" ? "#2f2f2f" : "#CCCCCC", + slateGrayColor: resolvedMode === "dark" ? "#494949" : "#CCCCCC", + parsedAppPaperColor: resolvedMode === "dark" ? "#2f2f2f" : "#CCCCCC", borderRadius: 10, - loaderColor: themeMode === "dark" ? "#1a1a1a" : "#E0E0E0", + loaderColor: resolvedMode === "dark" ? "#1a1a1a" : "#E0E0E0", jsonIconStyle: "round", - jsonTheme: themeMode === "dark" ? "summerfruit" : { + jsonTheme: resolvedMode === "dark" ? "summerfruit" : { base00: "#ffffff", // background base01: "#f0f0f0", // very light grey base02: "#f5f5f5", // light grey @@ -215,11 +225,11 @@ export const getTheme = (themeMode, brandColor) => }, jsonCollapseStringsAfterLength: 100, drawer: { - backgroundColor: themeMode === "dark" ? "#262626" : "#f9f9f9" + backgroundColor: resolvedMode === "dark" ? "#262626" : "#f9f9f9" }, actionSidebarField: { - backgroundColor: themeMode === "dark" ? "#2F2F2F" : "#F1F1F1", - color: themeMode === "dark" ? "#ffffff" : "#000000", + backgroundColor: resolvedMode === "dark" ? "#2F2F2F" : "#F1F1F1", + color: resolvedMode === "dark" ? "#ffffff" : "#000000", borderRadius: 8, height: 40, border: "none", @@ -228,53 +238,53 @@ export const getTheme = (themeMode, brandColor) => padding: 5, width: "98%", borderRadius: 5, - border: themeMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)", - backgroundColor: themeMode === "dark" + border: resolvedMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)", + backgroundColor: resolvedMode === "dark" ? "#1A1A1A" : "#f1f1f1", - color: themeMode === "dark" + color: resolvedMode === "dark" ? "#F1F1F1" : "#1A1A1A", overflowX: "auto", }, textFieldStyle: { - backgroundColor: themeMode === "dark" ? "#212121" : "#FFFFFF", - color: themeMode === "dark" ? "#ffffff" : "#000000", + backgroundColor: resolvedMode === "dark" ? "#212121" : "#FFFFFF", + color: resolvedMode === "dark" ? "#ffffff" : "#000000", borderRadius: "5px", height: 40, - border: themeMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0", + border: resolvedMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0", }, DialogStyle: { - backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff", + backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff", borderRadius: 2, - boxShadow: themeMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)", - border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", + boxShadow: resolvedMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)", + border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", }, innerTextfieldStyle: { height: 40, fontSize: 16, - backgroundColor: themeMode === "dark" ? "#212121" : "#f5f5f5", + backgroundColor: resolvedMode === "dark" ? "#212121" : "#f5f5f5", }, tooltip: { - backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff", - color: themeMode === "dark" ? "#ffffff" : "#000000", - border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", + backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff", + color: resolvedMode === "dark" ? "#ffffff" : "#000000", + border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", }, chipStyle: { - backgroundColor: themeMode === "dark" ? "#333333" : "#F5F5F5", - borderColor: themeMode === "dark" ? "#444444" : "#E0E0E0", - color: themeMode === "dark" ? "#FFFFFF" : "#333333", + backgroundColor: resolvedMode === "dark" ? "#333333" : "#F5F5F5", + borderColor: resolvedMode === "dark" ? "#444444" : "#E0E0E0", + color: resolvedMode === "dark" ? "#FFFFFF" : "#333333", }, defaultImage: "/images/no_image.png", singulOrange: "/images/singul_orange.png", singulGreen: "/images/singul_green.png", singulBlackWhite: "/icons/workflow-page/shuffle_agent.png", - scrollbarColor: themeMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1", - scrollbarColorTransparent: themeMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent", + scrollbarColor: resolvedMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1", + scrollbarColorTransparent: resolvedMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent", }, typography: { fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`, - color: themeMode === "dark" ? "#ffffff" : "#000000", + color: resolvedMode === "dark" ? "#ffffff" : "#000000", useNextVariants: true, fontWeightLight: 300, fontWeightRegular: 400, @@ -282,36 +292,36 @@ export const getTheme = (themeMode, brandColor) => fontWeightSemiBold: 600, fontWeightBold: 700, allVariants: { - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A", + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A", }, h1: { fontSize: 40, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, h2: { fontSize: 36, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, h3: { fontSize: 32, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, h4: { fontSize: 30, fontWeight: 500, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, h6: { fontSize: 22, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, body1: { fontSize: 16, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, body2: { fontSize: 14, - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A" }, }, components: { @@ -326,7 +336,7 @@ export const getTheme = (themeMode, brandColor) => { props: { variant: 'text', color: 'primary' }, style: { - color: themeMode === "dark" ? "#ffffff" : "#1A1A1A", + color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A", whiteSpace: "nowrap", textWrap: "normal", }, @@ -334,7 +344,7 @@ export const getTheme = (themeMode, brandColor) => { props: { variant: 'text', color: 'secondary' }, style: { - color: themeMode === "dark" ? "#9E9E9E" : "#616161", + color: resolvedMode === "dark" ? "#9E9E9E" : "#616161", whiteSpace: "nowrap", textWrap: "normal", }, @@ -342,24 +352,24 @@ export const getTheme = (themeMode, brandColor) => { props: { variant: 'contained', color: 'primary' }, style: { - backgroundColor: themeMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35', - color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF', + backgroundColor: resolvedMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35', + color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF', borderRadius: '4px', whiteSpace: "nowrap", textWrap: "normal", transition: 'background-color 0.2s ease-in-out', '&:hover': { fontWeight: 600, - backgroundColor: themeMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F', - color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF', + backgroundColor: resolvedMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F', + color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF', }, }, }, { props: { variant: 'contained', color: 'secondary' }, style: { - backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9', - color: themeMode === "dark" ? '#ffffff' : '#4C4C4C', + backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9', + color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C', borderRadius: '4px', boxShadow: 'none', whiteSpace: "nowrap", @@ -367,23 +377,23 @@ export const getTheme = (themeMode, brandColor) => textWrap: "normal", '&:hover': { fontWeight: 600, - border: themeMode === "dark" ? '1px solid #f1f1f1' : 'none', - backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9', - color: themeMode === "dark" ? '#ffffff' : '#4C4C4C', + border: resolvedMode === "dark" ? '1px solid #f1f1f1' : 'none', + backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9', + color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C', }, }, }, { props: { variant: 'outlined', color: 'primary' }, style: { - borderColor: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", - color: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", + borderColor: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", + color: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", whiteSpace: "nowrap", fontWeight: 'normal', textWrap: "normal", '&:hover': { - backgroundColor: themeMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc", - color: themeMode === "dark" ? "#1a1a1a" : "#8a3d00", + backgroundColor: resolvedMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc", + color: resolvedMode === "dark" ? "#1a1a1a" : "#8a3d00", fontWeight: 600, }, }, @@ -392,14 +402,14 @@ export const getTheme = (themeMode, brandColor) => props: { variant: 'outlined', color: 'secondary' }, style: { border: '1px solid #C5C5C5', - color: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D', + color: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D', whiteSpace: "nowrap", textWrap: "normal", '&:hover': { - backgroundColor: themeMode === "dark" ? '#C5C5C5' : '#EFEFEF', - borderColor: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D', + backgroundColor: resolvedMode === "dark" ? '#C5C5C5' : '#EFEFEF', + borderColor: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D', fontWeight: 600, - color: themeMode === "dark" ? '#1a1a1a' : '#1A1A1A', + color: resolvedMode === "dark" ? '#1a1a1a' : '#1A1A1A', }, }, }, @@ -422,8 +432,8 @@ export const getTheme = (themeMode, brandColor) => background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)', }, '&:disabled': { - background: themeMode === "dark" ? '#494949' : '#C9C9C9', - color: themeMode === "dark" ? '#9E9E9E' : '#616161', + background: resolvedMode === "dark" ? '#494949' : '#C9C9C9', + color: resolvedMode === "dark" ? '#9E9E9E' : '#616161', }, }, }, @@ -468,9 +478,9 @@ export const getTheme = (themeMode, brandColor) => }, '&:disabled': { background: 'transparent', - color: themeMode === "dark" ? '#9E9E9E' : '#616161', + color: resolvedMode === "dark" ? '#9E9E9E' : '#616161', '&::before': { - background: themeMode === "dark" ? '#494949' : '#C9C9C9', + background: resolvedMode === "dark" ? '#494949' : '#C9C9C9', }, }, }, @@ -480,7 +490,7 @@ export const getTheme = (themeMode, brandColor) => MuiTab: { styleOverrides: { root: { - color: themeMode === "dark" ? "#C5C5C5" : "#1A1A1A", + color: resolvedMode === "dark" ? "#C5C5C5" : "#1A1A1A", }, }, }, @@ -489,7 +499,7 @@ export const getTheme = (themeMode, brandColor) => overrides: { MuiMenu: { list: { - backgroundColor: themeMode === "dark" ? "#27292d" : "#ffffff", + backgroundColor: resolvedMode === "dark" ? "#27292d" : "#ffffff", }, }, MuiCssBaseline: { @@ -535,4 +545,5 @@ export const getTheme = (themeMode, brandColor) => }, }, }); +} diff --git a/frontend/src/views/AppExplorer.jsx b/frontend/src/views/AppExplorer.jsx index 5cbe502e..21a1d24e 100644 --- a/frontend/src/views/AppExplorer.jsx +++ b/frontend/src/views/AppExplorer.jsx @@ -65,7 +65,6 @@ import { Context } from "../context/ContextApi.jsx"; import { SearchBox, - StaticRefinementList, RefinementList, InstantSearch, connectSearchBox,