Merge branch 'dev' of https://github.com/oslabs-beta/react-time-travel into dev

Author: joshua0308

src/app/components/Diff.jsx

@@ -24,7 +24,7 @@ function Diff({ snapshot, show }) {
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
 
-  if (previous === undefined) return <div> states are equal </div>;
+  if (previous === undefined || delta === undefined) return <div> states are equal </div>;
   return (
     <div>
       { ReactHtmlParser(html) }

src/app/components/SwitchApp.jsx

@@ -20,8 +20,8 @@ const SwitchAppDropdown = () => {
 
   return (
     <Select
-      className="react-select-container"
-      classNamePrefix="react-select"
+      className="tab-select-container"
+      classNamePrefix="tab-select"
       value={currTab}
       onChange={e => {
         dispatch(setTab(parseInt(e.value, 10)));

src/app/containers/HeadContainer.jsx

@@ -1,18 +1,10 @@
 import React from 'react';
 import SwitchAppDropdown from '../components/SwitchApp';
-import { useStoreContext } from '../store';
-
 
 function HeadContainer() {
-  const [store] = useStoreContext();
-  const { tabs, currentTab } = store;
-  const { title } = tabs[currentTab];
   return (
     <div className="head-container">
       <SwitchAppDropdown />
-      <div>
-        {title}
-      </div>
     </div>
   );
 }

src/app/containers/MainContainer.jsx

@@ -37,10 +37,6 @@ function MainContainer() {
           setnpm(true);
           break;
         }
-        case 'activatedTab': {
-          // console.log(payload, 'activatedTab in main Container');
-          break;
-        }
         default:
       }
     });

src/app/styles/layout/_headContainer.scss

@@ -5,7 +5,39 @@
 
 .head-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   align-items: center;
-  justify-content: space-around;
-}
+  justify-content: space-between;
+}
+
+.tab-select-container {
+  font-size: 12px;
+  min-width: 90px;
+  margin: 7px;
+}
+
+.tab-select-container {
+  .tab-select__control,
+  .tab-select__menu {
+    border-style: none;
+    width: 300px;
+    background-color: $light-grey-one;
+    z-index: 2;
+    @extend %disable-highlight;
+  }
+  .tab-select__single-value {
+    color: white;
+  }
+  .tab-select__option:hover {
+    background-color: #2683ff;
+  }
+  .tab-select__option--is-selected,
+  .tab-select__option--is-focused {
+    background-color: transparent;
+  }
+
+  // removes the cursor from blinking
+  .css-w8afj7-Input {
+    color: transparent;
+  }
+}

src/extension/background.js

@@ -120,17 +120,6 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   }
 });
 
-// chrome.tabs.onActivated.addListener((info) => {
-//   console.log('this is activated', info);
-//   if (bg) {
-//     console.log('hello', bg);
-//     bg.postMessage({
-//       action: 'activatedTab',
-//       payload: info.tabId,
-//     });
-//   }
-// });
-
 // when tab is closed, remove the tabid from the tabsObj
 chrome.tabs.onRemoved.addListener(tabId => {
   delete tabsObj[tabId];