UI - update tabs view

ui/components/SubRouterTabs.tsx

@@ -8,7 +8,6 @@ import { formatURL } from "../lib/nav";
 import Flex from "./Flex";
 import Link from "./Link";
 import MuiTab from "./MuiTab";
-import Spacer from "./Spacer";
 
 type Props = {
   className?: string;
@@ -73,7 +72,7 @@ function SubRouterTabs({ className, children, rootPath, clearQuery }: Props) {
   }));
 
   return (
-    <Flex wide tall column start className={className}>
+    <Flex wide tall column start className={className} gap="12">
       <Tabs
         indicatorColor="primary"
         value={routesToIndex(routes, window.location.pathname)}
@@ -91,7 +90,6 @@ function SubRouterTabs({ className, children, rootPath, clearQuery }: Props) {
           );
         })}
       </Tabs>
-      <Spacer padding="xs" />
       <Switch>
         {children}
         <Redirect from="*" to={formatURL(rootPath, clearQuery ? "" : query)} />
@@ -100,4 +98,26 @@ function SubRouterTabs({ className, children, rootPath, clearQuery }: Props) {
   );
 }
 
-export default styled(SubRouterTabs).attrs({ className: SubRouterTabs.name })``;
+export default styled(SubRouterTabs).attrs({ className: SubRouterTabs.name })`
+  //MuiTabs
+  .horizontal-tabs {
+    min-height: ${(props) => props.theme.spacing.large};
+    width: 100%;
+    .MuiTabs-flexContainer {
+      border-bottom: 3px solid ${(props) => props.theme.colors.neutral20};
+      .MuiTab-root {
+        line-height: 1;
+        letter-spacing: 1px;
+        min-height: 32px;
+        width: fit-content;
+        @media (min-width: 600px) {
+          min-width: 132px;
+        }
+      }
+    }
+    .MuiTabs-indicator {
+      height: 0;
+      border-block-end: 3px solid ${(props) => props.theme.colors.primary};
+    }
+  }
+`;

ui/lib/theme.ts

@@ -201,30 +201,6 @@ export const GlobalStyle = createGlobalStyle`
   ::-webkit-scrollbar-thumb:hover {
     background-color: ${(props) => props.theme.colors.neutral30};
   }
-  //MuiTabs
-  .horizontal-tabs {
-    .MuiTab-root {
-      line-height: 1;
-      letter-spacing: 1px;
-      height: 32px;
-      min-height: 32px;
-      width: fit-content;
-      @media (min-width: 600px) {
-        min-width: 132px;
-      }
-    }
-    .MuiTabs-root {
-      min-height: 32px;
-      margin: ${(props) => props.theme.spacing.xs} 0;
-    }
-    .MuiTabs-fixed {
-      height: 32px;
-    }
-    .MuiTabs-indicator {
-      height: 3px;
-      background-color: ${(props) => props.theme.colors.primary};
-    }
-  }
 //prevents white autofill background in dark mode
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
@@ -233,7 +209,6 @@ input:-webkit-autofill:focus {
       props.theme.mode === ThemeTypes.Dark &&
       `background-color: ${props.theme.colors.blueWithOpacity};`}
   }
-
 `;
 
 export const muiTheme = (colors, mode) =>