face selection

web/src/lib/components/album-page/rule-selection-form/face-selection.svelte

@@ -3,6 +3,8 @@
   import { PeopleResponseDto, PersonResponseDto, api } from '@api';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import PeopleCard from '$lib/components/faces-page/people-card.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 
   let people: PersonResponseDto[] = [];
 
@@ -15,11 +17,13 @@
 </script>
 
 <div class="">
-  <p>Select faces</p>
-  <div>
-    <button on:click={() => dispatch('close')}>CLOSE</button>
-  </div>
-  <div class="flex flex-wrap">
+  <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => dispatch('close')}>
+    <svelte:fragment slot="leading">
+      <p class="text-immich-fg dark:text-immich-dark-fg font-medium">Select a face</p>
+    </svelte:fragment>
+  </ControlAppBar>
+
+  <div class="mt-24 flex flex-wrap gap-2 px-8">
     {#each people as person}
       <PeopleCard {person} selectionMode disableContextMenu />
     {/each}

web/src/lib/components/album-page/rule-selection-form/rule-selection-form.svelte

@@ -84,7 +84,7 @@
   {#if peopleSelection}
     <section
       transition:fly={{ y: 500 }}
-      class="absolute left-0 top-0 z-[10000] h-full min-h-max w-full overflow-scroll bg-white/90"
+      class="dark:bg-immich-dark-bg absolute left-0 top-0 z-[10000] h-full min-h-max w-full overflow-scroll bg-gray-200"
     >
       <FaceSelection on:close={() => (peopleSelection = false)} />
     </section>