From 79652b8da1dbab1c13e3af309d955db192c79df9 Mon Sep 17 00:00:00 2001
From: Anna Le <annale1501@gmail.com>
Date: Thu, 7 Apr 2022 11:51:42 -0400
Subject: [PATCH 1/3] responsiveness update

---
 .../src/components/DayPanels/DayPanels.less   |  2 +-
 .../MentorSubHeader/MentorSubHeader.less      |  9 ++++
 .../ContentCreator/DayEditor/DayEditor.less   | 12 ------
 .../ContentCreator/UnitEditor/UnitEditor.less | 20 ++++-----
 .../src/views/Mentor/Classroom/Classroom.less |  7 ++++
 .../src/views/Mentor/Classroom/Home/Home.less | 42 +++++++++++++++----
 .../LearningStandardModal.js                  |  2 +-
 .../src/views/Mentor/Dashboard/Dashboard.less | 33 ++++++++++++++-
 client/src/views/Researcher/DayLevelReport.js |  6 +--
 .../src/views/Researcher/DayLevelReport.less  | 23 ++++++----
 .../views/Researcher/DayLevelReportView.js    |  4 +-
 .../views/Researcher/DayLevelReportView.less  | 16 +++++--
 12 files changed, 128 insertions(+), 48 deletions(-)

diff --git a/client/src/components/DayPanels/DayPanels.less b/client/src/components/DayPanels/DayPanels.less
index 8b5a36e8..1566935a 100644
--- a/client/src/components/DayPanels/DayPanels.less
+++ b/client/src/components/DayPanels/DayPanels.less
@@ -191,7 +191,7 @@ p {
 #blockly-canvas {
   margin: auto;
   width: 95%;
-  height: 72vh;
+  height: 74vh;
 }
 
 #console-container {
diff --git a/client/src/components/MentorSubHeader/MentorSubHeader.less b/client/src/components/MentorSubHeader/MentorSubHeader.less
index 45d1424d..9a42baae 100644
--- a/client/src/components/MentorSubHeader/MentorSubHeader.less
+++ b/client/src/components/MentorSubHeader/MentorSubHeader.less
@@ -54,3 +54,12 @@
     }
   }
 }
+
+@media only screen and (max-width: 915px) { 
+
+  #page-header {
+    h1 {
+      width: fit-content;
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/views/ContentCreator/DayEditor/DayEditor.less b/client/src/views/ContentCreator/DayEditor/DayEditor.less
index 04b5c4b2..b25fe8da 100644
--- a/client/src/views/ContentCreator/DayEditor/DayEditor.less
+++ b/client/src/views/ContentCreator/DayEditor/DayEditor.less
@@ -20,18 +20,6 @@
   width: '160px';
 }
 
-// #display-code-modal {
-//   #display-code-btn {
-//     width: 15vw;
-//     min-height: 10vh;
-//     font-size: 1em;
-
-//     &:hover {
-//       width: 18vw;
-//     }
-//   }
-// }
-
 .border-card-info {
   width: 50px;
 }
diff --git a/client/src/views/ContentCreator/UnitEditor/UnitEditor.less b/client/src/views/ContentCreator/UnitEditor/UnitEditor.less
index dbac376a..d95075e9 100644
--- a/client/src/views/ContentCreator/UnitEditor/UnitEditor.less
+++ b/client/src/views/ContentCreator/UnitEditor/UnitEditor.less
@@ -21,16 +21,16 @@
     width: '160px';
 }
 
-#display-code-modal {
+// #display-code-modal {
 
 
-    #display-code-btn {
-      width: 18vw;
-      min-height: 4vh;
-      font-size: 1em;
+//     #display-code-btn {
+//       width: 18vw;
+//       min-height: 4vh;
+//       font-size: 1em;
   
