design requests

StampyAI · Mar 1, 2024 · a492a1c · a492a1c
1 parent 21f62de
commit a492a1c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/app/components/Nav/Mobile/navMobile.css b/app/components/Nav/Mobile/navMobile.css
@@ -67,6 +67,7 @@
     align-content: center;
     justify-content: flex-start;
     align-items: flex-start;
+    width: 100%;
   }
   .mobile-searchbar > svg {
     margin-top: var(--spacing-12);
@@ -78,9 +79,12 @@
   }
   .container-search-results-mobile {
     height: 50vh;
-    width: 82vw;
+    width: 100%;
     position: inherit;
     margin-top: var(--spacing-8);
     overflow: scroll;
   }
+  .mobile-searchbar > div {
+    width: 100%;
+  }
 }
diff --git a/app/components/SearchInput/Input.tsx b/app/components/SearchInput/Input.tsx
@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useState, useRef, useEffect} from 'react'
 import MagnifyingIcon from '~/components/icons-generated/Magnifying'
 import XIcon from '~/components/icons-generated/X'
 import './input.css'
@@ -19,14 +19,16 @@ interface SearchInputProps {
 }
 export const SearchInput = ({onChange, expandable, placeholderText}: SearchInputProps) => {
   const [search, setSearch] = useState('')
-
+  const inputRef = useRef<HTMLInputElement | null>(null)
   const handleSearch = (search: string) => {
     setSearch(search)
     if (onChange) {
       onChange(search)
     }
   }
-
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
   const clear = () => handleSearch('')
 
   return (
@@ -44,6 +46,7 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput
             handleSearch(e.currentTarget.value)
           }}
           value={search}
+          ref={inputRef}
         />
         {search !== '' && <XIcon className="x-icon" onClick={clear} />}
       </div>

diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx
@@ -1,6 +1,7 @@
 import {Link} from '@remix-run/react'
 import Paper from '~/components/icons-generated/Paper'
 import './dropdown.css'
+import useIsMobile from '~/hooks/isMobile'
 
 export interface SearchResultsProps {
   /**
@@ -22,6 +23,7 @@ export interface SearchResultsProps {
 }
 
 export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
+  const isMobile = useIsMobile()
   const noResults = results.length === 0
   if (noResults) {
     return (
@@ -37,7 +39,9 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
         <Link key={i} className="search-result" to={result.url}>
           <Paper />
           <div className="search-result-content">
-            <h5 className="search-result-title">{result.title}</h5>
+            <h5 className={['search-result-title', isMobile ? 'xs-bold' : ''].join(' ')}>
+              {result.title}
+            </h5>
             <div className="search-result-description">{result.description}</div>
             <div className="search-result-source">{result.source}</div>
           </div>