From 1b0d678826c8aaf73b385c8ebbe916c351b102dd Mon Sep 17 00:00:00 2001
From: Twirre Meulenbelt <43213592+TwirreM@users.noreply.github.com>
Date: Mon, 26 Jan 2026 10:09:44 +0100
Subject: [PATCH] feat: use SVG for button icons

ref: N25B-400
---
 src/components/Icons/Next.tsx                    |  5 +++++
 src/components/Icons/Pause.tsx                   |  5 +++++
 src/components/Icons/Play.tsx                    |  5 +++++
 src/components/Icons/Redo.tsx                    |  5 +++++
 src/components/Icons/Replay.tsx                  |  5 +++++
 .../MonitoringPage/MonitoringPage.module.css     | 16 ++++++++++++++++
 src/pages/MonitoringPage/MonitoringPage.tsx      | 15 ++++++++++-----
 7 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Icons/Next.tsx
 create mode 100644 src/components/Icons/Pause.tsx
 create mode 100644 src/components/Icons/Play.tsx
 create mode 100644 src/components/Icons/Redo.tsx
 create mode 100644 src/components/Icons/Replay.tsx

diff --git a/src/components/Icons/Next.tsx b/src/components/Icons/Next.tsx
new file mode 100644
index 0000000..1d30937
--- /dev/null
+++ b/src/components/Icons/Next.tsx
@@ -0,0 +1,5 @@
+export default function Next({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M664.07-224.93v-510.14h91v510.14h-91Zm-459.14 0v-510.14L587.65-480 204.93-224.93Z"/>
+    </svg>;
+}
\ No newline at end of file
diff --git a/src/components/Icons/Pause.tsx b/src/components/Icons/Pause.tsx
new file mode 100644
index 0000000..dcf5e08
--- /dev/null
+++ b/src/components/Icons/Pause.tsx
@@ -0,0 +1,5 @@
+export default function Pause({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M556.17-185.41v-589.18h182v589.18h-182Zm-334.34 0v-589.18h182v589.18h-182Z"/>
+    </svg>;
+}
diff --git a/src/components/Icons/Play.tsx b/src/components/Icons/Play.tsx
new file mode 100644
index 0000000..3f0fb6b
--- /dev/null
+++ b/src/components/Icons/Play.tsx
@@ -0,0 +1,5 @@
+export default function Play({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M311.87-185.41v-589.18L775.07-480l-463.2 294.59Z"/>
+    </svg>;
+}
diff --git a/src/components/Icons/Redo.tsx b/src/components/Icons/Redo.tsx
new file mode 100644
index 0000000..4268fc5
--- /dev/null
+++ b/src/components/Icons/Redo.tsx
@@ -0,0 +1,5 @@
+export default function Redo({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M390.98-191.87q-98.44 0-168.77-65.27-70.34-65.27-70.34-161.43 0-96.15 70.34-161.54 70.33-65.39 168.77-65.39h244.11l-98.98-98.98 63.65-63.65L808.13-600 599.76-391.87l-63.65-63.65 98.98-98.98H390.98q-60.13 0-104.12 38.92-43.99 38.93-43.99 96.78 0 57.84 43.99 96.89 43.99 39.04 104.12 39.04h286.15v91H390.98Z"/>
+    </svg>;
+}
\ No newline at end of file
diff --git a/src/components/Icons/Replay.tsx b/src/components/Icons/Replay.tsx
new file mode 100644
index 0000000..057d4b4
--- /dev/null
+++ b/src/components/Icons/Replay.tsx
@@ -0,0 +1,5 @@
+export default function Replay({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M480.05-70.43q-76.72 0-143.78-29.1-67.05-29.1-116.75-78.8-49.69-49.69-78.79-116.75-29.1-67.05-29.1-143.49h91q0 115.81 80.73 196.47Q364.1-161.43 480-161.43q115.8 0 196.47-80.74 80.66-80.73 80.66-196.63 0-115.81-80.73-196.47-80.74-80.66-196.64-80.66h-6.24l60.09 60.08-58.63 60.63-166.22-166.21 166.22-166.22 58.63 60.87-59.85 59.85h6q76.74 0 143.76 29.09 67.02 29.1 116.84 78.8 49.81 49.69 78.91 116.64 29.1 66.95 29.1 143.61 0 76.66-29.1 143.71-29.1 67.06-78.79 116.75-49.7 49.7-116.7 78.8-67.01 29.1-143.73 29.1Z"/>
+    </svg>;
+}
diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css
index 5f23eea..e740f1f 100644
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -28,6 +28,22 @@
   position: static; /* ensures it scrolls away */
 }
 
+.controlsButtons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: .25rem;
+  max-width: 260px;
+  flex-wrap: wrap;
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .phaseProgress {
   margin-top: 0.5rem;
 }
diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
index 2ff91bb..72e571c 100644
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -30,6 +30,11 @@ import {
   StatusList, 
   RobotConnected 
 } from './MonitoringPageComponents';
+import Replay from "../../components/Icons/Replay.tsx";
+import Pause from "../../components/Icons/Pause.tsx";
+import Play from "../../components/Icons/Play.tsx";
+import Next from "../../components/Icons/Next.tsx";
+import Redo from "../../components/Icons/Redo.tsx";
 
 // ----------------------------------------------------------------------
 // 1. State management
@@ -235,31 +240,31 @@ function ControlPanel({
           className={!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
           onClick={() => onAction("pause")}
           disabled={loading}
-        >❚❚</button>
+        ><Pause /></button>
 
         <button
           className={isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
           onClick={() => onAction("play")}
           disabled={loading}
-        >▶</button>
+        ><Play /></button>
 
         <button 
           className={styles.next} 
           onClick={() => onAction("nextPhase")} 
           disabled={loading}
-        >⏭</button>
+        ><Next /></button>
 
         <button 
           className={styles.restartPhase} 
           onClick={() => onAction("resetPhase")} 
           disabled={loading}
-        >↩</button>
+        ><Redo /></button>
 
         <button 
           className={styles.restartExperiment} 
           onClick={onReset} 
           disabled={loading}
-        >⟲</button>
+        ><Replay /></button>
       </div>
     </div>
   );