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>
         );
       })}

web/src/components/search/searchContainer.module.scss

@@ -0,0 +1,39 @@
+.searchContainer {
+  max-width: var(--size-width-lead);
+  margin: 0 auto;
+}
+
+.searchField {
+  margin-top: var(--spacing-l);
+  width: 100%;
+  max-width: 24rem;
+  font-size: var(--font-size-lead);
+  font-weight: 500;
+  color: var(--color-deepBrick);
+  position: relative;
+
+  input {
+    width: 100%;
+    padding: .8rem 3rem .8rem 1.5rem;
+  }
+}
+
+.searchIcon {
+  position: absolute;
+  right: 1.2rem;
+  bottom: .6rem;
+}
+
+.resultItem {
+  border-top: var(--border);
+  margin-top: var(--spacing-m);
+  padding-top: var(--spacing-s);
+}
+
+.suphead {
+  display: block;
+  font-size: var(--font-size-caption);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 1em;
+}