Use proper text/drop shadow on tree-dots icon and face name (#3800)

web/src/app.css

@@ -56,6 +56,14 @@ input:focus-visible {
   outline: none !important;
 }
 
+.text-white-shadow {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.icon-white-drop-shadow {
+  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));
+}
+
 @layer utilities {
   .immich-form-input {
     @apply rounded-xl bg-slate-200 p-4 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800;

web/src/lib/components/album-page/album-card.svelte

@@ -74,7 +74,7 @@
       data-testid="context-button-parent"
     >
       <IconButton color="overlay-primary">
-        <DotsVertical size="20" />
+        <DotsVertical size="20" class="icon-white-drop-shadow" color="white" />
       </IconButton>
     </div>
   {/if}

web/src/lib/components/faces-page/people-card.svelte

@@ -25,7 +25,9 @@
       <ImageThumbnail shadow url={api.getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" />
     </div>
     {#if person.name}
-      <span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
+      <span
+        class="text-white-shadow absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white"
+      >
         {person.name}
       </span>
     {/if}
@@ -40,7 +42,7 @@
     id={`icon-${person.id}`}
   >
     <IconButton color="transparent-primary">
-      <DotsVertical size="20" />
+      <DotsVertical size="20" class="icon-white-drop-shadow" color="white" />
     </IconButton>
 
     {#if showContextMenu}