feat: added and changed the monitoringpage a lot

ref: N25B-398

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,58 +1,65 @@
 import React from 'react';
-import styles from './MonitoringPage.module.css'
+import styles from './MonitoringPage.module.css';
 
 export default function MonitoringPage() {
   return (
-    <div className="dashboard-container">
-      <header className="experiment-overview">
-        <div className="phase-name">
+    <div className={styles.dashboardContainer}>
+      {/* HEADER */}
+      <header className={styles.experimentOverview}>
+        <div className={styles.phaseName}>
           <h2>Experiment Overview</h2>
           <p><strong>Phase name:</strong> Rhyming fish</p>
-          <div className="phase-progress">
-            <span className="phase active">1</span>
-            <span className="phase active">2</span>
-            <span className="phase current">3</span>
-            <span className="phase">4</span>
-            <span className="phase">5</span>
+          <div className={styles.phaseProgress}>
+            <span className={`${styles.phase} ${styles.completed}`}>1</span>
+            <span className={`${styles.phase} ${styles.completed}`}>2</span>
+            <span className={`${styles.phase} ${styles.current}`}>3</span>
+            <span className={styles.phase}>4</span>
+            <span className={styles.phase}>5</span>
           </div>
         </div>
 
-        <div className="experiment-controls">
+        <div className={styles.experimentControls}>
           <h3>Experiment Controls</h3>
-          <div className="controls-buttons">
-            <button className="play">▶️</button>
-            <button className="pause">⏸️</button>
-            <button className="restart">🔁</button>
-            <button className="stop">⏹️</button>
+          <div className={styles.controlsButtons}>
+            <button className={styles.pause}>▶</button>
+            <button className={styles.next}>⏭</button>
+            <button className={styles.restartPhase}>↩</button>
+            <button className={styles.restartExperiment}>⟲</button>
           </div>
         </div>
 
-        <div className="connection-status">
+        <div className={styles.connectionStatus}>
           <h3>Connection:</h3>
-          <p className="connected">● Robot is connected</p>
+          <p className={styles.connected}>● Robot is connected</p>
         </div>
       </header>
 
-      <main className="phase-overview">
-        <section>
+      {/* MAIN GRID */}
+      
+      <main className={styles.phaseOverview}>
+        <section className={styles.phaseOverviewText}>
+          <h3>Phase Overview</h3>
+        </section>
+
+        <section className={styles.phaseBox}>
           <h3>Goals</h3>
           <ul>
-            <li className="checked">Convince the RP that you are a fish</li>
+            <li className={styles.checked}>Convince the RP that you are a fish</li>
             <li>Reference Shakespeare</li>
             <li>Give a compliment</li>
           </ul>
         </section>
 
-        <section>
+        <section className={styles.phaseBox}>
           <h3>Triggers</h3>
           <ul>
-            <li className="checked">Convince the RP that you are a fish</li>
+            <li className={styles.checked}>Convince the RP that you are a fish</li>
             <li>Reference Shakespeare</li>
             <li>Give a compliment</li>
           </ul>
         </section>
 
-        <section>
+        <section className={styles.phaseBox}>
           <h3>Norms</h3>
           <ul>
             <li>Rhyme when talking</li>
@@ -60,7 +67,7 @@ export default function MonitoringPage() {
           </ul>
         </section>
 
-        <section>
+        <section className={styles.phaseBox}>
           <h3>Conditional Norms</h3>
           <ul>
             <li>“RP is sad” - Be nice</li>
@@ -68,19 +75,21 @@ export default function MonitoringPage() {
         </section>
       </main>
 
-      <aside className="logs">
+      {/* LOGS */}
+      <aside className={styles.logs}>
         <h3>Logs</h3>
-        <div className="log-header">
+        <div className={styles.logHeader}>
           <span>Global:</span>
           <button>ALL</button>
           <button>Add</button>
-          <button className="live">Live</button>
+          <button className={styles.live}>Live</button>
         </div>
         <textarea defaultValue="Example Log: much log"></textarea>
       </aside>
 
-      <footer className="controls-section">
-        <div className="gestures">
+      {/* FOOTER */}
+      <footer className={styles.controlsSection}>
+        <div className={styles.gestures}>
           <h4>Controls</h4>
           <ul>
             <li>Gesture: Wave Left Hand</li>
@@ -90,24 +99,24 @@ export default function MonitoringPage() {
           </ul>
         </div>
 
-        <div className="speech">
+        <div className={styles.speech}>
           <h4>Speech Options</h4>
           <ul>
-            <li>"Hello, my name is pepper."</li>
-            <li>"How is the weather today?"</li>
-            <li>"I like your outfit, very pretty."</li>
-            <li>"How is your day going?"</li>
+            <li>\"Hello, my name is pepper.\"</li>
+            <li>\"How is the weather today?\"</li>
+            <li>\"I like your outfit, very pretty.\"</li>
+            <li>\"How is your day going?\"</li>
           </ul>
         </div>
 
-        <div className="direct-speech">
+        <div className={styles.directSpeech}>
           <h4>Direct Pepper Speech</h4>
           <ul>
             <li>[time] Send: *Previous message*</li>
             <li>[time] Send: *Previous message*</li>
             <li>[time] Send: *Previous message*</li>
           </ul>
-          <div className="speech-input">
+          <div className={styles.speechInput}>
             <input type="text" placeholder="Type message..." />
             <button>Send</button>
           </div>