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

mobile/lib/modules/album/ui/album_viewer_thumbnail.dart

@@ -98,7 +98,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
         left: 10,
         bottom: 5,
         child: Icon(
-          Icons.star,
+          Icons.favorite,
           color: Colors.white,
           size: 18,
         ),

mobile/lib/modules/album/views/library_page.dart

@@ -221,7 +221,7 @@ class LibraryPage extends HookConsumerWidget {
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: [
                   buildLibraryNavButton(
-                      "library_page_favorites".tr(), Icons.star_border, () {
+                      "library_page_favorites".tr(), Icons.favorite_border, () {
                     AutoRouter.of(context).navigate(const FavoritesRoute());
                   }),
                   const SizedBox(width: 12.0),

mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart

@@ -35,7 +35,7 @@ class TopControlAppBar extends HookConsumerWidget {
           onFavorite();
         },
         icon: Icon(
-          isFavorite ? Icons.star : Icons.star_border,
+          isFavorite ? Icons.favorite : Icons.favorite_border,
           color: Colors.grey[200],
         ),
       );

mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart

@@ -135,7 +135,7 @@ class ThumbnailImage extends HookConsumerWidget {
                 left: 10,
                 bottom: 5,
                 child: Icon(
-                  Icons.star,
+                  Icons.favorite,
                   color: Colors.white,
                   size: 18,
                 ),

mobile/lib/modules/home/ui/control_bottom_app_bar.dart

@@ -44,7 +44,7 @@ class ControlBottomAppBar extends ConsumerWidget {
             },
           ),
           ControlBoxButton(
-            iconData: Icons.star_rounded,
+            iconData: Icons.favorite_border_rounded,
             label: "control_bottom_app_bar_favorite".tr(),
             onPressed: () {
               onFavorite();

mobile/lib/modules/search/views/search_page.dart

@@ -200,7 +200,7 @@ class SearchPage extends HookConsumerWidget {
                 ),
                 ListTile(
                   leading: Icon(
-                    Icons.star_outline,
+                    Icons.favorite_border,
                     color: categoryIconColor,
                   ),
                   title:

mobile/lib/shared/views/tab_controller_page.dart

@@ -40,8 +40,8 @@ class TabControllerPage extends ConsumerWidget {
               right: 4,
               bottom: 4,
             ),
-            icon: const Icon(Icons.photo_outlined),
-            selectedIcon: const Icon(Icons.photo),
+            icon: const Icon(Icons.photo_library_outlined),
+            selectedIcon: const Icon(Icons.photo_library),
             label: const Text('tab_controller_nav_photos').tr(),
           ),
           NavigationRailDestination(
@@ -81,10 +81,10 @@ class TabControllerPage extends ConsumerWidget {
           NavigationDestination(
             label: 'tab_controller_nav_photos'.tr(),
             icon: const Icon(
-              Icons.photo_outlined,
+              Icons.photo_library_outlined,
             ),
             selectedIcon: Icon(
-              Icons.photo,
+              Icons.photo_library,
               color: Theme.of(context).primaryColor,
             ),
           ),

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>