Merge remote-tracking branch 'origin/feat/monitoringpage-buttons' into feat/experiment-logs

# Conflicts:
#	src/pages/MonitoringPage/MonitoringPage.tsx

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;
 }

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -31,6 +31,11 @@ import {
   RobotConnected 
 } from './MonitoringPageComponents';
 import ExperimentLogs from "./components/ExperimentLogs.tsx";
+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
@@ -236,31 +241,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>
   );