-      &:hover {
-        width: 20vw;
-      }
-    }
-  }
\ No newline at end of file
+//       &:hover {
+//         width: 20vw;
+//       }
+//     }
+//   }
\ No newline at end of file
diff --git a/client/src/views/Mentor/Classroom/Classroom.less b/client/src/views/Mentor/Classroom/Classroom.less
index 8972f151..4a77ea97 100644
--- a/client/src/views/Mentor/Classroom/Classroom.less
+++ b/client/src/views/Mentor/Classroom/Classroom.less
@@ -43,3 +43,10 @@
 .ant-tabs-ink-bar {
   background: #colors[secondary] !important;
 }
+
+@media only screen and (max-width: 915px) {
+  .ant-tabs-nav-wrap,
+  .ant-tabs-nav {
+    margin: auto 10vw;
+  }
+}
diff --git a/client/src/views/Mentor/Classroom/Home/Home.less b/client/src/views/Mentor/Classroom/Home/Home.less
index 716b17c9..3d341025 100644
--- a/client/src/views/Mentor/Classroom/Home/Home.less
+++ b/client/src/views/Mentor/Classroom/Home/Home.less
@@ -50,7 +50,7 @@
 
         #view-day-button {
           height: 6vh;
-          width: 30%;
+          width: 40%;
           font-size: 1.2em;
           font-weight: 600;
           background-color: transparent;
@@ -89,10 +89,14 @@
     margin-left: 10px;
 
     #change-lesson-btn {
-      width: auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: fit-content;
       height: 2.5vh;
       font-size: 0.8em;
       font-weight: 600;
+      line-height: 0;
       border: none;
       color: #colors[text-primary];
       background: #colors[quaternary];
@@ -103,10 +107,6 @@
       &:hover {
         background: #colors[quinary];
       }
-      #test {
-        display: flex;
-        justify-content: right;
-      }
     }
   }
 }
@@ -151,7 +151,7 @@
   float: left;
   margin-left: 12px;
   position: relative;
-  top: -60px;
+  top: -50px;
 
   &:focus {
     outline: none;
@@ -167,3 +167,31 @@
     }
   }
 }
+
+@media only screen and (max-width: 915px) { 
+
+  #active-learning-standard-title-container {
+    line-height: 20px;
+    padding-top: 2vh;
+  }
+
+  #home-content-container {
+    #card-btn-container {
+      grid-template-columns: auto;
+      #view-day-card {
+        width: 90%;
+        #view-day-heading {
+          #view-day-button { 
+            width: fit-content;
+          }
+        }
+      }
+    }
+  }
+
+  #display-code-modal {
+    #display-code-btn {
+      width: 40vw;
+    }
+  }
+}
diff --git a/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js b/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js
index 862197d0..4c390c1c 100644
--- a/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js
+++ b/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js
@@ -74,7 +74,7 @@ export default function LearningStandardModal({
   return (
     <div id='learning-standard-modal'>
       <button id='change-lesson-btn' onClick={showModal}>
-        <p id='test'>Change</p>
+        Change
       </button>
       <Modal
         title={
diff --git a/client/src/views/Mentor/Dashboard/Dashboard.less b/client/src/views/Mentor/Dashboard/Dashboard.less
index 0e37bebb..bde04fd8 100644
--- a/client/src/views/Mentor/Dashboard/Dashboard.less
+++ b/client/src/views/Mentor/Dashboard/Dashboard.less
@@ -49,7 +49,7 @@
     button {
       width: 9vw;
       height: auto;
-      font-size: 1vw;
+      font-size: 1em;
       font-weight: 500;
       border-radius: 30px;
       margin: 10% auto auto auto;
@@ -90,7 +90,7 @@
     min-width: 28%;
 
     #number {
-      font-size: 1.4vw;
+      font-size: 1.3em;
       margin: 0;
       padding-top: 20px;
     }
@@ -142,3 +142,32 @@
     }
   }
 }
+
+@media only screen and (max-width: 915px) { 
+  #main-header {
+    line-height: 1em;
+  }
+  
+  #dashboard-card-container { 
+    grid-template-columns: auto;
+    margin: 0;
+  }
+
+  #dashboard-class-card { 
+    margin: 0;
+    width: 100%;
+
+    #card-left-content-container {
+      #card-title {
+        font-size: 1em;
+        line-height: 1.2em;
+      }
+    }
+
+    card-right-content-container {  
+      #number {
+        font-size: 1.2em;
+      }
+    }
+  }
+}
diff --git a/client/src/views/Researcher/DayLevelReport.js b/client/src/views/Researcher/DayLevelReport.js
index 5f46b0db..d3cd6664 100644
--- a/client/src/views/Researcher/DayLevelReport.js
+++ b/client/src/views/Researcher/DayLevelReport.js
@@ -237,13 +237,13 @@ const DayLevelReport = () => {
           </div>
         </div>
       ) : (
-        <div className='filter-hide'>
+        <div id='filter-hide'>
           <Filter setSearchParam={setSearchParam} />
         </div>
       )}
       <main id='day-report-content-wrapper'>
         <div>
