feat: improve search styles

decentraland · Oct 12, 2023 · 04e6e26 · 04e6e26
1 parent 78341dd
commit 04e6e26
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css
@@ -27,6 +27,10 @@
 }
 
 @media (max-width: 767px) {
+  .Navigation .dcl.tabs {
+    padding-right: 32px;
+  }
+
   .Navigation .dcl.tabs-left {
     width: 100%;
     overflow: scroll;
@@ -39,7 +43,7 @@
     white-space: nowrap;
   }
 
-  .dcl.tabs .ui.container {
+  .Navigation .dcl.tabs .ui.container {
     display: flex;
   }
 

diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css
@@ -8,27 +8,35 @@
   justify-content: center;
   background: var(--white-900);
   width: 40px;
-  height: 34px;
+  height: 35px;
   gap: 8px;
   font-size: 16px;
-  /* transition: all 0.5s ease-in-out; */
 }
 
 .SearchInputMobile--open {
   width: 100%;
-  padding: 0 16px;
+  height: 34px;
+  padding-left: 16px;
+  padding-right: 10px;
   top: 0;
 }
 
-/* background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 103.13%); */
+.SearchInputMobile__Gradient {
+  width: 16px;
+  height: 34.5px;
+  position: absolute;
+  left: -16px;
+  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 103.13%);
+  flex-shrink: 0;
+}
 
 .SearchInputMobile__Input {
   width: 16px;
   padding: 8px 13px;
   border: 0;
   background: var(--white-900) no-repeat 8px center;
   background-image: url('../../images/icons/new-magnify.svg');
-  outline-width: 0;
+  outline: none;
 }
 
 .SearchInputMobile__Input--open {
@@ -45,6 +53,8 @@
 }
 
 .SearchInputMobile__Container {
+  display: flex;
+  flex-direction: row;
   position: relative;
   width: 100%;
 }
diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx
@@ -33,10 +33,8 @@ export default function SearchInputMobile() {
   const [searchText, setSearchText] = useState(() => search || '')
 
   const focusSearch = () => {
-    setTimeout(() => {
-      searchInput.current?.focus()
-      searchInput.current?.click()
-    }, 500)
+    searchInput.current?.focus()
+    searchInput.current?.click()
   }
 
   useEffect(() => {
@@ -48,7 +46,7 @@ export default function SearchInputMobile() {
     }
   }, [search])
 
-  const handleChange = (e: React.ChangeEvent<any>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(e.target.value)
   }
 
@@ -73,16 +71,10 @@ export default function SearchInputMobile() {
     }
   }
 
-  const handleOpen = () => {
-    if (!open) {
-      setOpen(true)
-      focusSearch()
-    }
-  }
-
   return (
     <div className={classNames('SearchInputMobile', open && 'SearchInputMobile--open')}>
       <div className="SearchInputMobile__Container">
+        <div className="SearchInputMobile__Gradient" />
         <input
           className={classNames('SearchInputMobile__Input', open && 'SearchInputMobile__Input--open')}
           value={searchText}
@@ -98,6 +90,7 @@ export default function SearchInputMobile() {
           <Cross className="SearchInputMobile__CloseIcon" size="14" color="var(--black-800)" onClick={handleClear} />
         )}
       </div>
+      <div className={classNames('SearchInputMobile__Overlay', open && 'SearchInputMobile__Overlay--open')} />
     </div>
   )
 }