Feat: New Search Bar

search_interface/package.json

@@ -18,7 +18,6 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.1",
-    "@mui/lab": "^7.0.0-beta.16",
     "@mui/material": "^7.3.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -68,7 +67,8 @@
     "@svgr/cli": "^8.1.0",
     "@vitejs/plugin-react": "^5.0.1",
     "prettier": "^3.6.2",
-    "vite": "^7.1.3"
+    "vite": "^7.1.3",
+    "vite-plugin-css-injected-by-js": "^4.0.1"
   },
   "overrides": {
     "nth-check": "$nth-check"

search_interface/src/Search/InfiniteHits.jsx

@@ -34,25 +34,21 @@ function CustomHit({ hit, urlPrefix, onClick, showLibName }) {
   }, [urlPrefix, onClick, hierarchy, _highlightResult]);
 
   return (
-    <Box
-      sx={{
-        wordWrap: 'break-word',
-        '& mark': {
-          color: 'inherit',
-          bgcolor: 'inherit',
-          fontWeight: 'bolder',
-        },
-      }}
-    >
-      <Breadcrumbs separator='&rsaquo;' sx={{ wordBreak: 'break-all' }}>
+    <Box className="search-modal__hit">
+      <Breadcrumbs className="search-modal__breadcrumbs" separator='&rsaquo;'>
         {(showLibName || hierarchyLinks.length === 0) && (
           <Link underline='hover' href={urlJoin(urlPrefix, 'libs', library_key)}>
             {library_name}
           </Link>
         )}
         {hierarchyLinks}
       </Breadcrumbs>
-      <Snippet style={{ color: theme.palette.text.secondary }} hit={hit} attribute='content' />
+      <Snippet
+        classNames={{ root: 'search-modal__snippet' }}
+        style={{ color: theme.palette.text.secondary }}
+        hit={hit}
+        attribute='content'
+      />
     </Box>
   );
 }
@@ -110,10 +106,10 @@ function InfiniteHits({ urlPrefix, setnbHits, onClick, showLibName }) {
   }
 
   return (
-    <Stack spacing={2}>
+    <Stack className="search-modal__hits-stack" spacing={2}>
       {memoizedHits}
-      <Box textAlign='center'>
-        <Button disabled={isLastPage} onClick={showMore} sx={{ textTransform: 'none' }}>
+      <Box className="search-modal__show-more-wrapper" textAlign='center'>
+        <Button className="search-modal__show-more" disabled={isLastPage} onClick={showMore}>
           Show More
         </Button>
       </Box>