Merge branch 'dev' of https://github.com/oslabs-beta/reactime-v23.0 into dependencies

Author: Solodt55

src/app/styles/layout/_bodyContainer.scss

@@ -3,14 +3,13 @@
   overflow: hidden;
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-template-rows: 90% 5% 5%;
+  grid-template-rows: 1fr minmax(min-content, 5%) minmax(min-content, 5%);
   grid-template-areas:
     'actions states'
     'travel travel'
     'buttons buttons';
 }
 
-
 /* if extension width is less than 500px, stack the body containers */
 @media (max-width: 500px) {
   .body-container {

src/app/styles/layout/_stateContainer.scss

@@ -61,7 +61,7 @@
 .navbar {
   // prevent navbar from scrolling with state/tree display
   position: sticky;
-  top: 0px;
+  top: 40px; //JR 12.16.23 @12:15pm: this hardcoding is not best practice, should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
   left: 0px;
   z-index: 1;
   @extend %disable-highlight;
@@ -263,5 +263,3 @@
 .tooltipData-JSONTree::-webkit-scrollbar-track {
   background: #51565e;
 }
-
-

src/app/styles/layout/_travelContainer.scss

@@ -1,61 +1,58 @@
 .travel-container {
-	// background: linear-gradient(
-	// 	90deg,
-	// 	rgba(41, 41, 41, 1) 0%,
-	// 	rgba(51, 51, 51, 1) 50%,
-	// 	rgba(41, 41, 41, 1) 100%
-	// );
-	// border-color: $border-color;
-	// display: flex;
-	// flex-direction: row;
-	// align-items: center;
-	// justify-content: space-around;
+  // background: linear-gradient(
+  // 	90deg,
+  // 	rgba(41, 41, 41, 1) 0%,
+  // 	rgba(51, 51, 51, 1) 50%,
+  // 	rgba(41, 41, 41, 1) 100%
+  // );
+  // border-color: $border-color;
+  // display: flex;
+  // flex-direction: row;
+  // align-items: center;
+  // justify-content: space-around;
 
-	display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    border: none;
-    margin-top: 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  border: none;
 }
 
-.visx-group{
-	margin-top: 10px;
+.visx-group {
+  margin-top: 10px;
 }
 
-
 .react-select-container {
-	font-size: 16px;
-	min-width: 90px;
-	margin: 8px;
-	.react-select__control {
-		background-color: $light-grey-four;
-		border-color: transparent;
-		@extend %disable-highlight;
-	}
-	.react-select__control:hover {
-		cursor: pointer;
-	}
-	.react-select__menu {
-		background-color: $light-grey-four;
-		@extend %disable-highlight;
-	}
-	.react-select__single-value {
-		color: white;
-	}
-	.react-select__option:hover {
-		background-color: $fiery-rose;
-		cursor: pointer;
-	}
-	.react-select__option--is-selected,
-	.react-select__option--is-focused {
-		background-color: transparent;
-		cursor: pointer;
-
-	}
+  font-size: 16px;
+  min-width: 90px;
+  margin: 8px;
+  .react-select__control {
+    background-color: $light-grey-four;
+    border-color: transparent;
+    @extend %disable-highlight;
+  }
+  .react-select__control:hover {
+    cursor: pointer;
+  }
+  .react-select__menu {
+    background-color: $light-grey-four;
+    @extend %disable-highlight;
+  }
+  .react-select__single-value {
+    color: white;
+  }
+  .react-select__option:hover {
+    background-color: $fiery-rose;
+    cursor: pointer;
+  }
+  .react-select__option--is-selected,
+  .react-select__option--is-focused {
+    background-color: transparent;
+    cursor: pointer;
+  }
 
-	// removes the cursor from blinking
-	.css-w8afj7-Input {
-		color: transparent;
-	}
+  // removes the cursor from blinking
+  .css-w8afj7-Input {
+    color: transparent;
+  }
 }