From bb7010b2bbf6f9cd3fec4d90ea3b4f9764ee709d Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 8 May 2025 17:49:16 -0500
Subject: [PATCH] chore: rounded map corner when needed (#18163)

---
 web/src/lib/components/album-page/album-map.svelte     |  1 +
 .../shared-components/change-location.svelte           |  1 +
 .../lib/components/shared-components/map/map.svelte    | 10 +++++++---
 .../map/[[photos=photos]]/[[assetId=id]]/+page.svelte  |  2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/album-map.svelte
index 871e26b4f9..497422daa2 100644
--- a/web/src/lib/components/album-page/album-map.svelte
+++ b/web/src/lib/components/album-page/album-map.svelte
@@ -131,6 +131,7 @@
               bind:mapMarkers
               onSelect={onViewAssets}
               showSettings={false}
+              rounded
             />
           {/await}
         </div>
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index e502d9aeda..45168f4591 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -191,6 +191,7 @@
             clickable={true}
             onClickPoint={(selected) => (point = selected)}
             showSettings={false}
+            rounded
           />
         {/await}
       </div>
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index bf66018eb6..ef4b7b5b8e 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -53,6 +53,7 @@
     onSelect?: (assetIds: string[]) => void;
     onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
+    rounded?: boolean;
   }
 
   let {
@@ -68,6 +69,7 @@
     onSelect = () => {},
     onClickPoint = () => {},
     popup,
+    rounded = false,
   }: Props = $props();
 
   let map: maplibregl.Map | undefined = $state();
@@ -247,7 +249,7 @@
 <MapLibre
   {hash}
   style=""
-  class="h-full rounded-2xl"
+  class="h-full {rounded ? 'rounded-2xl' : 'rounded-none'}"
   {center}
   {zoom}
   attributionControl={false}
@@ -274,7 +276,9 @@
     {#if showSettings}
       <Control>
         <ControlGroup>
-          <ControlButton onclick={handleSettingsClick}><Icon path={mdiCog} size="100%" /></ControlButton>
+          <ControlButton onclick={handleSettingsClick}
+            ><Icon path={mdiCog} size="100%" class="text-black/80" /></ControlButton
+          >
         </ControlGroup>
       </Control>
     {/if}
@@ -283,7 +287,7 @@
       <Control position="top-right">
         <ControlGroup>
           <ControlButton onclick={() => onOpenInMapView()}>
-            <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" />
+            <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" class="text-black/80" />
           </ControlButton>
         </ControlGroup>
       </Control>
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index b1fff3a0cd..5875309b05 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -72,7 +72,7 @@
 {#if $featureFlags.loaded && $featureFlags.map}
   <UserPageLayout title={data.meta.title}>
     <div class="isolate h-full w-full">
-      <Map hash onSelect={onViewAssets} />
+      <Map hash onSelect={onViewAssets} rounded />
     </div>
   </UserPageLayout>
   <Portal target="body">