Merge branch 'reactime7' of https://github.com/caitlinchan23/reactime into reactime7

Author: Nkmai

src/app/components/SwitchApp.tsx

@@ -10,7 +10,7 @@ const SwitchAppDropdown = () => {
 
   const tabsArray:any[] = [];
   Object.keys(tabs).forEach(tab => {
-    tabsArray.unshift({ value: tab, label: tabs[tab].title });
+    tabsArray.unshift({ value: tab, label: tabs[tab].title});
   });
 
   const currTab = {

src/app/containers/ActionContainer.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { diff } from 'jsondiffpatch';
 import Action from '../components/Action';
+import SwitchAppDropdown from '../components/SwitchApp';
 
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
@@ -94,6 +95,7 @@ function ActionContainer() {
 
   return (
     <div className="action-container">
+      <SwitchAppDropdown />
       <div className="action-component exclude">
         <button
           className="empty-button"

src/app/containers/HeadContainer.tsx

@@ -2,13 +2,11 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 // @ts-nocheck
 import React from 'react';
-import SwitchAppDropdown from '../components/SwitchApp';
 
 function HeadContainer() {
   return (
     <div className="head-container">
       <img src="../assets/logo-no-version.png" height="30px" />
-      <SwitchAppDropdown />
     </div>
   );
 }

src/app/styles/base/_base.scss

@@ -24,7 +24,7 @@ body {
 }
 .buttons-container {
   grid-area: buttons;
-  background: linear-gradient(90deg, rgba(41,41,41,1) 0%, rgba(51,51,51,1) 50%, rgba(41,41,41,1) 100%);
+
   border-color: rgba(41,41,41,1);
 }
 

src/app/styles/components/_buttons.scss

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 .empty-button {
-	padding: 5px;
+	padding: 3px;
 	outline: transparent;
 	color: black;
 	display: flex;

src/app/styles/components/_rc-slider.scss

@@ -44,19 +44,18 @@
 }
 .rc-slider-handle:focus {
   border-color: #57c5f7;
-  box-shadow: 0 0 0 5px #96dbfa;
+  // box-shadow: 0 0 0 5px #96dbfa;
   outline: none;
 }
 .rc-slider-handle-click-focused:focus {
   border-color: #96dbfa;
-  box-shadow: unset;
 }
 .rc-slider-handle:hover {
   border-color: #57c5f7;
 }
 .rc-slider-handle:active {
+  background: #e4494b;
   border-color: #57c5f7;
-  box-shadow: 0 0 5px #57c5f7;
   cursor: -webkit-grabbing;
   cursor: grabbing;
 }
@@ -236,7 +235,7 @@
   text-decoration: none;
   background-color: #6c6c6c;
   border-radius: 6px;
-  box-shadow: 0 0 4px #d9d9d9;
+  // box-shadow: 0 0 4px #d9d9d9;
 }
 .rc-slider-tooltip-arrow {
   position: absolute;

src/app/styles/layout/_headContainer.scss

@@ -5,27 +5,33 @@
 
 .head-container {
   height: 5%;
-  background-color: $head-color;
+  background: linear-gradient(90deg, rgba(41,41,41,1) 0%, rgba(51,51,51,1) 50%, rgba(41,41,41,1) 100%);
 }
 
 .head-container {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
 }
 
-.tab-select-container {
-  font-size: 12px;
-  min-width: 90px;
-  margin: 2px 7px;
+div .tab-select-container {
+  background-color: rgba(51,51,51,1);
+  font-size: 14px;
+  height: 40px;
+  width: 100%;
+  margin-bottom: 0;
 }
 
 .tab-select-container:focus {
+  background-color: rgba(51,51,51,1);
+
   outline: none;
 }
 
 .tab-select-container:active {
+  background-color: rgba(51,51,51,1);
+
   outline: none;
   border-color: transparent;
 }
@@ -35,31 +41,41 @@ svg {
 }
 
 .tab-select-container {
+  background-color: rgba(51,51,51,1);
   height: 70%;
+
   .tab-select__control:focus {
     outline: none;
   }
+  div.tab-select-container.css-2b097c-container {
+    background-color: rgba(51,51,51,1);
+    margin: 0;
+  }
 
   .tab-select__control,
   .tab-select__menu {
+    background-color: rgba(51,51,51,1);
     outline: none;
     font-size: 14px;
     border-style: none;
-    width: 300px;
     background-color: $brand-color;
     z-index: 2;
+    margin-bottom: 0;
     @extend %disable-highlight;
   }
   .tab-select__single-value {
     color: white;
   }
   .tab-select__value-container {
+    background-color: rgba(51,51,51,1);
+    margin: 0;
     padding: 0px;
   }
   .tab-select__value-container:focus {
    outline: none;
   }
   .tab-select__option:hover {
+    margin-top: 0;
     background-color: $light-grey-three;
     color: black;
   }
@@ -76,6 +92,9 @@ svg {
     margin-bottom: 3px;
   }
 
+  .css-1uccc91-singleValue {
+    margin-left: 8px;
+  }
   // removes the cursor from blinking
   .css-w8afj7-Input {
     color: transparent;
@@ -86,5 +105,16 @@ svg {
   .css-1pahdxg-control {
     min-height: initial;
     height: 100%;
+    background-color: rgba(51,51,51,1);
+    border: none;
+    outline: none;
+    margin-bottom: 0;
+    border-radius: 0;
   }
+  .css-yk16xz-control:focus,
+  .css-1pahdxg-control:focus {
+    outline: none;
+    border-radius: 0;
+  } 
 }
+

src/app/styles/layout/_stateContainer.scss

@@ -1,7 +1,6 @@
 .state-container {
   font-size: 12px;
   overflow: auto;
-  
   background-color: $brand-color;
 }
 #componentMapContainer, #historyContainer, #atomsContainer  {
@@ -10,7 +9,7 @@
 
 .state-container .navbar {
 
-  background-color: $navbar-color;
+  background-color: rgba(51,51,51,1);
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -20,12 +19,12 @@
 
 .state-container .main-navbar{
 
-  background-color: red;
+  background-color: rgba(51,51,51,1);
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  height: 40px;
+  height: 35px;
   margin: 6px;
 }
 
@@ -34,12 +33,12 @@
   top: 0px;
   left: 0px;
   z-index: 1;
-  background-color: #565A61;
+  background-color: rgba(51,51,51,1);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 40px;
+  height: 35px;
 }
 
 .navbar {
@@ -60,6 +59,7 @@
 .state-container {
   .main-navbar-text {
     margin: 6px;
+    font-size: 14px;
   }
 
   .main-router-link {
@@ -112,20 +112,20 @@
 
   .main-navbar{
 
-    background-color: #3d4249;
+    background-color: rgba(51,51,51,1);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    height: 40px;
+    height: 35px;
     margin: 6px;
   }
 
   .main-navbar-container{
     top: 0px;
     left: 0px;
     z-index: 1;
-    background-color: #3d4249;
+    background-color: rgba(51,51,51,1);
     display: flex;
     flex-direction: row;
     justify-content: space-between;

src/app/styles/layout/_travelContainer.scss

@@ -10,7 +10,7 @@
 .react-select-container {
   font-size: 12px;
   min-width: 90px;
-  margin: 10px;
+  margin: 8px;
 }
 
 

src/app/styles/main.scss

@@ -4,12 +4,14 @@
   font-family: 'Roboto', sans-serif;
 }
 
+
 /* width */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 5px;
+  height: 8px;
 }
 
-/* Track */
+/* Track */ 
 ::-webkit-scrollbar-track {
   background: rgb(20, 20, 20); 
 }