feat: make experiment control buttons prettier

Use actual icons for the play, pause, skip, etc. buttons.

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -46,6 +46,7 @@ University within the Software Project course.
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: .5rem;
   }
 }
 

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -35,6 +35,11 @@ import {
   RobotConnected
 } from './MonitoringPageComponents';
 import ExperimentLogs from "./components/ExperimentLogs.tsx";
+import Pause from "../../components/Icons/Pause.tsx";
+import Play from "../../components/Icons/Play.tsx";
+import Next from "../../components/Icons/Next.tsx";
+import Replay from "../../components/Icons/Replay.tsx";
+import Stop from "../../components/Icons/Stop.tsx";
 
 // ----------------------------------------------------------------------
 // 1. State management
@@ -238,34 +243,39 @@ function ControlPanel({
       <h3>Experiment Controls</h3>
       <div className={styles.controlsButtons}>
         <button
+          aria-label="Pause"
           className={!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
           onClick={() => onAction("pause")}
           disabled={loading}
-        >❚❚</button>
+        ><Pause fill={"white"} /></button>
 
         <button
+          aria-label="Play"
           className={isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
           onClick={() => onAction("play")}
           disabled={loading}
-        >▶</button>
+        ><Play fill={"white"} /></button>
 
         <button
+          aria-label="Next phase"
           className={styles.next}
           onClick={() => onAction("nextPhase")}
           disabled={loading}
-        >⏭</button>
+        ><Next fill={"white"} /></button>
 
         <button
+          aria-label="Reset experiment"
           className={styles.restartExperiment}
           onClick={onReset}
           disabled={loading}
-        >⟲</button>
+        ><Replay fill={"white"} /></button>
 
         <button
+          aria-label="Stop"
           className={styles.stop}
           onClick={() => onAction("stop")}
           disabled={loading}
-        >⏹</button>
+        ><Stop fill={"white"} /></button>
       </div>
     </div>
   );