Merge pull request #58 from konan-5/release/0.1

Implement autofocus in global search
qubic · Apr 4, 2024 · 4f94fae · 4f94fae
2 parents 4da8190 + 0b85e6e
commit 4f94fae
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/app/components/SearchBar/SearchBar.js b/src/app/components/SearchBar/SearchBar.js
@@ -63,7 +63,7 @@ function SearchBar() {
             </div>
           )}
           <motion.div
-            className="border-b-[1px] border-gray-70 flex justify-center items-center"
+            className="border-b-[1px] relative mx-auto max-w-[1440px] border-gray-70 flex justify-center items-center"
             variants={{
               hidden: {
                 y: -20,
@@ -76,23 +76,24 @@ function SearchBar() {
             animate="show"
           >
             <Input
-              className="max-w-[820px] mx-auto w-full p-12"
+              className="max-w-[820px] mx-auto w-full py-12 px-20"
               placeholder="Search TX, blocks, IDs..."
               value={keyword}
               disableUnderline
+              autoFocus
               startAdornment={
                 <img className="w-16 h-16 mr-10" src="assets/icons/magnify.svg" alt="search" />
               }
               onChange={(e) => {
                 setKeyword(e.target.value);
               }}
             />
-            <IconButton className="absolute right-24" onClick={handleClose}>
+            <IconButton className="absolute right-12 sm:right-24" onClick={handleClose}>
               <img className="w-24 h-24" src="assets/icons/xmark.svg" alt="xmark" />
             </IconButton>
           </motion.div>
           {sortedByType && (
-            <div className="max-h-[320px] overflow-auto max-w-[700px] mx-auto">
+            <div className="max-h-[320px] overflow-auto max-w-[800px] mx-auto">
               {sortedByType?.[0]?.length > 0 && (
                 <ResultItem
                   icon={

diff --git a/src/app/main/apps/network/NetworkHeader.js b/src/app/main/apps/network/NetworkHeader.js
@@ -4,17 +4,17 @@ import SearchBar from 'src/app/components/SearchBar/SearchBar';
 
 function NetworkHeader() {
   return (
-    <div className="p-20 flex mx-4 gap-6 justify-center items-center">
+    <div className="p-20 relative flex max-w-[1440px] mx-auto gap-6 justify-center items-center">
       <Link to="/network">
         <img src="assets/images/logo/logo-text-on-dark.svg" alt="logo" />
       </Link>
-      <div className="absolute right-24">
+      <div className="absolute right-12 sm:right-24">
         <div className="hidden sm:inline">
           <SearchBar />
         </div>
         <LanguagePicker />
       </div>
-      <div className="absolute left-24 sm:hidden">
+      <div className="absolute left-12 sm:left-24 sm:hidden">
         <SearchBar />
       </div>
     </div>