remove autoColor from UserAvatar

web/src/lib/components/album-page/share-info-modal.svelte

@@ -77,7 +77,7 @@
     <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
       <div class="flex w-full place-items-center justify-between gap-4 p-5">
         <div class="flex place-items-center gap-4">
-          <UserAvatar user={album.owner} size="md" autoColor />
+          <UserAvatar user={album.owner} size="md" />
           <p class="text-sm font-medium">{album.owner.firstName} {album.owner.lastName}</p>
         </div>
 
@@ -90,7 +90,7 @@
           class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
         >
           <div class="flex place-items-center gap-4">
-            <UserAvatar {user} size="md" autoColor />
+            <UserAvatar {user} size="md" />
             <p class="text-sm font-medium">{user.firstName} {user.lastName}</p>
           </div>
 

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -71,7 +71,7 @@
               on:click={() => handleUnselect(user)}
               class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
             >
-              <UserAvatar {user} size="sm" autoColor />
+              <UserAvatar {user} size="sm" />
               <p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
             </button>
           {/key}
@@ -94,7 +94,7 @@
                 >✓</span
               >
             {:else}
-              <UserAvatar {user} size="md" autoColor />
+              <UserAvatar {user} size="md" />
             {/if}
 
             <div class="text-left">

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -323,7 +323,7 @@
     <p class="text-sm">SHARED BY</p>
     <div class="flex gap-4 pt-4">
       <div>
-        <UserAvatar user={asset.owner} size="md" autoColor />
+        <UserAvatar user={asset.owner} size="md" />
       </div>
 
       <div class="mb-auto mt-auto">

web/src/lib/components/shared-components/user-avatar.svelte

@@ -21,7 +21,6 @@
   export let rounded = true;
   export let interactive = false;
   export let showTitle = true;
-  export let autoColor = false;
   export let showProfileImage = true;
 
   let showFallback = true;
@@ -49,15 +48,7 @@
     xxxl: 'w-28 h-28',
   };
 
-  // Get color based on the user UUID.
-  function getUserColor() {
-    const seed = parseInt(user.id.split('-')[0], 16);
-    const colors = Object.keys(colorClasses).filter((color) => color !== 'primary') as UserDtoAvatarColorEnum[];
-    const randomIndex = seed % colors.length;
-    return colors[randomIndex];
-  }
-
-  $: colorClass = colorClasses[autoColor ? getUserColor() : color];
+  $: colorClass = colorClasses[color];
   $: sizeClass = sizeClasses[size];
   $: title = `${user.firstName} ${user.lastName} (${user.email})`;
   $: interactiveClass = interactive
@@ -83,14 +74,12 @@
   {/if}
   {#if showFallback}
     <span
-      class="flex h-full w-full select-none items-center justify-center"
+      class="flex h-full w-full select-none items-center justify-center font-medium"
       class:text-xs={size === 'sm'}
       class:text-lg={size === 'lg'}
       class:text-xl={size === 'xl'}
       class:text-2xl={size === 'xxl'}
       class:text-3xl={size === 'xxxl'}
-      class:font-medium={!autoColor}
-      class:font-semibold={autoColor}
     >
       {((user.firstName[0] || '') + (user.lastName[0] || '')).toUpperCase()}
     </span>

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -56,7 +56,7 @@
               >✓</span
             >
           {:else}
-            <UserAvatar {user} size="lg" autoColor />
+            <UserAvatar {user} size="lg" />
           {/if}
 
           <div class="text-left">

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -52,7 +52,7 @@
     <div class="flex flex-row gap-4">
       {#each partners as partner (partner.id)}
         <div class="flex gap-4 rounded-lg px-5 py-4 transition-all">
-          <UserAvatar user={partner} size="md" autoColor />
+          <UserAvatar user={partner} size="md" />
           <div class="text-left">
             <p class="text-immich-fg dark:text-immich-dark-fg">
               {partner.firstName}

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

@@ -483,13 +483,13 @@
 
               <!-- owner -->
               <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
-                <UserAvatar user={album.owner} size="md" autoColor />
+                <UserAvatar user={album.owner} size="md" />
               </button>
 
               <!-- users -->
               {#each album.sharedUsers as user (user.id)}
                 <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
-                  <UserAvatar {user} size="md" autoColor />
+                  <UserAvatar {user} size="md" />
                 </button>
               {/each}
 

web/src/routes/(user)/sharing/+page.svelte

@@ -69,7 +69,7 @@
               href="/partners/{partner.id}"
               class="flex gap-4 rounded-lg px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
             >
-              <UserAvatar user={partner} size="lg" autoColor />
+              <UserAvatar user={partner} size="lg" />
               <div class="text-left">
                 <p class="text-immich-fg dark:text-immich-dark-fg">
                   {partner.firstName}