-          <h3 className='filter-text'>Current Filter: </h3>
+          <h3 id='current-filter-text'>Current Filter: </h3>
           {Object.keys(paramObj).map((key) => (
             <Tag>
               {key === 'grade' ? `${key}(id)` : key}: {paramObj[key]}
@@ -412,7 +412,7 @@ const Filter = ({ setSearchParam }) => {
           </option>
         ))}
       </select>
-      <h3 className='filter-text'>Or</h3>
+      <h3 id='filter-text'>Or</h3>
       <select
         className='select'
         placeholder='Select a classroom'
diff --git a/client/src/views/Researcher/DayLevelReport.less b/client/src/views/Researcher/DayLevelReport.less
index a7ac0a0d..eec4e8be 100644
--- a/client/src/views/Researcher/DayLevelReport.less
+++ b/client/src/views/Researcher/DayLevelReport.less
@@ -66,12 +66,16 @@ section {
   margin: 20px 50px;
   padding: 10px 20px;
   border-radius: 30px;
-  font-size: 2.5vh;
+  font-size: 1.8vh;
   font-weight: 500;
   color: #colors[text-primary];
   background-color: #colors[quaternary];
   border: none;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
+
+  &:hover {
+    background-color: #colors[quinary];
+  }
 }
 
 #day-level-dropdown {
@@ -91,10 +95,6 @@ label {
   display: inline-block;
 }
 
-.filter-btn {
-  background-color: red;
-}
-
 .select {
   padding: 4px 10px;
   margin: 2px;
@@ -116,17 +116,22 @@ label {
     border: solid 2px;
     border-color: #colors[secondary];
     padding: 10px;
+    font-weight: bolder;
   }
 }
 
-.filter-hide {
+#filter-hide {
   display: none;
 }
 
-.filter-text {
+#filter-text {
   color: #000;
 }
 
+#current-filter-text {
+  color: #fff;
+}
+
 #show-filter-btn {
   color: #colors[quaternary];
   height: 10px;
@@ -159,6 +164,10 @@ label {
 }
 
 @media only screen and (max-width: 915px) {
+  #day-level-report-header {
+    line-height: 1em;
+  }
+
   #day-level-return {
     height: 110px;
   }
diff --git a/client/src/views/Researcher/DayLevelReportView.js b/client/src/views/Researcher/DayLevelReportView.js
index 51c2995a..9d8721d5 100644
--- a/client/src/views/Researcher/DayLevelReportView.js
+++ b/client/src/views/Researcher/DayLevelReportView.js
@@ -66,8 +66,8 @@ const DayLevelReportView = () => {
       <div className='menu-bar'>
         <div id='day-level-report-header'>Day Level - Student Report</div>
         <button
-          id={'day-level-return'}
-          className={`btn-${'primary'} btn-${'sm'}`}
+          id='day-level-return'
+          // className={`btn-${'primary'} btn-${'sm'}`}
           type='button'
           onClick={() => navigate(-1)}
         >
diff --git a/client/src/views/Researcher/DayLevelReportView.less b/client/src/views/Researcher/DayLevelReportView.less
index cc4b84c6..db847590 100644
--- a/client/src/views/Researcher/DayLevelReportView.less
+++ b/client/src/views/Researcher/DayLevelReportView.less
@@ -50,6 +50,7 @@
     display: flex;
     justify-content: space-between;
 }
