Search fixes

components/search/search.tsx

@@ -1,4 +1,6 @@
 import algoliasearch from 'algoliasearch/lite';
+// import { useLocale } from 'next-intl';
+import Text from '@/components/ui/text';
 import { Highlight, Hits, InstantSearch, SearchBox } from 'react-instantsearch';
 
 const searchClient = algoliasearch(
@@ -7,6 +9,7 @@ const searchClient = algoliasearch(
 );
 
 export default function Search() {
+  // const locale = useLocale();
   // Hit.
   function Hit(props: any) {
     return (
@@ -14,10 +17,13 @@ export default function Search() {
         <a href={`/product/${props.hit.handle}`} className="flex gap-4">
           <div className="relative aspect-square h-16 w-16 bg-neutral-300" />
           <div>
-            <h3 className="mt-2 flex text-lg font-bold text-gray-900">
+            <Text className="!text-sm text-low-contrast" variant="label">
+              Brand
+            </Text>
+            <h3 className="flex text-sm font-bold text-high-contrast">
               <Highlight attribute="title" hit={props.hit} />
             </h3>
-            <p className="text-gray-700">{props.hit.price} SEK</p>
+            <p className="text-sm font-bold ">{props.hit.price} SEK</p>
           </div>
         </a>
       </li>
@@ -33,16 +39,20 @@ export default function Search() {
             root: 'mt-4',
             form: 'relative',
             input:
-              'block w-full appearance-none rounded-none h-11 pl-9 pr-3 py-2 bg-white border border-ui-border',
+              'block w-full outline-offset-0 appearance-none rounded-none h-11 px-11 pr-3 py-2 bg-white border border-ui-border',
             submit: 'absolute flex items-center justify-center top-0 left-0 bottom-0 w-11 h-11',
-            submitIcon: 'w-4 h-4'
+            submitIcon: 'w-4 h-4',
+            reset: 'absolute items-center justify-center top-0 right-0 bottom-0 w-11 h-11',
+            resetIcon: 'w-3 h-3 mx-auto bg-app'
           }}
         />
 
+        {/* <Configure filters={`locale:${locale}`} /> */}
+
         <Hits
           classNames={{
-            root: 'flex flex-col mt-4',
-            list: 'grid grid-cols-1 gap-4 overflow-auto'
+            root: 'flex flex-col mt-4 overflow-auto max-h-full',
+            list: 'grid grid-cols-1 gap-12 overflow-auto'
           }}
           hitComponent={Hit}
         />