feat: added and changed the monitoringpage a lot

ref: N25B-398

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -1,88 +1,122 @@
-/* MonitoringPage UI*/
-
-.dashboard-container {
+.dashboardContainer {
   display: grid;
+  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
+  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
   grid-template-areas:
-    'header header header'
-    'main logs logs'
-    'footer footer footer';
-  grid-template-columns: 2fr 1fr 1fr;
+    "header logs"
+    "main logs"
+    "footer footer";
   gap: 1rem;
   padding: 1rem;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
 }
 
-.experiment-overview {
+/* HEADER */
+.experimentOverview {
   grid-area: header;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  background: white;
-  border-radius: 8px;
+  background: #fff;
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: static; /* ensures it scrolls away */
 }
 
-.phase-progress .phase {
+.phaseProgress {
+  margin-top: 0.5rem;
+}
+
+.phase {
   display: inline-block;
   width: 25px;
   height: 25px;
-  border-radius: 5px;
   margin: 0 3px;
   text-align: center;
   line-height: 25px;
   background: #ccc;
 }
 
-.phase.active {
+.completed {
   background-color: #5cb85c;
   color: white;
 }
 
-.phase.current {
+.current {
   background-color: #f0ad4e;
   color: white;
 }
 
-.experiment-controls button {
-  margin-right: 5px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 1.2rem;
-}
-
-.connection-status .connected {
+.connected {
   color: green;
   font-weight: bold;
 }
 
-.phase-overview {
+.pause{
+  background-color: green;
+}
+
+.next {
+  background-color: #ccc;
+}
+
+.restartPhase{
+  background-color: rgb(255, 123, 0);
+}
+
+.restartExperiment{
+  background-color: red;
+}
+
+/* MAIN GRID */
+.phaseOverview {
   grid-area: main;
-  background: white;
-  border-radius: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  gap: 1rem;
+  background: #fff;
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
-.phase-overview section {
-  margin-bottom: 1rem;
+.phaseBox {
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
 }
 
-.phase-overview ul {
-  list-style-type: none;
-  padding: 0;
+.phaseOverviewText {
+  grid-column: 1 / -1; /* make the title span across both columns */
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0;            /* remove default section margin */
+  padding: 0.25rem 0;   /* smaller internal space */
 }
 
-.phase-overview li.checked::before {
+.phaseOverviewText h3{
+  margin: 0;            /* removes top/bottom whitespace */
+  padding: 0;           /* keeps spacing tight */
+}
+
+.phaseBox h3 {
+  margin-top: 0;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.4rem;
+}
+
+.checked::before {
   content: '✔️ ';
 }
 
+/* LOGS */
 .logs {
   grid-area: logs;
-  background: white;
-  border-radius: 8px;
+  background: #fff;
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
@@ -93,38 +127,49 @@
   margin-top: 0.5rem;
 }
 
-.controls-section {
+/* FOOTER */
+.controlsSection {
   grid-area: footer;
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  background: white;
-  border-radius: 8px;
+  background: #fff;
   padding: 1rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
-.gestures, .speech, .direct-speech {
+.gestures,
+.speech,
+.directSpeech {
   flex: 1;
 }
 
-.direct-speech .speech-input {
+.speechInput {
   display: flex;
   margin-top: 0.5rem;
 }
 
-.direct-speech input {
+.speechInput input {
   flex: 1;
   padding: 0.5rem;
   border: 1px solid #ccc;
-  border-radius: 4px 0 0 4px;
 }
 
-.direct-speech button {
+.speechInput button {
   background: #007bff;
   color: white;
   border: none;
   padding: 0.5rem 1rem;
-  border-radius: 0 4px 4px 0;
   cursor: pointer;
 }
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .phaseOverview {
+    grid-template-columns: 1fr;
+  }
+
+  .controlsSection {
+    flex-direction: column;
+  }
+}

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>