+
 section {
     background-color: white;
     text-align: left;
@@ -61,11 +62,12 @@ section {
 }
 
 #day-level-return {
-    height: auto;
+    height: 5vh;
+    width: 14vw;
     margin: 20px 50px;
     padding: 10px 20px;
     border-radius: 30px;
-    font-size: 1vw;
+    font-size: 1em;
     font-weight: 500;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -98,8 +100,16 @@ h2{
 }
 
 @media only screen and (max-width: 915px) {
+    .menu-bar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
     #day-level-return {
-        height: 110px;
+        margin: 0;
+        height: 4vh;
+        width: 50vw;
     }
 }
 

From 6e226599ce48a5966cda0e21e9bdd79dba1dd80d Mon Sep 17 00:00:00 2001
From: Anna Le <annale1501@gmail.com>
Date: Thu, 14 Apr 2022 12:42:33 -0400
Subject: [PATCH 2/3] mentor card updates

---
 .../src/views/Mentor/Classroom/Home/Home.js   | 47 ++++++-----
 .../src/views/Mentor/Classroom/Home/Home.less | 84 ++++++++++++++-----
 .../src/views/Mentor/Dashboard/Dashboard.less |  9 +-
 .../src/views/Researcher/DayLevelReport.less  |  2 +-
 .../views/Researcher/DayLevelReportView.less  | 10 +--
 client/src/views/Researcher/GroupReport.js    |  2 +-
 6 files changed, 103 insertions(+), 51 deletions(-)

diff --git a/client/src/views/Mentor/Classroom/Home/Home.js b/client/src/views/Mentor/Classroom/Home/Home.js
index 5522d962..79279f55 100644
--- a/client/src/views/Mentor/Classroom/Home/Home.js
+++ b/client/src/views/Mentor/Classroom/Home/Home.js
@@ -126,27 +126,9 @@ export default function Home({ classroomId, viewing }) {
                   {days.map((day) => (
                     <div id='view-day-card' key={day.id}>
                       <div id='view-day-heading'>
-                        <button
-                          id='view-day-button'
-                          onClick={() =>
-                            handleViewDay(day, activeLearningStandard.name)
-                          }
-                        >
-                          Day {day.number} Template
-                        </button>
-                        {day.activity_template && (
-                          <button
-                            id='dayview-day-button'
-                            onClick={() =>
-                              openActivityInWorkspace(
-                                day,
-                                activeLearningStandard.name
-                              )
-                            }
-                          >
-                            Activity Template
-                          </button>
-                        )}
+                       <div id='view-day-title'>
+                          Day {day.number}
+                        </div>
                       </div>
                       <div id='view-day-info'>
                         <p>
@@ -221,6 +203,29 @@ export default function Home({ classroomId, viewing }) {
                           </p>
                         ) : null}
                       </div>
+                      <div id='view-day-btn-container'>
+                      <button
+                          id='day-template-btn'
+                          onClick={() =>
+                            handleViewDay(day, activeLearningStandard.name)
+                          }
+                        >
+                          Day {day.number} Template
+                        </button>
+                        {day.activity_template && (
+                          <button
+                            id='activity-template-btn'
+                            onClick={() =>
+                              openActivityInWorkspace(
+                                day,
+                                activeLearningStandard.name
+                              )
+                            }
+                          >
+                            Activity Template
+                          </button>
+                        )}
+                      </div>
                     </div>
                   ))}
                 </div>
