Merge pull request #3 from oslabs-beta/styles3

hali03 · web-flow · commit 06d1e0543239 · 2024-05-14T15:01:30.000-07:00
relocated 'record' button and toggle, fixed overlapping issues #2
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/AxMap/AxMap.tsx b/src/app/components/StateRoute/AxMap/AxMap.tsx
@@ -37,3 +37,5 @@ const AxContainer = (props: AxContainer) => {
 };
 
 export default AxContainer;
+
+
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/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx
@@ -69,7 +69,7 @@ const StateRoute = (props: StateRouteProps) => {
         <NavLink
           to='/'
           className={(navData) =>
-            navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
+            navData.isActive ? 'is-active router-link map-tab map-tab1' : 'router-link map-tab map-tab1'
           }
           end
         >
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
@@ -197,19 +197,29 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           </aside>
           <div className='collapse'>Collapse</div>
         </div>
-        <a type='button' id='recordBtn' onClick={toggleRecord}>
+        {/* <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>
+        </a> */}
       </div>
       {actionView ? (
         <div className='action-button-wrapper'>
+          <a type='button' id='recordBtn' onClick={toggleRecord}>
+            <i />
+            <div
+              className='toggle-record'
+              style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
+            >
+              Record
+            </div>
+            {recordingActions ? <Switch defaultChecked /> : <Switch />}
+          </a>
           <SwitchAppDropdown />
           <div className='action-component exclude'>
             <Button
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/components/_componentMap.scss b/src/app/styles/components/_componentMap.scss
@@ -44,4 +44,3 @@
   fill: $map-root-text;
 }
 
-
diff --git a/src/app/styles/layout/_actionContainer.scss b/src/app/styles/layout/_actionContainer.scss
@@ -18,13 +18,15 @@
   color: #ffb3b3;
   height: 100%;
   display: flex;
+  margin-left: 10px;
 }
 
 .actionToolContainer {
   color: #873b3b;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 35px;
 }
 
 #recordBtn .fa-regular {
diff --git a/src/app/styles/layout/_stateContainer.scss b/src/app/styles/layout/_stateContainer.scss
@@ -86,16 +86,29 @@
 
   .router-link {
     height: 100%;
-    width: 34%;
+    // width: 34%;
+    width: 10%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: $navbar-unselected;
     text-decoration: none;
     color: $navbar-unselected-text;
 
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
+    font-size: 75%;
+    // border-top-right-radius: 10px;
+    // border-top-left-radius: 10px;
+    overflow: hidden;
+  }
+
+  .map-tab1 {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .accessibility-tab {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
   }
 
   .router-link:hover {
@@ -108,16 +121,20 @@
   }
 
   .navbar {
-    background-color: $navbar-background;
+    // background-color: $navbar-background;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
     height: 30px;
-    position: sticky;
-    top: 40px; //should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
-    left: 0px;
+    position: fixed;
+    top: 4px; //should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar // <- tried placing the main nav on the same line to save space but ran into problems with the svg div of the tree + animation. Will need closer inspection
+    left: 50%;
+    transform: translateX(-50%);
+    width: 65vw;
     z-index: 1;
+
+
     @extend %disable-highlight;
   }
 
@@ -225,9 +242,10 @@
   z-index: 2;
 }
 
-.state-container .router-link {
-  border: 0.5px solid black;
-}
+// .state-container .router-link {
+//   border: 0.5px solid rgba(0, 0, 0, 0.5);
+//   border-bottom: none;
+// }
 
 .tooltipData {
   background-color: #373737;
@@ -264,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);
+}
+

-Original file line number
+Diff line change
 };
 export default AxContainer;
++
++
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ const StateRoute = (props: StateRouteProps) => {`
`69`	`69`	`<NavLink`
`70`	`70`	`to='/'`
`71`	`71`	`className={(navData) =>`
`72`		`- navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'`
	`72`	`+ navData.isActive ? 'is-active router-link map-tab map-tab1' : 'router-link map-tab map-tab1'`
`73`	`73`	`}`
`74`	`74`	`end`
`75`	`75`	`>`
Original file line number	Diff line number	Diff line change
`@@ -44,4 +44,3 @@`
`44`	`44`	`fill: $map-root-text;`
`45`	`45`	`}`
`46`	`46`
`47`		`-`
Original file line number	Diff line number	Diff line change
`@@ -18,13 +18,15 @@`
`18`	`18`	`color: #ffb3b3;`
`19`	`19`	`height: 100%;`
`20`	`20`	`display: flex;`
	`21`	`+ margin-left: 10px;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`.actionToolContainer {`
`24`	`25`	`color: #873b3b;`
`25`	`26`	`display: flex;`
`26`	`27`	`justify-content: space-between;`
`27`	`28`	`align-items: center;`
	`29`	`+ height: 35px;`
`28`	`30`	`}`
`29`	`31`
`30`	`32`	`#recordBtn .fa-regular {`