From 02cbbe601ad966dd842c7d24e3279bf0805849b8 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 19:50:33 +0100 Subject: [PATCH] disable forcing light/dark mode (doesn't work properly) --- src/App/App.tsx | 11 +- src/App/BottomPanel/BottomPanel.css | 2 +- src/App/SideBar/SideBar.css | 15 - src/App/TopPanel/TopPanel.tsx | 11 +- src/App/VisualEditor/hooks/useMouse.tsx | 2 - src/Logo/Logo.tsx | 1572 ++++++++++++++++++++++- src/index.css | 10 +- 7 files changed, 1586 insertions(+), 37 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index aa38f9a..d0ac4d8 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -45,7 +45,8 @@ export function App() { const [editHistory, setEditHistory] = useState(null); const [modal, setModal] = useState(null); - const [lightMode, setLightMode] = usePersistentState("lightMode", "auto"); + // const [lightMode, setLightMode] = usePersistentState("lightMode", "auto"); + const lightMode = "auto"; const {makeCheckPoint, onRedo, onUndo, onRotate} = useEditor(setEditHistory); @@ -140,7 +141,11 @@ export function App() { const plantState = currentBigStep && currentBigStep.state.plant || plant.execution.initial()[1]; - return
+ return
{/* top-to-bottom: everything -> bottom panel */}
@@ -156,7 +161,7 @@ export function App() { style={{flex: '0 0 content'}} > {editHistory && }
{/* Editor */} diff --git a/src/App/BottomPanel/BottomPanel.css b/src/App/BottomPanel/BottomPanel.css index d0922b3..4a93ad9 100644 --- a/src/App/BottomPanel/BottomPanel.css +++ b/src/App/BottomPanel/BottomPanel.css @@ -1,7 +1,7 @@ .errorStatus { /* background-color: rgb(230,0,0); */ background-color: var(--error-color); - color: white; + color: var(--background-color); } .bottom { diff --git a/src/App/SideBar/SideBar.css b/src/App/SideBar/SideBar.css index b2212da..4f52df7 100644 --- a/src/App/SideBar/SideBar.css +++ b/src/App/SideBar/SideBar.css @@ -62,11 +62,8 @@ button.inputEvent:active:not(:disabled) { } .activeState { - /* border: rgb(192, 125, 0); */ - /* background-color:rgb(255, 251, 244); */ border: var(--active-state-border-color) 1px solid; background-color: var(--active-state-bg-color); - /* filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856)); */ border-radius: 6px; margin-left: 4px; padding-left: 2px; @@ -75,18 +72,6 @@ button.inputEvent:active:not(:disabled) { color: var(--text-color); } -/* hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 0; - margin-top: -1px; - margin-bottom: -5px; - padding: 0; - z-index: -1; -} */ - ul { list-style-type: circle; margin-block-start: 0; diff --git a/src/App/TopPanel/TopPanel.tsx b/src/App/TopPanel/TopPanel.tsx index eeb0048..7e922c4 100644 --- a/src/App/TopPanel/TopPanel.tsx +++ b/src/App/TopPanel/TopPanel.tsx @@ -37,8 +37,8 @@ export type TopPanelProps = { onInit: () => void, onClear: () => void, onBack: () => void, - lightMode: LightMode, - setLightMode: Dispatch>, + // lightMode: LightMode, + // setLightMode: Dispatch>, insertMode: InsertMode, setInsertMode: Dispatch>, setModal: Dispatch>, @@ -51,7 +51,7 @@ export type TopPanelProps = { const ShortCutShowKeys = ~; -export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, lightMode, setLightMode, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { +export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, onRedo, onRotate, onInit, onClear, onBack, insertMode, setInsertMode, setModal, zoom, setZoom, showKeys, setShowKeys, editHistory}: TopPanelProps) { const [displayTime, setDisplayTime] = useState("0.000"); const [timescale, setTimescale] = usePersistentState("timescale", 1); @@ -152,7 +152,8 @@ export const TopPanel = memo(function TopPanel({trace, time, setTime, onUndo, on }, [config, time, onInit, onChangePaused, setShowKeys, onSkip, onBack, onClear]); return
- {/* light / dark mode */} + + {/* light / dark mode
  -
+
*/} {/* shortcuts / about */}
diff --git a/src/App/VisualEditor/hooks/useMouse.tsx b/src/App/VisualEditor/hooks/useMouse.tsx index 335a6f0..a49f8db 100644 --- a/src/App/VisualEditor/hooks/useMouse.tsx +++ b/src/App/VisualEditor/hooks/useMouse.tsx @@ -356,8 +356,6 @@ export function useMouse(makeCheckPoint: () => void, insertMode: InsertMode, zoo } }, [makeCheckPoint, deleteSelection, setState, setDragging]); - console.log(state.selection); - useEffect(() => { // mousemove and mouseup are global event handlers so they keep working when pointer is outside of browser window window.addEventListener("mouseup", onMouseUp); diff --git a/src/Logo/Logo.tsx b/src/Logo/Logo.tsx index 5d064ad..f524103 100644 --- a/src/Logo/Logo.tsx +++ b/src/Logo/Logo.tsx @@ -6,6 +6,1572 @@ export function Logo() { fill: var(--text-color); } `} - - ; -} \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ; +} diff --git a/src/index.css b/src/index.css index 512a0d0..a7da777 100644 --- a/src/index.css +++ b/src/index.css @@ -8,11 +8,11 @@ html, body { :root { color-scheme: light dark; - --background-color: light-dark(white, rgb(26, 26, 26)); + --background-color: light-dark(white, rgb(0, 0, 0)); --text-color: light-dark(black, white); --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82)); --error-bg-color: light-dark(lightpink, rgb(75, 0, 0)); - --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(102, 0, 0)); + --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153)); --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377)); --accent-border-color: light-dark(blue, rgb(64, 185, 255)); --separator-color: light-dark(lightgrey, rgb(44, 44, 44)); @@ -39,12 +39,6 @@ html, body { --output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104)); } -/* for some reason i need to add this or some elements are rendered in OS color rather than 'forced' color */ -div { - color: var(--text-color); - background-color: var(--background-color); -} - div#root { height: 100%; }