tab dropdown styling

Author: mylee1995

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/MainContainer.jsx

@@ -50,6 +50,7 @@ function MainContainer() {
   });
 
   if (!npmExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
+  console.log('tabs', tabs)
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 
   // if viewIndex is -1, then use the sliderIndex instead

src/app/styles/layout/_headContainer.scss

@@ -6,5 +6,39 @@
 .head-container {
   display: flex;
   flex-direction: row-reverse;
-  justify-content: space-around;
-}
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+}
+
+.tab-select-container {
+  font-size: 12px;
+  min-width: 90px;
+  margin: 10px;
+}
+
+.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;
+  }
+}