chore: styling for asset_viewer bottom sheet (#20006)

bottom sheet styling

mobile/lib/presentation/pages/drift_recently_taken.page.dart

@@ -1,9 +1,11 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 
 @RoutePage()
 class DriftRecentlyTakenPage extends StatelessWidget {
@@ -29,7 +31,9 @@ class DriftRecentlyTakenPage extends StatelessWidget {
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: MesmerizingSliverAppBar(title: 'recently_taken'.t()),
+      ),
     );
   }
 }

mobile/lib/presentation/pages/drift_video.page.dart

@@ -1,9 +1,11 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 
 @RoutePage()
 class DriftVideoPage extends StatelessWidget {
@@ -27,7 +29,9 @@ class DriftVideoPage extends StatelessWidget {
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: MesmerizingSliverAppBar(title: 'videos'.t()),
+      ),
     );
   }
 }

mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart

@@ -3,9 +3,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -39,7 +37,6 @@ class ViewerBottomBar extends ConsumerWidget {
 
     final actions = <Widget>[
       const ShareActionButton(source: ActionSource.viewer),
-      const _EditActionButton(),
       if (asset.hasRemote && isOwner)
         const ArchiveActionButton(source: ActionSource.viewer),
     ];
@@ -86,15 +83,3 @@ class ViewerBottomBar extends ConsumerWidget {
     );
   }
 }
-
-class _EditActionButton extends ConsumerWidget {
-  const _EditActionButton();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return BaseActionButton(
-      iconData: Icons.tune_outlined,
-      label: 'edit'.t(context: context),
-    );
-  }
-}

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart

@@ -73,6 +73,7 @@ class AssetDetailBottomSheet extends ConsumerWidget {
       expand: false,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
+      backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
     );
   }
 }
@@ -84,14 +85,18 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
     final dateTime = asset.createdAt.toLocal();
     final date = DateFormat.yMMMEd(ctx.locale.toLanguageTag()).format(dateTime);
     final time = DateFormat.jm(ctx.locale.toLanguageTag()).format(dateTime);
-    return '$date$_kSeparator$time';
+    final timezone = dateTime.timeZoneOffset.isNegative
+        ? 'UTC-${dateTime.timeZoneOffset.inHours.abs().toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}'
+        : 'UTC+${dateTime.timeZoneOffset.inHours.toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}';
+    return '$date$_kSeparator$time $timezone';
   }
 
   String _getFileInfo(BaseAsset asset, ExifInfo? exifInfo) {
     final height = asset.height ?? exifInfo?.height;
     final width = asset.width ?? exifInfo?.width;
-    final resolution =
+    final resolution = (width != null && height != null)
-        (width != null && height != null) ? "$width x $height" : null;
+        ? "${width.toInt()} x ${height.toInt()}"
+        : null;
     final fileSize =
         exifInfo?.fileSize != null ? formatBytes(exifInfo!.fileSize!) : null;
 
@@ -150,46 +155,46 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // Asset Date and Time
         _SheetTile(
           title: _getDateTime(context, asset),
-          titleStyle: context.textTheme.bodyLarge?.copyWith(
+          titleStyle: context.textTheme.bodyMedium?.copyWith(
-            fontWeight: FontWeight.w500,
+            fontWeight: FontWeight.w600,
-            fontSize: 16,
           ),
         ),
         const SheetLocationDetails(),
         // Details header
         _SheetTile(
           title: 'exif_bottom_sheet_details'.t(context: context),
-          titleStyle: context.textTheme.labelLarge,
+          titleStyle: context.textTheme.labelMedium?.copyWith(
+            color: context.textTheme.labelMedium?.color?.withAlpha(200),
+            fontWeight: FontWeight.w600,
+          ),
         ),
         // File info
         _SheetTile(
           title: asset.name,
-          titleStyle: context.textTheme.labelLarge
+          titleStyle: context.textTheme.labelLarge,
-              ?.copyWith(fontWeight: FontWeight.w600),
           leading: Icon(
             asset.isImage ? Icons.image_outlined : Icons.videocam_outlined,
-            size: 30,
+            size: 24,
             color: context.textTheme.labelLarge?.color,
           ),
           subtitle: _getFileInfo(asset, exifInfo),
-          subtitleStyle: context.textTheme.labelLarge?.copyWith(
+          subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-            color: context.textTheme.labelLarge?.color?.withAlpha(200),
+            color: context.textTheme.bodyMedium?.color?.withAlpha(155),
           ),
         ),
         // Camera info
         if (cameraTitle != null)
           _SheetTile(
             title: cameraTitle,
-            titleStyle: context.textTheme.labelLarge
+            titleStyle: context.textTheme.labelLarge,
-                ?.copyWith(fontWeight: FontWeight.w600),
             leading: Icon(
               Icons.camera_outlined,
-              size: 30,
+              size: 24,
               color: context.textTheme.labelLarge?.color,
             ),
             subtitle: _getCameraInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.labelLarge?.copyWith(
+            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.labelLarge?.color?.withAlpha(200),
+              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
             ),
           ),
       ],

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/location_details.widget.dart

@@ -95,7 +95,10 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
             padding: const EdgeInsets.only(bottom: 16),
             child: Text(
               "exif_bottom_sheet_location".t(context: context),
-              style: context.textTheme.labelLarge,
+              style: context.textTheme.labelMedium?.copyWith(
+                color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                fontWeight: FontWeight.w600,
+              ),
             ),
           ),
           ExifMap(
@@ -109,15 +112,13 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
               padding: const EdgeInsets.only(bottom: 4.0),
               child: Text(
                 locationName,
-                style: context.textTheme.bodyLarge?.copyWith(
+                style: context.textTheme.labelLarge,
-                  fontWeight: FontWeight.w500,
-                ),
               ),
             ),
           Text(
             coordinates,
-            style: context.textTheme.labelLarge?.copyWith(
+            style: context.textTheme.labelMedium?.copyWith(
-              color: context.textTheme.labelLarge?.color?.withAlpha(150),
+              color: context.textTheme.labelMedium?.color?.withAlpha(150),
             ),
           ),
         ],

mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart

@@ -14,6 +14,7 @@ class BaseBottomSheet extends ConsumerStatefulWidget {
   final bool expand;
   final bool shouldCloseOnMinExtent;
   final bool resizeOnScroll;
+  final Color? backgroundColor;
 
   const BaseBottomSheet({
     super.key,
@@ -26,6 +27,7 @@ class BaseBottomSheet extends ConsumerStatefulWidget {
     this.expand = true,
     this.shouldCloseOnMinExtent = true,
     this.resizeOnScroll = true,
+    this.backgroundColor,
   });
 
   @override
@@ -69,8 +71,8 @@ class _BaseDraggableScrollableSheetState
       shouldCloseOnMinExtent: widget.shouldCloseOnMinExtent,
       builder: (BuildContext context, ScrollController scrollController) {
         return Card(
-          color: context.colorScheme.surfaceContainerHigh,
+          color: widget.backgroundColor ??
-          surfaceTintColor: context.colorScheme.surfaceContainerHigh,
+              context.colorScheme.surfaceContainerHigh,
           borderOnForeground: false,
           clipBehavior: Clip.antiAlias,
           elevation: 6.0,