preMVPpres

ljn16 · ljn16 · commit 44c3d56cb1de · 2024-05-02T17:46:30.000-05:00
diff --git a/demo-app/src/client/index.html b/demo-app/src/client/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Reactime MVP</title>
+    <title>Reactime</title>
+    <!-- <link rel="icon" type="image/x-icon" href="../../../assets/logos/blackWhiteSquareIcon.png"> -->
     <link rel="stylesheet" type="text/css" href="./style.css">
   </head>
   <body>
diff --git a/src/app/components/StateRoute/ComponentMap/heatMapLegend.tsx b/src/app/components/StateRoute/ComponentMap/heatMapLegend.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function HeatMapLegend() {
+  return (
+    <div className="heat-map-legend-container">
+        <div className="heat-level-one"></div>
+        <div className="heat-level-two"></div>
+        <div className="heat-level-three"></div>
+        <div className="heat-level-four"></div>
+    </div>
+  );
+}
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
@@ -195,15 +195,15 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               <i />
             </a>
           </aside>
-          <div className='collapse'>Collapse</div>
+          <div className='collapse'>Hide</div>
         </div>
         <a type='button' id='recordBtn' onClick={toggleRecord}>
           <i />
           <div
             className='toggle-record'
             style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
           >
-            Toggle Record
+            Record
           </div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}
         </a>
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
@@ -19,6 +19,7 @@ import {
 } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { MainState, RootState } from '../FrontendTypes';
+import HeatMapLegend from '../components/StateRoute/ComponentMap/heatMapLegend';
 
 /*
   This is the main container where everything in our application is rendered
diff --git a/src/app/containers/StateContainer.tsx b/src/app/containers/StateContainer.tsx
@@ -8,6 +8,7 @@ import StateRoute from '../components/StateRoute/StateRoute';
 import DiffRoute from '../components/DiffRoute/DiffRoute';
 import { StateContainerProps } from '../FrontendTypes';
 import { Outlet } from 'react-router';
+import HeatMapLegend from '../components/StateRoute/ComponentMap/heatMapLegend';
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
@@ -22,6 +23,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
   } = props;
 
   return (
+    <>
     <div className='state-container'>
       <div className='main-navbar-container'>
         <div className='main-navbar-text' />
@@ -44,6 +46,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
           </NavLink>
         </div>
       </div>
+      <HeatMapLegend />
       <Routes>
         <Route
           path='/diff/*'
@@ -68,11 +71,13 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
                 currLocation={currLocation}
               />
               {/* <Outlet/> */}
+              {/* <HeatMapLegend /> */}
             </div>
           }
         />
       </Routes>
     </div>
+    </>
   );
 };
 
diff --git a/src/app/styles/abstracts/_variablesLM.scss b/src/app/styles/abstracts/_variablesLM.scss
@@ -25,6 +25,12 @@ $background-color-weak: #d9d9d9;
 $contrasting-color: #161617;
 $contrasting-color-weak: #353536;
 
+/// HEATMAP COLORS
+$heat-level-1: #F1B476;
+$heat-level-2: #E4765B;
+$heat-level-3: #C64442;
+$heat-level-4: #8C2743;
+
 /////////////////////////////////////////////////////////////////////
 // ALL OF THE FOLLOWING COLORS SHOULD REFERENCE A COLOR FROM ABOVE //
 /////////////////////////////////////////////////////////////////////
diff --git a/src/app/styles/layout/_stateContainer.scss b/src/app/styles/layout/_stateContainer.scss
@@ -282,3 +282,11 @@
 .app-content {
   height: 100%;
 }
+
+.heat-map-legend-container {
+  display: flex;
+  height: 3px;
+  width: 200px;
+  background-image: linear-gradient(to right, $heat-level-1, $heat-level-2, $heat-level-3, $heat-level-4);
+}
+
