From b07619ad496a73347cf7b466b68d2fad90a14389 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 16:34:38 +0300 Subject: [PATCH 01/26] Add dark theme to ./theme --- src/theme.js | 202 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 195 insertions(+), 7 deletions(-) diff --git a/src/theme.js b/src/theme.js index c695626b..9406991c 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,6 +1,9 @@ import { createTheme } from "@mui/material"; +import { storage } from "@nucleoidjs/webstorage"; -let theme = createTheme({ +import { useEffect, useState } from "react"; + +let lightTheme = createTheme({ palette: { primary: { main: "#747474", @@ -27,8 +30,8 @@ let theme = createTheme({ }, }); -theme = { - ...theme, +lightTheme = { + ...lightTheme, components: { MuiCssBaseline: { styleOverrides: { @@ -130,8 +133,191 @@ theme = { }, }; -theme = { - ...theme, +lightTheme = { + ...lightTheme, + custom: { + schema: { + width: 75, + }, + }, +}; + +lightTheme = { + ...lightTheme, + spacing: (factor) => 8 * factor, // Bootstrap strategy +}; + +let darkTheme = createTheme({ + palette: { + primary: { + main: "#bdbdbd", + }, + secondary: { + main: "#424242", + }, + custom: { + grey: "rgba(200, 200, 200, 0.7)", + fossil: "#bdbdbd", + darkDialogBg: "rgba(255,255,255,0.1)", + darkDialogPanel: "#333333", + darkDialog: "#616161", + apiTreeRightClick: "rgba(255, 255, 255, 0.2)", + drawerBG: "#252931", + textGray: "#e0e0e0", + messageBG: "#2c2c2c", + }, + background: { + default: "#121212", + paper: "#1e1e1e", + }, + text: { + primary: "#ffffff", + secondary: "#b3b3b3", + }, + }, +}); + +darkTheme = { + ...darkTheme, + components: { + MuiCssBaseline: { + styleOverrides: { + body: { + backgroundColor: "#121212", + color: "#ffffff", + "&::-webkit-scrollbar, & *::-webkit-scrollbar": { + backgroundColor: "#2c2c2c", + width: 6, + height: 6, + }, + "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": { + borderRadius: 10, + backgroundColor: "#616161", + minHeight: 24, + border: "3px", + }, + "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": + { + backgroundColor: "#757575", + }, + "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": + { + backgroundColor: "#757575", + }, + "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": + { + backgroundColor: "#757575", + }, + "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": { + backgroundColor: "#1e1e1e", + }, + }, + }, + }, + + MuiListItemButton: { + styleOverrides: { + root: { + backgroundColor: "#1C1C1C !important", + color: "#e0e0e0", + "&:hover": { + backgroundColor: "#333333", + }, + + "&.Mui-selected, &.Mui-selected:hover": { + backgroundColor: "#424242", + color: "#ffffff", + }, + }, + }, + }, + MuiDataGrid: { + styleOverrides: { + root: { + "& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within": + { + outline: "none", + }, + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: { + backgroundColor: "#1C1C1C", + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + justifyContent: "center", + }, + }, + }, + MuiBackdrop: { + styleOverrides: { + root: { + backgroundColor: "rgba(0,0,0,0.5)", + }, + }, + }, + MuiTextField: { + defaultProps: { + variant: "standard", + }, + }, + MuiSelect: { + defaultProps: { + variant: "standard", + }, + }, + MuiButton: { + styleOverrides: { + root: { + color: "white", + }, + }, + }, + MuiFab: { + styleOverrides: { + root: { + backgroundColor: "#333333", + color: "#ffffff", + "&:hover": { + backgroundColor: "#484848", + }, + + boxShadow: "none", + + "&.Mui-disabled": { + backgroundColor: "#555555", + }, + }, + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: { + background: "#c9c9c9", + color: "#959595", + }, + }, + }, + }, +}; + +darkTheme = { + ...darkTheme, custom: { schema: { width: 75, @@ -139,9 +325,11 @@ theme = { }, }; -theme = { - ...theme, +darkTheme = { + ...darkTheme, spacing: (factor) => 8 * factor, // Bootstrap strategy }; +const theme = lightTheme; +export { lightTheme, darkTheme }; export default theme; From cf27184ec0d410c1bcc3cd50123cf8e55429889b Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 16:35:08 +0300 Subject: [PATCH 02/26] Add theme options setting --- src/App.jsx | 30 ++++++++++++++++++- .../SettingsDialogRuntime.jsx | 17 +++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 85a12c2f..c9c86f5a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,8 +8,8 @@ import axios from "axios"; import { contextReducer } from "./context/reducer"; import { contextToMap } from "./utils/Parser"; import routes from "./routes"; +import { storage } from "@nucleoidjs/webstorage"; import { subscribe } from "@nucleoidjs/synapses"; -import theme from "./theme"; import vfs from "./vfs"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; @@ -18,8 +18,36 @@ import { StyledEngineProvider, ThemeProvider, } from "@mui/material"; +import { darkTheme, lightTheme } from "./theme"; +import { useEffect, useState } from "react"; function App() { + const prefersDarkMode = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; + const [theme, setTheme] = useState(prefersDarkMode ? darkTheme : lightTheme); + + useEffect(() => { + const savedTheme = storage.get("theme"); + if (!savedTheme) { + storage.set("theme", prefersDarkMode ? "dark" : "light"); + setTheme(prefersDarkMode ? darkTheme : lightTheme); + } else { + setTheme(savedTheme === "dark" ? darkTheme : lightTheme); + } + + const handleStorageChange = () => { + const currentTheme = storage.get("theme"); + setTheme(currentTheme === "dark" ? darkTheme : lightTheme); + }; + + window.addEventListener("storage", handleStorageChange); + + return () => { + window.removeEventListener("storage", handleStorageChange); + }; + }, []); + const progressElement = document.getElementById("nuc-progress-indicator"); function checkMobileSize() { diff --git a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx b/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx index eac8ddfe..d65d8694 100644 --- a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx +++ b/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx @@ -1,8 +1,20 @@ import React from "react"; +import { storage } from "@nucleoidjs/webstorage"; import styles from "./styles"; + import { Box, Switch, TextField, Typography } from "@mui/material"; const SettingsDialogRuntime = React.forwardRef((props, urlRef) => { + const [darkMode, setDarkMode] = React.useState( + storage.get("theme") === "dark" + ); + + const handleThemeChange = (event) => { + const newTheme = event.target.checked ? "dark" : "light"; + setDarkMode(event.target.checked); + storage.set("theme", newTheme); + }; + const [url, setUrl] = React.useState(urlRef.current.url); const [custom, setCustom] = React.useState( urlRef.current.runtime === "custom" ? true : false @@ -129,6 +141,11 @@ const SettingsDialogRuntime = React.forwardRef((props, urlRef) => { /> +
+ + + +
); }); From 8dff2095a0ffc8e32f2f926347371c95d34041bd Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 16:35:27 +0300 Subject: [PATCH 03/26] Update editor to change based on theme --- src/widgets/Editor/Editor.jsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/widgets/Editor/Editor.jsx b/src/widgets/Editor/Editor.jsx index 29bd2fce..4376df61 100644 --- a/src/widgets/Editor/Editor.jsx +++ b/src/widgets/Editor/Editor.jsx @@ -5,6 +5,7 @@ import { contextToMap } from "../../utils/Parser"; import { parser } from "react-nucleoid"; import { publish } from "@nucleoidjs/synapses"; import rules from "./rules"; +import { storage } from "@nucleoidjs/webstorage"; import { useContext } from "../../context/context"; import { Backdrop, Box } from "@mui/material"; @@ -40,7 +41,20 @@ const Editor = React.forwardRef((props, ref) => { const timerRef = React.useRef(); const [open, setOpen] = React.useState(false); const [context] = useContext(); + const [theme, setTheme] = React.useState(storage.get("theme") || "light"); + React.useEffect(() => { + const storedTheme = storage.get("theme") || "light"; + setTheme(storedTheme); + }, []); + + React.useEffect(() => { + const handleStorageChange = (e) => { + setTheme(storage.get("theme")); + }; + window.addEventListener("storage", handleStorageChange); + return () => window.removeEventListener("storage", handleStorageChange); + }, []); const file = getFile(context, props); const plugins = [ @@ -172,6 +186,10 @@ const Editor = React.forwardRef((props, ref) => { function handleEditorDidMount(editor, monaco) { const nucFuncs = context.nucleoid.functions; + const monacoEditorTheme = theme === "dark" ? "vs-dark" : "vs-light"; + + monaco.editor.setTheme(monacoEditorTheme); + monaco.editor.getModels().forEach((item) => { if ( nucFuncs.find( @@ -263,6 +281,7 @@ const Editor = React.forwardRef((props, ref) => { return ( Date: Tue, 12 Dec 2023 17:17:52 +0300 Subject: [PATCH 04/26] use useTheme to manage styles inside components --- .../ProjectSelect/ProjectSelect.jsx | 4 +- src/theme.js | 83 +++++++++++++++++++ src/widgets/APITree/APITree.jsx | 4 +- src/widgets/ProcessDrawer/ProcessDrawer.jsx | 8 +- 4 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/components/ProjectSelect/ProjectSelect.jsx b/src/components/ProjectSelect/ProjectSelect.jsx index 981818fa..d4560831 100644 --- a/src/components/ProjectSelect/ProjectSelect.jsx +++ b/src/components/ProjectSelect/ProjectSelect.jsx @@ -1,11 +1,13 @@ import ArrowDropDown from "@mui/icons-material/ArrowDropDown"; import ProjectDialog from "../../widgets/ProjectDialog"; import React from "react"; +import { useTheme } from "@mui/material/styles"; import { Box, Button } from "@mui/material/"; export default function ProjectSelect({ title }) { const [open, setOpen] = React.useState(false); + const theme = useTheme(); const handleClose = () => { setOpen(!open); }; @@ -17,7 +19,7 @@ export default function ProjectSelect({ title }) { variant="contained" color={"inherit"} onClick={() => setOpen(true)} - endIcon={} + endIcon={} > {title} diff --git a/src/theme.js b/src/theme.js index 9406991c..f1bb1403 100644 --- a/src/theme.js +++ b/src/theme.js @@ -139,6 +139,46 @@ lightTheme = { schema: { width: 75, }, + apiTreeItem: { + fontSize: 12, + color: "#666", + fontWeight: "bold", + backgroundColor: "#fdfdfd", + border: `1px solid #c3c5c8`, + width: 44, + borderRadius: 8, + mt: 1 / 4, + mb: 1 / 4, + boxShadow: "1px 1px #b8b8b8", + }, + drawer: { + "& .MuiDrawer-paper": { + top: "10%", + + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: "#353e48", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, + drawerSmall: { + "& .MuiDrawer-paper": { + top: "10%", + height: 338, + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: "#353e48", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, }, }; @@ -231,6 +271,7 @@ darkTheme = { }, }, }, + MuiDataGrid: { styleOverrides: { root: { @@ -322,6 +363,48 @@ darkTheme = { schema: { width: 75, }, + apiTreeItem: { + fontSize: 12, + color: "#c3c5c8", + fontWeight: "bold", + backgroundColor: "#1C1C1C", + border: "1px solid #333333", + width: 44, + borderRadius: 8, + mt: 1 / 4, + mb: 1 / 4, + boxShadow: "1px 1px #2c2c2c", + }, + drawer: { + "& .MuiDrawer-paper": { + top: "10%", + + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: "#1C1C1C", + border: "1px solid #474747", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, + drawerSmall: { + "& .MuiDrawer-paper": { + top: "10%", + height: 338, + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: "#1C1C1C", + border: "1px solid #474747", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, }, }; diff --git a/src/widgets/APITree/APITree.jsx b/src/widgets/APITree/APITree.jsx index 9c6baf38..8f007bca 100644 --- a/src/widgets/APITree/APITree.jsx +++ b/src/widgets/APITree/APITree.jsx @@ -10,6 +10,7 @@ import styles from "./styles"; import theme from "../../theme"; import { useContext } from "../../context/context"; import { useEvent } from "@nucleoidjs/synapses"; +import { useTheme } from "@mui/material/styles"; import { Box, @@ -241,6 +242,7 @@ export const compile = ( }, {}); const renderTree = (data) => { + const themeMui = useTheme(); // eslint-disable-next-line let resourceHash; @@ -280,7 +282,7 @@ export const compile = ( justifyContent: "space-between", }} > - + { const matchDownMD = useMediaQuery(theme.breakpoints.down("lg")); + const themeMui = useTheme(); const location = useLocation(); const [state] = useContext(); @@ -140,7 +142,7 @@ const ProcessDrawer = () => { variant="persistent" anchor={"right"} open={visible(location?.pathname)} - sx={matchDownMD ? styles.drawerSmall : styles.drawer} + sx={matchDownMD ? themeMui.custom.drawerSmall : themeMui.custom.drawer} > From f52dd3a05faded6ef47ef7857f26dc6fce52a75e Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 20:15:33 +0300 Subject: [PATCH 05/26] Add custom dark theme to monaco editor --- src/widgets/Editor/Editor.jsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/widgets/Editor/Editor.jsx b/src/widgets/Editor/Editor.jsx index 4376df61..92121273 100644 --- a/src/widgets/Editor/Editor.jsx +++ b/src/widgets/Editor/Editor.jsx @@ -1,6 +1,7 @@ import MonacoEditor from "@monaco-editor/react"; import OpenAI from "../OpenAI"; import React from "react"; +import { base } from "../../palette"; import { contextToMap } from "../../utils/Parser"; import { parser } from "react-nucleoid"; import { publish } from "@nucleoidjs/synapses"; @@ -41,16 +42,18 @@ const Editor = React.forwardRef((props, ref) => { const timerRef = React.useRef(); const [open, setOpen] = React.useState(false); const [context] = useContext(); - const [theme, setTheme] = React.useState(storage.get("theme") || "light"); + const [theme, setTheme] = React.useState( + storage.get("platform", "theme") || "light" + ); React.useEffect(() => { - const storedTheme = storage.get("theme") || "light"; + const storedTheme = storage.get("platform", "theme") || "light"; setTheme(storedTheme); }, []); React.useEffect(() => { const handleStorageChange = (e) => { - setTheme(storage.get("theme")); + setTheme(storage.get("platform", "theme")); }; window.addEventListener("storage", handleStorageChange); return () => window.removeEventListener("storage", handleStorageChange); @@ -186,7 +189,24 @@ const Editor = React.forwardRef((props, ref) => { function handleEditorDidMount(editor, monaco) { const nucFuncs = context.nucleoid.functions; - const monacoEditorTheme = theme === "dark" ? "vs-dark" : "vs-light"; + const customDarkThemeData = { + base: "vs-dark", + inherit: true, + rules: [], + colors: { + "editor.background": base.grey[800], + "editor.foreground": base.common.white, + "editor.lineHighlightBackground": base.grey[800], + "editorLineNumber.foreground": base.grey[600], + "editor.selectionBackground": base.primary.main, + "editor.hoverHighlightBackground": base.grey[700], + }, + }; + + monaco.editor.defineTheme("custom-dark-theme", customDarkThemeData); + + const monacoEditorTheme = + theme === "dark" ? "custom-dark-theme" : "vs-light"; monaco.editor.setTheme(monacoEditorTheme); From 4348898571fee7e42101e80d5855230fb7777a5b Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 20:15:48 +0300 Subject: [PATCH 06/26] Create temporary palette --- src/palette.js | 144 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 src/palette.js diff --git a/src/palette.js b/src/palette.js new file mode 100644 index 00000000..e6317753 --- /dev/null +++ b/src/palette.js @@ -0,0 +1,144 @@ +import { alpha } from "@mui/material/styles"; + +// ---------------------------------------------------------------------- + +// SETUP COLORS + +export const grey = { + 0: "#FFFFFF", + 100: "#F9FAFB", + 200: "#F4F6F8", + 300: "#DFE3E8", + 400: "#C4CDD5", + 500: "#919EAB", + 600: "#637381", + 700: "#454F5B", + 800: "#212B36", + 900: "#161C24", +}; + +export const primary = { + lighter: "#C8FAD6", + light: "#5BE49B", + main: "#00A76F", + dark: "#007867", + darker: "#004B50", + contrastText: "#FFFFFF", +}; + +export const secondary = { + lighter: "#EFD6FF", + light: "#C684FF", + main: "#8E33FF", + dark: "#5119B7", + darker: "#27097A", + contrastText: "#FFFFFF", +}; + +export const info = { + lighter: "#CAFDF5", + light: "#61F3F3", + main: "#00B8D9", + dark: "#006C9C", + darker: "#003768", + contrastText: "#FFFFFF", +}; + +export const success = { + lighter: "#D3FCD2", + light: "#77ED8B", + main: "#22C55E", + dark: "#118D57", + darker: "#065E49", + contrastText: "#ffffff", +}; + +export const warning = { + lighter: "#FFF5CC", + light: "#FFD666", + main: "#FFAB00", + dark: "#B76E00", + darker: "#7A4100", + contrastText: grey[800], +}; + +export const error = { + lighter: "#FFE9D5", + light: "#FFAC82", + main: "#FF5630", + dark: "#B71D18", + darker: "#7A0916", + contrastText: "#FFFFFF", +}; + +export const common = { + black: "#000000", + white: "#FFFFFF", +}; + +export const action = { + hover: alpha(grey[500], 0.08), + selected: alpha(grey[500], 0.16), + disabled: alpha(grey[500], 0.8), + disabledBackground: alpha(grey[500], 0.24), + focus: alpha(grey[500], 0.24), + hoverOpacity: 0.08, + disabledOpacity: 0.48, +}; + +export const base = { + primary, + secondary, + info, + success, + warning, + error, + grey, + common, + divider: alpha(grey[500], 0.2), + action, +}; + +// ---------------------------------------------------------------------- + +export function palette(mode) { + const light = { + ...base, + mode: "light", + text: { + primary: grey[800], + secondary: grey[600], + disabled: grey[500], + }, + background: { + paper: "#FFFFFF", + default: "#FFFFFF", + neutral: grey[200], + }, + action: { + ...base.action, + active: grey[600], + }, + }; + + const dark = { + ...base, + mode: "dark", + text: { + primary: "#FFFFFF", + secondary: grey[500], + disabled: grey[600], + }, + background: { + paper: grey[800], + default: grey[900], + neutral: alpha(grey[500], 0.12), + }, + action: { + ...base.action, + active: grey[500], + }, + }; + + return mode === "light" ? light : dark; +} From 7d3b393e310fcef0e1968696c2a25714d247d0dd Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 20:16:19 +0300 Subject: [PATCH 07/26] Change from hardcoded colors to colors from platform --- src/theme.js | 101 +++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 52 deletions(-) diff --git a/src/theme.js b/src/theme.js index f1bb1403..d771d09f 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,7 +1,5 @@ +import { base } from "./palette"; import { createTheme } from "@mui/material"; -import { storage } from "@nucleoidjs/webstorage"; - -import { useEffect, useState } from "react"; let lightTheme = createTheme({ palette: { @@ -154,7 +152,7 @@ lightTheme = { drawer: { "& .MuiDrawer-paper": { top: "10%", - + height: 380, borderTopLeftRadius: "5px", borderBottomLeftRadius: "5px", background: "#353e48", @@ -184,35 +182,35 @@ lightTheme = { lightTheme = { ...lightTheme, - spacing: (factor) => 8 * factor, // Bootstrap strategy + spacing: (factor) => 8 * factor, }; let darkTheme = createTheme({ palette: { primary: { - main: "#bdbdbd", + main: base.primary.dark, }, secondary: { - main: "#424242", + main: base.secondary.dark, }, custom: { - grey: "rgba(200, 200, 200, 0.7)", - fossil: "#bdbdbd", - darkDialogBg: "rgba(255,255,255,0.1)", - darkDialogPanel: "#333333", - darkDialog: "#616161", - apiTreeRightClick: "rgba(255, 255, 255, 0.2)", - drawerBG: "#252931", - textGray: "#e0e0e0", - messageBG: "#2c2c2c", + grey: base.grey[500], + fossil: base.grey[500], + darkDialogBg: base.common.white, + darkDialogPanel: base.grey[800], + darkDialog: base.grey[600], + apiTreeRightClick: base.common.white, + drawerBG: base.grey[900], + textGray: base.grey[500], + messageBG: base.grey[700], }, background: { - default: "#121212", - paper: "#1e1e1e", + default: base.grey[900], + paper: base.grey[800], }, text: { - primary: "#ffffff", - secondary: "#b3b3b3", + primary: base.common.white, + secondary: base.grey[500], }, }, }); @@ -223,33 +221,33 @@ darkTheme = { MuiCssBaseline: { styleOverrides: { body: { - backgroundColor: "#121212", - color: "#ffffff", + backgroundColor: base.grey[900], + color: base.common.white, "&::-webkit-scrollbar, & *::-webkit-scrollbar": { - backgroundColor: "#2c2c2c", + backgroundColor: base.grey[700], width: 6, height: 6, }, "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": { borderRadius: 10, - backgroundColor: "#616161", + backgroundColor: base.grey[600], minHeight: 24, border: "3px", }, "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": { - backgroundColor: "#757575", + backgroundColor: base.grey[500], }, "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": { - backgroundColor: "#757575", + backgroundColor: base.grey[500], }, "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": { - backgroundColor: "#757575", + backgroundColor: base.grey[500], }, "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": { - backgroundColor: "#1e1e1e", + backgroundColor: base.grey[800], }, }, }, @@ -258,15 +256,15 @@ darkTheme = { MuiListItemButton: { styleOverrides: { root: { - backgroundColor: "#1C1C1C !important", - color: "#e0e0e0", + backgroundColor: `${base.grey[900]} !important`, + color: base.grey[500], "&:hover": { - backgroundColor: "#333333", + backgroundColor: base.grey[800], }, "&.Mui-selected, &.Mui-selected:hover": { - backgroundColor: "#424242", - color: "#ffffff", + backgroundColor: base.secondary.main, + color: base.common.white, }, }, }, @@ -285,10 +283,11 @@ darkTheme = { MuiDrawer: { styleOverrides: { paper: { - backgroundColor: "#1C1C1C", + backgroundColor: base.grey[900], }, }, }, + MuiCard: { styleOverrides: { root: { @@ -308,7 +307,7 @@ darkTheme = { MuiBackdrop: { styleOverrides: { root: { - backgroundColor: "rgba(0,0,0,0.5)", + backgroundColor: base.common.black, }, }, }, @@ -332,16 +331,14 @@ darkTheme = { MuiFab: { styleOverrides: { root: { - backgroundColor: "#333333", - color: "#ffffff", + backgroundColor: base.grey[800], + color: base.common.white, "&:hover": { - backgroundColor: "#484848", + backgroundColor: base.grey[700], }, - boxShadow: "none", - "&.Mui-disabled": { - backgroundColor: "#555555", + backgroundColor: base.grey[600], }, }, }, @@ -349,8 +346,8 @@ darkTheme = { MuiLinearProgress: { styleOverrides: { root: { - background: "#c9c9c9", - color: "#959595", + background: base.grey[300], + color: base.grey[400], }, }, }, @@ -365,24 +362,24 @@ darkTheme = { }, apiTreeItem: { fontSize: 12, - color: "#c3c5c8", + color: base.grey[400], fontWeight: "bold", - backgroundColor: "#1C1C1C", - border: "1px solid #333333", + backgroundColor: base.grey[900], + border: `1px solid ${base.grey[800]}`, width: 44, borderRadius: 8, mt: 1 / 4, mb: 1 / 4, - boxShadow: "1px 1px #2c2c2c", + boxShadow: `1px 1px ${base.grey[700]}`, }, drawer: { "& .MuiDrawer-paper": { top: "10%", - + height: 380, borderTopLeftRadius: "5px", borderBottomLeftRadius: "5px", - background: "#1C1C1C", - border: "1px solid #474747", + background: base.grey[900], + border: `1px solid ${base.grey[600]}`, display: "flex", flexDirection: "column", justifyContent: "space-between", @@ -396,8 +393,8 @@ darkTheme = { height: 338, borderTopLeftRadius: "5px", borderBottomLeftRadius: "5px", - background: "#1C1C1C", - border: "1px solid #474747", + background: base.grey[900], + border: `1px solid ${base.grey[600]}`, display: "flex", flexDirection: "column", justifyContent: "space-between", From b116dc1c305d7dcabbd38ee4c35700ecacceb770 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 20:16:29 +0300 Subject: [PATCH 08/26] Change naming space in local storage --- src/App.jsx | 6 +++--- .../SettingsDialogRuntime/SettingsDialogRuntime.jsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c9c86f5a..50188645 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -28,16 +28,16 @@ function App() { const [theme, setTheme] = useState(prefersDarkMode ? darkTheme : lightTheme); useEffect(() => { - const savedTheme = storage.get("theme"); + const savedTheme = storage.get("platform", "theme"); if (!savedTheme) { - storage.set("theme", prefersDarkMode ? "dark" : "light"); + storage.set("platform", "theme", prefersDarkMode ? "dark" : "light"); setTheme(prefersDarkMode ? darkTheme : lightTheme); } else { setTheme(savedTheme === "dark" ? darkTheme : lightTheme); } const handleStorageChange = () => { - const currentTheme = storage.get("theme"); + const currentTheme = storage.get("platform", "theme"); setTheme(currentTheme === "dark" ? darkTheme : lightTheme); }; diff --git a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx b/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx index d65d8694..e14bac82 100644 --- a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx +++ b/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx @@ -6,13 +6,13 @@ import { Box, Switch, TextField, Typography } from "@mui/material"; const SettingsDialogRuntime = React.forwardRef((props, urlRef) => { const [darkMode, setDarkMode] = React.useState( - storage.get("theme") === "dark" + storage.get("platform", "theme") === "dark" ); const handleThemeChange = (event) => { const newTheme = event.target.checked ? "dark" : "light"; setDarkMode(event.target.checked); - storage.set("theme", newTheme); + storage.set("platform", "theme", newTheme); }; const [url, setUrl] = React.useState(urlRef.current.url); From e5b8a45b68dc403bbf60b9d01269ced8e9714f36 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Tue, 12 Dec 2023 20:23:28 +0300 Subject: [PATCH 09/26] Remove import theme instances for useTheme instead --- .../ClosableDialogTitle/ClosableDialogTitle.jsx | 4 +++- src/components/LandingDialog/LandingDialog.jsx | 4 +++- src/components/NonExpandableAPITreeItem.jsx | 5 +++-- src/components/OpenSandboxButton.jsx | 4 +++- src/components/OpenSwaggerButton.jsx | 4 +++- src/components/SwaggerDialog.jsx | 5 ++++- src/pages/ide/Dashboard/Dashboard.jsx | 7 +++++-- src/widgets/APITree/APITree.jsx | 5 ++--- src/widgets/ProcessDrawer/ProcessDrawer.jsx | 6 +++--- src/widgets/SettingsDialog/SettingsDialog.jsx | 8 +++++--- 10 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx b/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx index 6b621a9d..65d1f435 100644 --- a/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx +++ b/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx @@ -1,9 +1,11 @@ import CloseIcon from "@mui/icons-material/Close"; import styles from "./styles"; -import theme from "../../theme"; +import { useTheme } from "@mui/material/styles"; + import { DialogTitle, Grid, IconButton, Typography } from "@mui/material"; function ClosableDialogTitle({ handleClose, label, content, grey }) { + const theme = useTheme(); return ( diff --git a/src/components/LandingDialog/LandingDialog.jsx b/src/components/LandingDialog/LandingDialog.jsx index 9b2d0630..1b3dbaa9 100644 --- a/src/components/LandingDialog/LandingDialog.jsx +++ b/src/components/LandingDialog/LandingDialog.jsx @@ -6,7 +6,8 @@ import React from "react"; import codeImage from "../../images/code.png"; import onboardDispatcher from "../Onboard/onboardDispatcher"; import styles from "./styles"; -import theme from "../../theme"; +import { useTheme } from "@mui/material/styles"; + import { Avatar, Box, @@ -24,6 +25,7 @@ const LandingDialog = () => { const handleClose = () => { onboardDispatcher({ level: 1 }); }; + const theme = useTheme(); return ( { setOpen(false); }; - + const theme = useTheme(); return (
{ + const theme = useTheme(); return ( {open && } diff --git a/src/components/SwaggerDialog.jsx b/src/components/SwaggerDialog.jsx index 3e263a83..9cf5c7a1 100644 --- a/src/components/SwaggerDialog.jsx +++ b/src/components/SwaggerDialog.jsx @@ -48,7 +48,7 @@ export default function SwaggerDialog() { diff --git a/src/theme.js b/src/theme.js index 49149ed8..8b0c5afa 100644 --- a/src/theme.js +++ b/src/theme.js @@ -76,7 +76,7 @@ lightTheme = { MuiDrawer: { styleOverrides: { paper: { - backgroundColor: "#323a40", + backgroundColor: "#343a43", }, }, }, From 0c1c9f50ba12d7a2cfefcede944e36592005e598 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Fri, 15 Dec 2023 18:15:33 +0300 Subject: [PATCH 16/26] Update LandingDialog styling --- .../LandingDialog/LandingDialog.jsx | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/LandingDialog/LandingDialog.jsx b/src/components/LandingDialog/LandingDialog.jsx index af2d043b..24c8298e 100644 --- a/src/components/LandingDialog/LandingDialog.jsx +++ b/src/components/LandingDialog/LandingDialog.jsx @@ -1,4 +1,5 @@ import ClosableDialogTitle from "../ClosableDialogTitle"; +import { Divider } from "@mui/material"; import NumberOne from "../../images/number-one.png"; import NumberThree from "../../images/number-three.png"; import NumberTwo from "../../images/number-two.png"; @@ -58,16 +59,6 @@ const LandingDialog = () => {

Welcome to Nucleoid Project

- - Dark Mode - - Nucleoid low-code framework lets you build your APIs with the help of @@ -83,7 +74,7 @@ const LandingDialog = () => { - + @@ -107,7 +98,25 @@ const LandingDialog = () => { - + + + + Light + + + + Dark + +