diff --git a/client/src/views/Mentor/Classroom/Home/Home.less b/client/src/views/Mentor/Classroom/Home/Home.less
index 3d341025..ae1ed437 100644
--- a/client/src/views/Mentor/Classroom/Home/Home.less
+++ b/client/src/views/Mentor/Classroom/Home/Home.less
@@ -30,7 +30,7 @@
 
     #view-day-card {
       width: 30vw;
-      min-height: 30vh;
+      min-height: 34vh;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
       border-radius: 10px;
       margin: 20px;
@@ -39,29 +39,31 @@
         background-color: #colors[quaternary];
         display: flex;
         align-items: center;
-        height: 6vh;
+        height: 20%;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
 
         #view-day-title {
           display: inline;
-          font-size: 1.1em;
-        }
-
-        #view-day-button {
-          height: 6vh;
-          width: 40%;
           font-size: 1.2em;
+          margin-left: 12px;
           font-weight: 600;
-          background-color: transparent;
-          border: none;
-          border-top-left-radius: 10px;
-
-          &:hover {
-            cursor: pointer;
-            background-color: #colors[quinary];
-          }
         }
+
+        // #view-day-button {
+        //   height: 6vh;
+        //   width: 40%;
+        //   font-size: 1.2em;
+        //   font-weight: 600;
+        //   background-color: transparent;
+        //   border: none;
+        //   border-top-left-radius: 10px;
+
+        //   &:hover {
+        //     cursor: pointer;
+        //     background-color: #colors[quinary];
+        //   }
+        // }
       }
 
       #view-day-info {
@@ -72,12 +74,56 @@
         font-size: 1.1em;
         line-height: 1em;
         word-wrap: break-word;
+        height: 50%;
 
         strong {
           font-weight: 500;
           font-size: 1.2;
         }
       }
+
+      #view-day-btn-container {
+        display: flex;
+        justify-content: center;
+        height: 20%;
+        #day-template-btn {
+          margin-right: 10px;
+          width: 12vw;
+          height: 4vh;
+          font-size: 1em;
+          font-weight: 500;
+          border-radius: 30px;
+          border: none;
+          background: #colors[quaternary];
+          color: #colors[text-primary];
+          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
+          transition: 0.25s;
+          cursor: pointer;
+      
+          &:hover {
+            background-color: #colors[quinary];
+          }
+        }
+
+        #activity-template-btn {
+          width: 12vw;
+          height: 4vh;
+          font-size: 1em;
+          font-weight: 500;
+          border-radius: 30px;
+          border: none;
+          background: #colors[quaternary];
+          color: #colors[text-primary];
+          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
+          transition: 0.25s;
+          cursor: pointer;
+      
+          &:hover {
+            background-color: #colors[quinary];
+          }
+        }
+      }
+
     }
   }
 
@@ -117,8 +163,8 @@
   right: 10vw;
 
   #display-code-btn {
-    width: 18vw;
-    min-height: 3.5vw;
+    width: 16vw;
+    min-height: 2.5vw;
     font-size: 1em;
     font-weight: 500;
     border-radius: 30px;
@@ -130,7 +176,7 @@
     cursor: pointer;
 
     &:hover {
-      width: 20vw;
+      width: 18vw;
       background-color: #colors[quinary];
     }
   }
diff --git a/client/src/views/Mentor/Dashboard/Dashboard.less b/client/src/views/Mentor/Dashboard/Dashboard.less
index bde04fd8..0e3905e2 100644
--- a/client/src/views/Mentor/Dashboard/Dashboard.less
+++ b/client/src/views/Mentor/Dashboard/Dashboard.less
@@ -96,7 +96,7 @@
     }
 
     #label {
-      font-size: 1vw;
+      font-size: 0.8em;
       padding-bottom: 20px;
     }
 
