changed margin to 0 on tab dropdown menu, brought back fiery rose empty button background

Co-authored-by: Nkmai <[email protected]>
Co-authored-by: lind-tania <[email protected]>
Co-authored-by: rtviner <[email protected]>
Co-authored-by: caitlinchan23 <[email protected]>

Author: 4 people

src/app/components/SwitchApp.tsx

@@ -18,11 +18,21 @@ const SwitchAppDropdown = () => {
     label: tabs[currentTab].title,
   };
 
+  const customStyles = {
+    menu: (provided, state) => {
+      const outline = state.isSelected ? 'transparent' : 'transparent';
+      const margin = 0;
+
+      return {...provided, outline, margin};
+    }
+  }
+
   return (
     <Select
       className="tab-select-container"
       classNamePrefix="tab-select"
       value={currTab}
+      styles={customStyles}
       onChange={e => {
         dispatch(setTab(parseInt(e.value, 10)));
       }}

src/app/styles/components/_buttons.scss

@@ -14,11 +14,10 @@
 	font: 300 14px 'Roboto', sans-serif;
 	font-size: $button-text-size;
 	width: 120px;
-	background-color: transparent;
+	background: linear-gradient(145deg, #ff6569, #e65558);
 }
 .empty-button:hover {
 	color: black;
-	background: linear-gradient(145deg, #ff6569, #e65558);
 	box-shadow: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
 }