From a0a4687aebc4c543a48b6258e54eb5fd77ec8556 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= <b.r.c.otgaar@students.uu.nl>
Date: Sat, 10 Jan 2026 12:14:37 +0100
Subject: [PATCH] chore: add support for dark mode in monitoring page

---
 src/index.css                                 | 11 +++
 .../MonitoringPage/MonitoringPage.module.css  | 72 ++++++++++++++-----
 src/pages/VisProgPage/VisProg.module.css      |  7 ++
 src/pages/VisProgPage/VisProg.tsx             |  2 +-
 4 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/src/index.css b/src/index.css
index 6e28fe5..6f07f66 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,9 @@
   background-color: #242424;
 
   --accent-color: #008080;
+  --panel-shadow:
+      0 1px 2px white,
+      0 8px 24px rgba(190, 186, 186, 0.253);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,6 +18,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --panel-shadow:
+      0 1px 2px rgba(221, 221, 221, 0.178),
+      0 8px 24px rgba(27, 27, 27, 0.507);
+  }
+}
+
 html, body, #root {
   margin: 0;
   padding: 0;
diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css
index b4542cb..10b7cbb 100644
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -8,7 +8,8 @@
     "footer footer";
   gap: 1rem;
   padding: 1rem;
-  background-color: #f5f5f5;
+  background-color: var(--bg-main);
+  color: var(--text-main);
   font-family: Arial, sans-serif;
 }
 
@@ -16,11 +17,14 @@
 .experimentOverview {
   grid-area: header;
   display: flex;
+  color: color;
   justify-content: space-between;
   align-items: flex-start;
-  background: #fff;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  box-shadow: var(--shadow);
   padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--panel-shadow);
   position: static; /* ensures it scrolls away */
 }
 
@@ -35,16 +39,16 @@
   margin: 0 3px;
   text-align: center;
   line-height: 25px;
-  background: #ccc;
+  background: gray;
 }
 
 .completed {
-  background-color: #5cb85c;
+  background-color: green;
   color: white;
 }
 
 .current {
-  background-color: #f0ad4e;
+  background-color: rgb(255, 123, 0);
   color: white;
 }
 
@@ -60,22 +64,27 @@
 
 .pausePlayInactive{
   background-color: gray;
+  color: white;
 }
 
 .pausePlayActive{
   background-color: green;
+  color: white;
 }
 
 .next {
-  background-color: lightgray;
+  background-color: #6c757d;
+  color: white;
 }
 
 .restartPhase{
   background-color: rgb(255, 123, 0);
+  color: white;
 }
 
 .restartExperiment{
   background-color: red;
+  color: white;
 }
 
 /* MAIN GRID */
@@ -85,18 +94,20 @@
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, auto);
   gap: 1rem;
-  background: #fff;
+  background: var(--bg-surface);
+  color: var(--text-main);
   padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--panel-shadow);
+  
 }
 
 .phaseBox {
-  background: #f9f9f9;
-  border: 1px solid #ddd;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--panel-shadow);
   padding: 1rem;
   display: flex;
   flex-direction: column;
-  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
 }
 
 .phaseOverviewText {
@@ -114,7 +125,7 @@
 
 .phaseBox h3 {
   margin-top: 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--border-color);
   padding-bottom: 0.4rem;
 }
 
@@ -125,15 +136,27 @@
 /* LOGS */
 .logs {
   grid-area: logs;
-  background: #fff;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  box-shadow: var(--panel-shadow);
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
 .logs textarea {
   width: 100%;
-  height: 200px;
+  height: 83%;
   margin-top: 0.5rem;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
+}
+
+.logs button {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
 }
 
 /* FOOTER */
@@ -142,11 +165,20 @@
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  background: #fff;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  box-shadow: var(--panel-shadow);
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
+.controlsSection button {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
 .gestures,
 .speech,
 .directSpeech {
@@ -161,15 +193,19 @@
 .speechInput input {
   flex: 1;
   padding: 0.5rem;
-  border: 1px solid #ccc;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
 }
 
 .speechInput button {
-  background: #007bff;
   color: white;
   border: none;
   padding: 0.5rem 1rem;
   cursor: pointer;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
 }
 
 /* RESPONSIVE */
diff --git a/src/pages/VisProgPage/VisProg.module.css b/src/pages/VisProgPage/VisProg.module.css
index 5f2aa78..62143c7 100644
--- a/src/pages/VisProgPage/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.css
@@ -126,3 +126,10 @@
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
 }
+
+.backButton {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/pages/VisProgPage/VisProg.tsx b/src/pages/VisProgPage/VisProg.tsx
index 8fffe10..74cab85 100644
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -193,7 +193,7 @@ function VisProgPage() {
   if (showSimpleProgram) {
     return (
     <div>
-      <button onClick={() => setShowSimpleProgram(false)}>
+      <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
         Back to Editor ◀ 
       </button>
       <MonitoringPage/>