clean import, and add horizontal line below tabs

jay-hodgson · Jan 10, 2025 · 3c075a6 · 3c075a6
1 parent 7204435
commit 3c075a6
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 68 deletions.
diff --git a/apps/portals/cancercomplexity/src/config/routesConfig.tsx b/apps/portals/cancercomplexity/src/config/routesConfig.tsx
@@ -22,7 +22,7 @@ import {
   onIndividualThemeBarPlotPointClick,
   onPointClick,
 } from './synapseConfigs/onPointClick'
-import { CCKPSearchPage, searchPageChildRoutes } from 'src/pages/CCKPSearchPage'
+import { searchPageChildRoutes } from 'src/pages/CCKPSearchPage'
 
 const routes: RouteObject[] = [
   {

diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx
@@ -18,72 +18,85 @@ export function PortalSearchTabs(props: PortalSearchTabUIProps) {
   const isMobileView = useMediaQuery(theme.breakpoints.down('sm'))
   const navigate = useNavigate()
   return (
-    <Tabs
-      value={location.pathname}
-      variant="scrollable"
-      orientation={isMobileView ? 'vertical' : 'horizontal'}
-      scrollButtons="auto"
-      ScrollButtonComponent={CustomScrollButton}
-      aria-label="Search Object Types"
-      sx={{
-        '.MuiTabs-flexContainer': {
-          gap: { xs: 2, sm: 5 },
-          alignItems: 'center',
-        },
-      }}
-      TabIndicatorProps={{
-        style: { background: 'transparent' },
-      }}
-    >
-      {tabConfig.map(({ path, title, count }) => {
-        const targetPathname = `/Search/${path}`
-        return (
-          <Tab
-            key={path}
-            value={encodeURI(targetPathname)}
-            label={
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                {title}{' '}
-                {count !== undefined && (
-                  <Chip
-                    label={count}
-                    size="small"
-                    sx={{
-                      backgroundColor: 'grey.100',
-                      color: 'grey.900',
-                      height: '21px',
-                    }}
-                  />
-                )}
-              </Box>
-            }
-            onClick={() =>
-              navigate({
-                pathname: targetPathname,
-                search: location.search,
-              })
-            }
-            sx={{
-              transition: 'all 400ms',
-              fontSize: '16px',
-              fontWeight: 700,
-              color: 'grey.700',
-              minWidth: { xs: '100%', sm: 'unset' },
-              py: 1,
-              px: 0,
-              borderBottom: '4px solid',
-              borderBottomColor: 'transparent',
-              '&.Mui-selected': {
-                color: 'secondary.main',
-                borderBottomColor: 'secondary.main',
-              },
-              '&:hover:not(.Mui-selected)': {
-                color: 'grey.800',
-              },
-            }}
-          />
-        )
-      })}
-    </Tabs>
+    <>
+      <Tabs
+        value={location.pathname}
+        variant="scrollable"
+        orientation={isMobileView ? 'vertical' : 'horizontal'}
+        scrollButtons="auto"
+        ScrollButtonComponent={CustomScrollButton}
+        aria-label="Search Object Types"
+        sx={{
+          '.MuiTabs-flexContainer': {
+            gap: { xs: 2, sm: 5 },
+            alignItems: 'center',
+          },
+        }}
+        TabIndicatorProps={{
+          style: {
+            background: 'transparent',
+            marginTop: '4px',
+            position: 'relative',
+          },
+        }}
+      >
+        {tabConfig.map(({ path, title, count }) => {
+          const targetPathname = `/Search/${path}`
+          return (
+            <Tab
+              key={path}
+              value={encodeURI(targetPathname)}
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  {title}{' '}
+                  {count !== undefined && (
+                    <Chip
+                      label={count}
+                      size="small"
+                      sx={{
+                        backgroundColor: 'grey.100',
+                        color: 'grey.900',
+                        height: '21px',
+                      }}
+                    />
+                  )}
+                </Box>
+              }
+              onClick={() =>
+                navigate({
+                  pathname: targetPathname,
+                  search: location.search,
+                })
+              }
+              sx={{
+                transition: 'all 400ms',
+                fontSize: '16px',
+                fontWeight: 700,
+                color: 'grey.700',
+                minWidth: { xs: '100%', sm: 'unset' },
+                py: 1,
+                px: 0,
+                borderBottom: '4px solid',
+                borderBottomColor: 'transparent',
+                '&.Mui-selected': {
+                  color: 'secondary.main',
+                  borderBottomColor: 'secondary.main',
+                },
+                '&:hover:not(.Mui-selected)': {
+                  color: 'grey.800',
+                },
+              }}
+            />
+          )
+        })}
+      </Tabs>
+      <Box
+        sx={{
+          borderTop: '4px solid',
+          borderColor: 'grey.400',
+          mt: '-4px',
+        }}
+      />
+    </>
   )
 }