make the search page looks like the index page

client/src/lib/components/SearchForm/SearchForm.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
 
-  export let size: "default" | "lg" = "default";
   export let value = "";
-  export let placeholder = "Rechercher";
 
   const dispatch = createEventDispatcher<{ submit: string }>();
 
   const onSubmit = () => dispatch("submit", value);
 </script>
 
 <form
-  class="fr-search-bar {size === 'lg' ? 'fr-search-bar--lg' : ''}"
+  class="fr-search-bar fr-search-bar--lg"
   role="search"
   on:submit|preventDefault={onSubmit}
 >
   <label for="q" class="fr-label">Rechercher</label>
-  <input type="search" class="fr-input" name="q" bind:value {placeholder} />
+  <input
+    type="search"
+    class="fr-input"
+    name="q"
+    bind:value
+    placeholder="Ex : taux de contamination COVID, nombre de naissances en France, ..."
+  />
   <button type="submit" class="fr-btn"> Rechercher </button>
 </form>

client/src/routes/fiches/search.svelte

@@ -27,9 +27,9 @@
   import type { Dataset } from "src/definitions/datasets";
   import DatasetList from "$lib/components/DatasetList/DatasetList.svelte";
   import SearchForm from "$lib/components/SearchForm/SearchForm.svelte";
-  import { pluralize } from "$lib/util/format";
   import { toQueryString } from "$lib/util/urls";
   import { Maybe } from "$lib/util/maybe";
+  import { pluralize } from "src/lib/util/format";
 
   export let q: string;
   export let datasets: Maybe<Dataset[]>;
@@ -45,22 +45,21 @@
 <svelte:head>
   <title>Rechercher un jeu de données</title>
 </svelte:head>
-
-{#if Maybe.Some(datasets)}
-  <section class="fr-container fr-mt-9w">
-    <div class="fr-col-6">
-      <h2>Rechercher un jeu de données</h2>
-
+<section class="fr-background-alt--grey fr-mb-6w">
+  <div class="fr-container fr-grid-row fr-grid-row--center fr-py-6w">
+    <div class="fr-col-10">
+      <h1>Recherchez un jeu de données</h1>
       <SearchForm value={q} on:submit={updateSearch} />
     </div>
+  </div>
+</section>
 
-    {#if datasets.length > 0}
-      <h4 class="fr-mt-6w">
-        {datasets.length}
-        {pluralize(datasets.length, "résultat", "résultats")}
-      </h4>
-    {/if}
-
+<section class="fr-container fr-mt-8w fr-mb-15w">
+  {#if Maybe.Some(datasets)}
+    <h2 class="fr-mb-3w">
+      {datasets.length}
+      {pluralize(datasets.length, "résultat", "résultats")}
+    </h2>
     <DatasetList {datasets} />
-  </section>
-{/if}
+  {/if}
+</section>

client/src/routes/index.svelte

@@ -42,11 +42,7 @@
   <div class="fr-container fr-grid-row fr-grid-row--center fr-py-6w">
     <div class="fr-col-10">
       <h1>Recherchez un jeu de données</h1>
-      <SearchForm
-        size="lg"
-        placeholder="Ex : taux de contamination COVID, nombre de naissances en France, ..."
-        on:submit={submitSearch}
-      />
+      <SearchForm on:submit={submitSearch} />
     </div>
   </div>
 </section>