From 74f04336bbd1abc10f794d2802d5142b5bfb0ed3 Mon Sep 17 00:00:00 2001
From: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
Date: Sat, 29 Jul 2023 06:32:57 +0000
Subject: [PATCH] feat(mobile): Clip and change background for Asset selection
 (#3460)

---
 .../home/ui/asset_grid/thumbnail_image.dart   | 57 +++++++++++++++----
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart b/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
index 39f1cf4ac3..3ba07de3e3 100644
--- a/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
@@ -37,11 +37,21 @@ class ThumbnailImage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
+    final assetContainerColor =
+        isDarkTheme ? Colors.blueGrey : Theme.of(context).primaryColorLight;
+
     Widget buildSelectionIcon(Asset asset) {
       if (isSelected) {
-        return Icon(
-          Icons.check_circle,
-          color: Theme.of(context).primaryColor,
+        return Container(
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: assetContainerColor,
+          ),
+          child: Icon(
+            Icons.check_circle_rounded,
+            color: Theme.of(context).primaryColor,
+          ),
         );
       } else {
         return const Icon(
@@ -51,6 +61,36 @@ class ThumbnailImage extends HookConsumerWidget {
       }
     }
 
+    Widget buildImage(Asset asset) {
+      var image = ImmichImage(
+        asset,
+        width: 300,
+        height: 300,
+        useGrayBoxPlaceholder: useGrayBoxPlaceholder,
+      );
+      if (!multiselectEnabled || !isSelected) {
+        return image;
+      }
+      return Container(
+        decoration: BoxDecoration(
+          border: Border.all(
+            width: 0,
+            color: assetContainerColor,
+          ),
+          color: assetContainerColor,
+        ),
+        child: ClipRRect(
+          borderRadius: const BorderRadius.only(
+            topRight: Radius.circular(15.0),
+            bottomRight: Radius.circular(15.0),
+            bottomLeft: Radius.circular(15.0),
+            topLeft: Radius.zero,
+          ),
+          child: image,
+        ),
+      );
+    }
+
     return GestureDetector(
       onTap: () {
         if (multiselectEnabled) {
@@ -84,17 +124,12 @@ class ThumbnailImage extends HookConsumerWidget {
                     ? Border.all(
                         color: onDeselect == null
                             ? Colors.grey
-                            : Theme.of(context).primaryColorLight,
-                        width: 10,
+                            : assetContainerColor,
+                        width: 8,
                       )
                     : const Border(),
               ),
-              child: ImmichImage(
-                asset,
-                width: 300,
-                height: 300,
-                useGrayBoxPlaceholder: useGrayBoxPlaceholder,
-              ),
+              child: buildImage(asset),
             ),
             if (multiselectEnabled)
               Padding(