chore(web/mobile): use Heart Icon & small icon changes (#2397)

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -10,8 +10,8 @@
 	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-	import Star from 'svelte-material-icons/Star.svelte';
-	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
+	import Heart from 'svelte-material-icons/Heart.svelte';
+	import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
 	import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
 	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
 	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
@@ -100,7 +100,7 @@
 		/>
 		{#if isOwner}
 			<CircleIconButton
-				logo={asset.isFavorite ? Star : StarOutline}
+				logo={asset.isFavorite ? Heart : HeartOutline}
 				on:click={() => dispatch('favorite')}
 				title="Favorite"
 			/>

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -6,7 +6,7 @@
 	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
 	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
 	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
-	import Star from 'svelte-material-icons/Star.svelte';
+	import Heart from 'svelte-material-icons/Heart.svelte';
 	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
 	import ImageThumbnail from './image-thumbnail.svelte';
 	import VideoThumbnail from './video-thumbnail.svelte';
@@ -112,7 +112,7 @@
 				<!-- Favorite asset star -->
 				{#if asset.isFavorite && !publicSharedKey}
 					<div class="absolute bottom-2 left-2 z-10">
-						<Star size="24" class="text-white" />
+						<Heart size="24" class="text-white" />
 					</div>
 				{/if}
 

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -2,12 +2,15 @@
 	import { page } from '$app/stores';
 	import { api } from '@api';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+	import AccountMultiple from 'svelte-material-icons/AccountMultiple.svelte';
 	import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
-	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
+	import ImageMultipleOutline from 'svelte-material-icons/ImageMultipleOutline.svelte';
+	import ImageMultiple from 'svelte-material-icons/ImageMultiple.svelte';
 	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
 	import Magnify from 'svelte-material-icons/Magnify.svelte';
 	import Map from 'svelte-material-icons/Map.svelte';
-	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
+	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
+	import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
 	import { AppRoute } from '../../../constants';
 	import LoadingSpinner from '../loading-spinner.svelte';
 	import StatusBox from '../status-box.svelte';
@@ -71,6 +74,10 @@
 			};
 		}
 	};
+
+	const isFavoritesSelected = $page.route.id === '/(user)/favorites';
+	const isPhotosSelected = $page.route.id === '/(user)/photos';
+	const isSharingSelected = $page.route.id === '/(user)/sharing';
 </script>
 
 <SideBarSection>
@@ -82,8 +89,8 @@
 	>
 		<SideBarButton
 			title="Photos"
-			logo={ImageOutline}
-			isSelected={$page.route.id === '/(user)/photos'}
+			logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
+			isSelected={isPhotosSelected}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAssetCount()}
@@ -115,8 +122,8 @@
 	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
 		<SideBarButton
 			title="Sharing"
-			logo={AccountMultipleOutline}
-			isSelected={$page.route.id === '/(user)/sharing'}
+			logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
+			isSelected={isSharingSelected}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -137,8 +144,8 @@
 	<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
 		<SideBarButton
 			title="Favorites"
-			logo={StarOutline}
-			isSelected={$page.route.id == '/(user)/favorites'}
+			logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
+			isSelected={isFavoritesSelected}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getFavoriteCount()}

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

@@ -6,7 +6,7 @@
 	import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
 	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
 	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
-	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
+	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
@@ -101,7 +101,7 @@
 						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
 						draggable="false"
 					>
-						<StarOutline size={24} />
+						<HeartMultipleOutline size={24} />
 						<span>Favorites</span>
 					</a>
 					<a

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

@@ -8,7 +8,7 @@
 	import { onMount } from 'svelte';
 	import Close from 'svelte-material-icons/Close.svelte';
 	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
-	import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
+	import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
 	import Error from '../../+error.svelte';
 	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -80,7 +80,7 @@
 			/>
 			<CircleIconButton
 				title="Remove Favorite"
-				logo={StarMinusOutline}
+				logo={HeartMinusOutline}
 				on:click={handleRemoveFavorite}
 			/>
 		</svelte:fragment>