fix: now search dialog is always on top of other elements (#4047)

open-sauced · Aug 27, 2024 · 3b4101a · 3b4101a
1 parent dcc25bd
commit 3b4101a
Showing 1 changed file with 49 additions and 48 deletions.
diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
@@ -15,6 +15,7 @@ import useDebounceTerm from "lib/hooks/useDebounceTerm";
 import useIsMacOS from "lib/hooks/useIsMacOS";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import { useSearchRepos } from "lib/hooks/useSearchRepos";
+import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";
 
 const SearchDialog = () => {
   useLockBody();
@@ -26,6 +27,7 @@ const SearchDialog = () => {
   const [isSearching, setIsSearching] = useState(false);
   const [isSearchError, setIsSearchError] = useState(false);
   const setOpenSearch = store((state) => state.setOpenSearch);
+  const openSearch = store((state) => state.openSearch);
   const debouncedSearchTerm = useDebounceTerm(searchTerm, 300);
   const {
     data: repoData,
@@ -136,50 +138,56 @@ const SearchDialog = () => {
   };
 
   return (
-    <div className="fixed left-0 top-0 z-auto p-5 w-full h-full flex justify-center bg-white/30">
-      <div className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm" onClick={() => setOpenSearch(false)} />
-      <div
-        className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
-        onMouseMove={() => cursor !== -1 && setCursor(-1)}
+    <Dialog open={openSearch} onOpenChange={setOpenSearch}>
+      <DialogContent
+        className="fixed top-2 lg:top-4 flex justify-center !pb-0 lg:!p-0 bg-transparent !w-full"
+        onPointerDownOutside={() => {
+          setOpenSearch(false);
+        }}
       >
-        <div className="flex w-full h-full items-center border-b p-2 pl-3">
-          {isSearching ? (
-            <div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
-          ) : (
-            <FaSearch className="text-light-slate-9" fontSize={16} />
-          )}
-          <input
-            autoFocus
-            className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              isSearchError && setIsSearchError(false);
-            }}
-            onKeyDown={handleKeyboardCtrl}
-          />
-          <Text keyboard className="text-gray-600 !border-b !px-1">
-            {isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
-          </Text>
-        </div>
-        <div className="w-full h-full flex flex-col items-center">
-          {searchTerm.length < 3 ? (
-            <SearchInfo />
-          ) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
-            <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
-              <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
-              We couldn&apos;t find any users or repositories with that name
+        <div
+          className="mx-1 md:mx-2 flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
+          onMouseMove={() => cursor !== -1 && setCursor(-1)}
+        >
+          <div className="flex w-full h-full items-center border-b p-2 pl-3">
+            {isSearching ? (
+              <div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
+            ) : (
+              <FaSearch className="text-light-slate-9" fontSize={16} />
+            )}
+            <input
+              autoFocus
+              className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                isSearchError && setIsSearchError(false);
+              }}
+              onKeyDown={handleKeyboardCtrl}
+            />
+            <Text keyboard className="text-gray-600 !border-b !px-1">
+              {isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
             </Text>
-          ) : (
-            <>
-              <section className="flex flex-col w-full">{renderUserSearchState()}</section>
-              <hr />
-              <section className="flex flex-col w-full">{renderRepoSearchState()}</section>
-            </>
-          )}
+          </div>
+          <div className="w-full h-full flex flex-col items-center">
+            {searchTerm.length < 3 ? (
+              <SearchInfo />
+            ) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
+              <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
+                <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
+                We couldn&apos;t find any users or repositories with that name
+              </Text>
+            ) : (
+              <>
+                <section className="flex flex-col w-full">{renderUserSearchState()}</section>
+                <hr />
+                <section className="flex flex-col w-full">{renderRepoSearchState()}</section>
+              </>
+            )}
+          </div>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 };
 
@@ -237,13 +245,6 @@ const SearchLoading = () => (
   </div>
 );
 
-const SearchError = () => (
-  <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
-    <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
-    We couldn&apos;t find any users or repositories with that name
-  </Text>
-);
-
 const SearchResult = ({ result, cursor }: { result: GhUser[]; cursor: number }) => (
   <div className="w-full py-1 overflow-hidden text-gray-600">
     <Text className="block w-full py-1 px-4">Users</Text>