event listener

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

@@ -6,7 +6,7 @@
   import Button from '../elements/buttons/button.svelte';
 
   export let album: AlbumResponseDto;
-  const dispatch = createEventDispatcher<{ close: void }>();
+  const dispatch = createEventDispatcher<{ close: void; 'select-people': void; 'select-location': void }>();
 </script>
 
 <BaseModal
@@ -16,17 +16,18 @@
 >
   <svelte:fragment slot="title">
     <div class="flex place-items-center gap-2">
-      <p class="text-immich-fg dark:text-immich-dark-fg font-medium">Automatically add photos</p>
+      <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Automatically add photos</p>
     </div>
   </svelte:fragment>
 
   <section class="mb-5 px-5">
     <!--  People Selection -->
     <div id="people-selection">
-      <p class="text-sm">PEOPLE</p>
+      <p class="text-sm font-medium">PEOPLE</p>
       <div class="mt-4">
         <button
           class="immich-text-primary border-1 flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 hover:bg-gray-500/20 dark:border-gray-500"
+          on:click={() => dispatch('select-people')}
         >
           <Plus size="24" />
         </button>
@@ -35,10 +36,11 @@
 
     <!-- Location Selection -->
     <div id="location-selection" class="mt-5">
-      <p class="text-sm">LOCATION</p>
+      <p class="text-sm font-medium">LOCATION</p>
       <div class="mt-4">
         <button
           class="immich-text-primary border-1 flex w-full place-content-center place-items-center rounded-2xl border border-gray-300 py-2 hover:bg-gray-500/20 dark:border-gray-500"
+          on:click={() => dispatch('select-location')}
         >
           <Plus size="24" />
         </button>
@@ -47,7 +49,7 @@
 
     <!-- Date Selection -->
     <div id="date-selection" class="mt-5">
-      <p class="text-sm">START DATE</p>
+      <p class="text-sm font-medium">START DATE</p>
       <div class="mt-2">
         <div class="text-xs">
           <p>Only include photos after the set date.</p>
@@ -55,9 +57,17 @@
         </div>
 
         <div class="mt-4">
-          <Button size="sm">Select</Button>
+          <Button size="sm" }>Select</Button>
         </div>
       </div>
     </div>
+
+    <!-- Buttons rows -->
+    <div>
+      <div class="mt-5 flex justify-end gap-2">
+        <Button size="sm" color="secondary" on:click={() => dispatch('close')}>Cancel</Button>
+        <Button size="sm" variant="primary">Confirm</Button>
+      </div>
+    </div>
   </section>
 </BaseModal>

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -479,13 +479,13 @@
       {#if album.assetCount === 0}
         <section id="empty-album" class=" mt-[200px] flex flex-col place-content-center place-items-center">
           <div class="w-[340px]">
-            <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
+            <p class="text-sm dark:text-immich-dark-fg">ADD PHOTOS</p>
 
             <button
               on:click={() => (viewMode = ViewMode.RULE_SELECTION)}
               class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
             >
-              <span class="text-text-immich-primary dark:text-immich-dark-primary"><FaceMan size="34" /> </span>
+              <span class="immich-text-primary"><FaceMan size="34" /> </span>
               <div class="text-left">
                 <div class="text-lg">Select people & rules</div>
                 <div class="text-sm">Create an auto-updating album</div>
@@ -496,7 +496,7 @@
               on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
               class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
             >
-              <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="34" /> </span>
+              <span class="immich-text-primary"><Plus size="34" /> </span>
               <span class="text-lg">Select photos</span>
             </button>
           </div>