@@ -147,15 +147,16 @@
   #main-header {
     line-height: 1em;
   }
-  
+
   #dashboard-card-container { 
     grid-template-columns: auto;
     margin: 0;
   }
 
   #dashboard-class-card { 
-    margin: 0;
-    width: 100%;
+    margin: auto;
+    width: 80%;
+    justify-content: center;
 
     #card-left-content-container {
       #card-title {
diff --git a/client/src/views/Researcher/DayLevelReport.less b/client/src/views/Researcher/DayLevelReport.less
index eec4e8be..bbebab1c 100644
--- a/client/src/views/Researcher/DayLevelReport.less
+++ b/client/src/views/Researcher/DayLevelReport.less
@@ -66,7 +66,7 @@ section {
   margin: 20px 50px;
   padding: 10px 20px;
   border-radius: 30px;
-  font-size: 1.8vh;
+  font-size: 1em;
   font-weight: 500;
   color: #colors[text-primary];
   background-color: #colors[quaternary];
diff --git a/client/src/views/Researcher/DayLevelReportView.less b/client/src/views/Researcher/DayLevelReportView.less
index db847590..4c9b4a8a 100644
--- a/client/src/views/Researcher/DayLevelReportView.less
+++ b/client/src/views/Researcher/DayLevelReportView.less
@@ -17,16 +17,16 @@
 
 #replay-btn {
     flex-direction: column;
-    width: fit-content;
+    width: 12vw;
     align-self: center;
-    height: 45px;
+    height: 5vh;
     margin: 20px 50px;
     padding: 10px 20px;
-    border-radius: 20px;
+    border-radius: 30px;
     background-color: #colors[quaternary];
     color: #colors[text-primary];
-    font-size: 15px;
-    font-weight: 600;
+    font-size: 1em;
+    font-weight: 500;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
diff --git a/client/src/views/Researcher/GroupReport.js b/client/src/views/Researcher/GroupReport.js
index 1326b5c9..b70e3b44 100644
--- a/client/src/views/Researcher/GroupReport.js
+++ b/client/src/views/Researcher/GroupReport.js
@@ -19,7 +19,7 @@ export default function GroupReport(props) {
           type='button'
           onClick={() => navigate('/report')}
         >
-          Return to DashBoard
+          Return to Dashboard
         </button>
       </div>
     </div>

From e2f2f1f5108cd46faa37bdf7715580d8696d64fd Mon Sep 17 00:00:00 2001
From: Anna Le <annale1501@gmail.com>
Date: Thu, 21 Apr 2022 13:13:51 -0400
Subject: [PATCH 3/3] replay toggle

---
 .../src/views/Mentor/Classroom/Home/Home.less | 29 +++------
 client/src/views/Replay/Replay.js             | 64 +++++++++++++++----
 client/src/views/Replay/Replay.less           | 40 ++++++++++++
 .../views/Researcher/DayLevelReportView.js    |  3 +-
 4 files changed, 104 insertions(+), 32 deletions(-)

diff --git a/client/src/views/Mentor/Classroom/Home/Home.less b/client/src/views/Mentor/Classroom/Home/Home.less
index ae1ed437..3b2b25c1 100644
--- a/client/src/views/Mentor/Classroom/Home/Home.less
+++ b/client/src/views/Mentor/Classroom/Home/Home.less
@@ -30,40 +30,27 @@
 
     #view-day-card {
       width: 30vw;
-      min-height: 34vh;
+      height: auto;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
       border-radius: 10px;
       margin: 20px;
+      overflow: auto;
 
       #view-day-heading {
         background-color: #colors[quaternary];
         display: flex;
         align-items: center;
-        height: 20%;
+        justify-content: center;
+        height: 8vh;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
 
         #view-day-title {
           display: inline;
-          font-size: 1.2em;
+          font-size: 1.6em;
           margin-left: 12px;
           font-weight: 600;
         }
-
-        // #view-day-button {
-        //   height: 6vh;
-        //   width: 40%;
-        //   font-size: 1.2em;
-        //   font-weight: 600;
-        //   background-color: transparent;
-        //   border: none;
-        //   border-top-left-radius: 10px;
-
-        //   &:hover {
-        //     cursor: pointer;
-        //     background-color: #colors[quinary];
-        //   }
-        // }
       }
 
       #view-day-info {
