feat(mobile): Clip and change background for Asset selection (#3460)

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(
+        return Container(
-          Icons.check_circle,
+          decoration: BoxDecoration(
-          color: Theme.of(context).primaryColor,
+            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,
+                            : assetContainerColor,
-                        width: 10,
+                        width: 8,
                       )
                     : const Border(),
               ),
-              child: ImmichImage(
+              child: buildImage(asset),
-                asset,
-                width: 300,
-                height: 300,
-                useGrayBoxPlaceholder: useGrayBoxPlaceholder,
-              ),
             ),
             if (multiselectEnabled)
               Padding(