style search page and results

web/src/components/search/SearchContainer.tsx

@@ -3,6 +3,9 @@ import { useDebouncedCallback } from "use-debounce";
 import { PageHeader } from "../general/PageHeader";
 import { useSearchParams, usePathname, useRouter } from "next/navigation";
 import { getSearchPath } from "@/lib/common";
+import styles from './searchContainer.module.scss';
+import Icon from "../general/Icon";
+
 export function SearchContainer({
   query,
   results,
@@ -19,17 +22,20 @@ export function SearchContainer({
   }, 500);
 
   return (
-    <div>
+    <div className={styles.searchContainer}>
       <PageHeader heading="Søk" />
-      <input
-        name="query"
-        type="text"
-        autoFocus
-        defaultValue={query ?? ""}
-        onChange={(e) => {
-          onQueryChange(e.target.value);
-        }}
-      />
+      <div className={styles.searchField}>
+        <input
+          name="query"
+          type="text"
+          autoFocus
+          defaultValue={query ?? ""}
+          onChange={(e) => {
+            onQueryChange(e.target.value);
+          }}
+        />
+        <div className={styles.searchIcon}><Icon type="search" /></div>
+      </div>
       {query && <SearchResults results={results} />}
     </div>
   );
@@ -63,9 +69,9 @@ function SearchResults({ results }: { results: any }) {
           resultType = capitalizeFirstLetter(result?.associationType);
         }
         return (
-          <div key={result.id}>
-            <span>{resultType}</span>
-            <span>{result.title}</span>
+          <div key={result.id} className={styles.resultItem}>
+            <span className={styles.suphead}>{resultType}</span>
+            <h2 className={styles.title}>{result.title}</h2>
           </div>
         );
       })}