From 972e9cc039aa6159ca3f36ab728df988bf82d6a1 Mon Sep 17 00:00:00 2001
From: Brandon Wees <brandonwees@gmail.com>
Date: Thu, 25 Sep 2025 13:38:25 -0500
Subject: [PATCH] fix: map attribution and other styling (#22303)

* chore: map widget and page styling

* fix: map bottom sheet styling

* fix: attribution location on android

it appears that on android, the attribution marker is positioned from the top of the display and on iOS its positioned from the safe area edge
---
 mobile/lib/presentation/pages/drift_map.page.dart           | 5 +++--
 .../widgets/bottom_sheet/map_bottom_sheet.widget.dart       | 6 ++++--
 mobile/lib/presentation/widgets/map/map.widget.dart         | 5 ++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/mobile/lib/presentation/pages/drift_map.page.dart b/mobile/lib/presentation/pages/drift_map.page.dart
index 30da6410b5..de8dde7714 100644
--- a/mobile/lib/presentation/pages/drift_map.page.dart
+++ b/mobile/lib/presentation/pages/drift_map.page.dart
@@ -25,9 +25,10 @@ class DriftMapPage extends StatelessWidget {
               onPressed: () => context.pop(),
               icon: const Icon(Icons.arrow_back_ios_new_rounded),
               style: IconButton.styleFrom(
-                shape: const CircleBorder(side: BorderSide(width: 1, color: Colors.black26)),
                 padding: const EdgeInsets.all(8),
-                backgroundColor: Colors.indigo.withValues(alpha: 0.7),
+                backgroundColor: Colors.indigo,
+                shadowColor: Colors.black26,
+                elevation: 4,
               ),
             ),
           ),
diff --git a/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart
index 19cce3392f..dc5fdbe78d 100644
--- a/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart
+++ b/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
@@ -10,13 +11,14 @@ class MapBottomSheet extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const BaseBottomSheet(
+    return BaseBottomSheet(
       initialChildSize: 0.25,
       maxChildSize: 0.9,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
       actions: [],
-      slivers: [SliverFillRemaining(hasScrollBody: false, child: _ScopedMapTimeline())],
+      backgroundColor: context.themeData.colorScheme.surface,
+      slivers: [const SliverFillRemaining(hasScrollBody: false, child: _ScopedMapTimeline())],
     );
   }
 }
diff --git a/mobile/lib/presentation/widgets/map/map.widget.dart b/mobile/lib/presentation/widgets/map/map.widget.dart
index 0c3b37a3b4..1d285f0441 100644
--- a/mobile/lib/presentation/widgets/map/map.widget.dart
+++ b/mobile/lib/presentation/widgets/map/map.widget.dart
@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io';
+import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
@@ -9,8 +10,8 @@ import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart';
-import 'package:immich_mobile/presentation/widgets/map/map_utils.dart';
 import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/presentation/widgets/map/map_utils.dart';
 import 'package:immich_mobile/utils/async_mutex.dart';
 import 'package:immich_mobile/utils/debounce.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -187,6 +188,8 @@ class _Map extends StatelessWidget {
           styleString: style,
           onMapCreated: onMapCreated,
           onStyleLoadedCallback: onMapReady,
+          attributionButtonPosition: AttributionButtonPosition.topRight,
+          attributionButtonMargins: Platform.isIOS ? const Point(40, 12) : const Point(40, 72),
         ),
       ),
     );