@@ -74,7 +61,7 @@
         font-size: 1.1em;
         line-height: 1em;
         word-wrap: break-word;
-        height: 50%;
+        min-height: 30vh;
 
         strong {
           font-weight: 500;
@@ -85,8 +72,10 @@
       #view-day-btn-container {
         display: flex;
         justify-content: center;
-        height: 20%;
+        height: 6vh;
         #day-template-btn {
+          position: relative;
+          bottom: 0;
           margin-right: 10px;
           width: 12vw;
           height: 4vh;
diff --git a/client/src/views/Replay/Replay.js b/client/src/views/Replay/Replay.js
index 7b13eb48..d141557c 100644
--- a/client/src/views/Replay/Replay.js
+++ b/client/src/views/Replay/Replay.js
@@ -5,12 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Slider } from 'antd';
+import { Slider, Switch } from 'antd';
 import './Replay.less';
 import { useParams, useNavigate } from 'react-router-dom';
 import NavBar from '../../components/NavBar/NavBar';
 import { Table } from 'antd';
-import { getSave } from '../../Utils/requests';
+import { getSave, getSession } from '../../Utils/requests';
 
 const Replay = () => {
   const { saveID } = useParams();
@@ -22,6 +22,11 @@ const Replay = () => {
   const [playSpeed, setPlaySpeed] = useState(500);
   const navigate = useNavigate();
   const [action, setAction] = useState('');
+  const [student, setStudent] = useState('');
+  const [className, setClassName] = useState('');
+  const [lesson, setLesson] = useState('');
+  const [session, setSession] = useState('');
+  const [isToggle, setIsToggle] = useState(true);
 
   const reducer = (state, action) => {
     switch (action.type) {
@@ -50,12 +55,36 @@ const Replay = () => {
   };
 
   useEffect(() => {
-    const getReplay = async () => {
-      const save = await getSave(saveID);
-      console.log(save.data.replay);
-      setReplay(save.data.replay);
+    // const getReplay = async () => {
+    //   const save = await getSave(saveID);
+    //   console.log(save.data.replay);
+    //   setReplay(save.data.replay);
+    // };
+    // getReplay();
+
+
+    const getData = async () => {
+      const session = await getSession(saveID);
+      setSession(session.data);
+      console.log(session.data);
+
+      const fetchedStudents = session.data.students[0].name;
+      setStudent(fetchedStudents);
+
+      const fetchedClassroomNames = session.data.classroom.name;
+      setClassName(fetchedClassroomNames);
+
+      const fetchedLesson = session.data.learning_standard.name;
+      setLesson(fetchedLesson);
+
+      if (session.data.saves?.length) {
+        const latestSave = session.data.saves[session.data.saves.length - 1];
+        const save = await getSave(latestSave.id);
+        // console.log(save.data.replay);
+        setReplay(save.data.replay);
+      }
     };
-    getReplay();
+    getData();
   }, []);
 
   // const dataSource = [
@@ -123,6 +152,11 @@ const Replay = () => {
     setIsPlaying(false);
   }, [playbackRef]);
 
+  function onChange(checked) {
+    console.log(`switch to ${checked}`);
+    setIsToggle(checked);
+  }
+
   //handle dynamic playback changes
   useEffect(() => {
     if (replay.length) {
@@ -148,6 +182,14 @@ const Replay = () => {
       <NavBar />
       <div id='horizontal-container' className='flex flex-column'>
         <div id='top-container' className='flex flex-column vertical-container'>
+          <div className='flex' id='toggle'>
+            <Switch defaultChecked checkedChildren='Show' unCheckedChildren='Hide' onChange={onChange} />
+          </div>
+          <div className='flex flex-column' id='replay-heading'>
+            <h1>{className}</h1>
+            <h2>{lesson}</h2>
+            <h2 className={isToggle ? 'show-name' : 'hide-name'}>{student}</h2>
+          </div>
           <div
             id='description-container'
             className='flex flex-row space-between card'
@@ -156,13 +198,12 @@ const Replay = () => {
               <button
                 onClick={handleGoBack}
                 id='link'
-                className='flex flex-column'
               >
                 <i id='icon-btn' className='fa fa-arrow-left' />
               </button>
             </div>
             <div className='flex flex-row'>
-              <div className='flex flex-row'>
+              <div className='flex flex-row' id='slider'>
                 &#128034;
                 <Slider
                   className='playspeed-slider'
@@ -217,7 +258,6 @@ const Replay = () => {
             </div>
           </div>
         </div>
-        <h2>{`Action: ${action}`}</h2>
 
         <div className='flex flex-row'>
           <div
@@ -225,7 +265,9 @@ const Replay = () => {
             className='flex flex-column vertical-container overflow-visible'
           >
             <h1 id='section-header'>Code Replay</h1>
-            <div id='blockly-canvas' />
+            <div id='blockly-canvas'>
+              <h2 id='action'>{`Action: ${action}`}</h2>
+            </div>
             {/* <div id="timeline">
               { replay.map((item, index) => <div className={step === index ? 'current-time' : 'all-times'} key={item.timestamp}>{timeConverter(item.timestamp)}<Marker/></div>)}
             </div> */}
diff --git a/client/src/views/Replay/Replay.less b/client/src/views/Replay/Replay.less
index 9c54d86c..6fb66333 100644
--- a/client/src/views/Replay/Replay.less
+++ b/client/src/views/Replay/Replay.less
@@ -1,5 +1,21 @@
 @import '../../assets/style.less';
 
+#replay-heading {
+  margin-bottom: 10px;
+
+  h1, h2 {
+    margin: 0;
+    color: white;
+  }
+
+  .hide-name {
+    display: none;
+  }
+  
+  .show-name {
+  }
+}
+
 #timeline-container {
   display: flex;
   justify-content: center;
@@ -39,6 +55,8 @@
 }
 
 #description-container {
+  display: flex;
+  align-items: center;
   border-radius: 10px;
   top: 10px;
 }
@@ -47,6 +65,28 @@
   font-size: 18px;
 }
 
+#toggle {
+  width: 100%; 
+  margin-bottom: 20px;
+  justify-content: flex-end;
+  .ant-switch {
+    border: solid 1px;
+    border-color: white;
+  }
+}
+
+
+#action {
+  position: absolute;
+  top: 14px;
+  right: 50px;
+  font-size: 1.2em;
+}
+
+#slider {
+  margin-right: 10px; 
+}
+
 .playspeed-slider {
   width: 100px;
   .ant-slider-rail,
diff --git a/client/src/views/Researcher/DayLevelReportView.js b/client/src/views/Researcher/DayLevelReportView.js
index 9d8721d5..010b6e86 100644
--- a/client/src/views/Researcher/DayLevelReportView.js
+++ b/client/src/views/Researcher/DayLevelReportView.js
@@ -54,7 +54,8 @@ const DayLevelReportView = () => {
     if (session.saves?.length) {
       const latestSave = session.saves[session.saves.length - 1];
       return (
-        <Link id='replay-btn' className='btn' to={`/replay/${latestSave.id}`}>
+        <Link id='replay-btn' className='btn' to={`/replay/${id}`}>
+           {/* <Link id='replay-btn' className='btn' to={`/replay/${id}/${latestSave.id}`}></Link> */}
           View Code Replay
         </Link>
       );